/* Dialvana dashboard — shared stylesheet.
 *
 * Served at /css/dashboard.css. NOT /css/app.css: express.static mounts site/ before
 * public/, and site/css/app.css (the marketing Tailwind build) would win that path.
 *
 * Extracted from public/index.html, which carried the entire design system inline while
 * login/onboarding/voicetest each re-declared a subset with raw hex literals. Every
 * dashboard page links this file now, so the palette has exactly one definition.
 *
 * The marketing site has its own token set in site/css/tailwind.input.css; the two are
 * deliberately separate systems with matching intent.
 */

:root, :root[data-theme="light"] {
  color-scheme:light;
  --bg:#f5f7fb; --card:#ffffff; --card2:#eef2f9; --line:#e2e8f2; --line2:#d3dcea;
  --txt:#0f1728; --mut:#516079; --dim:#6b7890;
  --acc:#2f6bff; --acc-ink:#1e3a8a; --grn:#15803d; --amb:#b45309; --red:#c81e1e; --pur:#6d28d9;
  --teal:#0f766e; --ind:#4f46e5; --slate:#64748b; --btn-txt:#fff;
  --glow:rgba(47,107,255,.18); --selection:rgba(47,107,255,.22);
  --sh:0 1px 2px rgba(16,23,40,.06); --sh-lg:0 12px 34px rgba(16,23,40,.12); --r:15px;
  --body-glow:#eaf0fb; --header-bg:rgba(255,255,255,.86); --input-bg:#fff; --th-bg:#eef2f9;
  --scroll:#aab6c9; --ghost-hover:#e2e8f2; --row-alt:rgba(15,23,40,.018); --row-hover:rgba(47,107,255,.06);
  --stat-sheen:rgba(255,255,255,.35); --check-bg:rgba(238,242,249,.75); --get-started-line:#9ab8ff;
  --skel1:#e8edf5; --skel2:#d8e0ec; --track:#e8edf5; --modal-bg:rgba(15,23,40,.38);
  --callbar-a:rgba(47,107,255,.10); --callbar-b:rgba(238,242,249,.75); --callbar-line:rgba(47,107,255,.35);
  --badge-bg:#e2e8f0; --badge-txt:#334155; --success-bg:#dcfce7; --success-txt:#166534;
  --admin:#6d28d9; --chart-area-top:#2f6bff; --chart-area-bottom:#2f6bff; --logo-a:#2f6bff; --logo-b:#6d28d9; --logo-filter:brightness(0) saturate(100%) invert(9%) sepia(16%) saturate(1617%) hue-rotate(181deg) brightness(93%);
  --st-new-bg:#dbeafe;--st-new-txt:#1e40af;--st-contacted-bg:#e0e7ff;--st-contacted-txt:#3730a3;
  --st-interested-bg:#dcfce7;--st-interested-txt:#166534;--st-follow-bg:#fef3c7;--st-follow-txt:#92400e;
  --st-quoted-bg:#ede9fe;--st-quoted-txt:#5b21b6;--st-converted-bg:#d1fae5;--st-converted-txt:#065f46;
  --st-lost-bg:#fee2e2;--st-lost-txt:#991b1b;--st-dnc-bg:#ffe4e6;--st-dnc-txt:#9f1239;
  /* shared by the login, onboarding and Test Call pages */
  --link:#2459d3; --shadow:0 20px 60px rgba(16,23,40,.12); --token:#1e3a8a;
  --voice-good-bg:#dcfce7; --voice-good-txt:#166534; --voice-warn-bg:#fef3c7; --voice-warn-txt:#92400e;
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --bg:#0b0f1a; --card:#151c2c; --card2:#1e2740; --line:#27324a; --line2:#36456486;
  --txt:#eef2fb; --mut:#94a2be; --dim:#67748f;
  --acc:#4f8cff; --acc-ink:#dbe7ff; --grn:#22c55e; --amb:#f59e0b; --red:#f2545b; --pur:#a855f7;
  --teal:#2dd4bf; --ind:#7c6cff; --slate:#64748b; --btn-txt:#fff;
  --glow:rgba(79,140,255,.30); --selection:rgba(79,140,255,.32);
  --sh:0 1px 2px rgba(0,0,0,.35); --sh-lg:0 10px 34px rgba(0,0,0,.32); --r:15px;
  --body-glow:#182642; --header-bg:rgba(14,19,32,.82); --input-bg:#0c1120; --th-bg:#111827;
  --scroll:#2c3852; --ghost-hover:#25304c; --row-alt:rgba(255,255,255,.012); --row-hover:rgba(79,140,255,.06);
  --stat-sheen:rgba(255,255,255,.015); --check-bg:rgba(11,15,26,.35); --get-started-line:#38568a;
  --skel1:#1a2338; --skel2:#26314c; --track:#0c1120; --modal-bg:rgba(5,8,15,.62);
  --callbar-a:rgba(79,140,255,.12); --callbar-b:rgba(15,23,42,.4); --callbar-line:rgba(79,140,255,.45);
  --badge-bg:#26314a; --badge-txt:#cbd5e1; --success-bg:#14532d; --success-txt:#bbf7d0;
  --admin:#d8b4fe; --chart-area-top:#4f8cff; --chart-area-bottom:#4f8cff; --logo-a:#4f8cff; --logo-b:#7c9bff; --logo-filter:none;
  --st-new-bg:#1e3a8a;--st-new-txt:#bfdbfe;--st-contacted-bg:#3730a3;--st-contacted-txt:#c7d2fe;
  --st-interested-bg:#166534;--st-interested-txt:#bbf7d0;--st-follow-bg:#854d0e;--st-follow-txt:#fde68a;
  --st-quoted-bg:#5b21b6;--st-quoted-txt:#ddd6fe;--st-converted-bg:#14532d;--st-converted-txt:#86efac;
  --st-lost-bg:#7f1d1d;--st-lost-txt:#fecaca;--st-dnc-bg:#450a0a;--st-dnc-txt:#fca5a5;
  /* shared by the login, onboarding and Test Call pages */
  --link:#8eb4ff; --shadow:0 20px 60px rgba(0,0,0,.32); --token:#bcd1ff;
  --voice-good-bg:rgba(34,197,94,.15); --voice-good-txt:#86efac; --voice-warn-bg:rgba(245,158,11,.15); --voice-warn-txt:#fde68a;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scrollbar-color:var(--scroll) transparent; }
::selection { background:var(--selection); }
body { font:14.5px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif;
  color:var(--txt); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-color:var(--bg); background-image:radial-gradient(1100px 640px at 88% -12%,var(--body-glow) 0%,var(--bg) 52%); background-attachment:fixed; min-height:100vh; }
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:8px;border:2px solid transparent;background-clip:content-box} ::-webkit-scrollbar-track{background:transparent}

