/* Todomon — modern minimalist with futuristic accents */
:root {
  --violet: #7B61FF;
  --violet-2: #5B3FE0;
  --cyan: #00E0FF;
  --cyan-2: #00B4CC;
  --green: #39FF88;
  --pink: #FF61D2;
  --amber: #FFB347;
  --red: #FF5C7A;

  --bg: #FAFAF7;
  --bg-elev: #FFFFFF;
  --bg-soft: #F1F1EE;
  --line: #E6E6E0;
  --line-strong: #D4D4CC;
  --ink-900: #0A0A0F;
  --ink-700: #2C2C36;
  --ink-500: #5B5B66;
  --ink-400: #8A8A95;
  --ink-300: #B0B0BA;

  --grad-aurora: linear-gradient(135deg, #7B61FF 0%, #00E0FF 60%, #39FF88 120%);
  --grad-aurora-dim: linear-gradient(135deg, #7B61FF22 0%, #00E0FF22 60%, #39FF8822 120%);
  --grad-noir: linear-gradient(180deg, #14141B 0%, #0A0A0F 100%);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 0 rgba(0,0,0,.02);
  --sh-md: 0 4px 16px rgba(10,10,15,.06), 0 1px 0 rgba(10,10,15,.03);
  --sh-glow: 0 0 0 1px rgba(123,97,255,.18), 0 8px 30px rgba(123,97,255,.18);

  --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: light;
}

[data-theme="dark"], [data-theme="auto"][data-prefers="dark"] {
  --bg: #0A0A0F;
  --bg-elev: #14141B;
  --bg-soft: #1B1B24;
  --line: #25252F;
  --line-strong: #33333F;
  --ink-900: #F5F5F0;
  --ink-700: #D7D7D0;
  --ink-500: #9A9AA5;
  --ink-400: #707080;
  --ink-300: #4D4D5A;

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 6px 24px rgba(0,0,0,.4);
  --sh-glow: 0 0 0 1px rgba(123,97,255,.35), 0 10px 40px rgba(123,97,255,.25);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* base icon size — without this, SVGs without explicit dimensions render at 300x150 default */
.ico {
  width: 16px;
  height: 16px;
  flex: none;
  display: inline-block;
  vertical-align: -3px;
}
h1 .ico, h2 .ico, h3 .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-900);
  font-feature-settings: "ss01", "cv11";
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

/* subtle animated grid background for futuristic feel — only on dark */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity .4s;
  background-image:
    radial-gradient(circle at 20% 0%, rgba(123,97,255,.10), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(0,224,255,.08), transparent 45%);
}
[data-theme="dark"] body::before, [data-prefers="dark"] body::before { opacity: 1; }

#app { position: relative; z-index: 1; min-height: 100vh; }

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ===== Layout ===== */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
@media (max-width: 880px) { .shell { grid-template-columns: 1fr; } }

.sidebar {
  border-right: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 18px 14px 90px;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
}
@media (max-width: 880px) { .sidebar { display: none; } }

.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 18px;
  font-weight: 600; font-size: 17px;
  letter-spacing: -0.02em;
}
.brand .mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--grad-aurora);
  display: grid; place-items: center;
  box-shadow: var(--sh-glow);
}
.brand .mark .ico { width: 18px; height: 18px; stroke: white; vertical-align: 0; }

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-md);
  color: var(--ink-700);
  font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-item:hover { background: var(--bg-soft); color: var(--ink-900); }
.nav-item.active {
  background: var(--bg-soft);
  color: var(--ink-900);
  border-color: var(--line);
}
.nav-item .ico { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-item .badge {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  background: var(--line); color: var(--ink-700);
  padding: 1px 6px; border-radius: var(--r-pill);
}

.nav-group-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-400); padding: 16px 12px 6px; font-weight: 600;
}

.sidebar-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}

/* main */
.main { padding: 28px 36px 120px; max-width: 1100px; }
@media (max-width: 880px) { .main { padding: 18px 16px 110px; } }

.page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 4px 0 24px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 32px; font-weight: 600; letter-spacing: -0.035em; }
.page-head .sub { color: var(--ink-500); font-size: 14px; margin-top: 4px; }

