:root{
--bg-0:#020810;--bg-1:#061020;--bg-2:#0a1628;--bg-3:#0e1e38;--bg-4:#142a4a;
--frame:#1a3050;--frame-light:#2a4a70;--frame-bright:#3a6090;
--cyan:#00d4ff;--cyan-light:#80eaff;--cyan-dim:rgba(0,212,255,.10);--cyan-glow:rgba(0,191,255,.25);
--border-cyan:#00bfff;--border-cyan-dim:rgba(0,191,255,.25);
--blue:#0088fc;--blue-deep:#004488;--teal:#00b8a9;
--gold:#C9A227;--gold-dim:rgba(201,162,39,.10);
--text-1:#d0e8ff;--text-2:#8aaad0;--text-3:#5a7da8;--text-muted:#3a5a80;
--red:#ff3040;--red-dim:rgba(255,48,64,.08);--green:#00e870;--green-dim:rgba(0,232,143,.10);
--orange:#ff8820;--amber:#ffb830;--purple:#a78bfa;
--r:4px;--r-md:8px;--r-lg:12px;
--shadow-sm:0 1px 4px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.5);--shadow-lg:0 8px 32px rgba(0,0,0,.6);
--shadow-glow:0 0 20px var(--cyan-glow);
--ease:cubic-bezier(.16,1,.3,1);
--sidebar-w:230px;--topbar-h:52px;
--font-head:'Orbitron',sans-serif;--font-body:'DM Sans','Tajawal',sans-serif;
--font-arabic:'Tajawal',sans-serif;--font-mono:'Share Tech Mono',monospace;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg-0);color:var(--text-1);font-family:var(--font-arabic);font-size:15px;line-height:1.6;min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-1)}::-webkit-scrollbar-thumb{background:var(--frame-light);border-radius:3px}

/* ══ ANIMATED BG ══ */
.bg-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-nodes .node{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.12) 0%,transparent 70%);animation:nodeFloat linear infinite}
.bg-nodes .node:nth-child(1){width:200px;height:200px;left:10%;animation-duration:25s}
.bg-nodes .node:nth-child(2){width:150px;height:150px;left:60%;animation-duration:30s;animation-delay:-5s}
.bg-nodes .node:nth-child(3){width:180px;height:180px;left:80%;animation-duration:22s;animation-delay:-10s}
.bg-nodes .node:nth-child(4){width:120px;height:120px;left:30%;animation-duration:28s;animation-delay:-15s}
.bg-nodes .node:nth-child(5){width:160px;height:160px;left:50%;animation-duration:35s;animation-delay:-8s}
.bg-nodes .node:nth-child(6){width:100px;height:100px;left:90%;animation-duration:20s;animation-delay:-12s}
@keyframes nodeFloat{0%{opacity:0;transform:translateY(100vh) scale(.8)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(-100vh) scale(1.2)}}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);background-size:60px 60px;animation:gridPulse 8s ease-in-out infinite}
@keyframes gridPulse{0%,100%{opacity:.3}50%{opacity:.6}}
.bg-scan::before{content:'';position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.04) 20%,rgba(0,184,169,.06) 50%,rgba(0,212,255,.04) 80%,transparent);animation:scanLine 8s ease-in-out infinite}
@keyframes scanLine{0%{top:-1px}100%{top:100vh}}

/* ══ LOGIN SCREEN ══ */
#login-screen{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:#060e1c;overflow:hidden}
#login-screen.hidden{display:none}
.login-wallpaper{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;pointer-events:none}
.login-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,28,.8),rgba(6,14,28,.4) 40%,rgba(6,14,28,.85));pointer-events:none}
.login-radial{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(0,212,255,.06),transparent 60%);pointer-events:none}
.login-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}
.login-hud-h{position:absolute;left:0;right:0;top:18%;height:1px;background:rgba(0,212,255,.06);pointer-events:none}
.login-hud-v{position:absolute;top:0;bottom:0;left:50%;width:1px;background:rgba(0,212,255,.04);pointer-events:none}
.login-scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,rgba(0,10,30,.06) 2px,rgba(0,10,30,.06) 4px)}

/* Top logos bar */
.login-logos-bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:20px;padding:12px 24px;background:#fff;border-bottom:1px solid #e0e4e8}