/* The app top bar. Scoped to a direct child of <body>: this is a shared stylesheet now, and
 * a bare `header` selector also painted nested <header> elements (onboarding's step title is
 * `<header class="panel-head">`, which picked up the sticky bar's background and blur). */
body > header { background:var(--header-bg); backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--line); padding:11px 22px; display:flex; align-items:center; gap:16px; position:sticky; top:0; z-index:30; }
body > header h1 { font-size:16px; font-weight:750; letter-spacing:-.3px; white-space:nowrap; display:flex; align-items:center; }
body > header h1 img { height:30px; width:auto; display:block; filter:var(--logo-filter); }
body > header h1 span { background:linear-gradient(90deg,var(--logo-a),var(--logo-b)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.tabs { display:flex; gap:3px; margin-left:auto; flex-wrap:wrap; }
.tab { padding:7px 13px; border-radius:9px; cursor:pointer; color:var(--mut); font-weight:600; font-size:13px; border:1px solid transparent; transition:background .15s,color .15s,box-shadow .15s; }
.tab:hover:not(.active){ background:var(--card2); color:var(--txt); }
.tab.active { background:var(--acc); color:var(--btn-txt); box-shadow:0 3px 12px var(--glow); }
main { padding:22px; max-width:1200px; margin:0 auto; }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px; margin-bottom:20px; }
.stat { background:linear-gradient(180deg,transparent,var(--stat-sheen)),var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:15px 17px; box-shadow:var(--sh); transition:transform .15s,border-color .15s; position:relative; overflow:hidden; }
.stat::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:3px; background:var(--sc,var(--acc)); opacity:.9; }
.stat:hover { transform:translateY(-2px); border-color:var(--line2); }
.stat .n { font-size:27px; font-weight:800; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.stat .l { color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.6px; font-weight:600; }

.panel { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:16px; box-shadow:var(--sh); }
.panel h2 { font-size:15px; font-weight:700; letter-spacing:-.2px; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}.panel-head h2{margin:0}.panel-actions{display:flex;gap:8px}
.panel-body:empty{display:none}.eyebrow{color:var(--acc);font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px}
.get-started{border-color:var(--get-started-line);background:linear-gradient(135deg,var(--glow),transparent 55%),var(--card)}
.checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.check-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:11px 13px;color:var(--txt);text-decoration:none;background:var(--check-bg)}.check-item:hover{border-color:var(--acc)}.check-item.done{color:var(--mut)}.check-mark{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;border:1px solid var(--line);color:var(--dim);font-weight:800}.done .check-mark{background:color-mix(in srgb,var(--grn) 14%,transparent);border-color:color-mix(in srgb,var(--grn) 45%,transparent);color:var(--grn)}
.view { display:none; } .view.active { display:block; animation:fade .22s ease both; }
@keyframes fade { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

.table-wrap { width:100%; overflow:auto; border:1px solid var(--line); border-radius:12px; outline:none; }
.table-wrap:focus-visible{box-shadow:0 0 0 3px var(--glow);border-color:var(--acc)}
table { width:100%; border-collapse:separate; border-spacing:0; }
th,td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; }
th { color:var(--dim); background:var(--th-bg); font-size:10.5px; text-transform:uppercase; letter-spacing:.7px; font-weight:700; position:sticky;top:0;z-index:2; }
tbody tr { transition:background .12s; } tbody tr:nth-child(even){background:var(--row-alt)}
tr:hover td { background:var(--row-hover); } tbody tr:last-child td{border-bottom:0}
td b { font-weight:650; }
td.align-right,th.align-right{text-align:right}.cell-sub{font-size:11px;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a{color:var(--acc);text-underline-offset:3px}.hot-lead{color:var(--amb);font-weight:650}

input,select,textarea,button { font:inherit; }
input,select,textarea { background:var(--input-bg); border:1px solid var(--line); color:var(--txt); border-radius:10px; padding:9px 12px; width:100%; transition:border-color .15s,box-shadow .15s; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--acc); box-shadow:0 0 0 3px var(--glow); }
::placeholder { color:var(--dim); }
textarea { resize:vertical; min-height:70px; }
label { display:block; color:var(--mut); font-size:12px; margin:9px 0 4px; font-weight:500; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media(max-width:560px){.row{grid-template-columns:1fr;}}

.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--acc); color:var(--btn-txt); border:none;
  padding:9px 15px; border-radius:10px; cursor:pointer; font-weight:650; font-size:13.5px; box-shadow:var(--sh); transition:transform .12s,filter .12s,box-shadow .12s; }
