:root {
  /* Shidoka brand foundation (Kyndryl Design System), resolved from the
     Shidoka Studio MCP's DESIGN.md brand snapshot. This app has no
     installed @kyndryl-design-system package (see design spec addendum),
     so these are baked-in resolved values, not live Foundation CSS
     custom properties. Foundation lineage noted per DESIGN.md's own
     provenance convention - if this app ever gains a real Shidoka
     install, migrate to the matching semantic --kd-color-* tokens
     instead of copying these hex values forward. */
  --shidoka-primary: #2f808c;          /* Foundation lineage: --kd-color-spruce-50 */
  --shidoka-primary-hover: #215763;
  --shidoka-primary-pressed: #193d4b;
  --shidoka-on-primary: #ffffff;
  --shidoka-secondary: #ddf0f3;
  --shidoka-destructive: #891000;
  --shidoka-page: #fcfcfc;
  --shidoka-surface: #ffffff;
  --shidoka-surface-subtle: #f6f7f9;
  --shidoka-border: #dcdad8;
  --shidoka-focus: #3797a4;
  --shidoka-text: #3d3c3c;
  --shidoka-text-secondary: #6d6d6d;
  --shidoka-text-tertiary: #4f555b;
  --shidoka-link: #29707a;
  --shidoka-link-hover: #215763;

  --shidoka-font-base: "TWK Everett", Helvetica, Arial, sans-serif;
  --shidoka-font-mono: "Roboto Mono", monospace;

  /* Type scale (size/weight/line-height per DESIGN.md role) - previously
     only font-family was applied anywhere in this file; size/weight were
     ad hoc per selector and line-height was never set at all, which is
     likely why the page read as "generically styled" rather than
     specifically Shidoka - type rhythm carries as much brand identity as
     color does. */
  /* px, not rem: DESIGN.md's rem values assume a 16px root, but this
     page's :root font-size is 15px (a pre-existing app-wide choice,
     unrelated to Shidoka, left as-is here since changing it would resize
     text across the whole app, not just where these tokens are used).
     rem is always relative to the root element regardless of nesting, so
     px is the only way to keep these exact without that global change. */
  --shidoka-h3-size: 28px; --shidoka-h3-weight: 700; --shidoka-h3-line: 36px;
  --shidoka-title-size: 20px; --shidoka-title-weight: 500; --shidoka-title-line: 28px;
  --shidoka-body-size: 16px; --shidoka-body-weight: 400; --shidoka-body-line: 24px;
  --shidoka-body-sm-size: 14px; --shidoka-body-sm-weight: 400; --shidoka-body-sm-line: 18px;
  --shidoka-label-size: 14px; --shidoka-label-weight: 500; --shidoka-label-line: 18px;
  --shidoka-caption-size: 12px; --shidoka-caption-weight: 400; --shidoka-caption-line: 16px;

  /* Elevation (DESIGN.md gives offset/blur only, not a shadow color/alpha -
     tinting from --shidoka-text via color-mix, consistent with how this
     file already derives status-pill tints, rather than inventing a fresh
     rgba value). Level 2 = cards/widgets/menus per DESIGN.md. */
  --shidoka-elevation-2: 0 2px 8px color-mix(in srgb, var(--shidoka-text) 12%, transparent);

  --shidoka-space-3xs: 2px;
  --shidoka-space-2xs: 4px;
  --shidoka-space-xs: 8px;
  --shidoka-space-sm: 12px;
  --shidoka-space-md: 16px;
  --shidoka-space-lg: 24px;
  --shidoka-space-xl: 32px;
  --shidoka-space-2xl: 48px;

  --shidoka-radius-sm: 4px;
  --shidoka-radius-md: 8px;
  --shidoka-radius-lg: 12px;
  --shidoka-radius-pill: 9999px;

  /* App-specific accent colors distinguishing the three comparison modes
     (raw / spec / regen). NOT part of the Shidoka brand snapshot - DESIGN.md
     has no data-visualization categorical palette - chosen to read clearly
     against Shidoka's light surface while staying in the same calm,
     restrained register as the brand palette above. */
  --app-accent-raw: #0b6a99;
  --app-accent-spec: #9a6108;
  --app-accent-regen: #6b4fa0;

  /* App's internal semantic aliases - every rule below this block in the
     file references these names, not the brand-foundation names directly,
     so this is the only place that needs to change if the brand
     foundation above is ever updated. DESIGN.md defines a brand palette
     plus one destructive color, not a full success/warning/error status
     system, so --good/--mid are app-specific choices (disclosed below);
     --bad reuses the real Shidoka destructive color, which does match. */
  --bg: var(--shidoka-page);
  --bg2: var(--shidoka-surface-subtle);
  --card: var(--shidoka-surface);
  --card2: var(--shidoka-surface-subtle);
  --line: var(--shidoka-border);
  --text: var(--shidoka-text);
  --muted: var(--shidoka-text-tertiary);
  --raw: var(--app-accent-raw);
  --spec: var(--app-accent-spec);
  --regen: var(--app-accent-regen);
  --good: #1a7f37;    /* app-specific status green - not in the Shidoka brand snapshot */
  --mid: var(--app-accent-spec);  /* reuse the amber data-accent for "warning" - same visual register */
  --bad: var(--shidoka-destructive);
  --accent: var(--shidoka-primary);
  font-size: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--shidoka-font-base);
  min-height: 100vh;
}
main { max-width: 1280px; margin: 0 auto; padding: 0 20px 60px; }