/* ===== Components ===== */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
}
.card.glow { box-shadow: var(--sh-md); }
.card-title { font-size: 13px; font-weight: 600; color: var(--ink-500); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 10px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--bg-elev);
  color: var(--ink-900); font-size: 14px; font-weight: 500;
  transition: transform .1s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover { background: var(--bg-soft); }
.btn:active { transform: translateY(1px); }
.btn .ico { width: 16px; height: 16px; }
.btn-primary {
  border-color: transparent;
  background: var(--grad-aurora);
  color: white;
  box-shadow: var(--sh-glow);
}
.btn-primary:hover { filter: brightness(1.05); background: var(--grad-aurora); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg-soft); }
.btn-sm { padding: 6px 10px; font-size: 13px; }
.btn-icon { padding: 8px; border-radius: var(--r-md); }
.btn-danger { color: var(--red); border-color: var(--line); }
.btn-danger:hover { background: rgba(255,92,122,.08); border-color: var(--red); }
.btn[disabled] { opacity: .5; pointer-events: none; }

.input, .textarea, .select {
  width: 100%; padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--ink-900);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(123,97,255,.15);
}
.textarea { resize: vertical; min-height: 80px; line-height: 1.5; }

.tag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 3px 8px; border-radius: var(--r-pill);
  background: var(--bg-soft); color: var(--ink-500);
  font-family: var(--font-mono);
}

/* generic chip icon size — applies in t-meta, page-head sub, modals, settings, etc. */
.chip { display: inline-flex; align-items: center; gap: 4px; }
.chip .ico { width: 12px; height: 12px; vertical-align: 0; }
.muted .ico { width: 14px; height: 14px; }

/* ===== Quick Capture (hero) ===== */
.capture {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px;
  position: relative; overflow: hidden;
}
.capture::before {
  content: ""; position: absolute; inset: -1px;
  background: var(--grad-aurora); opacity: 0;
  border-radius: inherit; z-index: -1;
  filter: blur(20px); transition: opacity .3s;
}
.capture:focus-within::before { opacity: .35; }
.capture .row { display: flex; gap: 10px; align-items: center; }
.capture > .row > .ico { width: 20px; height: 20px; }
.capture textarea {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 16px; padding: 6px 4px; min-height: 26px; max-height: 200px;
  resize: none; line-height: 1.5;
}
.capture .hint { color: var(--ink-400); font-size: 12px; margin-top: 6px; padding-left: 4px; }

/* ===== Task list ===== */
.task-list { display: flex; flex-direction: column; gap: 6px; }
.task {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  transition: border-color .15s, background .15s;
}
.task:hover { border-color: var(--line-strong); }
.task.done { opacity: .55; }
.task.done .t-title { text-decoration: line-through; }
.task .t-check {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--ink-300); flex: none;
  display: grid; place-items: center;
  cursor: pointer; transition: border-color .15s, background .15s;
  margin-top: 2px;
}
.task .t-check:hover { border-color: var(--violet); }
.task.done .t-check {
  background: var(--grad-aurora); border-color: transparent;
}
.task.done .t-check::after { content: ""; width: 8px; height: 4px; border-left: 2px solid white; border-bottom: 2px solid white; transform: rotate(-45deg) translate(1px,-1px); }

.task .t-body { flex: 1; min-width: 0; }
.task .t-title { font-size: 14px; font-weight: 500; line-height: 1.4; }
.task .t-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.task .t-meta .chip {
  font-size: 11px; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--bg-soft); color: var(--ink-500);
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
}
.task .t-meta .chip.urgent { background: rgba(255,92,122,.12); color: var(--red); }
.task .t-meta .chip.high { background: rgba(255,179,71,.14); color: #B86E0E; }
[data-theme="dark"] .task .t-meta .chip.high, [data-prefers="dark"] .task .t-meta .chip.high { color: var(--amber); }
.task .t-meta .chip.ai {
  background: var(--grad-aurora-dim);
  color: var(--violet);
  border: 1px solid rgba(123,97,255,.2);
}
.task .t-meta .chip .ico { width: 11px; height: 11px; vertical-align: -1px; }

.task .t-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.task:hover .t-actions { opacity: 1; }
.task .t-actions button {
  background: transparent; border: 0; color: var(--ink-400);
  padding: 4px; border-radius: var(--r-sm); cursor: pointer;
}
.task .t-actions button:hover { background: var(--bg-soft); color: var(--ink-900); }
.task .t-actions .ico { width: 14px; height: 14px; }

/* ===== Stat tiles ===== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-tile {
  padding: 16px; border-radius: var(--r-lg);
  background: var(--bg-elev); border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.stat-tile .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-500); }
.stat-tile .val { font-family: var(--font-mono); font-size: 32px; font-weight: 500; letter-spacing: -0.04em; margin-top: 4px; }
.stat-tile .ico-bg { position: absolute; right: 14px; top: 14px; opacity: .4; }
.stat-tile .ico-bg .ico { width: 22px; height: 22px; stroke: var(--violet); vertical-align: 0; }

/* ===== Plan card ===== */
.plan-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative; overflow: hidden;
  margin-bottom: 20px;
}
.plan-card::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(123,97,255,.18), transparent 60%);
  pointer-events: none;
}
.plan-card h3 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.025em; }
.plan-card .summary { color: var(--ink-700); font-size: 14.5px; line-height: 1.6; }