.btn:hover { filter:brightness(1.08); transform:translateY(-1px); }
.btn:active { transform:translateY(0); filter:brightness(.97); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--glow); }
.btn.sm{ padding:6px 11px; font-size:12px; border-radius:8px; }
.btn.grn{background:var(--grn);} .btn.amb{background:var(--amb);} .btn.red{background:var(--red);}
.btn.gho{ background:var(--card2); color:var(--txt); border:1px solid var(--line); box-shadow:none; }
.btn.gho:hover{ background:var(--ghost-hover); }
.btn:disabled{ opacity:.5; cursor:default; transform:none; filter:none; }

.pill { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.2px; }
.st-new{background:var(--st-new-bg);color:var(--st-new-txt)} .st-contacted{background:var(--st-contacted-bg);color:var(--st-contacted-txt)} .st-interested{background:var(--st-interested-bg);color:var(--st-interested-txt)}
.st-follow_up{background:var(--st-follow-bg);color:var(--st-follow-txt)} .st-quoted{background:var(--st-quoted-bg);color:var(--st-quoted-txt)} .st-converted{background:var(--st-converted-bg);color:var(--st-converted-txt)}
.st-lost{background:var(--st-lost-bg);color:var(--st-lost-txt)} .st-do_not_call{background:var(--st-dnc-bg);color:var(--st-dnc-txt)}

