:root {
      --sans: "Outfit", "Segoe UI", system-ui, sans-serif;
      --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      --radius: 16px;
      --shadow: 0 18px 50px rgba(8, 10, 18, 0.28);
      --ease: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    html[data-theme="dark"] {
      color-scheme: dark;
      --bg: #111b27;
      --bg-2: #182636;
      --surface: rgba(28, 44, 62, 0.82);
      --surface-solid: #1b2a3a;
      --surface-2: #24374b;
      --line: rgba(220, 234, 247, 0.1);
      --line-strong: rgba(220, 234, 247, 0.18);
      --text: #f1f6fb;
      --muted: #a8bacb;
      --faint: #8296aa;
      --accent: #55a0d8;
      --accent-2: #327bb5;
      --accent-ink: #fff;
      --ok: #3dd68c;
      --warn: #f0c14b;
      --bad: #ff7a86;
      --chip: rgba(85, 160, 216, 0.17);
      --glow: radial-gradient(1000px 600px at 52% 15%, rgba(54, 119, 169, 0.22), transparent 62%),
              radial-gradient(900px 520px at 88% 90%, rgba(43, 94, 143, 0.16), transparent 58%);
      --input: #152231;
      --code: #1b2b3a;
    }
    html[data-theme="light"] {
      color-scheme: light;
      --bg: #edf3f8;
      --bg-2: #f7fafd;
      --surface: rgba(255, 255, 255, 0.76);
      --surface-solid: #fbfdff;
      --surface-2: #f1f6fa;
      --line: rgba(43, 72, 99, 0.1);
      --line-strong: rgba(43, 72, 99, 0.17);
      --text: #1c2b3a;
      --muted: #617487;
      --faint: #8192a2;
      --accent: #246b9f;
      --accent-2: #3987bd;
      --accent-ink: #ffffff;
      --ok: #128a55;
      --warn: #9a6b00;
      --bad: #c4334a;
      --chip: rgba(36, 107, 159, 0.1);
      --glow: radial-gradient(980px 560px at 50% 20%, rgba(124, 177, 214, 0.28), transparent 62%),
              radial-gradient(900px 520px at 86% 88%, rgba(92, 151, 195, 0.18), transparent 58%),
              linear-gradient(135deg, #f7fafd 0%, #e8f0f6 48%, #f3f7fb 100%);
      --input: rgba(255, 255, 255, 0.9);
      --code: #edf3f8;
      --shadow: 0 16px 40px rgba(34, 65, 91, 0.09);
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    html { transition: color 180ms ease, background-color 180ms ease; }
    body {
      margin: 0;
      font-family: var(--sans);
      background: var(--bg);
      color: var(--text);
      letter-spacing: -0.01em;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: var(--glow);
      pointer-events: none;
      z-index: 0;
    }
    .app {
      position: relative;
      z-index: 1;
      min-height: 100%;
      display: grid;
      grid-template-columns: 248px 1fr;
    }
    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 22px 16px;
      border-right: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg-2) 88%, transparent);
      backdrop-filter: blur(18px);
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 0 8px;
    }
    .mark {
      width: 36px;
      height: 36px;
      border-radius: 11px;
      background:
        linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
      display: grid;
      place-items: center;
      color: var(--accent-ink);
      font-weight: 700;
      font-size: 0.92rem;
    }
    .brand h1 {
      margin: 0;
      font-size: 1.05rem;
      font-weight: 600;
      letter-spacing: -0.03em;
    }
    .brand small {
      display: block;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 500;
      margin-top: 1px;
    }
    .nav { display: flex; flex-direction: column; gap: 4px; }
    .nav button {
      width: 100%;
      text-align: left;
      background: transparent;
      color: var(--muted);
      border: 0;
      border-radius: 12px;
      padding: 10px 12px;
      font: 500 0.92rem var(--sans);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: background var(--ease), color var(--ease);
    }
    .nav button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
    .nav button.active {
      background: var(--chip);
      color: var(--text);
    }
    .nav svg { width: 18px; height: 18px; flex: none; opacity: 0.9; }
    .side-foot {
      margin-top: auto;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: var(--surface);
    }
    .side-foot p { margin: 0; font-size: 0.75rem; color: var(--muted); line-height: 1.45; }
    .workspace { min-width: 0; display: flex; flex-direction: column; }
    header.top {
      position: sticky;
      top: 0;
      z-index: 8;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 16px 22px;
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--bg) 78%, transparent);
      backdrop-filter: blur(16px);
    }
    .pills { display: flex; gap: 8px; flex-wrap: wrap; }
    .pill {
      font-size: 0.74rem;
      font-weight: 550;
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      background: var(--surface);
    }
    .pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
    .pill.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
    .pill.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
    .top-actions { display: flex; gap: 8px; align-items: center; }
    .icon-btn, button.secondary, button.primary, .btn-sm {
      border: 0;
      cursor: pointer;
      font-family: var(--sans);
      font-weight: 600;
      transition: transform var(--ease), opacity var(--ease), background var(--ease);
    }
    .icon-btn {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--line);
    }
    .icon-btn:hover, button.secondary:hover { background: var(--surface-2); }
    button.primary {
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      color: var(--accent-ink);
      border-radius: 12px;
      padding: 10px 16px;
    }
    button.primary:hover { transform: translateY(-1px); }
    button.secondary, a.btn-sm {
      background: var(--surface-2);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 14px;
    }
    button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
    main.views { padding: 22px; display: grid; gap: 16px; }
    .view { display: none; gap: 16px; }
    .view.active { display: grid; }
    .grid-2 { grid-template-columns: 1.15fr 0.85fr; }
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      min-width: 0;
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }
    .card h2 {
      margin: 0 0 4px;
      font-size: 1.05rem;
      letter-spacing: -0.03em;
    }
    .lede { margin: 0 0 14px; color: var(--muted); font-size: 0.86rem; }
    label { display: block; font-size: 0.78rem; color: var(--muted); margin: 10px 0 6px; font-weight: 550; }
    input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=search], input[type=number], textarea, select {
      width: 100%;
      background: var(--input);
      color: var(--text);
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      padding: 11px 12px;
      font: 0.95rem var(--sans);
      outline: none;
    }
    textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
    input:focus, textarea:focus, select:focus {
      border-color: color-mix(in srgb, var(--accent) 70%, var(--line-strong));
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
    table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
    th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
    th { color: var(--faint); font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
    tr:hover td { background: color-mix(in srgb, var(--text) 3%, transparent); }
    .state-queued { color: var(--warn); font-weight: 600; }
    .state-running { color: var(--accent); font-weight: 600; }
    .state-succeeded { color: var(--ok); font-weight: 600; }
    .state-failed { color: var(--bad); font-weight: 600; }
    pre, .log, .answer-body {
      background: var(--code);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 14px 16px;
      overflow: auto;
      max-height: 320px;
      font: 0.78rem/1.5 var(--mono);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .answer-body {
      max-height: none;
      font: 1rem/1.65 var(--sans);
    }
    .wide { grid-column: 1 / -1; }
    a { color: var(--accent); }
    code { font-family: var(--mono); font-size: 0.84em; }
    .err { color: var(--bad); font-size: 0.85rem; min-height: 1.2em; }
    .hint { color: var(--muted); font-size: 0.8rem; margin-top: 8px; }
    .empty { color: var(--muted); text-align: center; padding: 22px 8px !important; }
    .dropzone {
      border: 1.5px dashed var(--line-strong);
      border-radius: 16px;
      padding: 28px 18px;
      text-align: center;
      background: var(--surface-2);
      cursor: pointer;
      transition: border-color var(--ease), background var(--ease);
    }
    .dropzone.drag { border-color: var(--accent); background: var(--chip); }
    .dropzone strong { display: block; margin-bottom: 4px; }
    .answer-meta {
      display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
      margin: 4px 0 12px; color: var(--muted); font-size: 0.8rem;
    }
    .answer-body h2, .answer-body h3, .answer-body h4 {
      margin: 0 0 10px;
      letter-spacing: -0.02em;
      text-transform: none;
      color: var(--text);
      font-size: 1.08rem;
    }
    .answer-body h3 { font-size: 1rem; color: var(--muted); }
    .answer-body p { margin: 0 0 10px; }
    .answer-body { counter-reset: answer-ol; }
    .answer-body ul, .answer-body ol { margin: 0 0 12px; padding-left: 1.25rem; }
    .answer-body ol { list-style: none; padding-left: 1.6rem; }
    .answer-body ol > li {
      position: relative;
    }
    .answer-body ol > li::before {
      content: counter(answer-ol) ".";
      counter-increment: answer-ol;
      position: absolute;
      left: -1.4rem;
      font-weight: 650;
    }
    .answer-body li { margin: 0 0 6px; }
    .answer-body code {
      font: 0.85em var(--mono);
      background: var(--surface-2);
      padding: 1px 5px;
      border-radius: 6px;
    }
    .answer-body .katex { color: var(--text); font-size: 1.06em; }
    .answer-body .katex-display {
      margin: 0.85em 0;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 4px 0;
    }
    a.cite-ref, button.cite-ref {
      display: inline-block;
      background: var(--chip);
      color: var(--accent);
      border: 0;
      border-radius: 999px;
      padding: 0 7px;
      margin: 0 2px;
      font: 0.75rem var(--mono);
      font-weight: 700;
      cursor: pointer;
      vertical-align: baseline;
      line-height: 1.5;
      text-decoration: none;
    }
    .cite-ref.pending { cursor: default; opacity: 0.7; }
    .cite-list { display: grid; gap: 8px; margin-top: 12px; }
    .cite-card {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: start;
      background: var(--code);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 12px;
    }
    .cite-card .btn-sm, a.btn-sm {
      padding: 7px 10px;
      font-size: 0.78rem;
      text-decoration: none;
      display: inline-block;
    }
    .ask-options { align-items: center; gap: 16px; flex-wrap: wrap; }
    .answer-comparison { display: grid; gap: 16px; }
    .answer-comparison.compare-active { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .answer-comparison [hidden] { display: none !important; }
    @media (max-width: 1100px) { .answer-comparison.compare-active { grid-template-columns: 1fr; } }
    .hero-ask {
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%),
        var(--surface);
    }
    .page-title { margin: 0 0 16px; }
    .page-title h2 { font-size: 1.45rem; margin: 0; }
    .streaming::after {
      content: "▍";
      color: var(--accent);
      animation: blink 1s step-end infinite;
    }
    @keyframes blink { 50% { opacity: 0; } }
    .sun { display: none; }
    .eval-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
    .eval-controls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
    .metric-grid { display:grid; grid-template-columns:repeat(6,minmax(110px,1fr)); gap:10px; margin:14px 0; }
    .metric { padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
    .metric strong { display:block; font-size:1.35rem; margin-top:5px; }
    .metric span { color:var(--muted); font-size:.75rem; }
    .bar-row { display:grid; grid-template-columns:160px 1fr 52px; gap:10px; align-items:center; margin:9px 0; font-size:.82rem; }
    .bar { height:9px; border-radius:8px; background:var(--line-strong); overflow:hidden; }
    .bar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width 650ms ease; }
    .trace { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0; }
    .trace-step { border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:var(--surface-2); animation:traceIn 320ms both; }
    .trace-step b { display:block; font-size:.76rem; }
    .trace-step span { color:var(--muted); font-size:.72rem; }
    .trace-step.active { border-color:var(--accent); box-shadow:0 0 0 2px var(--chip); }
    @keyframes traceIn { from { opacity:0; transform:translateY(5px) } to {opacity:1;transform:none} }
    .question-row { cursor:pointer; }
    .evidence-card { border:1px solid var(--line); border-radius:12px; padding:12px; margin:9px 0; }
    .evidence-card p { white-space:pre-wrap; font-size:.84rem; line-height:1.5; margin:8px 0 0; }
    .eval-progress[hidden] { display:none !important; }
    .eval-progress-track { height:12px; border-radius:10px; background:var(--line-strong); overflow:hidden; margin:14px 0 8px; }
    .eval-progress-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width 700ms cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden; }
    .eval-progress-fill.running::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.38) 50%,transparent 80%); background-size:220% 100%; animation:evalShimmer 1.25s linear infinite; }
    @keyframes evalShimmer { from { background-position:100% 0 } to { background-position:-120% 0 } }
    @media(max-width:900px) { .eval-grid,.eval-controls {grid-template-columns:1fr} .metric-grid {grid-template-columns:repeat(2,minmax(0,1fr))} .bar-row {grid-template-columns:minmax(90px,115px) minmax(0,1fr) 42px} }
    html[data-theme="light"] .moon { display: none; }
    html[data-theme="light"] .sun { display: block; }
    @media (max-width: 1100px) {
      .app { grid-template-columns: 1fr; }
      .sidebar {
        position: sticky;
        z-index: 9;
        top: 0;
        height: auto;
        padding: 12px 16px 10px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        gap: 12px;
      }
      .brand small, .side-foot { display: none; }
      .nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; scrollbar-width: thin; }
      .nav button { white-space: nowrap; width: auto; flex: 0 0 auto; padding: 9px 11px; }
      .side-foot { display: none; }
      .grid-2 { grid-template-columns: 1fr; }
      header.top { top: 93px; }
    }
    @media (max-width: 700px) {
      .sidebar { padding: 10px 12px 8px; gap: 8px; }
      .brand { padding: 0 4px; }
      .brand h1 { font-size: .96rem; }
      .nav { gap: 2px; margin: 0 -4px; }
      .nav button { padding: 8px 10px; font-size: .84rem; }
      .nav svg { width: 17px; height: 17px; }
      header.top { position: relative; top: auto; align-items: flex-start; flex-direction: column; gap: 10px; padding: 12px; }
      .pills { gap: 6px; }
      .pill { padding: 4px 8px; font-size: .69rem; }
      .top-actions { width: 100%; }
      .top-actions button.secondary { flex: 1; }
      main.views { padding: 14px 12px 20px; gap: 12px; }
      .view, .view.active { gap: 12px; }
      .card { padding: 14px; border-radius: 14px; }
      .page-title h2 { font-size: 1.25rem; }
      .answer-comparison.compare-active { grid-template-columns: minmax(0,1fr); }
      .row > input, .row > select { flex: 1 1 100%; min-width: 0; }
      .row > button, .row > .btn-sm { max-width: 100%; }
      .ask-options > button { flex: 1 1 100%; }
      .cite-card { grid-template-columns: 1fr; }
      .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
      .bar-row { grid-template-columns: 1fr 42px; gap: 6px; }
      .bar-row .bar { grid-column: 1 / -1; grid-row: 2; }
      .eval-progress > .row { align-items: flex-start; }
      table { min-width: 560px; }
      .login-shell { padding: 16px; }
      .login-card { padding: 22px 18px; }
    }
    @media (max-width: 380px) {
      .brand h1 { font-size: .88rem; }
      .nav button { gap: 7px; padding: 8px; font-size: .79rem; }
      .top-actions { gap: 6px; }
      .top-actions button.secondary { padding: 9px 10px; font-size: .82rem; }
      .metric { padding: 10px; }
      .metric strong { font-size: 1.1rem; }
    }

