/* Śaci prototype — desktop console layout (NGO + Admin) */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 36px)}
.side{background:var(--charcoal);color:#cdbfb8;padding:18px 12px;position:sticky;top:36px;height:calc(100vh - 36px);overflow:auto;display:flex;flex-direction:column;gap:2px}
.side .lg{display:flex;gap:10px;align-items:center;padding:4px 10px 16px;color:#fff;text-decoration:none}
.side .lg i{font-style:normal;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--burgundy),var(--orange));display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff}
.side .lg b{font-size:15px;line-height:1.1}.side .lg small{display:block;font-size:10px;color:#a99a93;font-weight:600;letter-spacing:.05em}
.side a.i{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;text-decoration:none;color:#cdbfb8;font-weight:600;font-size:13px}
.side a.i:hover{background:#3a2f2c;color:#fff}.side a.i.on{background:var(--burgundy);color:#fff}
.side a.i em{font-style:normal;width:20px;text-align:center}.side a.i .cnt{margin-left:auto}
.side .grp{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8d7f78;padding:14px 12px 4px}
.side .me{margin-top:auto;padding:12px;border-radius:12px;background:#3a2f2c;font-size:12px;color:#d8ccc6}.side .me b{color:#fff;display:block}
.cmain{min-width:0}
.ctop{position:sticky;top:36px;z-index:40;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:12px max(26px,calc((100% - 1280px)/2 + 26px))}
.ctop h1{font-size:22px;flex:1}.ctop select{padding:8px 12px;border:1px solid var(--border2);border-radius:10px;background:#fff;font-weight:600;max-width:260px}
.ctop .ib{position:relative;width:40px;height:40px;border:1px solid var(--border);border-radius:11px;background:#fff;display:grid;place-items:center;text-decoration:none}
.cview{padding:22px 26px 60px;max-width:1280px;margin:0 auto;animation:fade .2s}@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .l{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.kpi .v{font-family:var(--fd);font-size:30px;font-weight:700;margin:2px 0;line-height:1.1}.kpi .d{font-size:11px;color:var(--success);font-weight:700}.kpi .d.dn{color:var(--coral)}
.kpi::after{z-index:0;pointer-events:none;content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:var(--c,var(--cream));opacity:.7}
.g2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
@media(max-width:1100px){.g2,.g3{grid-template-columns:1fr}}
.card{margin-bottom:16px}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.toolbar input,.toolbar select{padding:9px 13px;border:1px solid var(--border2);border-radius:10px;background:#fff}.toolbar .sp{flex:1}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px}.tabs button{border:0;background:none;padding:10px 16px;font-weight:700;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px}.tabs button.on{color:var(--burgundy);border-color:var(--burgundy)}
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:8px}.g2>.card{display:flex;flex-direction:column;margin-bottom:0}.g2>.card>.card-h{flex:0 0 auto}.g2>.card>.bars{flex:1 1 auto;height:auto;min-height:170px;max-height:260px}.g2>.card>.hbars{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-around}.g2>.card>.lchart{flex:1 1 auto;max-height:280px}.lchart{position:relative;min-height:200px}.lchart svg{position:absolute;inset:0;display:block}.bars>div{flex:1;text-align:center;font-size:10px;color:var(--muted);display:flex;flex-direction:column;justify-content:flex-end;height:100%}.bars i{display:block;border-radius:7px 7px 0 0;background:linear-gradient(180deg,var(--orange),var(--burgundy));min-height:3px;margin-bottom:5px;transition:height .5s}.bars b{color:var(--text);font-size:11px}
.hbar{margin:9px 0}.hbar .t{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}
.feed{list-style:none}.feed li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}.feed li:last-child{border:0}.feed i{width:9px;height:9px;border-radius:50%;background:var(--burgundy);margin-top:6px;flex:0 0 auto}.feed span{font-size:11px;color:var(--muted);display:block}
.thumb{width:44px;height:44px;border-radius:10px;flex:0 0 auto;overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}
.pn{display:flex;gap:10px;align-items:center}.pn b{font-size:13px;display:block;line-height:1.3}.pn span{font-size:11px;color:var(--muted)}
.acts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:700px){.dl{grid-template-columns:1fr}}
.docs{display:flex;gap:8px;flex-wrap:wrap}.docs span{font-size:11px;font-weight:700;padding:5px 10px;border-radius:8px;background:var(--success-soft);color:var(--success)}
.ctop .menu-btn{display:none}
@media(max-width:900px){.shell{grid-template-columns:1fr}.side{position:fixed;left:0;top:36px;width:250px;z-index:200;transform:translateX(-100%);transition:.25s}.side.open{transform:none}.ctop .menu-btn{display:grid}.cview{padding:16px}.ctop{padding:10px 16px}.ctop h1{font-size:18px}}

.side a.i .ic{width:18px;height:18px;opacity:.9}.side a.i em{display:grid;place-items:center;width:22px}
.side a.i.on{box-shadow:0 6px 16px rgba(0,0,0,.25)}
.side .lg i{box-shadow:0 6px 16px rgba(0,0,0,.3)}
.ctop .ib .ic{width:19px;height:19px}
.kpi .v{letter-spacing:-.01em}
.kpi{transition:transform .18s,box-shadow .18s}.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh3)}
.tabs button{border-radius:10px 10px 0 0;transition:.15s}.tabs button:hover{background:var(--soft)}
.toolbar .btn,.acts .btn{box-shadow:none}
.acts .btn.sm{height:32px}
.cview .card{transition:box-shadow .2s}
/* settings dialog: language grid (same look as the Creator app) */
.sect{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lopt{border:1.5px solid var(--border2);background:#fff;border-radius:13px;padding:10px 6px;text-align:center;line-height:1.25;transition:.15s;min-height:56px;cursor:pointer}
.lopt b{display:block;font-size:15px}.lopt small{display:block;font-size:10px;color:var(--muted);font-weight:600;margin-top:2px}
.lopt:hover{border-color:var(--burgundy);background:#FBF6F2}
.lopt.on{border-color:var(--burgundy);background:var(--cream);box-shadow:0 0 0 3px rgba(155,68,84,.14)}.lopt.on b{color:var(--burgundy)}
#settings svg{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}#settings:hover svg{transform:rotate(90deg)}

.stack{display:flex;flex-direction:column;gap:16px;min-width:0}.stack>.card,.stack2>.card{margin-bottom:0;display:flex;flex-direction:column;min-height:0}.stack>.card:first-child{flex:1.3 1 0}.stack>.card>.lchart{flex:1 1 auto;max-height:none;min-height:200px}.stack2{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1 1 0;min-height:0}.stack2>.card>.bars{flex:1 1 auto;height:auto;min-height:150px;max-height:none}.stack2>.card>.hbars{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-around}@media(max-width:700px){.stack2{grid-template-columns:1fr}}

.ahero{display:grid;grid-template-columns:1.1fr 1fr;gap:22px;margin-bottom:18px;padding:22px 24px;border-radius:20px;background:linear-gradient(135deg,#FFF7EE 0%,#F7E6DA 55%,#F2D9D2 100%);border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden;animation:rise .45s both}
.ahero::after{content:"";position:absolute;right:-60px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(251,162,80,.35),transparent 70%);pointer-events:none}
.ahero-l,.ahero-r{position:relative;z-index:1;min-width:0}.ahero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--burgundy)}
.ahero h2{font-family:var(--fd);font-size:30px;line-height:1.15;margin:8px 0 4px}.ahero p{font-size:14px;color:var(--muted);margin-bottom:16px}.ahero p b{color:var(--text)}
.ahero-acts{display:flex;flex-wrap:wrap;gap:8px}.ahero-acts .btn{text-decoration:none}.ahb{background:#fff;color:var(--burgundy);border-radius:10px;padding:0 7px;margin-left:4px;font-size:11px}
.ahero-r{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.62);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.8);border-radius:16px;padding:12px}
.ins{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;text-decoration:none;color:var(--text);font-size:13px;transition:transform .15s,background .15s;border-left:3px solid var(--muted);background:#fff}
.ins:hover{transform:translateX(3px);background:#FFFCF9}.ins .ai-i{font-size:16px;flex:0 0 auto}.ins .ai-t{flex:1;min-width:0;line-height:1.35}.ins .ai-c{font-size:11px;font-weight:800;color:var(--burgundy);white-space:nowrap}
.ins.warn{border-color:var(--orange)}.ins.bad{border-color:var(--coral)}.ins.info{border-color:var(--blue)}.ins.ok{border-color:var(--success)}.ins.neut{border-color:var(--plum)}
.kpi .l{display:flex;align-items:center;gap:6px}.kpi .l em{font-style:normal;font-size:14px}.kpi .d{margin-bottom:8px}.kpi .sp{display:block;width:100%;height:34px;margin-top:auto}
.mbar{height:6px;border-radius:6px;background:rgba(41,33,31,.08);overflow:hidden;margin-top:6px}.mbar i{display:block;height:100%;border-radius:6px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.kpis .kpi{display:flex;flex-direction:column;animation:rise .5s both}.kpis .kpi:nth-child(2){animation-delay:.05s}.kpis .kpi:nth-child(3){animation-delay:.1s}.kpis .kpi:nth-child(4){animation-delay:.15s}.kpis .kpi:nth-child(5){animation-delay:.2s}.kpis .kpi:nth-child(6){animation-delay:.25s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:900px){.ahero{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.hero,.kpis .kpi{animation:none}}

.lsvg .lpt .lx,.lsvg .lpt .lc,.lsvg .lpt .ltip{opacity:0;pointer-events:none;transition:opacity .12s}.lsvg .lpt:hover .lx,.lsvg .lpt:hover .lc,.lsvg .lpt:hover .ltip{opacity:1}.lsvg text{font-family:inherit}
.stack2 .bars{gap:12px}.stack2 .bars>div{cursor:default}.stack2 .bars i{opacity:.5;transition:opacity .15s,height .5s}.stack2 .bars>div:last-child i,.stack2 .bars>div:hover i{opacity:1}.stack2 .bars>div:hover b{color:var(--burgundy)}
.dwrap{flex:1 1 auto;display:flex;align-items:center;justify-content:center}.dwrap>div{justify-content:center;width:100%}.dwrap svg{width:min(100%,170px);height:auto}

.ahero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.ahero-r{min-width:0}.ins{flex-wrap:nowrap;min-width:0}.ins .ai-t{overflow-wrap:anywhere}.ins .ai-c{flex:0 0 auto}
@media(max-width:1280px){.ahero{grid-template-columns:1fr}}
@media(max-width:560px){.ahero{padding:16px;border-radius:16px}.ahero h2{font-size:24px}.ahero-acts .btn{flex:1 1 calc(50% - 8px);justify-content:center}.ins{flex-wrap:wrap;row-gap:2px}.ins .ai-t{flex:1 1 calc(100% - 34px)}.ins .ai-c{margin-left:26px}.kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.kpi .v{font-size:24px}}
@media(max-width:380px){.kpis{grid-template-columns:1fr!important}}

@media(max-width:1280px){.ahero{grid-template-columns:minmax(0,1fr)}}.ahero-acts .btn{min-width:0}.ahero-acts{min-width:0}.ahero-l,.ahero-r{max-width:100%}

.kpi>*{position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes afade{from{opacity:0}to{opacity:1}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes spin-in{from{opacity:0;transform:scale(.55) rotate(-50deg)}to{opacity:1;transform:none}}
.anim .lsvg .lcurve,.anim .sp .scurve{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1.2s .15s cubic-bezier(.4,0,.2,1) both}
.anim .lsvg .larea{animation:afade .9s .7s both}.anim .sp .sarea{animation:afade .8s .6s both}.anim .lsvg .lpts{animation:afade .6s 1s both}
.anim .bars i{transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.3,1) both}
.anim .bars>div:nth-child(2) i{animation-delay:.06s}.anim .bars>div:nth-child(3) i{animation-delay:.12s}.anim .bars>div:nth-child(4) i{animation-delay:.18s}.anim .bars>div:nth-child(5) i{animation-delay:.24s}.anim .bars>div:nth-child(6) i{animation-delay:.3s}.anim .bars>div:nth-child(7) i{animation-delay:.36s}.anim .bars>div:nth-child(8) i{animation-delay:.42s}
.anim .pbar i,.anim .mbar i{transform-origin:left;animation:growx .9s .2s cubic-bezier(.2,.8,.3,1) both}
.anim .hbar:nth-child(2) .pbar i{animation-delay:.28s}.anim .hbar:nth-child(3) .pbar i{animation-delay:.36s}.anim .hbar:nth-child(4) .pbar i{animation-delay:.44s}.anim .hbar:nth-child(5) .pbar i{animation-delay:.52s}.anim .hbar:nth-child(n+6) .pbar i{animation-delay:.6s}
.anim .dwrap svg path,.anim .dwrap svg circle,.anim .card svg[viewBox="0 0 120 120"] path{transform-origin:60px 60px;animation:spin-in .9s .2s cubic-bezier(.2,.8,.3,1) both}
.anim .funnel .fb{transform-origin:left;animation:growx .8s .2s cubic-bezier(.2,.8,.3,1) both}
.anim .feed li{animation:rise .5s both}.anim .feed li:nth-child(2){animation-delay:.06s}.anim .feed li:nth-child(3){animation-delay:.12s}.anim .feed li:nth-child(4){animation-delay:.18s}.anim .feed li:nth-child(5){animation-delay:.24s}.anim .feed li:nth-child(n+6){animation-delay:.3s}
.anim .ins{animation:rise .5s both}.anim .ins:nth-of-type(2){animation-delay:.07s}.anim .ins:nth-of-type(3){animation-delay:.14s}.anim .ins:nth-of-type(4){animation-delay:.21s}.anim .ins:nth-of-type(5){animation-delay:.28s}
.anim .g2>.card,.anim .stack>.card,.anim .stack2>.card{animation:rise .55s both}.anim .g2>.card:nth-child(2),.anim .stack2>.card:nth-child(2){animation-delay:.1s}
}
.kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))!important}@media(min-width:1680px){.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))!important}}@media(max-width:560px){.kpis.k6{grid-template-columns:repeat(2,minmax(0,1fr))!important}}@media(max-width:380px){.kpis.k6{grid-template-columns:minmax(0,1fr)!important}}

/* ---- KPI alignment (Overview): labels and notes reserve equal space so the figures share one baseline ---- */
.kpis.k6 .kpi .l{min-height:2.7em;align-items:flex-start}.kpis.k6 .kpi .l em{margin-top:-1px}.kpis.k6 .kpi .d{min-height:2.7em}.kpis.k6 .kpi .mbar{margin-top:auto}.kpis.k6 .kpi .sp{margin-top:auto}

/* ---- Sidebar (Admin + NGO) ---- */
.side{background:linear-gradient(180deg,#2d2422 0%,#231c1a 100%);border-right:1px solid rgba(255,255,255,.06);transition:transform .25s}
.side::-webkit-scrollbar{width:8px}.side::-webkit-scrollbar-track{background:transparent}.side::-webkit-scrollbar-thumb{background:rgba(178,86,106,.45);border-radius:8px;border:2px solid transparent;background-clip:padding-box}.side::-webkit-scrollbar-thumb:hover{background:var(--burgundy-2);background-clip:padding-box;border:2px solid transparent}
@supports not selector(::-webkit-scrollbar){.side{scrollbar-width:thin;scrollbar-color:rgba(178,86,106,.6) transparent}}
html[data-theme=dark] .side{filter:invert(1) hue-rotate(180deg)}
.shell{transition:grid-template-columns .25s ease}
.side a.i{position:relative;transition:background .15s,color .15s,transform .15s}.side a.i:hover{transform:translateX(2px)}
.side a.i.on{background:linear-gradient(90deg,var(--burgundy),#b2566a);box-shadow:0 6px 16px rgba(0,0,0,.28)}
.side a.i.on::before{content:"";position:absolute;left:-12px;top:9px;bottom:9px;width:4px;border-radius:0 4px 4px 0;background:var(--orange)}
.side a.i:focus-visible,.side .grp:focus-visible,.rail-t:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.side .grp{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;border-radius:8px;transition:color .15s,background .15s}.side .grp:hover{color:#d8ccc6;background:rgba(255,255,255,.04)}
.side .grp span{flex:1}.side .grp .chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;margin-right:3px;flex:0 0 auto}.side .grp.shut .chev{transform:rotate(-45deg)}
.side .gcnt{display:none;background:var(--coral);color:#fff;font-size:10px;line-height:1;padding:3px 6px;border-radius:9px}.side .grp.shut .gcnt:not([hidden]){display:inline-block}
.side .gbody{display:flex;flex-direction:column;gap:2px;animation:fade .2s}.side .grp.shut+.gbody{display:none}
.rail-t{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:7px 12px;border:0;border-radius:10px;background:rgba(255,255,255,.05);color:#a99a93;font:600 12px/1 inherit;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}.rail-t:hover{background:rgba(255,255,255,.1);color:#fff}.rail-t .rc{width:22px;text-align:center;font-size:15px;transition:transform .25s}
.side .me{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.06)}.side .me .mt{min-width:0;line-height:1.35}.side .me .mt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side .me .av{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,var(--plum),var(--burgundy))}.side .me .av i{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#3ecf8e;border:2px solid #2a2220}
@media(min-width:901px){
.shell.rail{grid-template-columns:76px 1fr}.rail .side{padding:18px 10px;overflow-x:hidden}
.rail .side .lg{justify-content:center;padding:4px 0 14px}.rail .side .lg div,.rail .side a.i .tx,.rail .side .grp span,.rail .side .grp .chev,.rail .side .grp .gcnt,.rail .side .me .mt,.rail .rail-t .tx2{display:none!important}
.rail .rail-t{justify-content:center;padding:8px 0}.rail .rail-t .rc{transform:rotate(180deg)}
.rail .side .grp{height:1px;padding:0;margin:10px 6px;background:rgba(255,255,255,.1);pointer-events:none}.rail .side .grp.shut+.gbody{display:flex}
.rail .side a.i{justify-content:center;padding:11px 0}.rail .side a.i .cnt{position:absolute;top:3px;right:6px;min-width:16px;height:16px;padding:0 4px;font-size:9px;display:grid;place-items:center}.rail .side a.i.on::before{left:-10px}
.rail .side .me{justify-content:center;padding:10px 0;background:none;border:0}
}