.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media(max-width:800px){.grid2{grid-template-columns:1fr;}}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:16px}.dashboard-grid .panel{margin:0}.recent-panel{grid-column:1/-1}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-input{position:relative;margin:0;display:block}.search-input input{padding-left:34px}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--dim);z-index:1}
.pager{display:flex;gap:12px;align-items:center;justify-content:center}.pager-summary{color:var(--mut);font-size:12px;text-align:center}.pager-summary small{display:block;color:var(--dim)}
.badge{display:inline-flex;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;text-transform:capitalize;background:var(--badge-bg);color:var(--badge-txt)}.badge-success{background:var(--success-bg);color:var(--success-txt)}
.success-note{color:var(--grn);margin-bottom:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.muted{color:var(--mut);} .mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.flex { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.score { font-weight:800; font-variant-numeric:tabular-nums; } .score.hi{color:var(--grn);} .score.mid{color:var(--amb);} .score.lo{color:var(--mut);}
.reason { white-space:pre-wrap; background:var(--input-bg); border:1px solid var(--line); border-radius:10px; padding:11px; margin-top:8px; font-size:13px; }

/* States: empty / loading */
.empty { text-align:center; color:var(--mut); padding:34px 16px; }
.empty .ic { font-size:30px; opacity:.55; display:block; margin-bottom:8px; }
.empty .t { font-weight:600; color:var(--txt); } .empty .s { font-size:13px; margin-top:3px; }
.loading { display:flex; align-items:center; gap:10px; color:var(--mut); padding:18px 4px; }
.spinner { width:16px; height:16px; border:2px solid var(--line2); border-top-color:var(--acc); border-radius:50%; display:inline-block; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Skeleton loaders (shown while panel data is fetching) */
.skel { background:linear-gradient(90deg,var(--skel1) 25%,var(--skel2) 37%,var(--skel1) 63%); background-size:400% 100%;
  animation:shimmer 1.4s ease infinite; border-radius:8px; }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
@media (prefers-reduced-motion: reduce){ .skel{ animation:none; } }
.skel-stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:15px 17px; }
.skeleton-table{border:1px solid var(--line);border-radius:12px;overflow:hidden}.skeleton-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:18px;padding:13px;border-bottom:1px solid var(--line)}.skeleton-row:last-child{border:0}.skeleton-row .skel{height:13px}

/* Dashboard data visualization */
.stat{min-height:138px;padding:18px}.stat::after{content:"";position:absolute;width:90px;height:90px;right:-34px;bottom:-42px;border-radius:50%;background:var(--sc);opacity:.07}
.stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.stat-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;color:var(--sc);background:color-mix(in srgb,var(--sc) 14%,transparent);font-size:16px;font-weight:800}.stat-trend{color:var(--mut);font-size:10.5px;font-weight:650}
.stat .n{color:var(--sc);line-height:1.05;margin-bottom:7px}.segmented{height:12px;display:flex;overflow:hidden;background:var(--track);border-radius:999px;margin:3px 0 18px;box-shadow:inset 0 0 0 1px var(--line)}.segmented span{background:var(--bar);min-width:3px;transition:filter .15s}.segmented span:hover{filter:brightness(1.35)}
.viz-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px}.viz-list>div{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid var(--line)}.viz-dot{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--dot)}.viz-value{font-weight:800;font-variant-numeric:tabular-nums;margin-left:auto}.viz-value small{display:block;color:var(--dim);font-size:9px;text-align:right}
.donut-layout{min-height:172px;display:flex;align-items:center;justify-content:center;gap:28px}.donut{width:136px;height:136px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--amb) calc(var(--pct)*1%),var(--acc) 0);position:relative}.donut::before{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}.donut>div{position:relative;text-align:center}.donut strong{font-size:25px;display:block;font-variant-numeric:tabular-nums}.donut span{font-size:10px;text-transform:uppercase;color:var(--mut);letter-spacing:.06em}.donut-legend{flex:1}.donut-legend>div{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.donut-legend strong{font-variant-numeric:tabular-nums}.viz-dot.hot{background:var(--amb)}.viz-dot.web{background:var(--acc)}.donut-legend p{font-size:12px;color:var(--mut);margin-top:12px}
.analytics-toolbar{margin-bottom:16px}.range-buttons{display:flex;gap:4px;padding:3px;border:1px solid var(--line);border-radius:11px;background:var(--track)}.range-buttons button{border:0;background:transparent;color:var(--mut);padding:6px 10px;border-radius:7px;cursor:pointer;font-size:12px;font-weight:650}.range-buttons button.active{background:var(--acc);color:white}.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.analytics-grid .panel{margin:0}.analytics-wide{grid-column:1/-1}.chart-wrap{min-height:220px}.line-chart{width:100%;height:235px;display:block}.line-chart .grid{stroke:var(--line);stroke-width:1}.line-chart .area{fill:url(#callsArea)}.line-chart .line{fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.line-chart .point{fill:var(--card);stroke:var(--acc);stroke-width:2}.line-chart text{fill:var(--dim);font-size:10px}.bar-list{display:grid;gap:11px}.bar-row{display:grid;grid-template-columns:minmax(95px,1fr) minmax(110px,2fr) 38px;align-items:center;gap:10px;font-size:12px}.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut)}.bar-track{height:9px;border-radius:99px;background:var(--track);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}.bar-fill{height:100%;min-width:2px;border-radius:99px;background:var(--bar,var(--acc))}.bar-count{text-align:right;font-weight:750;font-variant-numeric:tabular-nums}.funnel{display:grid;gap:9px}.funnel-row{display:grid;grid-template-columns:82px 1fr 42px;gap:10px;align-items:center}.funnel-step{height:30px;border-radius:7px;background:linear-gradient(90deg,var(--bar),color-mix(in srgb,var(--bar) 65%,transparent));min-width:3px}.funnel-label{font-size:12px;color:var(--mut);text-transform:capitalize}.analytics-donut{--donut-a:var(--acc);--donut-b:var(--amb);background:conic-gradient(var(--donut-a) calc(var(--pct)*1%),var(--donut-b) 0)}.analytics-donut::before{background:var(--card)}.clickable-row{cursor:pointer}.clickable-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}.detail-list{display:grid;grid-template-columns:130px 1fr;gap:0}.detail-list dt,.detail-list dd{padding:9px 0;border-bottom:1px solid var(--line)}.detail-list dt{color:var(--mut)}.detail-block{margin-top:14px}.detail-block .reason{max-height:220px;overflow:auto}.recording-link{display:inline-flex;margin-top:8px}

.modal-bg { display:none; position:fixed; inset:0; background:var(--modal-bg); backdrop-filter:blur(4px); z-index:50; align-items:center; justify-content:center; padding:20px; animation:fade .18s ease both; }
.modal-bg.on { display:flex; } .modal { background:var(--card); border:1px solid var(--line2); border-radius:18px; padding:24px; width:100%; max-width:640px; max-height:90vh; overflow:auto; box-shadow:var(--sh-lg); }
.close { float:right; cursor:pointer; color:var(--mut); background:transparent; border:0; font-size:22px; line-height:1; transition:color .15s; } .close:hover{ color:var(--txt); }
.callbar { background:linear-gradient(135deg,var(--callbar-a),var(--callbar-b)); border:1px solid var(--callbar-line); border-radius:14px; padding:16px; margin-bottom:16px; }
.theme-toggle{width:36px;height:36px;flex:0 0 auto;padding:0;border-radius:10px;background:var(--card2);color:var(--txt);border:1px solid var(--line);box-shadow:none;font-size:17px}
.theme-toggle:hover{background:var(--ghost-hover)}
.phone { font-size:22px; font-weight:800; color:var(--grn); font-variant-numeric:tabular-nums; }
.telbtn { background:var(--grn); color:var(--btn-txt); padding:10px 18px; border-radius:11px; text-decoration:none; font-weight:700; display:inline-flex; gap:6px; box-shadow:var(--sh); }
.toast { position:fixed; bottom:22px; right:22px; background:var(--card2); border:1px solid var(--line2); box-shadow:var(--sh-lg); padding:12px 18px; border-radius:12px; z-index:100; display:none; font-weight:500; animation:toastIn .2s ease both; }
@keyframes toastIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media(max-width:900px){header{align-items:flex-start;flex-wrap:wrap}.tabs{order:3;width:100%;overflow:auto;flex-wrap:nowrap;margin:0}.tab{white-space:nowrap}.dashboard-grid,.analytics-grid{grid-template-columns:1fr}.analytics-wide{grid-column:auto}}
@media(max-width:600px){main{padding:14px}.stats{grid-template-columns:1fr 1fr;gap:9px}.stat{min-height:120px;padding:14px}.stat .n{font-size:23px}.panel{padding:15px}.viz-list,.checklist{grid-template-columns:1fr}.donut-layout{align-items:stretch;flex-direction:column}.donut{align-self:center}#userBox .mono{display:none}.modal{padding:18px}.toolbar,.toolbar-left,.toolbar-right{align-items:stretch}.toolbar-left,.toolbar-right{width:100%}.toolbar input,.toolbar select,.toolbar button{max-width:none!important;flex:1}.pager{gap:6px}}
@media(max-width:380px){.stats{grid-template-columns:1fr}.stat{min-height:110px}header{padding:10px 14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}