/* ---------- header ---------- */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--shidoka-space-md) var(--shidoka-space-lg);
  border-bottom: 1px solid var(--line);
  background: var(--shidoka-surface);
}
.app-header-name {
  font-family: var(--shidoka-font-base); font-weight: 700; font-size: 1.25rem;
  color: var(--text);
}
.app-header-actions { display: flex; align-items: center; gap: var(--shidoka-space-md); }
.app-header-signout {
  font-family: var(--shidoka-font-base); font-size: 0.875rem;
  color: var(--shidoka-link); text-decoration: none;
}
.app-header-signout:hover { color: var(--shidoka-link-hover); text-decoration: underline; }

.statusbar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: var(--shidoka-space-sm) 20px;
}
.pill {
  font-family: var(--shidoka-font-mono); font-size: .7rem;
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; color: var(--muted);
  background: var(--bg2);
}
.pill.ok { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--shidoka-surface)); }
.pill.warn { color: var(--mid); border-color: var(--mid); background: color-mix(in srgb, var(--mid) 12%, var(--shidoka-surface)); }
.pill.err { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--shidoka-surface)); }
.ghost-btn {
  background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 8px;
  padding: 5px 11px; font-size: .72rem; cursor: pointer; font-family: inherit;
  transition: all .18s;
}
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }

/* ---------- ask panel ---------- */
.ask-panel { margin: 28px 0 20px; }
#ask-form textarea {
  width: 100%; resize: vertical; background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font: inherit;
  font-size: 1.02rem; outline: none; transition: border-color .2s, box-shadow .2s;
}
#ask-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shidoka-focus) 35%, transparent); }
.ask-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; }
.samples { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.chip {
  background: var(--bg2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 6px 12px; font-size: .74rem; cursor: pointer; font-family: inherit;
  transition: all .18s;
}
.chip:hover { color: var(--text); border-color: var(--raw); transform: translateY(-1px); }
.ask-btn {
  /* button-primary component: bg=primary, text=on-primary, typography=label,
     radius=sm. DESIGN.md's padding value is "12px" (likely uniform in its
     portable snapshot format); kept 12px vertical but wider horizontal
     (--shidoka-space-lg) since equal 12px/12px reads cramped around short
     button text - both are still real spacing-scale tokens, not invented
     values, just two different ones combined. */
  background: var(--accent); color: var(--shidoka-on-primary); border: none;
  border-radius: var(--shidoka-radius-sm); padding: var(--shidoka-space-sm) var(--shidoka-space-lg);
  font-family: var(--shidoka-font-base); font-size: var(--shidoka-label-size);
  font-weight: var(--shidoka-label-weight); line-height: var(--shidoka-label-line);
  cursor: pointer;
}
.ask-btn:hover { background: var(--shidoka-primary-hover); }
.ask-btn:disabled { opacity: .55; cursor: wait; }

/* ---------- answer columns ---------- */
.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
.columns.single { grid-template-columns: 1fr; }
@media (max-width: 900px) { .columns { grid-template-columns: 1fr; } }

/* ---------- run history ---------- */
.run {
  border: 1px solid var(--line); border-radius: 18px; margin-bottom: 18px;
  background: rgba(255,255,255,.012); padding: 14px 16px 16px;
  animation: rise .4s ease both;
}
.run-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; cursor: default;
}
.run.collapsed .run-head { cursor: pointer; }
.run-title { display: flex; gap: 10px; align-items: baseline; min-width: 0; flex: 1; }
.run-n { font-family: var(--shidoka-font-mono); color: var(--accent); font-size: .78rem; flex-shrink: 0; }
.run-q { font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; }
.run-meta { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.run-mode {
  font-family: var(--shidoka-font-mono); font-size: .62rem; border-radius: 999px;
  padding: 3px 9px; border: 1px solid var(--line); color: var(--muted);
}
.run-mode.raw { color: var(--raw); border-color: var(--raw); background: color-mix(in srgb, var(--raw) 12%, var(--shidoka-surface)); }
.run-mode.spec { color: var(--spec); border-color: var(--spec); background: color-mix(in srgb, var(--spec) 12%, var(--shidoka-surface)); }
.run-time { font-family: var(--shidoka-font-mono); font-size: .64rem; color: var(--muted); }
.run-body { margin-top: 12px; }
.run.collapsed .run-body { display: none; }
.answer-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 14px;
  animation: rise .4s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }
.answer-card.raw { border-top: 3px solid var(--raw); }
.answer-card.spec { border-top: 3px solid var(--spec); }
.answer-card.regen { border-top: 3px solid var(--regen); }
.answer-card.regen h2 { color: var(--regen); }
.answer-card header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.answer-card h2 { font-size: 1.02rem; }
.answer-card.raw h2 { color: var(--raw); }
.answer-card.spec h2 { color: var(--spec); }
.tag { font-family: var(--shidoka-font-mono); font-size: .62rem; color: var(--muted); }
.answer-body {
  line-height: 1.62; font-size: .93rem;
  max-height: 46vh; overflow-y: auto; padding-right: 6px;
}
.answer-body::-webkit-scrollbar { width: 8px; }
.answer-body::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.answer-body.loading { color: var(--muted); white-space: pre-wrap; }
.answer-body .err { color: var(--bad); }
.answer-body p { margin: 0 0 .8em; }
.answer-body p:last-child { margin-bottom: 0; }
.answer-body ul { margin: 0 0 .8em; padding-left: 1.4em; }
.answer-body ul:last-child { margin-bottom: 0; }
.answer-body li { margin-bottom: .3em; }
.answer-body li ul { margin-top: .3em; margin-bottom: 0; }
.answer-body strong { font-weight: 600; }
.answer-body .ans-heading { margin: 1em 0 .4em; font-size: 1em; font-weight: 600; }
.answer-body .ans-heading:first-child { margin-top: 0; }
.answer-body table { border-collapse: collapse; width: 100%; margin: 0 0 .8em; font-size: .88em; }
.answer-body table:last-child { margin-bottom: 0; }
.answer-body th, .answer-body td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; }
.answer-body th { background: var(--bg2); font-weight: 600; }
.metrics { display: flex; gap: 8px; flex-wrap: wrap; }
.metric {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-family: var(--shidoka-font-mono); font-size: .68rem; color: var(--muted);
}
.metric b { color: var(--text); font-weight: 500; }
.chunks summary { cursor: pointer; color: var(--muted); font-size: .78rem; }
.chunk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chunk-chip {
  font-family: var(--shidoka-font-mono); font-size: .62rem; padding: 3px 8px;
  border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); color: var(--muted);
}
.chunk-chip.agg { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--shidoka-surface)); }
.chunk-chips { max-height: 180px; overflow-y: auto; }