/* ===== Modals & sheets ===== */
.overlay {
  position: fixed; inset: 0; background: rgba(10,10,15,.55);
  backdrop-filter: blur(4px);
  display: grid; place-items: center;
  z-index: 100; padding: 16px;
  animation: fadein .15s ease-out;
}
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px; max-width: 460px; width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  animation: pop .2s ease-out;
}
.modal h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.025em; }
.modal p { color: var(--ink-500); font-size: 14px; margin: 0 0 16px; }
.modal-row { display: flex; gap: 8px; margin-top: 16px; justify-content: flex-end; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* toast */
.toast-stack { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 200; }
.toast {
  background: var(--bg-elev); border: 1px solid var(--line);
  padding: 10px 14px; border-radius: var(--r-md);
  box-shadow: var(--sh-md); font-size: 13.5px;
  min-width: 240px;
  animation: slidein .2s ease-out;
}
.toast.err { border-color: var(--red); color: var(--red); }
.toast.ok { border-color: var(--green); }
@keyframes slidein { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ===== Auth screen ===== */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(circle at 0% 0%, rgba(123,97,255,.10), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(0,224,255,.10), transparent 40%),
    var(--bg);
}
.auth-card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 32px;
  width: 100%; max-width: 400px;
  box-shadow: var(--sh-md);
}
.auth-card .brand { padding: 0 0 16px; font-size: 22px; }
.auth-card h1 { margin: 12px 0 6px; font-size: 26px; letter-spacing: -0.03em; font-weight: 600; }
.auth-card p { color: var(--ink-500); font-size: 14px; margin: 0 0 18px; }
.auth-card .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.auth-card label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-500); font-weight: 500; }
.auth-card .switch { text-align: center; margin-top: 16px; font-size: 13px; color: var(--ink-500); }
.auth-card .switch a { color: var(--violet); cursor: pointer; font-weight: 500; }

/* landing */
.landing-hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 20% 10%, rgba(123,97,255,.12), transparent 45%),
    radial-gradient(circle at 80% 80%, rgba(0,224,255,.10), transparent 50%),
    var(--bg);
}
.landing-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1200px; width: 100%; margin: 0 auto;
}
@media (max-width: 700px) { .landing-nav { padding: 16px 20px; } }
.landing-hero .hero-inner {
  flex: 1; display: grid; place-items: center;
  padding: 40px 32px 80px;
  max-width: 1200px; width: 100%; margin: 0 auto;
}
.landing-hero h1 {
  font-size: clamp(40px, 7vw, 84px); line-height: 1.02;
  margin: 0 0 16px; letter-spacing: -0.045em; font-weight: 600;
  text-align: center;
}
.landing-hero h1 .grad {
  background: var(--grad-aurora);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.landing-hero .tagline {
  font-size: clamp(16px, 2vw, 20px); color: var(--ink-500);
  text-align: center; max-width: 640px; margin: 0 auto 32px;
  line-height: 1.55;
}
.landing-hero .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1200px; margin: 0 auto; padding: 60px 32px; }
.feat {
  padding: 24px; border-radius: var(--r-lg);
  background: var(--bg-elev); border: 1px solid var(--line);
  transition: transform .2s, border-color .2s;
}
.feat:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.feat .icon-box {
  width: 44px; height: 44px; border-radius: var(--r-md);
  background: var(--grad-aurora-dim);
  display: grid; place-items: center;
  margin-bottom: 14px;
  border: 1px solid rgba(123,97,255,.2);
}
.feat .icon-box .ico { width: 22px; height: 22px; stroke: var(--violet); vertical-align: 0; }
.feat h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.02em; }
.feat p { margin: 0; color: var(--ink-500); font-size: 14px; line-height: 1.55; }

