*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#eef1f7;--s:#ffffff;--s2:#f3f5fb;--s3:#e6eaf4;
  --bd:#dde1ed;--bd2:#b8bfd4;
  --tx:#0a0c14;--tx2:#3d4460;--tx3:#7a839e;
  --ac:#2563eb;--al:#eff4ff;--ad:#1d4ed8;
  --g:#15803d;--gb:#f0fdf4;--gbr:#86efac;
  --y:#b45309;--yb:#fffbeb;--ybr:#fcd34d;
  --r:#dc2626;--rb:#fef2f2;--rbr:#fca5a5;
  --p:#7c3aed;--pb:#f5f3ff;--pbr:#c4b5fd;
  --o:#ea580c;--ob:#fff7ed;--obr:#fdba74;
  --fn:'Plus Jakarta Sans',sans-serif;--fnm:'JetBrains Mono',monospace;
  --sh:0 1px 4px rgba(0,0,0,.08);--shmd:0 4px 16px rgba(0,0,0,.1);--shlg:0 12px 40px rgba(0,0,0,.12);
}
html{font-size:15px}body{background:var(--bg);color:var(--tx);font-family:var(--fn);min-height:100vh;overflow:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px}

/* ─── LOGIN ─── */
#login{position:fixed;inset:0;background:linear-gradient(145deg,#0f172a,#1e3a8a 50%,#0f172a);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.lcard{width:420px;max-width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:36px;backdrop-filter:blur(20px)}
.llogo{font-size:28px;font-weight:800;color:#fff;letter-spacing:-1px;margin-bottom:4px}.llogo span{color:#60a5fa}
.lsub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:26px}
.lf{margin-bottom:12px}.lf label{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-bottom:4px}
.lf input,.lf select{width:100%;padding:10px 13px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#fff;font-family:var(--fn);font-size:14px;outline:none}
.lf input:focus,.lf select:focus{border-color:rgba(96,165,250,.6)}
.lf input::placeholder{color:rgba(255,255,255,.25)}.lf select option{background:#1e3a8a}
.lbtn{width:100%;padding:12px;margin-top:6px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:none;border-radius:8px;color:#fff;font-family:var(--fn);font-size:15px;font-weight:700;cursor:pointer}
.lbtn:hover{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.lor{display:flex;align-items:center;gap:10px;margin:16px 0;color:rgba(255,255,255,.2);font-size:12px}
.lor::before,.lor::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.demos{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dem{padding:8px 11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.65);font-family:var(--fn);font-size:13px;cursor:pointer;transition:all .14s;display:flex;align-items:center;gap:7px}
.dem:hover{background:rgba(255,255,255,.1);color:#fff}.dem-n{font-weight:700}.dem-r{font-size:10px;opacity:.6;display:block;margin-top:1px}

/* ─── APP ─── */
#app{display:none;height:100vh;overflow:hidden}#app.on{display:flex}

/* ─── SIDEBAR ─── */
.sb{width:220px;flex-shrink:0;background:var(--s);border-right:1px solid var(--bd);display:flex;flex-direction:column;height:100vh;overflow-y:auto;transition:width .25s ease,opacity .2s ease;position:relative}
.sb.collapsed{width:0;overflow:hidden;opacity:0;border-right:none}
#sb-toggle{position:fixed;top:12px;left:12px;z-index:200;background:var(--s);border:1px solid var(--bd);border-radius:7px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:left .25s ease;box-shadow:var(--sh)}
#sb-toggle.sb-open{left:228px}
@media(max-width:768px){#sb-toggle{display:none!important}}
.sb-brand{padding:14px 13px 10px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between}
.sb-logo{font-size:16px;font-weight:800;letter-spacing:-.3px}
.nsync{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;cursor:pointer;background:var(--s2);border:1px solid var(--bd);color:var(--tx3);transition:all .2s}
.nsync.live{color:var(--g);background:var(--gb);border-color:var(--gbr)}.nsync.err{color:var(--r);background:var(--rb);border-color:var(--rbr)}.nsync.syncing{color:var(--y);background:var(--yb);border-color:var(--ybr)}
.nsd{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.nsync.live .nsd{animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.sb-user{padding:9px 10px;margin:8px 6px 0;background:var(--s2);border-radius:8px;display:flex;align-items:center;gap:8px}
.sav{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;flex-shrink:0}
.sun{font-size:13px;font-weight:600}.sur{font-size:10px;color:var(--tx3)}
.sb-sec{padding:11px 9px 3px;font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--tx3);text-transform:uppercase}
.ni{display:flex;align-items:center;gap:7px;padding:6px 10px;margin:1px 5px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--tx2);transition:all .12s;user-select:none}
.ni:hover{background:var(--s2);color:var(--tx)}.ni.on{background:var(--al);color:var(--ac);font-weight:600}
.ni-i{width:14px;text-align:center;flex-shrink:0;font-size:13px}
.nbdg{margin-left:auto;background:var(--r);color:#fff;font-size:10px;font-weight:700;padding:1px 5px;border-radius:10px;min-width:15px;text-align:center}
.sb-ft{margin-top:auto;padding:7px 5px;border-top:1px solid var(--bd)}

/* ─── TOPBAR ─── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:50px;flex-shrink:0;background:var(--s);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 18px;gap:10px}
.tb-t{font-size:16px;font-weight:700;letter-spacing:-.2px}
.tb-r{margin-left:auto;display:flex;gap:7px;align-items:center}
.tb-sav{font-size:12px;color:var(--tx3);display:flex;align-items:center;gap:5px;opacity:0;transition:opacity .2s}.tb-sav.on{opacity:1}
.spin{width:12px;height:12px;border:2px solid var(--bd2);border-top-color:var(--ac);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.nb-b{position:relative;width:30px;height:30px;background:var(--s2);border:1px solid var(--bd);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
.nb-b:hover{background:var(--s3)}
.nb-dot{position:absolute;top:-3px;right:-3px;min-width:14px;height:14px;background:var(--r);border-radius:7px;font-size:10px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;border:2px solid var(--s);padding:0 2px}
.content{flex:1;overflow-y:auto;padding:18px;min-width:0}
.content>*{max-width:100%;box-sizing:border-box}

/* ─── COMPONENTS ─── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:8px;font-family:var(--fn);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .12s;white-space:nowrap}
.bp{background:var(--ac);color:#fff}.bp:hover{background:var(--ad)}
.bg2{background:transparent;color:var(--tx2);border:1px solid var(--bd)}.bg2:hover{background:var(--s2)}
.bd2{background:var(--rb);color:var(--r);border:1px solid var(--rbr)}.bd2:hover{background:#fee2e2}
.bk{background:var(--gb);color:var(--g);border:1px solid var(--gbr)}
.bsm{padding:5px 9px;font-size:12px}.bxs{padding:3px 7px;font-size:11px}

.card{background:var(--s);border:1px solid var(--bd);border-radius:12px;padding:16px;box-shadow:var(--sh)}
.ct{font-size:13px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.ct-lnk{font-size:12px;font-weight:500;color:var(--ac);cursor:pointer}.ct-lnk:hover{text-decoration:underline}

.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:9px;margin-bottom:14px}
.stat{background:var(--s);border:1px solid var(--bd);border-radius:12px;padding:13px 14px;cursor:pointer;transition:all .15s;position:relative;overflow:hidden}
.stat:hover{border-color:var(--bd2);transform:translateY(-1px);box-shadow:var(--shmd)}
.st-bar{position:absolute;top:0;left:0;right:0;height:3px;border-radius:12px 12px 0 0}
.st-lbl{font-size:11px;font-weight:600;color:var(--tx2);margin-bottom:4px}
.st-val{font-size:24px;font-weight:800;letter-spacing:-1px;line-height:1}
.st-sub{font-size:11px;color:var(--tx3);margin-top:2px}
.st-arr{position:absolute;bottom:9px;right:10px;font-size:11px;color:var(--tx3);opacity:0;transition:opacity .15s}
.stat:hover .st-arr{opacity:1}

.tw{overflow-x:auto;border-radius:10px;border:1px solid var(--bd)}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;padding:10px 14px;font-size:12px;font-weight:700;color:var(--tx2);letter-spacing:.04em;text-transform:uppercase;background:var(--s2);border-bottom:2px solid var(--bd);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--bd);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody td{padding:10px 14px;color:var(--tx);vertical-align:middle;font-size:13px;line-height:1.4}
tbody td:first-child{color:var(--tx);font-weight:600;font-size:14px}
tbody tr.cl{cursor:pointer}tbody tr.cl:hover{background:var(--al)}
.faded td{opacity:.5}
.due-badge{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700;white-space:nowrap}
.ds-overdue{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.ds-today{background:#fef3c7;color:#92400e;border:1px solid #fcd34d;animation:blink-badge 1.6s ease infinite}
.ds-soon{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.ds-ok{background:#f0fdf4;color:#166534;border:1px solid #86efac}
.ds-early{background:#dcfce7;color:#14532d;border:1px solid #4ade80}
.ds-ontime{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}
.ds-late{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.ds-none{background:var(--s2);color:var(--tx3);border:1px solid var(--bd)}
/* Tag-style multi-select */
.atag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;cursor:default;white-space:nowrap}
.atag-x{cursor:pointer;opacity:.7;font-size:11px;line-height:1;padding:0 0 0 2px}
.atag-x:hover{opacity:1}
#tf-assign-wrap:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px var(--al)}
@keyframes blink-badge{0%,100%{opacity:1}50%{opacity:.5}}
.act-c{display:flex;gap:4px;align-items:center}
.ib{width:26px;height:26px;border-radius:6px;border:1px solid var(--bd);background:var(--s);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:all .12s;flex-shrink:0}
.ib:hover{background:var(--s2)}.ib.del:hover{background:var(--rb);border-color:var(--rbr);color:var(--r)}.ib.edt:hover{background:var(--al);border-color:var(--bbr);color:var(--ac)}

.pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.pill::before{content:'';width:4px;height:4px;border-radius:50%;flex-shrink:0}
.sn{background:#f8fafc;color:#64748b;border-color:#e2e8f0}.sn::before{background:#94a3b8}
.sp{background:var(--al);color:#1d4ed8;border-color:#bfdbfe}.sp::before{background:var(--ac)}
.sr{background:var(--pb);color:var(--p);border-color:var(--pbr)}.sr::before{background:var(--p)}
.sd{background:var(--gb);color:var(--g);border-color:var(--gbr)}.sd::before{background:var(--g)}
.sj{background:var(--rb);color:var(--r);border-color:var(--rbr)}.sj::before{background:var(--r)}
.sh{background:var(--yb);color:var(--y);border-color:var(--ybr)}.sh::before{background:var(--y)}
.sc{background:var(--s2);color:var(--tx3);border-color:var(--bd)}.sc::before{background:var(--tx3)}
.pc{background:#fff1f2;color:#be123c;border:1px solid #fecdd3;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700}
.ph{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700}
.pm{background:#fefce8;color:#a16207;border:1px solid #fef08a;padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700}
.pl{background:var(--gb);color:#15803d;border:1px solid var(--gbr);padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700}

/* ─── SIDE PANEL ─── */
.sp-pnl{position:fixed;top:0;right:0;width:500px;height:100vh;background:var(--s);border-left:1px solid var(--bd);box-shadow:var(--shlg);z-index:500;overflow-y:auto;transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1)}
.sp-pnl.open{transform:translateX(0)}
.sp-hd{padding:16px 18px;border-bottom:1px solid var(--bd);display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:var(--s2)}
.sp-ttl{font-size:16px;font-weight:700;line-height:1.3}
.sp-cl{width:26px;height:26px;background:var(--s);border:1px solid var(--bd);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;color:var(--tx2);flex-shrink:0}
.sp-cl:hover{background:var(--s3)}
.sp-bd{padding:16px 18px}
.sp2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.sg2{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-bottom:12px}
.spf{margin-bottom:11px}
.spl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);margin-bottom:3px}
.spv{font-size:13px;color:var(--tx);font-weight:500;overflow-wrap:anywhere;word-break:break-word}
.spnote{background:var(--s2);border:1px solid var(--bd);border-radius:8px;padding:10px;font-size:13px;color:var(--tx2);line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;min-height:48px}
.spa{display:flex;gap:6px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin:12px 0}
.sps{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);margin:14px 0 8px}

/* ─── TIMELINE ─── */
.tl{position:relative;padding-left:20px}
.tl::before{content:'';position:absolute;left:6px;top:4px;bottom:4px;width:1px;background:var(--bd2)}
.tl-it{position:relative;margin-bottom:14px}
.tld{position:absolute;left:-17px;top:3px;width:10px;height:10px;border-radius:50%;border:2px solid var(--s)}
.tdone{background:var(--g);border-color:var(--gbr)}.tact{background:var(--ac);box-shadow:0 0 0 3px var(--al)}.tpend{background:var(--bd2);border-color:var(--bd)}.tfail{background:var(--r);border-color:var(--rbr)}
.tl-lbl{font-size:13px;font-weight:600}.tl-sub{font-size:12px;color:var(--tx2);margin-top:1px}.tl-ts{font-size:11px;color:var(--tx3);font-family:var(--fnm);margin-top:2px}.tl-dur{font-size:11px;font-weight:600;margin-top:1px}

/* ─── MODALS ─── */
.mo{position:fixed;inset:0;background:rgba(13,15,23,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.mo.open{display:flex}
.mbox{background:var(--s);border:1px solid var(--bd);border-radius:16px;width:580px;max-width:100%;max-height:92vh;overflow-y:auto;box-shadow:var(--shlg);animation:mIn .18s ease}
.mbox-sm{max-width:400px}
@keyframes mIn{from{opacity:0;transform:translateY(10px) scale(.98)}}
.mh{padding:16px 20px 0;display:flex;align-items:center;justify-content:space-between}
.mt{font-size:15px;font-weight:700;letter-spacing:-.2px}
.mx{width:26px;height:26px;background:var(--s2);border:1px solid var(--bd);border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--tx2)}
.mx:hover{background:var(--s3)}
.mb{padding:15px 20px}.mf{padding:0 20px 15px;display:flex;gap:7px;justify-content:flex-end}

/* ─── FORMS ─── */
.fg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ff{grid-column:1/-1}
.fgr{display:flex;flex-direction:column;gap:3px}
.fgr label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tx3);display:block;margin-bottom:3px}
.fgr input,.fgr select,.fgr textarea{width:100%;padding:8px 10px;background:var(--s);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-family:var(--fn);font-size:13px;outline:none;transition:border .15s}
.fgr input:focus,.fgr select:focus,.fgr textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--al)}
.fgr select option{background:var(--s)}.fgr textarea{resize:vertical;min-height:65px}

/* ─── FILTER / TABS ─── */
.fb{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.si{flex:1;min-width:130px;padding:7px 10px;background:var(--s);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-family:var(--fn);font-size:13px;outline:none}
.si:focus{border-color:var(--ac)}
.fs{padding:7px 10px;background:var(--s);border:1px solid var(--bd);border-radius:8px;color:var(--tx2);font-family:var(--fn);font-size:12px;outline:none;cursor:pointer}
.fs option{background:var(--s)}
.tabs{display:flex;gap:2px;margin-bottom:13px;padding:3px;background:var(--s2);border-radius:8px;width:fit-content;flex-wrap:wrap}
.tab{padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;color:var(--tx2);border-radius:6px;transition:all .12s}
.tab:hover{color:var(--tx)}.tab.on{background:var(--s);color:var(--tx);box-shadow:var(--sh)}

/* ─── NOTIF DRAWER ─── */
.nd{position:fixed;top:50px;right:0;width:320px;background:var(--s);border-left:1px solid var(--bd);border-bottom:1px solid var(--bd);box-shadow:var(--shlg);z-index:400;max-height:460px;overflow-y:auto;display:none;border-radius:0 0 0 12px}
.nd.open{display:block;animation:fdD .17s ease}
@keyframes fdD{from{opacity:0;transform:translateY(-5px)}}
.ndh{padding:10px 13px 7px;font-size:13px;font-weight:700;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between}
.ndi{padding:9px 13px;border-bottom:1px solid var(--bd);display:flex;gap:7px;cursor:pointer;transition:background .1s}
.ndi:hover{background:var(--s2)}.ndi.unr{background:var(--al)}
.nd-d{width:6px;height:6px;border-radius:50%;background:var(--ac);flex-shrink:0;margin-top:4px}.nd-d.r{background:var(--tx3)}
.nd-txt{font-size:12px;line-height:1.5}.nd-m{font-size:11px;color:var(--tx3);margin-top:2px}

/* ─── CHARTS ─── */
.cg{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:12px}
.cbox{background:var(--s);border:1px solid var(--bd);border-radius:12px;padding:15px;box-shadow:var(--sh)}
.clbl{font-size:13px;font-weight:700;margin-bottom:11px}
.donut-w{display:flex;align-items:center;gap:12px}
.dlgd{display:flex;flex-direction:column;gap:5px}
.dlr{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx2)}
.dldot{width:8px;height:8px;border-radius:3px;flex-shrink:0}
.hbr{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.hbl{width:85px;font-size:12px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.hbt{flex:1;height:7px;background:var(--s2);border-radius:4px;overflow:hidden}
.hbf{height:100%;border-radius:4px;transition:width .5s}
.hbv{font-size:11px;color:var(--tx3);width:26px;text-align:right;font-family:var(--fnm)}

/* ─── TODOS ─── */
.td-it{display:flex;align-items:flex-start;gap:9px;padding:9px 0;border-bottom:1px solid var(--bd)}
.td-it:last-child{border-bottom:none}
.td-cb{width:16px;height:16px;border-radius:4px;border:2px solid var(--bd2);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all .12s;margin-top:1px}
.td-cb.checked{background:var(--ac);border-color:var(--ac);color:#fff;font-size:11px}.td-cb:hover{border-color:var(--ac)}
.td-txt{font-size:13px;font-weight:500;flex:1;cursor:pointer}.td-txt.done{text-decoration:line-through;color:var(--tx3)}

/* ─── MEMBER CARD ─── */
.mc{background:var(--s);border:1px solid var(--bd);border-radius:12px;padding:14px;box-shadow:var(--sh);cursor:pointer;transition:all .15s}
.mc:hover{box-shadow:var(--shmd);border-color:var(--bd2)}

/* ─── LOADING ─── */
.loading-sc{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;gap:12px}
.loader{width:28px;height:28px;border:3px solid var(--bd);border-top-color:var(--ac);border-radius:50%;animation:spin .7s linear infinite}
.loading-tx{font-size:13px;color:var(--tx3)}

/* ─── TOASTS ─── */
.ts-stk{position:fixed;bottom:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:5px;pointer-events:none}
.ts{background:var(--tx);color:#fff;border-radius:8px;padding:9px 13px;font-size:13px;font-weight:500;animation:tIn .2s ease;pointer-events:all;display:flex;align-items:center;gap:6px;min-width:200px;box-shadow:var(--shlg)}
.ts.ok{background:#15803d}.ts.bad{background:var(--r)}.ts.inf{background:var(--ac)}
@keyframes tIn{from{opacity:0;transform:translateX(14px)}}
@keyframes slideUp{from{opacity:0;transform:translateY(100%)}}
/* Tutorial */
/* Print / PDF export */
@media print{
  body>*{display:none!important}
  #sp-pnl{display:block!important;position:static!important;width:100%!important;max-width:100%!important;height:auto!important;box-shadow:none!important;border:none!important;overflow:visible!important}
  #sp-pnl .sp-hd,#sp-pnl .spa,.no-print{display:none!important}
  #sp-pnl #sp-bd{padding:0!important;overflow:visible!important;max-height:none!important}
  .print-header{display:flex!important}
  .tw{overflow:visible!important}
  .tw table{font-size:10px!important;width:100%!important}
  .card,.stat{break-inside:avoid;page-break-inside:avoid}
  @page{margin:12mm;size:A4 portrait}
}
/* Tutorial highlight */
.tut-hl{outline:3px solid #7c3aed!important;outline-offset:4px;border-radius:8px;position:relative;z-index:3001;animation:tutPulse 1.5s ease infinite}
@keyframes tutPulse{0%,100%{outline-color:#7c3aed}50%{outline-color:#2563eb}}
#tut-overlay>div:first-child{animation:fadeIn .2s ease}

/* ─── PROGRESS ─── */
.prg{height:4px;background:var(--s2);border-radius:2px;overflow:hidden;margin-top:3px}
.prf{height:100%;border-radius:2px;transition:width .5s}

/* ─── EMPTY ─── */
.empty{text-align:center;padding:40px 16px}
.ei{font-size:28px;margin-bottom:8px}.et{font-size:14px;font-weight:700;margin-bottom:4px}.es{font-size:13px;color:var(--tx2)}

/* ─── EVAL ─── */
.ev-ex{background:var(--gb);color:var(--g);border:1px solid var(--gbr);padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block}
.ev-gd{background:var(--al);color:var(--ac);border:1px solid #bfdbfe;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block}
.ev-av{background:var(--yb);color:var(--y);border:1px solid var(--ybr);padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block}
.ev-sl{background:var(--ob);color:var(--o);border:1px solid var(--obr);padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block}
.ev-po{background:var(--rb);color:var(--r);border:1px solid var(--rbr);padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;display:inline-block}

/* ─── KANBAN ─── */
.kanban{display:flex;gap:9px;overflow-x:auto;padding-bottom:8px}
.kb-col{min-width:190px;flex-shrink:0;background:var(--s2);border:1px solid var(--bd);border-radius:12px;padding:11px}
.kb-ch{font-size:12px;font-weight:700;margin-bottom:9px;display:flex;align-items:center;justify-content:space-between}
.kb-cnt{background:var(--s);border:1px solid var(--bd);color:var(--tx3);font-size:11px;font-weight:600;padding:1px 6px;border-radius:10px}
.kb-card{background:var(--s);border:1px solid var(--bd);border-radius:8px;padding:10px;margin-bottom:6px;cursor:pointer;transition:all .12s;box-shadow:var(--sh)}
.kb-card:hover{border-color:var(--bd2);transform:translateY(-1px);box-shadow:var(--shmd)}

@media(max-width:768px){.sb{display:none}.fg{grid-template-columns:1fr}.sp-pnl{width:100%}.sg{grid-template-columns:repeat(2,1fr)}.cg{grid-template-columns:1fr}}

/* ─── MOBILE FULL OVERHAUL ─── */
@media(max-width:640px){
  /* Layout */
  #app{flex-direction:column}
  .sb{display:none!important}
  .main{flex:1;min-width:0;padding-bottom:72px}
  .topbar{padding:10px 12px;gap:8px}
  .tb-t{font-size:13px;font-weight:700}
  .tb-r button{padding:6px 10px!important;font-size:11px!important}
  #page-header{padding:8px 12px 0}
  #page-title-display{font-size:16px!important}
  #sys-name-topbar,#top-clock{display:none}
  .content{padding:8px 10px 80px!important}

  /* Cards & grids */
  .sg{grid-template-columns:1fr 1fr!important}
  .fg{grid-template-columns:1fr!important}
  .cg{grid-template-columns:1fr!important}
  .card{padding:12px!important;border-radius:10px!important}

  /* Side panel — full screen on mobile */
  .sp-pnl{width:100%!important;border-radius:0}
  .sp-bd{padding:12px!important;padding-bottom:100px!important}

  /* Modals — full screen on mobile */
  .mbox{width:100%!important;max-width:100%!important;max-height:100dvh!important;border-radius:16px 16px 0 0;margin:auto auto 0 auto}
  .mo{align-items:flex-end!important}
  .mb{max-height:70dvh!important;overflow-y:auto!important}
  .fg{grid-template-columns:1fr!important}
  .fgr{grid-column:1/-1}

  /* Task table — hide less important cols */
  .tw table thead tr th:nth-child(5),
  .tw table tbody tr td:nth-child(5),
  .tw table thead tr th:nth-child(6),
  .tw table tbody tr td:nth-child(6){display:none}

  /* Tabs — scrollable */
  .tabs{overflow-x:auto;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch}
  .tab{flex-shrink:0}

  /* Kanban — horizontal scroll */
  .kanban{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kb-col{min-width:160px}

  /* Stat cards — 2 col */
  .stat{padding:10px!important}
  .st-val{font-size:20px!important}

  /* Todo items */
  .td-it{flex-wrap:wrap;gap:4px}
  .act-c{margin-left:auto}

  /* Meeting cards */
  .mcard{border-radius:10px!important}

  /* Dashboard grid — single column on mobile */
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns:2fr 1fr 1fr"],[style*="grid-template-columns:1fr 1fr;gap"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(3"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr 1fr!important}
  [style*="grid-template-columns:2fr 1fr"]{grid-template-columns:1fr!important}

  /* KPI row — 2 col on mobile */
  .kpi-row{grid-template-columns:1fr 1fr!important}

  /* Topbar — hide non-essentials */
  .tb-r .btn:not(.tb-notif-btn){display:none}
  #top-page-title{font-size:14px!important}

  /* Content padding for bottom nav */
  .content{padding:8px 8px 80px!important}

  /* Table — horizontal scroll, larger touch targets */
  .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -8px}
  .tw table{min-width:500px;font-size:12px}
  .tw table thead th{padding:8px 6px!important;font-size:10px}
  .tw table tbody td{padding:10px 6px!important}
  .tw table tbody tr{border-bottom:2px solid var(--bd)}

  /* Stat numbers bigger on mobile */
  .st-val{font-size:24px!important;font-weight:800!important}

  /* Team load bar — full width */
  .card [style*="display:flex;align-items:center;gap:10px;padding:8px 10px"]{flex-wrap:wrap;gap:6px!important}

  /* Topbar padding for no sidebar toggle */
  .topbar{padding-left:12px!important}
}

/* ─── BOTTOM NAV BAR (mobile only) ─── */
#mob-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:var(--s);border-top:1px solid var(--bd);
  height:60px;z-index:800;
  padding:0 8px;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -4px 24px #0009;
}
#mob-nav .mn-items{display:flex;align-items:center;justify-content:space-around;height:100%}
#mob-nav .mn-it{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;cursor:pointer;padding:6px 10px;border-radius:10px;flex:1;
  color:var(--tx3);font-size:9px;font-weight:700;text-transform:uppercase;
  transition:all .15s;position:relative;
}
#mob-nav .mn-it.on{color:var(--ac)}
#mob-nav .mn-it .mn-icon{font-size:18px;line-height:1}
#mob-nav .mn-it .mn-bdg{
  position:absolute;top:4px;right:16px;
  background:var(--r);color:#fff;font-size:8px;font-weight:800;
  min-width:14px;height:14px;border-radius:7px;display:none;
  align-items:center;justify-content:center;padding:0 3px;
}
#mob-nav .mn-it.on .mn-icon{transform:scale(1.15)}

/* ─── FAB (Floating Action Button) ─── */
#mob-fab{
  display:none;
  position:fixed;bottom:72px;right:16px;
  width:52px;height:52px;border-radius:26px;
  background:var(--ac);color:#fff;
  font-size:26px;font-weight:300;line-height:1;
  border:none;cursor:pointer;z-index:801;
  box-shadow:0 4px 20px #2563eb55;
  align-items:center;justify-content:center;
  transition:all .18s;
}
#mob-fab:active{transform:scale(.93)}
#mob-fab-menu{
  display:none;position:fixed;bottom:136px;right:16px;
  z-index:802;flex-direction:column;gap:8px;align-items:flex-end;
}
.mob-fab-item{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--s);border:1px solid var(--bd);border-radius:24px;
  padding:8px 14px 8px 10px;box-shadow:0 4px 16px #0003;
  font-size:12px;font-weight:700;color:var(--tx);white-space:nowrap;
}
.mob-fab-item .mfi{font-size:16px}

@media(max-width:640px){
  #mob-nav{display:block}
  #mob-fab{display:flex}
}