/* ---------- ask buttons ---------- */
.ask-buttons { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.side-btns { display: flex; gap: 8px; justify-content: center; }
.side-btn.raw:hover { color: var(--raw); border-color: var(--raw); }
.side-btn.spec:hover { color: var(--spec); border-color: var(--spec); }
.side-btn.regen:hover { color: var(--regen); border-color: var(--regen); }

/* ---------- tabs ---------- */
.tabs { display: flex; gap: 8px; margin-top: 22px; }
.tab {
  background: var(--bg2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px 10px 0 0; padding: 10px 18px; font: inherit; font-size: .84rem;
  font-weight: 600; cursor: pointer; border-bottom: none; transition: all .18s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); background: var(--card); border-color: var(--accent); }
.tab-hint { font-size: .7rem; color: var(--muted); margin: 6px 2px 0; }
.run-mode.regen, .run-mode.raw_regen { color: var(--regen); border-color: var(--regen); background: color-mix(in srgb, var(--regen) 12%, var(--shidoka-surface)); }

/* ---------- comparison ---------- */
.compare-panel {
  margin-top: 22px; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px;
  animation: rise .5s ease both;
}
.compare-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.compare-head h2 { font-size: 1.1rem; }
.verdict {
  font-weight: 600; padding: 8px 18px; border-radius: 999px; font-size: .85rem;
  border: 1px solid var(--line);
}
.verdict.good { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--shidoka-surface)); }
.verdict.mid { color: var(--mid); border-color: var(--mid); background: color-mix(in srgb, var(--mid) 12%, var(--shidoka-surface)); }
.verdict.bad { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--shidoka-surface)); }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.gauge-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.gauge-card h3 { font-size: .8rem; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge .value { font-family: var(--shidoka-font-mono); }
.hint { font-size: .64rem; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.compare-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
@media (max-width: 900px) { .compare-detail { grid-template-columns: 1fr; } }
.detail-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; font-size: .8rem; }
.detail-card h3 { font-size: .8rem; color: var(--muted); font-weight: 500; margin-bottom: 10px; }
.numlist { display: flex; flex-wrap: wrap; gap: 6px; }
.numchip { font-family: var(--shidoka-font-mono); font-size: .66rem; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--line); }
.numchip.match { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--shidoka-surface)); }
.numchip.near { color: var(--mid); border-color: var(--mid); background: color-mix(in srgb, var(--mid) 12%, var(--shidoka-surface)); }