/* ===== Tabs ===== */
.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tab {
  padding: 10px 14px; cursor: pointer; font-size: 14px;
  color: var(--ink-500); font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--ink-900); }
.tab.active { color: var(--ink-900); border-bottom-color: var(--violet); }

/* ===== Floating Action Button (mobile) ===== */
.fab {
  position: fixed; bottom: 88px; right: 18px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-aurora); color: white;
  border: none; box-shadow: var(--sh-glow);
  display: grid; place-items: center;
  z-index: 50;
}
.fab .ico { width: 22px; height: 22px; }
@media (min-width: 881px) { .fab { display: none; } }

/* ===== Mobile bottom nav ===== */
.mob-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bg-elev);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(env(safe-area-inset-bottom, 0) + 6px);
  z-index: 40;
  justify-content: space-around;
}
@media (max-width: 880px) { .mob-nav { display: flex; } }
.mob-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 7px 4px; border-radius: var(--r-md);
  color: var(--ink-500); font-size: 11px; font-weight: 500;
}
.mob-nav a.active { color: var(--violet); }
.mob-nav a .ico { width: 22px; height: 22px; vertical-align: 0; }

/* ===== Energy slider ===== */
.energy-row { display: flex; gap: 8px; align-items: center; }
.energy-pill {
  flex: 1; padding: 10px 0; text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; font-family: var(--font-mono);
  transition: all .15s;
}
.energy-pill:hover { border-color: var(--line-strong); }
.energy-pill.sel {
  background: var(--grad-aurora); color: white;
  border-color: transparent;
}

/* code/token */
.code-box {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-soft); padding: 8px 12px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  display: inline-block;
}

/* table */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: left; font-weight: 600; color: var(--ink-500); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table td { padding: 12px; border-bottom: 1px solid var(--line); }
.table tr:hover td { background: var(--bg-soft); }

/* misc */
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.flex-1 { flex: 1; min-width: 0; }
.muted { color: var(--ink-500); font-size: 13px; }
.center { text-align: center; }
.empty {
  padding: 48px 20px; text-align: center; color: var(--ink-500);
  font-size: 14px;
}
.empty .ico { width: 48px; height: 48px; stroke: var(--ink-300); margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; vertical-align: 0; }

/* loading dots */
.dots { display: inline-flex; gap: 3px; align-items: center; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bounce 1.2s infinite; }
.dots span:nth-child(2) { animation-delay: .15s; }
.dots span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }

/* focus mode timer */
.focus-screen {
  position: fixed; inset: 0; z-index: 90;
  background: var(--grad-noir); color: var(--ink-900);
  display: grid; place-items: center;
  text-align: center; padding: 32px;
}
[data-theme="light"] .focus-screen, .focus-screen { color: white; }
.focus-screen .focus-task { font-size: 20px; opacity: .9; margin-bottom: 20px; }
.focus-screen .focus-time {
  font-family: var(--font-mono); font-size: clamp(80px, 18vw, 200px);
  font-weight: 500; letter-spacing: -0.06em; line-height: 1;
  background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.focus-screen .focus-actions { margin-top: 36px; display: flex; gap: 12px; justify-content: center; }
.focus-screen .btn { background: rgba(255,255,255,.08); color: white; border-color: rgba(255,255,255,.18); }
.focus-screen .btn:hover { background: rgba(255,255,255,.14); }

/* chat */
.chat-wrap { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.chat-msg { padding: 12px 16px; border-radius: var(--r-lg); max-width: 85%; line-height: 1.55; font-size: 14.5px; white-space: pre-wrap; }
.chat-msg.user { align-self: flex-end; background: var(--grad-aurora); color: white; }
.chat-msg.ai { align-self: flex-start; background: var(--bg-elev); border: 1px solid var(--line); }

/* admin */
.admin-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }

/* utility */
.divider { height: 1px; background: var(--line); margin: 16px 0; }
.scroll-x { overflow-x: auto; }