/* Card */
.login-card{position:relative;z-index:10;width:92%;max-width:440px;background:rgba(10,22,40,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(0,212,255,.12);border-radius:16px;padding:44px 40px 36px;overflow:hidden;box-shadow:0 25px 80px rgba(0,0,0,.6),0 0 60px rgba(0,212,255,.05);animation:loginUp .8s var(--ease) .2s both;opacity:0;transform:translateY(24px)}
@keyframes loginUp{to{opacity:1;transform:translateY(0)}}
.login-card-accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#0a2040,#00d4ff,#C9A227,#00d4ff,#0a2040);border-radius:16px 16px 0 0}
.login-corner-tr{position:absolute;top:0;right:0;width:40px;height:40px;border-top:2px solid rgba(0,212,255,.15);border-right:2px solid rgba(0,212,255,.15);border-radius:0 16px 0 0}
.login-corner-bl{position:absolute;bottom:0;left:0;width:40px;height:40px;border-bottom:2px solid rgba(201,162,39,.12);border-left:2px solid rgba(201,162,39,.12);border-radius:0 0 0 16px}

/* Brand */
.login-brand{text-align:center;margin-bottom:32px}
.login-icon{width:56px;height:56px;margin:0 auto 16px;border-radius:14px;background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(201,162,39,.08));border:2px solid rgba(0,212,255,.25);display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(0,212,255,.1);animation:logoPulse 3s ease-in-out infinite alternate;color:#00d4ff}
@keyframes logoPulse{0%{box-shadow:0 0 20px rgba(0,212,255,.1)}100%{box-shadow:0 0 40px rgba(0,212,255,.2)}}
.login-brand h1{font-family:var(--font-head);font-size:28px;font-weight:800;letter-spacing:5px;color:#00d4ff;text-shadow:0 0 30px rgba(0,212,255,.3),0 0 60px rgba(0,212,255,.1)}
.login-brand-ar{font-size:18px;color:#C9A227;margin-top:4px;letter-spacing:2px;text-shadow:0 0 20px rgba(201,162,39,.2);font-family:var(--font-arabic)}
.login-brand-divider{width:50%;height:1px;margin:14px auto;background:linear-gradient(90deg,transparent,rgba(201,162,39,.4),transparent)}
.login-brand-sub{font-size:9px;color:rgba(160,180,200,.6);letter-spacing:3px;text-transform:uppercase;font-family:var(--font-mono);direction:ltr}

/* Status badges */
.login-badges{display:flex;justify-content:center;gap:10px;margin-bottom:24px}
.login-badge{font-size:9px;padding:3px 10px;border-radius:20px;letter-spacing:1px;font-family:var(--font-mono);direction:ltr}
.login-badge-green{border:1px solid rgba(0,232,143,.25);color:#00e88f;background:rgba(0,232,143,.06)}
.login-badge-gold{border:1px solid rgba(201,162,39,.2);color:#C9A227;background:rgba(201,162,39,.06)}

/* Fields */
.login-field{margin-bottom:16px}
.login-field label{display:block;font-size:9px;color:rgba(160,180,200,.5);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px;font-family:var(--font-mono);direction:ltr}
.login-field-wrap{display:flex;align-items:center;gap:10px;background:rgba(6,14,28,.6);border:1px solid rgba(0,212,255,.12);border-radius:10px;padding:0 14px;transition:border-color .2s,box-shadow .2s}
.login-field-wrap:focus-within{border-color:rgba(0,212,255,.4);box-shadow:0 0 0 3px rgba(0,212,255,.06)}
.login-field-wrap .icon{color:rgba(160,180,200,.4)}
.login-field-wrap input{flex:1;background:transparent;border:none;padding:12px 0;font-size:13px;color:#d0e8ff;font-family:var(--font-body);outline:none;direction:ltr}
.login-field-wrap input::placeholder{color:rgba(160,180,200,.3)}
.login-btn{width:100%;padding:13px 0;border-radius:10px;border:1px solid rgba(0,212,255,.3);background:linear-gradient(135deg,rgba(0,212,255,.12),rgba(0,136,252,.08));color:#80eaff;font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;cursor:pointer;transition:all .2s;box-shadow:0 0 20px rgba(0,212,255,.06);margin-top:8px}
.login-btn:hover{box-shadow:0 0 30px rgba(0,212,255,.15);background:linear-gradient(135deg,rgba(0,212,255,.2),rgba(0,136,252,.14))}
.login-error{color:var(--red);font-size:12px;text-align:center;margin-top:10px;min-height:18px;font-family:var(--font-mono);direction:ltr}

/* Footer */
.login-footer{text-align:center;margin-top:24px;padding-top:14px;border-top:1px solid rgba(0,212,255,.06)}
.login-footer-line{font-size:10px;color:rgba(140,160,180,.4);letter-spacing:1px;font-family:var(--font-mono);direction:ltr}
.login-footer-sub{font-size:8px;color:rgba(140,160,180,.25);letter-spacing:.5px;margin-top:4px;font-family:var(--font-mono);direction:ltr}

/* ══ APP LAYOUT ══ */
#app{display:none;position:relative;z-index:1}
#app.active{display:flex;min-height:100vh}

/* ── Sidebar ── */
.sidebar{width:var(--sidebar-w);background:var(--bg-1);border-left:1px solid var(--frame);display:flex;flex-direction:column;position:fixed;top:0;right:0;height:100vh;z-index:100;transition:width .3s var(--ease)}
.sidebar-brand{padding:16px;border-bottom:1px solid var(--frame);display:flex;align-items:center;gap:10px}
.sidebar-logo{width:38px;height:38px;min-width:38px;border-radius:var(--r-md);background:linear-gradient(135deg,#0a1e3d,#0e2a4a,#12345a);display:flex;align-items:center;justify-content:center;border:1.5px solid rgba(0,191,255,.3);box-shadow:0 0 12px rgba(0,191,255,.12),inset 0 0 12px rgba(0,191,255,.05);font-size:18px;position:relative}
.sidebar-logo::after{content:'';position:absolute;inset:0;border-radius:var(--r-md);background:linear-gradient(180deg,rgba(0,191,255,.1),transparent 50%);pointer-events:none}
.sidebar-brand h1{font-family:var(--font-head);font-size:.72rem;font-weight:800;letter-spacing:2px;background:linear-gradient(135deg,var(--gold),var(--amber),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-brand small{display:block;font-family:var(--font-mono);font-size:.5rem;color:var(--text-3);letter-spacing:.5px;-webkit-text-fill-color:var(--text-3)}
.sidebar-nav{flex:1;padding:8px;overflow-y:auto}
.nav-section{font-family:var(--font-head);font-size:.5rem;letter-spacing:2px;color:var(--text-muted);padding:12px 10px 4px;text-transform:uppercase}
.nav-btn{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid transparent;background:none;color:var(--text-2);font-family:var(--font-arabic);font-size:.8rem;border-radius:var(--r);cursor:pointer;transition:all .2s var(--ease);position:relative;text-align:right}
.nav-btn:hover{background:rgba(0,212,255,.04);color:var(--text-1)}
.nav-btn.active{background:var(--cyan-dim);color:var(--cyan);font-weight:600}
.nav-btn.active::before{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);width:3px;height:55%;background:var(--cyan);border-radius:3px 0 0 3px;box-shadow:0 0 8px var(--cyan-glow)}
.nav-btn .icon{width:20px;height:20px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}
.nav-btn .icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nav-btn.active .icon svg{filter:drop-shadow(0 0 4px currentColor)}
.nav-btn .badge{margin-right:auto;margin-left:0;background:var(--red);color:#fff;font-size:.55rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;font-family:var(--font-mono)}
.sidebar-user{padding:12px 16px;border-top:1px solid var(--frame);display:flex;align-items:center;gap:10px}
.sidebar-avatar{width:36px;height:36px;background:var(--bg-3);border:1px solid var(--frame-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--text-2)}
.sidebar-avatar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.login-icon svg,.sidebar-logo svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.login-field-wrap .icon svg,.field-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.stat-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.feed-avatar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.comment-avatar svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
[data-p="dashboard"] .icon{color:#00d4ff}
[data-p="scanner"] .icon{color:#00b8a9}
[data-p="reports"] .icon{color:#C9A227}
[data-p="tasks"] .icon{color:#00e870}
[data-p="insights"] .icon{color:#C9A227}
[data-p="discussions"] .icon{color:#a78bfa}
.ins-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border:1px solid var(--frame);border-radius:16px;font-size:.75rem;cursor:pointer;transition:all .2s var(--ease);user-select:none;background:var(--bg-1)}
.ins-chip:hover{border-color:var(--frame-light)}
.ins-chip.selected{border-color:var(--cyan);background:var(--cyan-dim);color:var(--cyan);font-weight:600}
.ins-chip input{display:none}
.ins-chip .chip-dot{width:6px;height:6px;border-radius:50%;background:var(--frame-light);transition:background .2s}
.ins-chip.selected .chip-dot{background:var(--cyan)}
html.light .ins-chip.selected{background:rgba(0,120,212,.08);border-color:var(--cyan);color:var(--cyan)}
[data-p="recycle"] .icon{color:#ff8820}
[data-p="admin"] .icon{color:#a78bfa}
.sidebar-user-name{font-size:.78rem;font-weight:600;color:var(--text-1)}
.sidebar-user-role{font-size:.6rem;font-family:var(--font-mono);color:var(--cyan);letter-spacing:.5px;text-transform:uppercase}
.sidebar-logout{margin-right:auto;margin-left:0;background:none;border:1px solid var(--frame);border-radius:var(--r);padding:4px 8px;color:var(--text-3);font-size:12px;cursor:pointer;transition:all .2s}
.sidebar-logout:hover{border-color:var(--red);color:var(--red)}

/* ── Main Content ── */
.main{flex:1;margin-right:var(--sidebar-w);min-height:100vh}
.topbar{height:var(--topbar-h);background:rgba(6,16,32,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--frame);display:flex;align-items:center;padding:0 24px;position:sticky;top:0;z-index:50}
.topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.15),transparent)}
.topbar-title{font-family:var(--font-head);font-size:.75rem;font-weight:700;letter-spacing:2px;color:var(--cyan);text-transform:uppercase}
.topbar-sub{font-family:var(--font-mono);font-size:.6rem;color:var(--text-3);margin-right:12px;letter-spacing:.5px}
.topbar-actions{margin-right:auto;margin-left:0;display:flex;gap:8px;align-items:center}

/* ── Pages ── */
.page{display:none;padding:24px;animation:pageIn .35s var(--ease)}
.page.on{display:block}
@keyframes pageIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── Shared Components ── */
.card{background:var(--bg-2);border:1px solid var(--frame);border-radius:var(--r-md);overflow:hidden;transition:all .25s var(--ease);position:relative}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent 10%,var(--cyan-dim) 50%,transparent 90%);opacity:0;transition:opacity .25s}
.card:hover{border-color:rgba(0,191,255,.2);box-shadow:0 0 16px rgba(0,212,255,.04)}
.card:hover::before{opacity:1}
.card-head{padding:14px 18px;border-bottom:1px solid var(--frame);font-family:var(--font-head);font-size:.6rem;letter-spacing:1.5px;color:var(--text-2);text-transform:uppercase;display:flex;align-items:center;justify-content:space-between}
.card-body{padding:18px}
.btn{padding:8px 18px;border-radius:var(--r);font-family:var(--font-arabic);font-size:.8rem;cursor:pointer;border:1px solid var(--frame);background:none;color:var(--text-2);transition:all .2s var(--ease)}
.btn:hover{border-color:var(--frame-light);color:var(--text-1)}
.btn-cyan{background:linear-gradient(180deg,rgba(0,212,255,.15),rgba(0,100,200,.08));color:var(--cyan);border-color:rgba(0,212,255,.3);font-weight:600}
.btn-cyan:hover{box-shadow:0 0 12px var(--cyan-glow);background:linear-gradient(180deg,rgba(0,212,255,.25),rgba(0,100,200,.15))}
.btn-cyan:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
.btn-red{color:var(--red);border-color:rgba(255,48,64,.25)}
.btn-red:hover{box-shadow:0 0 12px rgba(255,48,64,.15);background:var(--red-dim)}
.btn-sm{padding:5px 12px;font-size:.72rem}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}.sidebar{transform:translateX(100%);position:fixed}.sidebar.open{transform:translateX(0)}.main{margin-right:0}}

/* ── Stat Cards ── */
.stat{background:var(--bg-2);border:1px solid var(--frame);border-radius:var(--r-md);padding:16px;text-align:center;position:relative;overflow:hidden;transition:all .25s var(--ease)}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--cyan);opacity:0;transition:opacity .25s}
.stat:hover{border-color:var(--cyan);box-shadow:0 0 16px var(--cyan-dim);transform:translateY(-2px)}
.stat:hover::before{opacity:.6}
.stat-icon{width:36px;height:36px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:16px}
.stat-val{font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--cyan-light);text-shadow:0 0 20px rgba(0,212,255,.2)}
.stat-lbl{font-family:var(--font-mono);font-size:.55rem;color:var(--text-3);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px}

/* ── Table ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{background:var(--bg-1);font-family:var(--font-head);font-size:.55rem;letter-spacing:1.5px;color:var(--text-3);text-transform:uppercase;padding:10px 14px;text-align:right;border-bottom:1px solid var(--frame)}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--frame);font-size:.82rem;color:var(--text-1);vertical-align:middle}
.tbl tr:hover td{background:rgba(0,212,255,.02)}
.role-badge{font-family:var(--font-mono);font-size:.6rem;padding:2px 8px;border-radius:10px;letter-spacing:.5px}
.role-admin{background:rgba(201,162,39,.12);color:var(--gold);border:1px solid rgba(201,162,39,.2)}
.role-manager{background:rgba(0,212,255,.1);color:var(--cyan);border:1px solid rgba(0,212,255,.2)}
.role-analyst{background:rgba(0,232,143,.1);color:var(--green);border:1px solid rgba(0,232,143,.2)}
.role-viewer{background:rgba(138,170,208,.1);color:var(--text-2);border:1px solid rgba(138,170,208,.2)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:6px}
.status-active{background:var(--green);box-shadow:0 0 6px rgba(0,232,143,.4)}
.status-inactive{background:var(--text-muted)}

/* ── Forms (shared) ── */
.fi,.fs{width:100%;padding:9px 12px;background:var(--bg-1);border:1px solid var(--frame);border-radius:var(--r);color:var(--text-1);font-family:var(--font-arabic);font-size:.82rem;outline:none;transition:border-color .2s,box-shadow .2s}
.fi:focus,.fs:focus{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-dim)}
.fs option{background:var(--bg-1);color:var(--text-1)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.form-row.full{grid-template-columns:1fr}
.form-label{display:block;font-family:var(--font-head);font-size:.5rem;letter-spacing:1.5px;color:var(--text-3);margin-bottom:4px;text-transform:uppercase}

/* ── Modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(2,8,16,.85);backdrop-filter:blur(6px);z-index:500;align-items:center;justify-content:center}
.modal-overlay.on{display:flex}
.modal-box{background:var(--bg-1);border:1px solid var(--frame);border-radius:var(--r-lg);width:92%;max-width:600px;max-height:88vh;overflow:auto;box-shadow:var(--shadow-lg);animation:modalIn .3s var(--ease);position:relative}
.modal-box::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-deep),var(--cyan),var(--blue-deep))}
@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-head{padding:18px 22px;border-bottom:1px solid var(--frame);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg-1);z-index:1}
.modal-head h2{font-family:var(--font-head);font-size:.65rem;letter-spacing:2px;color:var(--cyan);text-transform:uppercase}
.modal-close{width:30px;height:30px;background:none;border:1px solid var(--frame);border-radius:var(--r);color:var(--text-3);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.modal-close:hover{border-color:var(--red);color:var(--red)}
.modal-body{padding:22px}

/* ── Discussion Panel ── */
.disc-panel{border-top:1px solid var(--frame);margin-top:24px;padding-top:20px}
.disc-header{font-family:var(--font-head);font-size:.6rem;letter-spacing:2px;color:var(--text-2);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.disc-header svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.action-link svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.disc-header .count{background:var(--cyan-dim);color:var(--cyan);font-size:.55rem;padding:2px 8px;border-radius:10px}
.comment-box{background:var(--bg-2);border:1px solid var(--frame);border-radius:var(--r-md);padding:14px;margin-bottom:10px;position:relative;transition:border-color .2s}
.comment-box:hover{border-color:rgba(0,191,255,.15)}
.comment-box.reply{margin-right:32px;border-right:3px solid var(--frame-light)}
.comment-meta{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.comment-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg-3);border:1px solid var(--frame-light);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.comment-author{font-weight:700;font-size:.82rem;color:var(--text-1)}
.comment-time{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);direction:ltr}
.comment-dept{font-family:var(--font-mono);font-size:.55rem;color:var(--teal);letter-spacing:.5px}
.comment-text{font-size:.85rem;color:var(--text-1);line-height:1.7;margin-bottom:8px}
.comment-text .mention{color:var(--cyan);font-weight:600;cursor:pointer}
.comment-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.react-btn{background:var(--bg-1);border:1px solid var(--frame);border-radius:12px;padding:2px 8px;font-size:13px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:3px}
.react-btn:hover{border-color:var(--frame-light);transform:scale(1.05)}
.react-btn.active{border-color:var(--cyan);background:var(--cyan-dim)}
.react-btn .rcount{font-family:var(--font-mono);font-size:.6rem;color:var(--text-2)}
.add-react{background:none;border:1px dashed var(--frame);border-radius:12px;padding:2px 8px;font-size:12px;color:var(--text-muted);cursor:pointer}
.add-react:hover{border-color:var(--frame-light);color:var(--text-2)}
.action-link{background:none;border:none;color:var(--text-3);font-size:.7rem;font-family:var(--font-arabic);cursor:pointer;padding:2px 6px;transition:color .15s}
.action-link:hover{color:var(--cyan)}
.reply-input,.new-comment{display:flex;gap:8px;margin-top:12px}
.reply-input textarea,.new-comment textarea{flex:1;background:var(--bg-1);border:1px solid var(--frame);border-radius:var(--r);padding:10px 12px;color:var(--text-1);font-family:var(--font-arabic);font-size:.82rem;resize:vertical;min-height:44px;outline:none;transition:border-color .2s}
.reply-input textarea:focus,.new-comment textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 2px var(--cyan-dim)}
.mention-dropdown{position:absolute;background:var(--bg-1);border:1px solid var(--frame);border-radius:var(--r);box-shadow:var(--shadow-md);z-index:60;max-height:160px;overflow-y:auto;min-width:180px}
.mention-item{padding:6px 12px;cursor:pointer;font-size:.8rem;display:flex;align-items:center;gap:6px;transition:background .1s}
.mention-item:hover{background:var(--cyan-dim)}

/* ── Task Card ── */
.task-card{background:var(--bg-2);border:1px solid var(--frame);border-radius:var(--r);padding:10px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;transition:all .2s}
.task-card:hover{border-color:rgba(0,191,255,.15)}
.task-status{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.task-pending{background:var(--amber);box-shadow:0 0 6px rgba(255,184,48,.3)}
.task-progress{background:var(--cyan);box-shadow:0 0 6px var(--cyan-glow)}
.task-done{background:var(--green);box-shadow:0 0 6px rgba(0,232,143,.3)}
.task-info{flex:1}
.task-title{font-size:.82rem;color:var(--text-1)}
.task-assignee{font-family:var(--font-mono);font-size:.6rem;color:var(--text-3)}
.task-actions select{background:var(--bg-1);border:1px solid var(--frame);border-radius:var(--r);color:var(--text-2);font-size:.7rem;padding:3px 6px;font-family:var(--font-arabic)}

/* ── Report Content ── */
.report-wrap{max-width:920px;margin:0 auto}
.report-content{background:#fff;color:#1a1a2e;padding:48px;border-radius:var(--r-lg);font-family:var(--font-arabic);font-size:15px;line-height:1.8;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.report-content::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-deep),var(--cyan),var(--teal),var(--cyan),var(--blue-deep))}
.report-content .arabic{direction:rtl;text-align:right}
.report-content .english{direction:ltr;text-align:left}
.report-section{margin-bottom:36px}
.report-section:last-child{margin-bottom:0}
.report-section-header{font-family:var(--font-head);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#00a0cc;border-bottom:2px solid #e8f4f8;padding-bottom:10px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.report-section-header::before{content:'';width:4px;height:16px;background:linear-gradient(180deg,#00d4ff,#00b8a9);border-radius:2px;flex-shrink:0}
.report-content h2{font-size:18px;color:#0a1628;margin:22px 0 10px;font-weight:700}
.report-content h3{font-size:16px;color:#1a3050;margin:18px 0 8px;font-weight:700}
.report-content h4{font-size:14px;color:#2a4a70;margin:14px 0 6px;font-weight:700}
.report-content p{margin:8px 0}
.report-content ul,.report-content ol{margin:10px 0;padding-right:24px}
.report-content li{margin:5px 0}
.report-content a{color:#0078d4;text-decoration:none;border-bottom:1px solid rgba(0,120,212,.2)}
.report-content strong{color:#0a1628}
.report-content table{width:100%;border-collapse:collapse;margin:18px 0;direction:ltr;text-align:left;border-radius:var(--r-md);overflow:hidden;box-shadow:0 1px 8px rgba(0,0,0,.06)}
.report-content th{background:#0a1628;color:#00d4ff;padding:12px 16px;font-family:var(--font-head);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;text-align:left}
.report-content td{padding:11px 16px;border-bottom:1px solid #edf2f7;font-size:13px;vertical-align:top}
.report-content tr:nth-child(even) td{background:#f8fafc}
.report-content tr:hover td{background:#edf6ff}

/* ── Progress ── */
.progress-section{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 20px}
.progress-section.hidden{display:none}
.scan-wrapper{position:relative;width:100px;height:100px;display:flex;align-items:center;justify-content:center;margin-bottom:32px}
.scan-ring{position:absolute;border:2px solid transparent;border-radius:50%}
.scan-ring-1{width:100px;height:100px;border-top-color:var(--cyan);border-right-color:rgba(0,212,255,.3);animation:spin 2s linear infinite}
.scan-ring-2{width:76px;height:76px;border-bottom-color:var(--teal);border-left-color:rgba(0,184,169,.2);animation:spin 3s linear infinite reverse}
.scan-ring-3{width:54px;height:54px;border-top-color:rgba(0,136,252,.5);border-right-color:rgba(0,136,252,.15);animation:spin 1.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.scan-core{width:20px;height:20px;background:var(--cyan-dim);border:1.5px solid var(--cyan);border-radius:50%;animation:pulse 2s ease-in-out infinite;box-shadow:0 0 20px rgba(0,212,255,.2)}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1);box-shadow:0 0 30px rgba(0,212,255,.3)}}
.status-text{font-family:var(--font-arabic);font-size:15px;color:var(--text-2);margin-bottom:8px}
.time-est{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);letter-spacing:1px;direction:ltr}

/* ── Activity Feed ── */
.feed-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--frame)}
.feed-item:last-child{border-bottom:none}
.feed-avatar{width:30px;height:30px;border-radius:50%;background:var(--bg-3);border:1px solid var(--frame);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.feed-text{font-size:.8rem;color:var(--text-1);line-height:1.5}
.feed-text strong{color:var(--cyan)}
.feed-time{font-family:var(--font-mono);font-size:.58rem;color:var(--text-muted);direction:ltr;margin-top:2px}

/* ── Error ── */
.error-box{background:var(--red-dim);border:1px solid rgba(255,48,64,.25);border-radius:var(--r-md);padding:32px;text-align:center;max-width:500px;margin:60px auto}
.error-box p{color:var(--red);margin-bottom:16px;font-size:14px}
.error-box button{padding:10px 24px;background:rgba(255,48,64,.08);border:1px solid rgba(255,48,64,.25);border-radius:var(--r);color:var(--red);font-family:var(--font-arabic);font-size:13px;cursor:pointer;transition:all .2s}
.error-box button:hover{background:rgba(255,48,64,.15)}

@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ══ LIGHT THEME ══ */
html.light{
--bg-0:#f0f4f8;--bg-1:#ffffff;--bg-2:#f7f9fc;--bg-3:#edf2f7;--bg-4:#e2e8f0;
--frame:#d8e2ee;--frame-light:#c4d1e0;--frame-bright:#a0b4cc;
--cyan:#0078d4;--cyan-light:#0060b0;--cyan-dim:rgba(0,120,212,.08);--cyan-glow:rgba(0,120,212,.15);
--border-cyan:#0078d4;--border-cyan-dim:rgba(0,120,212,.2);
--blue:#0060b0;--blue-deep:#004080;--teal:#00897b;
--gold:#9a7b1a;--gold-dim:rgba(154,123,26,.08);
--text-1:#1a202c;--text-2:#4a5568;--text-3:#718096;--text-muted:#a0aec0;
--red:#dc2626;--red-dim:rgba(220,38,38,.06);--green:#16a34a;--green-dim:rgba(22,163,74,.06);
--orange:#d97706;--amber:#b45309;--purple:#7c3aed;
--shadow-sm:0 1px 3px rgba(0,0,0,.08);--shadow-md:0 4px 12px rgba(0,0,0,.1);--shadow-lg:0 8px 24px rgba(0,0,0,.12);
--shadow-glow:0 0 12px rgba(0,120,212,.12);
}
html.light body{background:var(--bg-0)}
html.light .bg-ambient{display:none}
html.light #login-screen{background:#f0f4f8}
html.light .login-wallpaper{opacity:.08}
html.light .login-overlay{background:linear-gradient(180deg,rgba(240,244,248,.9),rgba(240,244,248,.6) 40%,rgba(240,244,248,.9))}
html.light .login-radial{background:radial-gradient(ellipse at 50% 40%,rgba(0,120,212,.04),transparent 60%)}
html.light .login-grid{background-image:linear-gradient(rgba(0,120,212,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,120,212,.04) 1px,transparent 1px)}
html.light .login-card{background:rgba(255,255,255,.95);border-color:rgba(0,120,212,.12);box-shadow:0 25px 60px rgba(0,0,0,.1),0 0 40px rgba(0,120,212,.04)}
html.light .login-card-accent{background:linear-gradient(90deg,#e2e8f0,var(--cyan),var(--gold),var(--cyan),#e2e8f0)}
html.light .login-corner-tr{border-color:rgba(0,120,212,.12)}
html.light .login-corner-bl{border-color:rgba(201,162,39,.1)}
html.light .login-hud-h,.login-hud-v{background:rgba(0,120,212,.06)}
html.light .login-scanlines{display:none}
html.light .login-icon{background:linear-gradient(135deg,rgba(0,120,212,.1),rgba(201,162,39,.06));border-color:rgba(0,120,212,.25);box-shadow:0 0 20px rgba(0,120,212,.08);color:var(--cyan)}
html.light .login-brand h1{color:var(--cyan);text-shadow:none}
html.light .login-brand-ar{color:var(--gold);text-shadow:none}
html.light .login-brand-divider{background:linear-gradient(90deg,transparent,rgba(201,162,39,.3),transparent)}
html.light .login-brand-sub{color:rgba(80,100,120,.5)}
html.light .login-badge-green{border-color:rgba(0,180,100,.2);color:#00a060;background:rgba(0,180,100,.06)}
html.light .login-badge-gold{border-color:rgba(201,162,39,.2);color:#a08020;background:rgba(201,162,39,.06)}
html.light .login-field label{color:rgba(80,100,120,.5)}
html.light .login-field-wrap{background:rgba(240,244,248,.8);border-color:rgba(0,120,212,.12)}
html.light .login-field-wrap:focus-within{border-color:rgba(0,120,212,.4);box-shadow:0 0 0 3px rgba(0,120,212,.06)}
html.light .login-field-wrap .icon{color:rgba(80,100,120,.4)}
html.light .login-field-wrap input{color:#1a2a40}
html.light .login-field-wrap input::placeholder{color:rgba(80,100,120,.3)}
html.light .login-btn{background:linear-gradient(135deg,rgba(0,120,212,.1),rgba(0,80,160,.05));border-color:rgba(0,120,212,.3);color:var(--cyan);box-shadow:none}
html.light .login-btn:hover{box-shadow:0 0 20px rgba(0,120,212,.12);background:linear-gradient(135deg,rgba(0,120,212,.18),rgba(0,80,160,.1))}
html.light .login-footer{border-top-color:rgba(0,120,212,.06)}
html.light .login-footer-line{color:rgba(80,100,120,.35)}
html.light .login-footer-sub{color:rgba(80,100,120,.2)}
html.light .sidebar{background:var(--bg-1);border-color:var(--frame)}
html.light .sidebar-brand{border-color:var(--frame)}
html.light .sidebar-logo{background:linear-gradient(135deg,#e8f0fe,#dbeafe);border-color:rgba(0,120,212,.25);box-shadow:0 0 8px rgba(0,120,212,.08)}
html.light .sidebar-logo::after{background:linear-gradient(180deg,rgba(0,120,212,.06),transparent 50%)}
html.light .sidebar-brand h1{background:linear-gradient(135deg,var(--gold),var(--amber),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
html.light .nav-btn{color:var(--text-2)}
html.light .nav-btn:hover{background:rgba(0,120,212,.04);color:var(--text-1)}
html.light .nav-btn.active{background:rgba(0,120,212,.08);color:var(--cyan)}
html.light .nav-btn.active::before{background:var(--cyan);box-shadow:0 0 6px rgba(0,120,212,.2)}
html.light .topbar{background:rgba(255,255,255,.92);border-color:var(--frame)}
html.light .topbar::after{background:linear-gradient(90deg,transparent,rgba(0,120,212,.1),transparent)}
html.light .card{background:var(--bg-1);border-color:var(--frame)}
html.light .card:hover{border-color:rgba(0,120,212,.2);box-shadow:0 0 12px rgba(0,120,212,.04)}
html.light .stat{background:var(--bg-1);border-color:var(--frame)}
html.light .stat:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,120,212,.08)}
html.light .stat-val{color:var(--cyan);text-shadow:none}
html.light .tbl th{background:var(--bg-3);color:var(--text-2)}
html.light .tbl td{border-color:var(--frame);color:var(--text-1)}
html.light .tbl tr:hover td{background:rgba(0,120,212,.02)}
html.light .fi,.light .fs{background:var(--bg-2);border-color:var(--frame);color:var(--text-1)}
html.light .fi:focus,.light .fs:focus{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(0,120,212,.1)}
html.light .btn{border-color:var(--frame);color:var(--text-2)}
html.light .btn-cyan{background:linear-gradient(180deg,rgba(0,120,212,.08),rgba(0,80,160,.04));color:var(--cyan);border-color:rgba(0,120,212,.25)}
html.light .btn-cyan:hover{box-shadow:0 0 10px rgba(0,120,212,.12)}
html.light .modal-box{background:var(--bg-1);border-color:var(--frame)}
html.light .modal-box::before{background:linear-gradient(90deg,var(--frame),var(--cyan),var(--frame))}
html.light .comment-box{background:var(--bg-2);border-color:var(--frame)}
html.light .comment-box.reply{border-right-color:var(--frame-light)}
html.light .react-btn{background:var(--bg-2);border-color:var(--frame)}
html.light .react-btn.active{background:rgba(0,120,212,.08);border-color:var(--cyan)}
html.light .task-card{background:var(--bg-2);border-color:var(--frame)}
html.light .report-content{box-shadow:var(--shadow-md)}
html.light .config-card::before{background:linear-gradient(90deg,var(--frame),var(--cyan),var(--teal),var(--cyan),var(--frame))}
html.light .feed-avatar{background:var(--bg-3);border-color:var(--frame)}
html.light .role-admin{background:rgba(154,123,26,.08);color:var(--gold);border-color:rgba(154,123,26,.2)}
html.light .role-manager{background:rgba(0,120,212,.06);color:var(--cyan);border-color:rgba(0,120,212,.15)}
html.light .role-analyst{background:rgba(22,163,74,.06);color:var(--green);border-color:rgba(22,163,74,.15)}
html.light .sidebar-user{border-color:var(--frame)}
html.light .sidebar-avatar{background:var(--bg-3);border-color:var(--frame)}
html.light .sidebar-user-role{color:var(--cyan)}
html.light .mention-dropdown{background:var(--bg-1);border-color:var(--frame)}
html.light .mention-item:hover{background:rgba(0,120,212,.06)}
html.light .prior-toggle{background:var(--bg-2);color:var(--text-2)}
html.light .prior-content{background:var(--bg-2);border-color:var(--frame)}
html.light .error-box{background:rgba(220,38,38,.04);border-color:rgba(220,38,38,.15)}
/* ── File Viewer ── */
.file-embed{width:100%;height:calc(100vh - var(--topbar-h) - 80px);min-height:600px;border:1px solid var(--frame);border-radius:var(--r-md);background:#fff}

/* ── DOCX Viewer ── */
.docx-viewer{max-width:920px;margin:0 auto;background:#fff;color:#1a1a2e;padding:48px;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);font-family:var(--font-arabic);font-size:15px;line-height:1.8;position:relative;overflow:hidden;direction:rtl}
.docx-viewer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-deep),var(--cyan),var(--teal),var(--cyan),var(--blue-deep))}
.docx-viewer img{max-width:100%;height:auto}
.docx-viewer table{width:100%;border-collapse:collapse;margin:12px 0}
.docx-viewer td,.docx-viewer th{border:1px solid #ddd;padding:8px}
.toggle-track{position:absolute;inset:0;background:var(--frame);border-radius:11px;transition:background .2s}
.toggle-track::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--text-2);border-radius:50%;transition:transform .2s,background .2s}
input:checked+.toggle-track{background:rgba(0,212,255,.25)}
input:checked+.toggle-track::before{transform:translateX(18px);background:var(--cyan)}
html.light input:checked+.toggle-track{background:rgba(0,120,212,.2)}
html.light input:checked+.toggle-track::before{background:var(--cyan)}
.key-save-btn{min-width:34px;padding:5px 6px !important;display:inline-flex;align-items:center;justify-content:center}
.key-save-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.key-save-btn.saved{border-color:var(--green) !important;color:var(--green) !important}
html.light .key-save-btn.saved{border-color:var(--green) !important;color:var(--green) !important}
.ai-stage{padding:14px;background:var(--bg-1);border:1px solid var(--frame);border-radius:var(--r-md)}
html.light .ai-stage{background:var(--bg-2)}
.pipe-btn{transition:all .2s var(--ease)}
.pipe-btn.active{background:var(--cyan-dim);color:var(--cyan);border-color:var(--border-cyan-dim);font-weight:600}
html.light .pipe-btn.active{background:rgba(0,120,212,.08);color:var(--cyan);border-color:rgba(0,120,212,.2)}
.task-card{cursor:pointer;transition:all .25s var(--ease)}
.task-card:hover{transform:translateY(-2px)}
.task-card.active{border-color:var(--cyan);box-shadow:0 0 16px var(--cyan-dim)}
.task-card.active::before{opacity:.8}
html.light .task-card.active{border-color:var(--cyan);box-shadow:0 0 12px rgba(0,120,212,.08)}
.ref-check{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--frame);cursor:pointer;transition:background .15s;font-size:.82rem}
.ref-check:last-child{border-bottom:none}
.ref-check:hover{background:var(--cyan-dim)}
.ref-check input[type=checkbox]{accent-color:var(--cyan);width:16px;height:16px;cursor:pointer}
.ref-check .ref-month{font-weight:600;color:var(--text-1)}
.ref-check .ref-date{font-family:var(--font-mono);font-size:.6rem;color:var(--text-muted);margin-right:auto;margin-left:0;direction:ltr}
.ref-check .ref-badge{font-family:var(--font-mono);font-size:.5rem;padding:1px 6px;border-radius:8px;background:rgba(0,184,169,.1);color:var(--teal);border:1px solid rgba(0,184,169,.2)}
/* ── File Browser ── */
.fb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.fb-item{border:1px solid var(--frame);border-radius:var(--r-md);padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s var(--ease);position:relative;background:var(--bg-2)}
.fb-item:hover{border-color:var(--border-cyan-dim);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1)}
.fb-item.selected{border-color:var(--cyan);background:var(--cyan-dim)}
.fb-item .fb-icon{font-size:28px;margin-bottom:6px;display:block}
.fb-item .fb-icon svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.fb-item .fb-name{font-size:.72rem;color:var(--text-1);word-break:break-all;line-height:1.3;font-weight:500}
.fb-item .fb-meta{font-family:var(--font-mono);font-size:.55rem;color:var(--text-muted);margin-top:3px}
.fb-item .fb-check{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;border:2px solid var(--frame);display:flex;align-items:center;justify-content:center;font-size:10px;color:transparent;transition:all .15s}
.fb-item.selected .fb-check{border-color:var(--cyan);background:var(--cyan);color:#fff}
.fb-list-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--frame);cursor:pointer;transition:background .15s}
.fb-list-item:hover{background:var(--cyan-dim)}
.fb-list-item.selected{background:var(--cyan-dim)}
.fb-list-item .fb-list-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fb-list-item .fb-list-check{width:16px;height:16px;border-radius:3px;border:2px solid var(--frame);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;color:transparent}
.fb-list-item.selected .fb-list-check{border-color:var(--cyan);background:var(--cyan);color:#fff}
.fb-view-btn.active{background:var(--cyan-dim);color:var(--cyan);border-color:var(--border-cyan-dim)}
html.light .fb-item{background:var(--bg-2)}
html.light .fb-item.selected{background:rgba(0,120,212,.06);border-color:var(--cyan)}
.theme-toggle{background:none;border:1px solid var(--frame);border-radius:var(--r);padding:4px 10px;cursor:pointer;color:var(--text-3);font-size:13px;transition:all .2s;display:inline-flex;align-items:center;gap:4px}
.theme-toggle:hover{border-color:var(--frame-light);color:var(--text-1)}
.theme-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}