.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; z-index:1; }
.login-card { width:min(420px,100%); display:grid; gap:12px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-solid); box-shadow:var(--shadow); }
.login-card h1 { margin:4px 0 0; font-size:1.5rem; }
.login-card .err { min-height:1em; }
body.authenticated .login-shell { display:none; }
body:not(.authenticated) .app { display:none; }
.widget-list { display:grid; gap:10px; min-width:0; }
.widget-item { min-width:0; padding:12px; border:1px solid var(--line); border-radius:12px; }
.widget-item p { margin:4px 0; color:var(--muted); overflow-wrap:anywhere; }
.widget-item code { overflow-wrap:anywhere; }
.widget-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.widget-item label { display:block; margin:8px 0; }
.ask-document-row { display:grid; grid-template-columns:auto minmax(180px, 320px) 1fr; align-items:center; gap:10px; margin:0 0 16px; }
.ask-document-row label { margin:0; color:var(--muted); font-size:.88rem; }
.ask-document-row select { min-width:0; }
.ask-document-row .hint { margin:0; }
@media (max-width:700px) { .ask-document-row { grid-template-columns:1fr; gap:6px; } }

/* Blue glass visual system */
body { background-color: var(--bg); }
body::before { opacity: .95; }
.sidebar {
  background: color-mix(in srgb, var(--bg-2) 76%, transparent);
  border-right-color: color-mix(in srgb, var(--accent) 12%, var(--line));
}
.brand .mark {
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #a8d8f3 0, #438fc4 32%, #205d91 72%);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 8%, transparent), 0 8px 25px color-mix(in srgb, var(--accent) 42%, transparent);
}
.nav { gap: 6px; }
.nav button { border-radius: 999px; padding: 11px 13px; }
.nav button.active {
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 15%, transparent), color-mix(in srgb, var(--accent-2) 9%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}
header.top { border-bottom-color: color-mix(in srgb, var(--accent) 10%, var(--line)); }
.pill, .icon-btn, button.primary, button.secondary, a.btn-sm { border-radius: 999px; }
.icon-btn { width: 42px; height: 42px; }
.icon-btn:hover, button.secondary:hover, a.btn-sm:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line-strong));
  color: var(--accent);
}
button:focus-visible, a.btn-sm:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}
button.primary {
  background: linear-gradient(115deg, #317fb4, #246b9f 65%, #1d557f);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 23%, transparent);
}
button.primary:hover { box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 32%, transparent); }
.card {
  border-color: color-mix(in srgb, var(--accent) 9%, var(--line));
  border-radius: 20px;
  box-shadow: 0 16px 42px rgba(34, 65, 91, .075);
}
.hero-ask {
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 67%),
    var(--surface);
}
input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=search], input[type=number], textarea, select {
  border-radius: 15px;
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line-strong));
}
.login-shell {
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 54%);
}
.login-shell::before, .login-shell::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px);
}
.login-shell::before {
  width: 420px; height: 420px; top: -180px; right: -110px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 69%);
}
.login-shell::after {
  width: 520px; height: 520px; bottom: -300px; left: -190px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 68%);
}
.login-card {
  position: relative; z-index: 1; width: min(440px, 100%); gap: 10px;
  padding: 38px; border-radius: 26px; background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  backdrop-filter: blur(24px); box-shadow: 0 28px 80px rgba(34, 65, 91, .16);
}
.login-card h1 { margin-top: 8px; font-size: 1.8rem; letter-spacing: -.045em; }
.login-card .lede { margin-bottom: 8px; }
.login-card label { margin-top: 8px; }
.login-card button.primary { margin-top: 10px; min-height: 46px; }
.widget-item { border-radius: 16px; background: color-mix(in srgb, var(--surface-2) 65%, transparent); }
.dropzone { border-radius: 20px; }
@media (max-width:700px) {
  .login-card { padding: 28px 22px; }
  .nav button { border-radius: 999px; }
}