/* Manager Workbench — family design system. Shares the Wisflux dashboard DNA (AgentPulse light SaaS shell + AgentLens dark mode): Inter + tabular-nums · 16px cards · KPI ribbon · hand-rolled SVG charts · hover-lift · freshness pill · gradient brand accent. RAG (red/amber/green) is reserved for RISK only; priority uses its own labelled 4-step scale. Theme flips via . */ /* ---------------- tokens: LIGHT (AgentPulse) ---------------- */ :root { --bg:#f5f6fb; --bg-grad:none; --surface:#ffffff; --surface-2:#fafbff; --surface-3:#f3f5fc; --ink:#0f172a; --ink-2:#334155; --muted:#64748b; --faint:#94a3b8; --line:#e8eaf3; --line-2:#eef0f8; --brand:#7c3aed; --brand-2:#c026d3; --brand-soft:#f3effe; --brand-border:#e9d5ff; --grad:linear-gradient(135deg,#7c3aed 0%,#a21caf 55%,#db2777 100%); --red:#e5484d; --amber:#f59e0b; --green:#16a34a; /* RAG — risk only */ --crit:#dc2626; --high:#ea580c; --med:#2563eb; --low:#64748b;/* priority scale */ --crit-bg:#fee2e2; --crit-fg:#991b1b; --high-bg:#ffedd5; --high-fg:#9a3412; --med-bg:#dbeafe; --med-fg:#1e40af; --low-bg:#eef1f6; --low-fg:#475569; --track:#edeefb; --shadow-sm:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.04); --shadow:0 4px 14px -6px rgba(16,24,40,.12),0 2px 6px -4px rgba(16,24,40,.08); --shadow-lg:0 24px 60px -20px rgba(80,40,160,.28); --r:16px; --r-sm:11px; --font:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; } /* ---------------- tokens: DARK (AgentLens) ---------------- */ html[data-theme="dark"] { --bg:#0a0d14; --bg-grad:radial-gradient(1200px 620px at 82% -12%,#15182a 0%,#0a0d14 56%); --surface:#121620; --surface-2:#161b27; --surface-3:#1b2130; --ink:#e9eef8; --ink-2:#cbd5e1; --muted:#93a0b6; --faint:#5d6a80; --line:#232a3a; --line-2:#1c2230; --brand:#818cf8; --brand-2:#a78bfa; --brand-soft:#1d1733; --brand-border:#3a3160; --grad:linear-gradient(135deg,#818cf8 0%,#a78bfa 60%,#c084fc 100%); --red:#fb7185; --amber:#fbbf24; --green:#34d399; --crit:#fb7185; --high:#fb923c; --med:#60a5fa; --low:#94a3b8; --crit-bg:#3b1620; --crit-fg:#fda4af; --high-bg:#3a2414; --high-fg:#fdba74; --med-bg:#16243b; --med-fg:#93c5fd; --low-bg:#1b2230; --low-fg:#94a3b8; --track:#1f2740; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7); } * { box-sizing:border-box; } html,body { margin:0; height:100%; } body { font-family:var(--font); background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed; color:var(--ink); font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums; } a { color:var(--brand); text-decoration:none; } button { font-family:inherit; cursor:pointer; } .muted { color:var(--muted); } ::selection { background:var(--brand); color:#fff; } /* ======================= app shell ======================= */ .app-shell { display:grid; grid-template-columns:240px 1fr; grid-template-rows:60px 1fr; grid-template-areas:'side top' 'side main'; height:100vh; } /* ---- sidebar ---- */ .sidebar { grid-area:side; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:16px 13px; gap:3px; overflow-y:auto; } .s-brand { display:flex; align-items:center; gap:11px; padding:4px 8px 16px; } .s-logo { width:34px; height:34px; border-radius:9px; background:var(--grad); color:#fff; display:grid; place-items:center; font-weight:800; font-size:16px; flex:none; box-shadow:0 6px 16px -6px var(--brand); } .s-brand h1 { font-size:15px; margin:0; font-weight:800; letter-spacing:-.3px; } .s-brand .tag { font-size:10.5px; color:var(--faint); } .s-sec { font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--faint); margin:14px 10px 5px; } .s-link { display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:10px; color:var(--ink-2); font-weight:550; font-size:13.5px; border:none; background:none; width:100%; text-align:left; transition:.13s; } .s-link:hover { background:var(--surface-3); color:var(--ink); } .s-link.on { background:var(--brand-soft); color:var(--brand); font-weight:700; } .s-link .dot { width:8px; height:8px; border-radius:50%; flex:none; } .s-link .ct { margin-left:auto; font-size:11px; color:var(--faint); font-weight:700; } .s-link.on .ct { color:var(--brand); } .s-foot { margin-top:auto; padding:12px 10px 4px; font-size:11px; color:var(--faint); border-top:1px solid var(--line-2); } .s-foot .lock { display:flex; align-items:center; gap:6px; } /* ---- topbar ---- */ .topbar { grid-area:top; position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px; padding:0 22px; background:color-mix(in srgb,var(--surface) 86%,transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .crumb { font-weight:750; font-size:15px; letter-spacing:-.3px; } .topbar .spacer { flex:1; } .freshpill { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); background:var(--surface-2); border:1px solid var(--line); padding:6px 11px; border-radius:999px; } .freshpill .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 18%,transparent); } .aibadge { font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; border:1px solid var(--line); } .aibadge.hybrid { color:var(--brand); background:var(--brand-soft); border-color:var(--brand-border); } .aibadge.enh { color:var(--amber); background:color-mix(in srgb,var(--amber) 12%,transparent); border-color:color-mix(in srgb,var(--amber) 30%,transparent); } .aibadge.rules { color:var(--muted); background:var(--surface-2); } .iconbtn-top { width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; font-size:15px; } .iconbtn-top:hover { border-color:var(--brand); color:var(--brand); } .btn { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:650; padding:9px 15px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); transition:.15s; } .btn:hover { border-color:#cbd5e1; } .btn.primary { background:var(--grad); border:none; color:#fff; box-shadow:0 8px 20px -8px var(--brand); } .btn.primary:hover { transform:translateY(-1px); box-shadow:0 12px 26px -8px var(--brand); } .btn.ghost { background:transparent; } .btn:disabled { opacity:.5; cursor:not-allowed; transform:none; } /* ---- main ---- */ .main { grid-area:main; overflow-y:auto; } .wrap { max-width:1180px; margin:0 auto; padding:22px clamp(16px,2.4vw,28px) 64px; } /* ======================= brief / KPI ribbon ======================= */ .briefhead { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin:4px 0 16px; } .greet { font-size:21px; font-weight:820; letter-spacing:-.5px; } .greetsub { font-size:13px; color:var(--muted); margin-top:2px; } .anarr { display:flex; gap:9px; align-items:flex-start; background:var(--brand-soft); border:1px solid var(--brand-border); color:var(--brand); border-radius:12px; padding:11px 14px; font-size:13.5px; font-weight:500; margin-bottom:16px; } .anarr.enh { color:var(--amber); background:color-mix(in srgb,var(--amber) 10%,transparent); border-color:color-mix(in srgb,var(--amber) 26%,transparent); } .anarr.scope { color:var(--ink-2); background:var(--surface-3); border-color:var(--line); } .anarr.scope b { color:var(--ink); } .kpi-row { display:grid; grid-template-columns:repeat(6,1fr); gap:13px; margin-bottom:16px; } .kpi { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 15px; box-shadow:var(--shadow-sm); transition:.15s; cursor:default; position:relative; overflow:hidden; } .kpi[data-pf],.kpi[data-sf] { cursor:pointer; } .kpi[data-pf]:hover,.kpi[data-sf]:hover,.kpi[data-act]:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--brand-border); } .kpi[data-act] { cursor:pointer; } .kpi.kpi-hero[data-act]:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); } .kpi:focus-visible { outline:2px solid var(--brand); outline-offset:2px; } .kpi.on { border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft); } .kpi-l { font-size:10.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:var(--faint); } .kpi-v { font-size:26px; font-weight:820; letter-spacing:-.9px; margin:7px 0 5px; line-height:1; } .kpi-b { font-size:11px; color:var(--muted); } .kpi-v.c-crit { color:var(--crit); } .kpi-v.c-high { color:var(--high); } .kpi-v.c-cross { color:var(--brand-2); } .kpi-hero { background:var(--grad); border:none; color:#fff; box-shadow:var(--shadow); } .kpi-hero .kpi-l { color:rgba(255,255,255,.82); } .kpi-hero .kpi-b { color:rgba(255,255,255,.85); } .kpi-hero::after { content:""; position:absolute; right:-40px; top:-40px; width:140px; height:140px; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); } /* ======================= at-a-glance card ======================= */ .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:16px 18px; margin-bottom:16px; } .card-h { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; } .card-h h3 { font-size:12px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--muted); margin:0; } .card-h .hint { font-size:11px; color:var(--faint); } .glance { display:grid; grid-template-columns:150px 1fr 1fr; gap:22px; align-items:center; } .donut-wrap { display:grid; place-items:center; } .donut-cap { text-align:center; font-size:11px; color:var(--muted); margin-top:4px; } .donut-num { font-size:22px; font-weight:820; fill:var(--ink); } .glabel { font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--faint); margin-bottom:9px; } .hbars { display:flex; flex-direction:column; gap:9px; } .hbar { display:grid; grid-template-columns:96px 1fr 30px; align-items:center; gap:10px; font-size:12px; } .hbar.clickable { cursor:pointer; border-radius:7px; padding:2px 3px; margin:-2px -3px; transition:background .12s; } .hbar.clickable:hover { background:var(--surface-2); } .hbar.clickable:hover .hl { color:var(--ink); } .hbar.clickable:focus-visible { outline:2px solid var(--brand); outline-offset:1px; } .hbar .hl { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hbar .ht { height:8px; background:var(--track); border-radius:5px; overflow:hidden; } .hbar .hf { height:100%; border-radius:5px; transition:width .35s; } .hbar .hv { text-align:right; font-weight:700; color:var(--ink-2); } /* ======================= top priorities (Today's Brief) ======================= */ .toplist { display:flex; flex-direction:column; } .toprow { display:flex; align-items:center; gap:12px; padding:11px 6px; border-top:1px solid var(--line-2); cursor:pointer; border-radius:8px; transition:background .12s; } .toprow:first-child { border-top:none; } .toprow:hover { background:var(--surface-2); } .toprow:focus-visible { outline:2px solid var(--brand); outline-offset:1px; } .trank { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; background:var(--surface-3); color:var(--ink-2); } .trank.p-Critical { background:var(--crit-bg); color:var(--crit-fg); } .trank.p-High { background:var(--high-bg); color:var(--high-fg); } .trank.p-Medium { background:var(--med-bg); color:var(--med-fg); } .trank.p-Low { background:var(--low-bg); color:var(--low-fg); } .toprow .tmain { flex:1; min-width:0; } .toprow .tt { font-weight:650; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .toprow .ts { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; } .toprow .trarrow { color:var(--faint); font-weight:800; transition:.12s; } .toprow:hover .trarrow { color:var(--brand); transform:translateX(2px); } /* ======================= filters ======================= */ .filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:18px 0 14px; } .grp { display:inline-flex; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px; } .chip { border:none; background:transparent; color:var(--muted); padding:6px 11px; border-radius:8px; font-weight:650; font-size:12.5px; transition:.13s; } .chip:hover { color:var(--ink); } .chip.on { background:var(--brand-soft); color:var(--brand); } .filters .count { margin-left:auto; font-size:12.5px; color:var(--muted); } /* ======================= feed (grouped rows) ======================= */ .feed { display:flex; flex-direction:column; gap:14px; } .pgrp { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; } .pgrp-h { display:flex; align-items:center; gap:9px; padding:13px 16px; cursor:pointer; user-select:none; } .pgrp-h:hover { background:var(--surface-2); } .pgrp .chev { font-size:10px; color:var(--faint); transition:transform .15s; } .pgrp.collapsed .chev { transform:rotate(-90deg); } .pgrp .gdot { width:9px; height:9px; border-radius:50%; } .pgrp .gt { font-weight:750; font-size:13.5px; } .pgrp .gc { font-size:11px; font-weight:800; color:var(--muted); background:var(--surface-3); padding:2px 8px; border-radius:999px; } .pgrp .ghint { margin-left:auto; font-size:11px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.3px; } .pgrp-h:hover .ghint { color:var(--brand); } .pgrp-h:focus-visible { outline:2px solid var(--brand); outline-offset:-2px; border-radius:8px; } .pgrp-body { display:flex; flex-direction:column; } .pgrp.collapsed .pgrp-body { display:none; } .arow { display:flex; align-items:center; gap:12px; padding:12px 16px; border-top:1px solid var(--line-2); cursor:pointer; transition:background .12s; } .arow:hover { background:var(--surface-2); } .arow.p-Critical { box-shadow:inset 3px 0 0 var(--crit); } .arow.p-High { box-shadow:inset 3px 0 0 var(--high); } .arow.p-Medium { box-shadow:inset 3px 0 0 var(--med); } .arow.p-Low { box-shadow:inset 3px 0 0 var(--low); } .arow .main { flex:1; min-width:0; } .arow .t { font-weight:650; font-size:14px; letter-spacing:-.1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .arow .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; } .arow .right { display:flex; align-items:center; gap:10px; flex:none; } .arow .qa { display:flex; gap:5px; opacity:.55; transition:.13s; } /* discoverable, not hidden */ .arow:hover .qa { opacity:1; } .iconbtn:focus-visible { outline:2px solid var(--brand); outline-offset:1px; } .iconbtn { width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:grid; place-items:center; font-size:13px; } .iconbtn:hover { border-color:var(--brand); color:var(--brand); } .iconbtn.ok:hover { border-color:var(--green); color:var(--green); } .iconbtn.danger:hover { border-color:var(--red); color:var(--red); } /* badges / pills */ .badge { font-size:11px; font-weight:800; padding:3px 9px; border-radius:7px; letter-spacing:.3px; text-transform:uppercase; } .badge.p-Critical { background:var(--crit-bg); color:var(--crit-fg); } .badge.p-High { background:var(--high-bg); color:var(--high-fg); } .badge.p-Medium { background:var(--med-bg); color:var(--med-fg); } .badge.p-Low { background:var(--low-bg); color:var(--low-fg); } .risk { font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; display:inline-flex; align-items:center; gap:5px; } .risk::before { content:""; width:7px; height:7px; border-radius:50%; } .risk.High { background:color-mix(in srgb,var(--red) 12%,transparent); color:var(--red); } .risk.High::before { background:var(--red); } .risk.Medium { background:color-mix(in srgb,var(--amber) 14%,transparent); color:var(--amber); } .risk.Medium::before { background:var(--amber); } .risk.Low { background:color-mix(in srgb,var(--green) 12%,transparent); color:var(--green); } .risk.Low::before { background:var(--green); } .cross { font-size:11px; font-weight:800; color:var(--brand); background:var(--brand-soft); border:1px solid var(--brand-border); border-radius:7px; padding:2px 8px; } .statuspill { font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; background:var(--surface-3); color:var(--muted); white-space:nowrap; } .statuspill.New { background:var(--brand-soft); color:var(--brand); } .statuspill.Escalated { background:var(--crit-bg); color:var(--crit-fg); } .statuspill.Completed { background:color-mix(in srgb,var(--green) 14%,transparent); color:var(--green); } .statuspill.WaitingforResponse { background:var(--high-bg); color:var(--high-fg); } .srcstrip { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; font-size:12px; color:var(--muted); } .srcstrip .s { display:inline-flex; align-items:center; gap:6px; } .srcstrip .s[data-src] { cursor:pointer; border-radius:7px; padding:2px 7px; margin:-2px -1px; transition:.12s; } .srcstrip .s[data-src]:hover { color:var(--ink); background:var(--surface-3); } .srcstrip .s[data-src]:focus-visible { outline:2px solid var(--brand); outline-offset:1px; } .srcstrip .s .d { width:8px; height:8px; border-radius:50%; background:var(--green); } .srcstrip .s.bad .d { background:var(--red); } .empty { text-align:center; padding:48px 20px; color:var(--muted); background:var(--surface); border:1px dashed var(--line); border-radius:var(--r); } .empty .big { font-size:38px; margin-bottom:10px; } .empty .emsg { max-width:480px; margin:0 auto; font-size:13.5px; line-height:1.6; } /* ======================= drawer ======================= */ .scrim { position:fixed; inset:0; background:rgba(15,23,42,.5); opacity:0; pointer-events:none; transition:.2s; z-index:40; backdrop-filter:blur(2px); } .scrim.open { opacity:1; pointer-events:auto; } .drawer { position:fixed; top:0; right:0; height:100%; width:580px; max-width:94vw; background:var(--bg); background-image:var(--bg-grad); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1); z-index:50; display:flex; flex-direction:column; } .drawer.open { transform:translateX(0); } .dhead { padding:16px 20px; border-bottom:1px solid var(--line); background:var(--surface); display:flex; align-items:flex-start; gap:12px; } .dhead h2 { font-size:17px; margin:7px 0 8px; font-weight:820; letter-spacing:-.3px; } .dclose { border:none; background:var(--surface-3); width:32px; height:32px; border-radius:9px; font-size:17px; color:var(--muted); flex:none; } .dclose:hover { color:var(--ink); } .dbody { overflow-y:auto; padding:18px 20px 36px; flex:1; } .sect { margin-bottom:20px; } .sect h4 { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--faint); margin:0 0 9px; font-weight:800; } .callout { background:var(--brand-soft); border:1px solid var(--brand-border); color:var(--brand); border-radius:12px; padding:12px 14px; font-size:13.5px; font-weight:550; } .evrow { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-2); } .evrow:last-child { border-bottom:none; } .evrow .ed { width:9px; height:9px; border-radius:50%; margin-top:5px; flex:none; } .evrow .es { font-size:11px; font-weight:700; color:var(--ink-2); } .evrow .et { font-size:13px; color:var(--ink-2); } .rellist { display:flex; flex-direction:column; gap:2px; } .relrow { display:flex; align-items:center; gap:9px; padding:8px 6px; border-radius:8px; cursor:pointer; transition:background .12s; } .relrow:hover { background:var(--surface-2); } .relrow:focus-visible { outline:2px solid var(--brand); outline-offset:1px; } .relrow .relt { flex:1; min-width:0; font-size:13px; font-weight:550; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .relrow .rels { font-size:11px; color:var(--muted); flex:none; } .factors { display:flex; flex-direction:column; gap:7px; } .frow { display:grid; grid-template-columns:120px 1fr 34px; align-items:center; gap:9px; font-size:12px; } .fbar { height:7px; background:var(--track); border-radius:999px; overflow:hidden; } .fbar > i { display:block; height:100%; background:var(--brand); border-radius:999px; } .timeline { border-left:2px solid var(--line); margin-left:6px; padding-left:14px; } .tev { position:relative; padding:0 0 13px; } .tev::before { content:""; position:absolute; left:-19px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--brand); border:2px solid var(--bg); } .tev .tt { font-size:13px; font-weight:600; } .tev .tm { font-size:11.5px; color:var(--muted); } .dtabs { display:flex; gap:4px; background:var(--surface-3); padding:3px; border-radius:10px; margin-bottom:10px; width:fit-content; } .dtab { border:none; background:transparent; padding:6px 13px; border-radius:8px; font-weight:650; font-size:12.5px; color:var(--muted); } .dtab.on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); } .draftbox { width:100%; border:1px solid var(--line); border-radius:11px; background:var(--surface); padding:12px 13px; font-family:var(--font); font-size:13px; color:var(--ink); resize:vertical; min-height:150px; line-height:1.55; } .draftbox.subj { min-height:auto; margin-bottom:8px; font-weight:600; } .draftactions { display:flex; gap:8px; margin-top:10px; align-items:center; flex-wrap:wrap; } .gatehint { font-size:11.5px; color:var(--amber); display:inline-flex; align-items:center; gap:5px; } .statusgrid { display:flex; flex-wrap:wrap; gap:7px; } .sbtn { border:1px solid var(--line); background:var(--surface); color:var(--ink-2); padding:7px 12px; border-radius:9px; font-weight:650; font-size:12.5px; } .sbtn:hover { border-color:#cbd5e1; background:var(--surface-2); } .sbtn.primary { background:var(--grad); border:none; color:#fff; } .sbtn.danger:hover { border-color:var(--red); color:var(--red); } .sbtn:disabled { opacity:.45; cursor:not-allowed; } .sbtn:disabled:hover { border-color:var(--line); background:var(--surface); } .gatehint.blocked { color:var(--amber); font-weight:600; } /* confirm modal (send gate) */ .cmodal-scrim { position:fixed; inset:0; background:rgba(15,23,42,.55); display:grid; place-items:center; z-index:90; backdrop-filter:blur(3px); } .cmodal { background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); width:440px; max-width:92vw; padding:22px; } .cmodal h3 { margin:0 0 12px; font-size:16px; font-weight:800; } .cmodal .msg { font-size:13.5px; color:var(--ink-2); margin-bottom:12px; } .cmodal .who { background:var(--surface-3); border:1px solid var(--line); border-radius:11px; padding:11px 13px; font-size:13px; color:var(--ink); line-height:1.7; } .cmodal-acts { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; } .btn.send { background:var(--grad); border:none; color:#fff; } /* toast */ .toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0; background:#0f172a; color:#fff; padding:11px 18px; border-radius:11px; font-size:13px; font-weight:600; box-shadow:var(--shadow-lg); z-index:100; transition:.25s; pointer-events:none; max-width:90vw; } .toast.show { transform:translateX(-50%) translateY(0); opacity:1; } .toast.ok { background:#065f46; } .toast.err { background:#991b1b; } html[data-theme="dark"] .toast { background:#1b2130; border:1px solid var(--line); } /* scrollbars (dark feels premium) */ .main::-webkit-scrollbar,.dbody::-webkit-scrollbar,.sidebar::-webkit-scrollbar { width:10px; } .main::-webkit-scrollbar-thumb,.dbody::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb { background:var(--line); border-radius:6px; border:2px solid var(--bg); } /* ======================= responsive ======================= */ .menu-btn { display:none; } @media (max-width:920px) { .app-shell { grid-template-columns:1fr; grid-template-areas:'top' 'main'; } .sidebar { position:fixed; top:0; left:0; bottom:0; width:240px; z-index:60; transform:translateX(-100%); transition:transform .22s; } .sidebar.open { transform:translateX(0); box-shadow:var(--shadow-lg); } .menu-btn { display:grid; } .kpi-row { grid-template-columns:repeat(3,1fr); } .glance { grid-template-columns:1fr; gap:16px; } } @media (max-width:560px) { .kpi-row { grid-template-columns:repeat(2,1fr); } .drawer { width:100%; } }