/* ---------- data sources panel ---------- */
.data-sources { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  margin-bottom: 16px; background: var(--bg2); }
.ds-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.ds-row:last-of-type { border-bottom: none; }
.ds-info { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ds-info strong { font-size: .8rem; white-space: nowrap; }
.ds-path { font-family: var(--shidoka-font-mono); font-size: .7rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 480px; }
.ds-actions { display: flex; gap: 8px; flex-shrink: 0; }
.ds-note { font-size: .7rem; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.ds-note.err { color: var(--bad); }

/* ---------- point-by-point alignment ---------- */
.align-card { margin-top: 14px; }
.hint-inline { font-size: .66rem; color: var(--muted); font-weight: 400; }
.align-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .78rem; }
.align-table th { text-align: left; color: var(--muted); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.align-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
.align-table tr:last-child td { border-bottom: none; }
.align-table td.topic { font-weight: 600; white-space: nowrap; color: var(--text); }
.align-table td.none { color: var(--muted); font-style: italic; }
.agree-badge { font-family: var(--shidoka-font-mono); font-size: .62rem; padding: 2px 8px;
  border-radius: 6px; border: 1px solid var(--line); white-space: nowrap; }
.agree-badge.agree { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--shidoka-surface)); }
.agree-badge.partial { color: var(--mid); border-color: var(--mid); background: color-mix(in srgb, var(--mid) 12%, var(--shidoka-surface)); }
.agree-badge.differ { color: var(--bad); border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--shidoka-surface)); }
.agree-badge.missing { color: var(--muted); }
.extra-h { margin-top: 14px; }
.extra-diffs { margin: 8px 0 0 18px; font-size: .78rem; line-height: 1.5; color: var(--text); }
.extra-diffs li { margin-bottom: 4px; }
.numchip.raw-only { color: var(--raw); }
.numchip.spec-only { color: var(--spec); }
.pair { border-left: 2px solid var(--accent); padding: 6px 10px; margin-bottom: 8px; border-radius: 4px; }
.pair .sim { font-family: var(--shidoka-font-mono); color: var(--accent); font-size: .66rem; }
.pair p { font-size: .72rem; color: var(--muted); line-height: 1.45; }
.pair p b { color: var(--text); font-weight: 500; }
.session-totals { margin: 0 0 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.session-totals:empty { display: none; }

/* ---------- empty state ---------- */
.empty-state { text-align: center; color: var(--muted); padding: 70px 20px; font-size: .95rem; }
.empty-state p { max-width: 520px; margin: 18px auto 0; line-height: 1.6; }
.pulse-rings { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.pulse-rings span {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent);
  opacity: 0; animation: pulse 2.4s ease-out infinite;
}
.pulse-rings span:nth-child(2) { animation-delay: .8s; border-color: var(--raw); }
.pulse-rings span:nth-child(3) { animation-delay: 1.6s; border-color: var(--spec); }
@keyframes pulse { 0% { transform: scale(.4); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- footer ---------- */
.app-footer {
  padding: var(--shidoka-space-lg); text-align: center;
  border-top: 1px solid var(--line);
  color: var(--shidoka-text-tertiary); font-size: 0.75rem;
  font-family: var(--shidoka-font-base);
}

/* ---------- login page ---------- */
.login-page {
  /* --shidoka-secondary is DESIGN.md's own "soft brand tint used for...
     subtle brand surfaces" - previously unused anywhere in this file.
     A plain white/near-white backdrop left almost no brand color
     presence on the page outside the button and a thin top border;
     this is a deliberate, spec-sanctioned way to add that presence
     without a gradient (DESIGN.md's own login-page authority is silent
     on page composition, only components, so this is a compositional
     choice, not a token deviation). */
  background: var(--shidoka-secondary);
  display: flex; flex-direction: column; min-height: 100vh;
}
.login-page-content {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--shidoka-space-lg);
}
.login-form {
  background: var(--shidoka-surface);
  border: 1px solid var(--shidoka-border);
  border-top: 3px solid var(--shidoka-primary);
  border-radius: var(--shidoka-radius-md);
  /* card component: padding 24px = --shidoka-space-lg, plus DESIGN.md's
     "cards, widgets, and menus" elevation level 2 - the card had no
     shadow at all before, which is a real reason it read as flat/generic
     rather than a Shidoka surface specifically. */
  padding: var(--shidoka-space-lg);
  box-shadow: var(--shidoka-elevation-2);
  display: flex; flex-direction: column; gap: var(--shidoka-space-md);
  width: 100%; max-width: 360px;
}
.login-brand { display: flex; flex-direction: column; gap: var(--shidoka-space-3xs); }
.login-brand-mark {
  /* title scale, not label - at label size/weight this read as a stray
     hyperlink (small + the brand teal is close enough to a conventional
     "link blue" that size/weight has to do the work of signaling "this
     is a wordmark, not a clickable link"). */
  font-size: var(--shidoka-title-size); font-weight: 700;
  line-height: var(--shidoka-title-line); color: var(--shidoka-primary);
}
.login-brand-app {
  font-size: var(--shidoka-body-sm-size); font-weight: var(--shidoka-body-sm-weight);
  line-height: var(--shidoka-body-sm-line); color: var(--shidoka-text-tertiary);
}
.login-form h1 {
  font-size: var(--shidoka-h3-size); font-weight: var(--shidoka-h3-weight);
  line-height: var(--shidoka-h3-line);
}
.login-form label {
  display: flex; flex-direction: column; gap: var(--shidoka-space-2xs);
  font-size: var(--shidoka-label-size); font-weight: var(--shidoka-label-weight);
  line-height: var(--shidoka-label-line); color: var(--text);
}
.login-form input {
  padding: var(--shidoka-space-sm); border: 1px solid var(--shidoka-border);
  border-radius: var(--shidoka-radius-sm); background: var(--shidoka-surface);
  color: var(--text); font-family: var(--shidoka-font-base);
  font-size: var(--shidoka-body-size); font-weight: var(--shidoka-body-weight);
  line-height: var(--shidoka-body-line);
}
.login-form input:focus { outline: none; border-color: var(--shidoka-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shidoka-focus) 35%, transparent); }
.login-error {
  color: var(--bad); font-size: var(--shidoka-body-sm-size);
  font-weight: var(--shidoka-body-sm-weight); line-height: var(--shidoka-body-sm-line);
}