/* ============ Starlight appearance themes ============
   Layered after style.css and refinement.css. Dark is the default and lives in
   the base stylesheets; this file defines the two alternates and the small
   number of surfaces that carry literal colours instead of tokens.

   Palette intent: Light is white-first. The canvas and every surface are pure
   white; structure comes from cool hairlines and the navy second voice carries
   headings, actions and the brand panels. No tinted paper, no blue-grey wash.
======================================================= */

html,
html[data-theme="dark"],
html[data-theme="midnight"] {
  --btn-primary-bg: #c9d9f1;
  --btn-primary-ink: #101a2c;
  --btn-primary-hover: #dceafc;
  --btn-ghost-border: #3a4b62;
  --btn-ghost-ink: #cfdced;
  --btn-ghost-hover: rgba(255, 255, 255, 0.06);

  /* Aliases the chat client already asks for. Several widgets were written
     against these names but nothing ever defined them, so their borders fell
     back to currentColor and their secondary ink collapsed into body ink. */
  --border: #27354f;
  --bg: #0a1020;
  --bg-elevated: #142137;
  --surface-hover: rgba(255, 255, 255, 0.05);
  --text-primary: #e9eff9;
  --text-secondary: #a7b4c8;
  --text-tertiary: #8593a8;
  --font-inter: var(--font-body);
  --success: #9dc6ec;
  --success-bg: rgba(109, 140, 192, 0.16);
  --success-glow: rgba(109, 140, 192, 0.45);
}

html[data-theme="light"] {
  color-scheme: light;

  --btn-primary-bg: #1e2f49;
  --btn-primary-ink: #f8fafd;
  --btn-primary-hover: #2a3f60;
  --btn-ghost-border: #d3dce9;
  --btn-ghost-ink: #2c4a75;
  --btn-ghost-hover: #f4f7fb;

  /* White is the canvas, navy is the second voice: surfaces stay white and
     structure comes from hairlines, with navy carrying text and actions. */
  --bg-deep: #ffffff;
  --bg-navy: #ffffff;
  --bg-panel: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f4f7fb;
  --line: #e4e9f1;
  --gray-blue: #cfd8e5;
  --accent: #46648f;
  --accent-bright: #33517c;
  --text: #161f2d;
  --text-dim: #56657c;
  --star: #182337;

  --ui-focus: #2f5f9e;
  --ui-line: #e4e9f1;
  --ui-surface: #ffffff;
  --ui-surface-raised: #f7f9fc;
  --ui-muted: #56657c;

  --ex-canvas: #ffffff;
  --ex-chrome: #ffffff;
  --ex-panel: #ffffff;
  --ex-panel-hover: #f5f8fc;
  --ex-stroke: #e3e9f2;
  --ex-stroke-soft: #eef2f7;
  --ex-ink: #161f2d;
  --ex-secondary: #4c5b72;
  --ex-tertiary: #62718a;
  --ex-accent: #2d4b74;
  --ex-negative: #b3261e;

  /* The "09 art direction" layer's own token family. */
  --ui-canvas: #ffffff;
  --ui-layer: #ffffff;
  --ui-divider: #e4e9f1;
  --ui-headline: #161f2d;
  --ui-body: #46566d;
  --ui-muted: #5d6c82;
  --ui-action: #1e2f49;
  --ui-action-ink: #ffffff;

  --success: #2d4b74;
  --success-bg: rgba(45, 75, 116, 0.08);
  --success-glow: rgba(45, 75, 116, 0.3);
  --warning: #8a5a00;
  --warning-bg: rgba(138, 90, 0, 0.1);
  --danger: #b3261e;
  --danger-bg: rgba(179, 38, 30, 0.08);

  --border: var(--line);
  --bg: #ffffff;
  --bg-elevated: #f7f9fc;
  --surface-hover: #f4f7fb;
  --text-primary: #161f2d;
  --text-secondary: #56657c;
  --text-tertiary: #62718a;
  --font-inter: var(--font-body);
}

/* Body-scoped Midnight keeps the chat client's own body.theme-* switch and the
   engine's root attribute in agreement, so either path resolves the palette. */
html[data-theme="midnight"],
body.theme-midnight {
  color-scheme: dark;
  --bg-deep: #05080f;
  --bg-navy: #080d1a;
  --bg-panel: #0e1525;
  --bg-card: #111a2e;
  --line: #1a2540;
  --ex-canvas: #060c17;
  --ex-chrome: #0a1120;
  --ex-panel: #0d1626;
  --ex-panel-hover: #142134;
  --ex-stroke: #1f2d44;
  --ex-stroke-soft: #182437;
  --border: #1a2540;
  --bg: #05080f;
  --bg-elevated: #0e1525;
  --surface-hover: rgba(255, 255, 255, 0.04);
}

/* The chat client has historically carried its palette on body classes as well
   as the root; keep Midnight's canvas bound to both so either switch works. */
html[data-theme="midnight"] .chat-main,
body.theme-midnight .chat-main { background: #060c17; }

/* ---------- Canvas ---------- */
html[data-theme="light"] { background: #ffffff; }
html[data-theme="light"] body {
  background: #ffffff;
  color: var(--text);
}
html[data-theme="midnight"] body {
  background: radial-gradient(ellipse at 50% -20%, #0a1020 0%, #05080f 45%, #03060d 100%);
}
html[data-theme="light"] #starfield { opacity: .22; }

/* ---------- Public navigation ---------- */
html[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--line);
}
html[data-theme="light"] .nav__mobile {
  background: rgba(255, 255, 255, 0.97);
  border-bottom-color: var(--line);
}
html[data-theme="light"] .nav__mobile a { color: #33414f; }
html[data-theme="light"] .nav__mobile a:hover { background: #f3f6fa; color: #101a29; }
html[data-theme="light"] .nav__toggle:hover { background: #f1f5fa; }
html[data-theme="light"] .nav__toggle { border-color: var(--gray-blue); color: #2c4a75; }

/* ---------- Surfaces that carry literal navy ---------- */
html[data-theme="light"] .terminal {
  background: #0f1a2c;
  border-color: #22314a;
}
html[data-theme="light"] .card,
html[data-theme="light"] .plan-tile,
html[data-theme="light"] .doc-card,
html[data-theme="light"] .mcp-card,
html[data-theme="light"] .ws-card,
html[data-theme="light"] .agents-panel,
html[data-theme="light"] .support-form,
html[data-theme="light"] .support-thread,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .faq__item,
html[data-theme="light"] .legal__section { background: #ffffff; }

html[data-theme="light"] .split__visual,
html[data-theme="light"] .orbit__ring { opacity: 1; }

/* Soft navy washes become paper washes. */
html[data-theme="light"] .btn--ghost {
  background: #ffffff;
  border-color: #d3dce9;
  color: #2c4a75;
}
html[data-theme="light"] .btn--ghost:hover { background: #f2f5f9; color: #16202f; }
html[data-theme="light"] .nav__toggle:hover { background: #f2f5f9; }

/* ---------- Auth ---------- */
html[data-theme="light"] .auth-brand {
  background: #101b30;
  color: #e8edf5;
}
html[data-theme="light"] .auth-pane { background: #ffffff; }
html[data-theme="light"] .auth-pane__inner,
html[data-theme="light"] .auth-pane h1 { color: var(--text); }

/* ---------- Chat ---------- */
html[data-theme="light"] body[data-ui-page="chat"] { background: #ffffff; }
html[data-theme="light"] .chat-composer { border-top: 1px solid #f0f3f8; }
html[data-theme="light"] body[data-ui-page="chat"] #starfield { opacity: .18; }
html[data-theme="light"] .chat-sidebar {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .chat-main { background: #ffffff; }
html[data-theme="light"] .chat-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: var(--line);
}
html[data-theme="light"] .chat-messages { background: #ffffff; }
html[data-theme="light"] .chat-list a { color: #3d4a5e; }
html[data-theme="light"] .chat-list a:hover { background: #f1f5fa; color: #16202f; }
html[data-theme="light"] .chat-list a.active { background: #e2eaf6; color: #16202f; }
/* The chat client paints the selected thread with a literal night fill and
   keeps the paper ink, which made the current conversation disappear. */
html[data-theme="light"] body[data-ui-page="chat"] .chat-list__item.active {
  background: #e2eaf6;
  border-color: #d5e2f2;
}
html[data-theme="light"] body[data-ui-page="chat"] .chat-list__item.active > a { color: #16202f; }
html[data-theme="light"] body[data-ui-page="chat"] .chat-list__item:hover:not(.active) { background: #f1f5fa; }

/* Starlight's mark is the only glyph that must stay paper on its disc in both
   themes, like the initials on a gradient avatar. */
html[data-theme="light"] .msg--ai .msg__avatar {
  background: #16233a;
  border-color: #16233a;
}
html[data-theme="light"] .msg--ai .msg__avatar svg {
  fill: #eef4fc;
  filter: none;
}

/* The send key inverts with the theme: paper ink on navy. */
html[data-theme="light"] body[data-ui-page="chat"] .chat-send:not(.chat-send--stop) {
  background: #1e2f49;
  border-color: #1e2f49;
  color: #ffffff;
}
html[data-theme="light"] body[data-ui-page="chat"] .chat-send:not(.chat-send--stop):hover { background: #2a3f60; }
html[data-theme="light"] .chat-composer__inner {
  background: #ffffff;
  border-color: #dde4ee;
  box-shadow: 0 6px 18px rgba(24, 38, 61, 0.05);
}
html[data-theme="light"] .chat-composer__config {
  color: #4b5a70;
}
html[data-theme="light"] .chat-composer__row { border-top-color: #e7ecf4; }
html[data-theme="light"] .chat-composer textarea::placeholder,
html[data-theme="light"] #composer-input::placeholder { color: #77879d; }
html[data-theme="light"] .chat-composer__tools button { color: #5a6b82; }
/* The send chip inverts with the theme: paper ink on a dark navy key, the same
   relationship the dark theme runs in reverse. */
html[data-theme="light"] .chat-send {
  background: #1e2f49;
  border-color: #1e2f49;
  color: #ffffff;
}
html[data-theme="light"] .chat-send:not(.chat-send--stop):hover { background: #2a3f60; }
html[data-theme="light"] .chat-send--stop { color: #ffffff; }
html[data-theme="light"] .chat-composer__tools button:hover,
html[data-theme="light"] .chat-actions button:hover,
html[data-theme="light"] .chat-settings-btn:hover,
html[data-theme="light"] .chat-mobile-toggle:hover { background: #f1f5fa; color: #16202f; }

html[data-theme="light"] .msg--user .msg__text {
  background: #e8eef8;
  border-color: #e4e9f1;
  color: #16202f;
}
html[data-theme="light"] .msg__name { color: #4a5a72; }
html[data-theme="light"] .msg__thinking {
  background: #f8fafc;
  border-color: #e9eef5;
}
html[data-theme="light"] .msg__thinking-btn { color: #4c5b72; }
html[data-theme="light"] .msg__thinking-btn:hover { background: #f2f5f9; color: #16202f; }
/* Tool activity rows: the dark tooltip keeps its glass in both themes, but the
   row chrome follows the paper palette. */
html[data-theme="light"] .msg__tool-row-icon { background: #eef3f9; color: #33517c; }
html[data-theme="light"] .msg__tool-row-icon--local,
html[data-theme="light"] .msg__tool-row-icon--cloud { background: #e7eef7; color: #2d4b74; }
html[data-theme="light"] .msg__tool-spinner {
  border-color: rgba(70, 100, 143, 0.25);
  border-top-color: #33517c;
}
html[data-theme="light"] .msg__tool-tooltip {
  background: rgba(255, 255, 255, 0.94);
  border-color: #d9e2ee;
  color: #16202d;
  box-shadow: 0 12px 40px rgba(22, 31, 45, 0.14);
}
html[data-theme="light"] .thinking-fact { color: #5d6c83; }
html[data-theme="light"] .composer-hint,
html[data-theme="light"] .chat-disclaimer { color: #6b7a90; }

/* Code and tool output keep a dark ground in both themes: it is content, not
   chrome, and light-on-dark code reads better than a tinted white block. The
   inline snippet is the exception - it sits inside a sentence, so it keeps a
   paper chip and navy ink. */
html[data-theme="light"] .msg__text pre,
html[data-theme="light"] .msg__text .code-block {
  background: #0f1a2c;
  border-color: #22314a;
  box-shadow: none;
}
html[data-theme="light"] .msg__text pre code {
  background: transparent;
  border: 0;
  color: #e6edf3;
}
html[data-theme="light"] .msg__text code {
  background: #eef2f8;
  border-color: #e2e8f1;
  color: #22314a;
}
html[data-theme="light"] .msg__text .code-block-header {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-bottom-color: #22314a;
}
html[data-theme="light"] .msg__text .code-block-lang,
html[data-theme="light"] .msg__text .code-block-copy { color: #a7bdd9; }
html[data-theme="light"] .msg__text .code-block-copy:hover {
  color: #eef4fc;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

/* ---------- Cookie notice ----------
   A quiet card below the navigation chrome, never a bar over the composer. */
html[data-theme="light"] .cookie-banner {
  background: #ffffff;
  border-color: #e4e9f1;
  color: #46566d;
  box-shadow: 0 18px 40px rgba(24, 38, 61, 0.12);
}
html[data-theme="light"] .cookie-banner__text a { color: #2c4a75; }
html[data-theme="light"] .cookie-banner__btn {
  background: #1e2f49;
  border-color: #1e2f49;
  color: #f7f9fd;
}
html[data-theme="light"] .cookie-banner__btn:hover { background: #2a3f60; }

/* ---------- Settings sheet ----------
   The chat settings modal keeps a dark rail in the base stylesheet; on paper the
   rail reads as part of the sheet, with the active tab in the navy accent. */
html[data-theme="light"] .settings-nav {
  background: #ffffff;
  border-right-color: var(--line);
}
html[data-theme="light"] .settings-nav button { color: #4c5b72; }
html[data-theme="light"] .settings-nav button:hover { background: #f1f5fa; color: #16202f; }
html[data-theme="light"] .settings-nav button.active { background: #e2eaf6; color: #1e3a5f; }
html[data-theme="light"] .seg-control {
  background: #f4f7fb;
  border-color: #e4e9f1;
}
html[data-theme="light"] .seg-control button { color: #4c5b72; }
html[data-theme="light"] .seg-control button:hover { color: #16202f; }
html[data-theme="light"] .seg-control button.active { background: #dde8f7; color: #16202f; }
html[data-theme="light"] body[data-ui-page="chat"] .settings-row { border-bottom-color: #e7ecf4; }

/* Switch tracks carry a night-blue fill that lands on mid grey over white, and
   the knob inherits the paper ink, so every toggle reads as a dirty pill. On
   white the track is a quiet hairline grey when off and navy when on. */
html[data-theme="light"] .switch i {
  background: #e8eef6;
  border-color: #d7e0ec;
}
html[data-theme="light"] .switch i::before {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 32, 52, 0.2);
}
html[data-theme="light"] .switch input:checked + i {
  background: #1e3a5f;
  border-color: #1e3a5f;
}
html[data-theme="light"] .switch input:checked + i::before { background: #ffffff; }
html[data-theme="light"] .switch input:focus-visible + i { outline: 2px solid var(--ui-focus); outline-offset: 2px; }

/* Read-only fields (account email, member since) were half-transparent ink on
   white; they stay quieter than editable fields without becoming unreadable. */
html[data-theme="light"] .settings-grid input:disabled {
  opacity: 1;
  background: #f7f9fc;
  border-color: #e7ecf4;
  color: #4c5b72;
  -webkit-text-fill-color: #4c5b72;
}

/* ---------- Popovers, menus and the notification tray ----------
   The chat client's dropdowns are night-blue sheets with backdrop blur; on
   white they turn into slate boxes holding navy ink, and their borders fall
   back to the text colour because --border was never defined. They become
   paper cards that match the settings sheet. */
html[data-theme="light"] .chat-notif-dropdown {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 18px 44px rgba(20, 32, 52, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] :is(.chat-notif-dropdown__head, .chat-notif-dropdown__foot) {
  border-color: var(--line);
  color: #16202f;
}
html[data-theme="light"] .chat-notif-dropdown__head button { color: #4c5b72; }
html[data-theme="light"] .chat-notif-item { border-bottom-color: var(--line); }
html[data-theme="light"] .chat-notif-item:hover { background: #f6f9fc; }
html[data-theme="light"] .chat-notif-item--unread { background: #eef3fa; }
html[data-theme="light"] .chat-notif-item--unread:hover { background: #e6eef9; }
html[data-theme="light"] .chat-notif-item__title { color: #16202f; }
html[data-theme="light"] .chat-notif-item__body { color: #56657c; }
html[data-theme="light"] .chat-notif-item__time { color: #58677d; }
html[data-theme="light"] .chat-notif-push-toggle { color: #4c5b72; }
html[data-theme="light"] .chat-notif-empty { color: #56657c; }

html[data-theme="light"] body[data-ui-page="chat"] .chat-composer__config .effort-picker__menu {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 18px 38px rgba(20, 32, 52, 0.14);
}
html[data-theme="light"] :is(
  .effort-picker__menu, .model-picker__menu, .sched-picker__menu,
  .chat-session-menu, .chat-export__menu
) :is(button, .lang-picker__option) { color: #16202f; }
html[data-theme="light"] :is(
  .effort-picker__menu, .model-picker__menu, .sched-picker__menu,
  .chat-session-menu, .chat-export__menu
) button span { color: #56657c; }
html[data-theme="light"] :is(.effort-picker__menu-label, .sched-picker__menu-label) { color: #62718a; }
html[data-theme="light"] :is(
  .effort-picker__menu, .model-picker__menu, .sched-picker__menu,
  .chat-session-menu, .chat-export__menu
) button:hover { background: #f1f5fa; }
html[data-theme="light"] :is(
  .effort-picker__menu, .model-picker__menu, .sched-picker__menu,
  .chat-session-menu, .chat-export__menu
) button.active { background: #e2eaf6; }

/* ---------- Dialogs and settings sheets ---------- */
html[data-theme="light"] .modal,
html[data-theme="light"] .ws-modal__panel,
html[data-theme="light"] .mcp-modal__panel,
html[data-theme="light"] .doc-viewer__panel {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(20, 32, 52, 0.16);
}
/* The settings body is not a floating card: the modal already is the surface,
   so a second panel background and shadow only reads as a grey halo. */
html[data-theme="light"] .settings-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}
html[data-theme="light"] .modal__overlay,
html[data-theme="light"] .modal-backdrop { background: rgba(18, 27, 43, 0.38); }

/* Quick reference is navy glass in the dark themes; over paper it fogs to a
   grey slab and the dim text disappears into it. It becomes a white sheet with
   the same hairline and soft shadow as the other floating panels; its text
   already uses theme tokens, which resolve to paper ink here. */
html[data-theme="light"] .chat-help__panel {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(20, 32, 52, 0.16);
}

/* The conversation "more" menu is a night-blue sheet in the dark themes with
   pale ink; over paper that ink collapses into the same navy it sits on. It
   becomes a paper card with hairline border, matching the other menus. */
html[data-theme="light"] .chat-session-menu {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 18px 44px rgba(20, 32, 52, 0.16);
}
html[data-theme="light"] .chat-session-menu button { color: #16202f; }
html[data-theme="light"] .chat-session-menu button:hover,
html[data-theme="light"] .chat-session-menu button:focus-visible { background: #f1f5fa; }

/* The delete confirmation carries literal navy fills plus paper ink, so on the
   light theme the title (token ink) vanished into the panel and the two buttons
   read as dark blocks. Over white it is the same paper card as every other
   sheet: hairline border, quiet subject chip, and the danger action in the
   shared danger token. */
html[data-theme="light"] .chat-delete-dialog {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 24px 60px rgba(20, 32, 52, 0.18);
}
html[data-theme="light"] .chat-delete-dialog p { color: var(--ex-secondary); }
html[data-theme="light"] .chat-delete-dialog__icon {
  background: var(--danger-bg);
  color: var(--danger);
}
html[data-theme="light"] .chat-delete-dialog__subject {
  background: var(--ui-surface-raised);
  border-color: var(--line);
  color: var(--ex-ink);
}
html[data-theme="light"] .chat-delete-dialog__actions button { border-color: var(--line); }
html[data-theme="light"] .chat-delete-dialog__cancel {
  background: var(--ui-surface-raised);
  color: #16202f;
}
html[data-theme="light"] .chat-delete-dialog__cancel:hover { background: #eef3fa; }
html[data-theme="light"] .chat-delete-dialog__confirm {
  background: var(--danger);
  border-color: var(--danger);
}
html[data-theme="light"] .chat-delete-dialog__confirm:hover:not(:disabled) { background: #97211b; }
html[data-theme="light"] .chat-delete-dialog::backdrop { background: rgba(18, 27, 43, 0.38); }

/* ---------- Tables, badges, status ---------- */
html[data-theme="light"] table { color: var(--text); }
html[data-theme="light"] th { color: #4c5b72; border-bottom-color: var(--line); }
html[data-theme="light"] td { border-bottom-color: #e7ecf4; }
html[data-theme="light"] tr:hover td { background: #f6f9fd; }

/* ---------- Footer ---------- */
html[data-theme="light"] .footer { border-top-color: var(--line); color: #4c5b72; }
html[data-theme="light"] .footer a { color: #3b4a5f; }
html[data-theme="light"] .footer a:hover { color: #16202f; }

/* ---------- Browser surfaces belong to the design system ---------- */
html[data-theme="light"] { accent-color: #33517c; }
html[data-theme="light"] ::selection { background: #c9dbf2; color: #10203a; }
html[data-theme="light"] :where(input, textarea, select) { caret-color: #33517c; }
html[data-theme="light"] :where(input, textarea, select)::placeholder { color: #6c7b91; }


/* ---------- Primary actions ----------
   Dark mode's primary is a pale chalk fill with navy ink; light mode inverts
   that relationship - deep navy fill, chalk ink - so the two themes share one
   hierarchy instead of one washed-out button. */
html[data-theme="light"] .btn--primary,
html[data-theme="light"] .hero__cta .btn--primary {
  background: #1e2f49;
  border-color: #1e2f49;
  color: #f7f9fd;
  box-shadow: 0 6px 18px rgba(24, 38, 61, 0.14);
}
html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] .hero__cta .btn--primary:hover {
  background: #2a3f60;
  border-color: #2a3f60;
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(24, 38, 61, 0.18);
}
html[data-theme="light"] .hero__cta .btn--ghost { background: #ffffff; border-color: #d3dce9; }
/* The mobile sheet colours every link, so the primary action needs to win
   against that more specific anchor rule. */
html[data-theme="light"] .nav__mobile a.btn--primary {
  background: #1e2f49;
  border-color: #1e2f49;
  color: #f7f9fd;
}

/* Marketing bands and rules. The homepage glow belongs to the night canvas;
   on white it would read as a grey smudge, so the canvas stays clean. */
html[data-theme="light"] body[data-ui-page="index"] main { background: none; }

html[data-theme="light"] .strip { background: #fafbfd; border-color: var(--line); }
html[data-theme="light"] .section--alt,
html[data-theme="light"] .section--quote { background: #fafbfd; }
html[data-theme="light"] .hero__terminal .terminal { box-shadow: 0 18px 44px rgba(24, 38, 61, 0.16); }
html[data-theme="light"] .card,
html[data-theme="light"] .card:hover { border-color: var(--line); }
html[data-theme="light"] .card:hover { background: #fbfcfe; }
html[data-theme="light"] .card__icon { color: #2c4a75; }
html[data-theme="light"] .faq__item { border-color: var(--line); }
html[data-theme="light"] .quote__attr { color: #4c5b72; }
html[data-theme="light"] .skills__cloud span {
  background: #ffffff;
  border-color: var(--line);
  color: #46566d;
}
html[data-theme="light"] .contact-or,
html[data-theme="light"] .or-divider { color: #6b7a90; }


/* ---------- Dark artifacts keep their own ink ----------
   The terminal, the workspace preview and the MCP diagram are product
   screenshots; the auth brand panel is the fixed dark half of the split sign-in.
   They stay dark in Light mode, so the text inside them keeps the dark theme's
   ink instead of inheriting paper ink. */
html[data-theme="light"] .terminal,
html[data-theme="light"] .auth-brand,
html[data-theme="light"] .workspace-preview,
html[data-theme="light"] .mcp-diagram {
  --bg-deep: #0a1020;
  --bg-navy: #0d1428;
  --bg-panel: #141f38;
  --bg-card: #18233d;
  --line: #27354f;
  --text: #e8edf5;
  --text-dim: #9db0c6;
  --star: #f5f7fa;
  --ex-ink: #f4f8ff;
  --ex-secondary: #b9c7d8;
  --ex-tertiary: #9eb0c6;
  --ex-panel: #142235;
  --ex-chrome: #101b2a;
  --ex-stroke: #34445c;
}
html[data-theme="light"] .workspace-preview { background: #101b2a; color: #e8eef8; border-color: #2c3d56; }
html[data-theme="light"] .auth-brand { background: #101b30; }
html[data-theme="light"] .terminal { background: #101c2d; border-color: #3b506a; }
html[data-theme="light"] .terminal__bar { background: #1a2a40; }
html[data-theme="light"] .terminal__body { color: #c9d8ed; }

/* ---------- Chat chrome ---------- */
html[data-theme="light"] .chat-sidebar { color: #46566d; }
html[data-theme="light"] .chat-actions button { color: #4b5a70; }
html[data-theme="light"] .chat-actions button:hover { background: #eef3f9; color: #16202f; }
html[data-theme="light"] .chat-sidebar__label { color: #6b7a90; }
html[data-theme="light"] .chat-sidebar__collapse { color: #6b7a90; }
html[data-theme="light"] .chat-sidebar__collapse:hover { background: #eef3f9; color: #16202f; }
html[data-theme="light"] .chat-search input {
  background: #ffffff;
  border-color: #e4e9f1;
  color: #16202f;
}
html[data-theme="light"] #chat-title,
html[data-theme="light"] .chat-header__title { color: #16202f; }
html[data-theme="light"] .chat-header { color: #16202f; }
html[data-theme="light"] .chat-header__actions button,
html[data-theme="light"] .chat-header .chat-actions button { color: #4b5a70; }
html[data-theme="light"] .chat-header__actions button:hover { background: #eef3f9; color: #16202f; }
html[data-theme="light"] .chat-empty__title { color: #16202f; }
html[data-theme="light"] .chat-empty__sub { color: #56657c; }
html[data-theme="light"] .chat-empty__suggestions button {
  background: #ffffff;
  border-color: #e4e9f1;
  color: #33415a;
}
html[data-theme="light"] .chat-empty__suggestions button:hover {
  background: #f2f6fc;
  border-color: #b9c8dc;
  color: #16202f;
}
html[data-theme="light"] .chat-composer__config,
html[data-theme="light"] #mode-label,
html[data-theme="light"] .chat-composer__config button { color: #46566d; }
html[data-theme="light"] .chat-composer__config button:hover { background: #f2f5f9; color: #16202f; }
html[data-theme="light"] .chat-composer__tools button { color: #56657c; }
html[data-theme="light"] .chat-composer__tools button:hover { background: #f2f5f9; color: #16202f; }
html[data-theme="light"] .bridge-connect-btn { color: #46566d; border-color: #e4e9f1; background: #ffffff; }
html[data-theme="light"] .chat-hint { color: #6b7a90; }
html[data-theme="light"] .chat-settings-btn { color: #4b5a70; }
html[data-theme="light"] .chat-user__plan { color: #5d6c82; }
html[data-theme="light"] .chat-user__avatar { background: #e3eaf5; color: #1e2f49; }

/* ---------- Plans ---------- */
html[data-theme="light"] .plans-nav {
  background: rgba(250, 251, 253, 0.9);
  border-bottom-color: var(--line);
  color: #46566d;
}
html[data-theme="light"] .plans-nav__back { color: #46566d; }


/* Chat empty state + composer labels generated by the client */
html[data-theme="light"] .chat-empty > h2,
html[data-theme="light"] .chat-empty h2 { color: #16202f; }
html[data-theme="light"] .chat-empty > p,
html[data-theme="light"] .chat-empty p { color: #56657c; }
html[data-theme="light"] .chat-empty__brand { background: #e7eef9; color: #1e2f49; }
html[data-theme="light"] .effort-picker__btn,
html[data-theme="light"] .chat-composer__config .effort-picker__btn { color: #46566d; }
html[data-theme="light"] .effort-picker__btn:hover { background: #f2f5f9; color: #16202f; }
html[data-theme="light"] .chat-sidebar__label { color: #5b6a80; }
html[data-theme="light"] .chat-hint { color: #5f6e84; }

/* Footer */
html[data-theme="light"] .footer {
  background: #ffffff;
  border-top-color: var(--line);
}
html[data-theme="light"] .footer__cols h4 { color: #16202f; }
html[data-theme="light"] .footer__cols a,
html[data-theme="light"] .footer__brand p { color: #4c5b72; }
html[data-theme="light"] .footer__cols a:hover { color: #16202f; }
html[data-theme="light"] .lang-select,
html[data-theme="light"] .lang-picker__trigger {
  background: #ffffff;
  border-color: #d3dce9;
  color: #46566d;
}

/* The terminal's assistant voice needs light ink on its dark ground. */
html[data-theme="light"] .terminal .t-user { color: #9db8e8; }
html[data-theme="light"] .terminal .t-star { color: #f5f7fa; }
html[data-theme="light"] .terminal .t-dim { color: #93a6bd; }
html[data-theme="light"] .terminal .t-ok { color: #9dc6ec; }

/* Homepage product diagrams sit on paper washes, not navy ones. */
html[data-theme="light"] .schedule-visual__item {
  background: #ffffff;
  border-color: #dde4ee;
}
html[data-theme="light"] .schedule-visual__time { color: #33517c; }
html[data-theme="light"] .schedule-visual__label { color: #46566d; }
html[data-theme="light"] .starwork-bridge__card,
html[data-theme="light"] .mcp-diagram__node {
  background: #ffffff;
  border-color: #e4e9f1;
  color: #33415a;
}
html[data-theme="light"] .mcp-diagram__chip {
  background: #f2f5f9;
  border-color: #e4e9f1;
  color: #3d4c63;
}
html[data-theme="light"] .mcp-diagram__label { color: #33415a; }


html[data-theme="light"] .bridge-diagram__node {
  background: #ffffff;
  border-color: #e4e9f1;
  color: #46566d;
}
html[data-theme="light"] .bridge-diagram__node span,
html[data-theme="light"] .bridge-diagram__caption { color: #46566d; }
html[data-theme="light"] .bridge-diagram__line { background: #c9d5e6; }
html[data-theme="light"] .mcp-diagram__hub span { color: #16202f; }
html[data-theme="light"] .mcp-diagram__line { background: linear-gradient(to bottom, #9db3cf, transparent); }
html[data-theme="light"] .mcp-diagram__chip {
  background: #ffffff;
  border-color: #e4e9f1;
  color: #46566d;
}


/* ---------- Agents ---------- */
html[data-theme="light"] .agents-header {
  background: rgba(250, 251, 253, 0.9);
  border-bottom-color: var(--line);
}
html[data-theme="light"] .agents-back { color: #46566d !important; }
html[data-theme="light"] .agents-back:hover { color: #16202f !important; }
html[data-theme="light"] .agents-eyebrow { color: #33517c; }
html[data-theme="light"] .agents-intro { color: #46566d; }
html[data-theme="light"] .agents-panel {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 10px 28px rgba(24, 38, 61, 0.05);
}
html[data-theme="light"] .agents-panel h2 { color: #16202f; }
html[data-theme="light"] body[data-ui-page="agents"] .agents-panel-head { border-bottom-color: #e9eef5; }
html[data-theme="light"] body[data-ui-page="agents"] .agents-card { border-bottom-color: #e7ecf4; }
html[data-theme="light"] body[data-ui-page="agents"] .agents-avatar-select { background: #fafbfd; border-color: #e9eef5; }
html[data-theme="light"] .agents-panel-head p,
html[data-theme="light"] .agents-panel-head .agents-sub { color: #56657c; }
html[data-theme="light"] .agents-fields label,
html[data-theme="light"] #agents-form label,
html[data-theme="light"] #agents-schedule-form label { color: #33415a; }
html[data-theme="light"] .agents-hint,
html[data-theme="light"] .agents-avatar-select .agents-hint { color: #5d6c82; }
html[data-theme="light"] .agents-footnote { color: #5d6c82; }
html[data-theme="light"] .agents-count { color: #58677d; }
html[data-theme="light"] .agents-primary {
  background: #1e2f49;
  color: #ffffff;
}
html[data-theme="light"] .agents-primary:hover { background: #2a3f60; }
html[data-theme="light"] .agents-primary:disabled {
  opacity: 1;
  background: #e6ecf5;
  color: #56657c;
}
html[data-theme="light"] .agents-input-at > span { color: #56657c; }
html[data-theme="light"] .agents-form input,
html[data-theme="light"] .agents-form textarea,
html[data-theme="light"] .agents-form select,
html[data-theme="light"] #agents-form input,
html[data-theme="light"] #agents-form textarea,
html[data-theme="light"] #agents-form select,
html[data-theme="light"] #agents-schedule-form input,
html[data-theme="light"] #agents-schedule-form textarea,
html[data-theme="light"] #agents-schedule-form select,
html[data-theme="light"] body[data-ui-page="agents"] #agents-form :is(input:not([type="checkbox"]), textarea, select) {
  background: #ffffff;
  border-color: #e4e9f1;
  color: #16202f;
}
html[data-theme="light"] body[data-ui-page="agents"] #agents-form :is(input, textarea, select):focus {
  border-color: #7c9bc4;
  box-shadow: 0 0 0 3px rgba(70, 100, 143, 0.12);
}
html[data-theme="light"] body[data-ui-page="agents"] #agents-form :is(input, textarea)::placeholder { color: #7b8a9f; }
html[data-theme="light"] .agents-banner {
  background: #eef3fa;
  border-color: #e4e9f1;
  color: #33415a;
}
html[data-theme="light"] .agents-banner.error {
  background: #fdf3f2;
  border-color: #f0cdc9;
  color: #8f2b23;
}
html[data-theme="light"] .agents-empty {
  border-color: #e4e9f1;
  color: #56657c;
}
html[data-theme="light"] .agents-avatar-select {
  background: #fafbfd;
  border-color: var(--line);
}
html[data-theme="light"] .agents-avatar-select .agents-hint { color: #5d6c82; }
html[data-theme="light"] .agents-avatar-reset { color: #2c4a75; }
html[data-theme="light"] #agents-form #agents-avatar-file { color: #33415a; }
html[data-theme="light"] #agents-avatar-file::file-selector-button {
  background: #ffffff;
  border-color: #d3dce9;
  color: #33415a;
}
html[data-theme="light"] .agents-card {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .agents-card-actions button { color: #46566d; }

/* ---------- Studio, Admin and checkout chrome ---------- */
html[data-theme="light"] .topbar,
html[data-theme="light"] .admin-topbar,
html[data-theme="light"] .admin-header {
  background: #ffffff;
  border-bottom-color: var(--line);
  color: #16202f;
}
html[data-theme="light"] .topbar__logo,
html[data-theme="light"] .admin-logo { color: #16202f; }
html[data-theme="light"] .email,
html[data-theme="light"] #user-email,
html[data-theme="light"] #btn-signout,
html[data-theme="light"] .admin-user { color: #46566d; }
html[data-theme="light"] .signout-btn,
html[data-theme="light"] #btn-signout {
  border-color: #e4e9f1;
  background: #ffffff;
  color: #33415a;
}
html[data-theme="light"] .signout-btn:hover,
html[data-theme="light"] #btn-signout:hover { background: #f2f5f9; color: #16202f; }

/* ---------- Checkout / payment status ---------- */
html[data-theme="light"] body[data-ui-page="checkout"] { background: #ffffff; color: #46566d; }
html[data-theme="light"] #checkout-status { color: #33415a; }
html[data-theme="light"] #checkout-error { color: #b3261e; }
html[data-theme="light"] body[data-ui-page="checkout"] a { color: #2c4a75; }
html[data-theme="light"] .payment-card,
html[data-theme="light"] body[data-ui-page="payment-status"] .card {
  background: #ffffff;
  border-color: var(--line);
  box-shadow: 0 18px 44px rgba(24, 38, 61, 0.1);
}
html[data-theme="light"] body[data-ui-page="payment-status"] { color: #46566d; }

/* ============ Appearance menu (all themes) ============ */
.theme-menu { position: relative; display: inline-flex; }
.theme-menu__trigger {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--accent-bright);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.theme-menu__trigger:hover { background: rgba(109, 140, 192, 0.12); border-color: rgba(109, 140, 192, 0.28); }
html[data-theme="light"] .theme-menu__trigger:hover { background: #f1f5fa; border-color: #d3dce9; }
.theme-menu__icon { display: inline-flex; width: 18px; height: 18px; }
.theme-menu__icon svg { width: 100%; height: 100%; }
.theme-menu__trigger[aria-expanded="true"] { background: rgba(109, 140, 192, 0.16); }

.theme-menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 184px;
  padding: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(3, 8, 18, 0.34);
}
html[data-theme="light"] .theme-menu__panel { box-shadow: 0 18px 40px rgba(20, 32, 52, 0.14); background: #fff; }
.theme-menu__option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .55rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: .86rem;
  text-align: left;
  cursor: pointer;
}
.theme-menu__option:hover { background: rgba(109, 140, 192, 0.12); color: var(--text); }
html[data-theme="light"] .theme-menu__option:hover { background: #f2f5f9; color: #16202f; }
.theme-menu__option[aria-checked="true"] { color: var(--text); }
/* Miniatures of the three canvases. A flat dot cannot separate Dark from
   Midnight, so each swatch carries the hairline its theme uses on panels. */
.theme-menu__swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  flex: none;
  position: relative;
  overflow: hidden;
}
.theme-menu__swatch::after {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 4px;
  height: 2px;
  border-radius: 2px;
  background: var(--swatch-ink, rgba(255, 255, 255, 0.6));
}
.theme-menu__swatch--dark {
  background: linear-gradient(150deg, #1b2944, #0a1020);
  --swatch-ink: #b9cbe4;
}
.theme-menu__swatch--light {
  background: linear-gradient(150deg, #ffffff, #e3e9f3);
  border-color: rgba(22, 32, 47, 0.2);
  --swatch-ink: #33517c;
}
.theme-menu__swatch--midnight {
  background:
    radial-gradient(circle at 72% 26%, rgba(80, 118, 186, 0.55), transparent 58%),
    linear-gradient(150deg, #0a1120, #03060d);
  border-color: rgba(120, 160, 220, 0.34);
  --swatch-ink: #6f8fc6;
}
.theme-menu__name { flex: 1; }
.theme-menu__check { display: inline-flex; width: 14px; height: 14px; color: var(--accent-bright); opacity: 0; }
.theme-menu__check svg { width: 100%; height: 100%; }
.theme-menu__option[aria-checked="true"] .theme-menu__check { opacity: 1; }

/* Mobile menu row */
.theme-menu--inline {
  display: block;
  margin: .9rem 0 .2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
}
.theme-menu__caption {
  display: block;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: .55rem;
}
.theme-menu__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
.theme-menu__chip {
  min-height: 40px;
  padding: .45rem .3rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: .84rem;
  font-weight: 500;
  cursor: pointer;
}
.theme-menu__chip[aria-checked="true"] {
  border-color: #16202f;
  color: var(--text);
  background: rgba(109, 140, 192, 0.14);
}

@media (max-width: 860px) {
  .theme-menu:not(.theme-menu--inline) { display: none; }
}

/* ---------- Chat settings and app views ----------
   The base layers paint model cards, panels and form fields with translucent
   night fills; on white those turn into grey slabs with unreadable ink. Every
   surface here is rebuilt on white with hairlines and navy accents. */
html[data-theme="light"] body[data-ui-page="chat"] :is(
  .model-card, .referral-card, .quota-card, .status-card,
  .ask-card, .skill-card, .scheduled-card, .projects-card
) {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] body[data-ui-page="chat"] .referral-card { background: #ffffff; }
html[data-theme="light"] .model-card:hover { border-color: #c9d6e6; }
html[data-theme="light"] .model-card__name { color: #16202f; }
html[data-theme="light"] .model-card__desc { color: #4c5b72; }
html[data-theme="light"] .model-card__tag { background: #f3f6fa; color: #46566d; }
html[data-theme="light"] .model-card__tag--available { background: #eef3fa; color: #2d4b74; }
html[data-theme="light"] .model-card__specs span { background: #f3f6fa; color: #4c5b72; }
html[data-theme="light"] .model-card--locked { opacity: .6; }

html[data-theme="light"] .settings-plan-info,
html[data-theme="light"] .usage-tokens__item {
  background: #f8fafc;
  border-color: var(--line);
}
html[data-theme="light"] .settings-plan-info p { color: #4c5b72; }
html[data-theme="light"] .usage-tokens__label { color: #4c5b72; }
html[data-theme="light"] .usage-tokens__value { color: #1e3a5f; }

/* Usage cards and credit bars are painted with translucent night gradients in
   the base sheet, which composite to slate grey slabs on white and swallow the
   navy figures. They become quiet paper cards with navy metres. */
html[data-theme="light"] .usage-overview__card {
  background: #f5f8fc;
  border-color: var(--line);
}
html[data-theme="light"] .usage-overview__label { color: #4c5b72; }
html[data-theme="light"] .usage-overview__value { color: #16202f; }
html[data-theme="light"] .usage-overview__limit { color: #56657c; }
html[data-theme="light"] .usage-bar__track {
  background: #eef2f8;
  border-color: #e2e8f1;
}
html[data-theme="light"] .usage-bar__fill { background: linear-gradient(90deg, #33517c, #6b8bb5); }
html[data-theme="light"] .usage-bar__fill--accent { background: linear-gradient(90deg, #1e3a5f, #46648f); }
html[data-theme="light"] .usage-bar__pct { color: #2d4b74; }
html[data-theme="light"] .usage-bar__detail { color: #56657c; }

html[data-theme="light"] .usage-topup {
  background: #f8fafc;
  border-color: var(--line);
}
html[data-theme="light"] .usage-topup__head {
  background: #ffffff;
  border-bottom-color: var(--line);
}
html[data-theme="light"] .usage-topup__icon { background: #eef3fa; }

/* Gradient avatars keep their night disc in both themes; the initials must
   therefore keep paper ink instead of following --star into navy. */
html[data-theme="light"] .avatar-gradient,
html[data-theme="light"] .chat-user__avatar,
html[data-theme="light"] .msg--user .msg__avatar { color: #eef4fc; }
html[data-theme="light"] .avatar-initials-text { color: inherit; }

html[data-theme="light"] .chat-effort {
  background: #f4f7fb;
  border-color: var(--line);
}
html[data-theme="light"] .chat-effort button { color: #4c5b72; }
html[data-theme="light"] .chat-effort button:hover { color: #16202f; }
html[data-theme="light"] .chat-effort button.active {
  background: #1e2f49;
  color: #f7f9fd;
  box-shadow: none;
}

html[data-theme="light"] .referral-card__title { color: #16202f; }
html[data-theme="light"] .referral-card__reward { background: #eef3fa; color: #2d4b74; }
html[data-theme="light"] .referral-list__empty { color: #56657c; }

html[data-theme="light"] .plan-badge {
  background: #eef3fa;
  border-color: #dbe5f1;
  color: #2d4b74;
}

html[data-theme="light"] .btn--danger {
  background: #fdf1f0;
  border-color: #eec9c5;
  color: #a3231b;
}
html[data-theme="light"] .btn--danger:hover { background: #fbe6e3; }
html[data-theme="light"] .settings-row--danger .settings-row__title { color: #a3231b; }

/* Plan chips on skill cards */
html[data-theme="light"] .skill-card__plan.plan-drift { background: #eef3fa; color: #2d4b74; }
html[data-theme="light"] .skill-card__plan.plan-orbit { background: #eef3fa; color: #2d4b74; }
html[data-theme="light"] .skill-card__plan.plan-nova { background: #fdf3e3; color: #8a5a00; }
html[data-theme="light"] body[data-ui-page="chat"] .skill-card.installed {
  background: #fafcff;
  border-color: #cdd9e8;
}

/* App-view fields: the base translucent night fill becomes a white control */
html[data-theme="light"] body[data-ui-page="chat"] :where(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select, .sched-picker__btn
) {
  background: #ffffff;
  border-color: var(--line);
  color: #16202f;
}
html[data-theme="light"] body[data-ui-page="chat"] :where(input, textarea)::placeholder { color: #7b8a9f; }

/* Personal Chats switcher sits in the white sidebar, not on a night chip */
html[data-theme="light"] body[data-ui-page="chat"] .ws-switcher .lang-picker__trigger {
  background: #ffffff;
  border-color: var(--line);
  color: #33415a;
}
html[data-theme="light"] body[data-ui-page="chat"] .ws-switcher .lang-picker__trigger:hover,
html[data-theme="light"] body[data-ui-page="chat"] .ws-switcher .lang-picker--open .lang-picker__trigger {
  background: #f4f7fb;
  border-color: #c9d6e6;
  color: #16202f;
}
html[data-theme="light"] body[data-ui-page="chat"] .ws-switcher .lang-picker__menu {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] body[data-ui-page="chat"] .ws-switcher .lang-picker__option--active { background: #eef3fa; color: #16202f; }

/* ---------- Small print, separators and disabled states ----------
   Paper ink at 50-85% is the usual culprit in light: a muted label is fine at
   full opacity, but a half-transparent one loses its contrast. */
html[data-theme="light"] .strip__items i { color: #647386; }
html[data-theme="light"] .plan-tile__price-original {
  opacity: 1;
  color: #56657c;
}
html[data-theme="light"] .workspace-preview__slash { opacity: .8; }
html[data-theme="light"] .btn:disabled,
html[data-theme="light"] .btn[disabled] {
  opacity: 1;
  background: #f4f7fb;
  border-color: #e1e8f1;
  color: #56657c;
}

/* A count badge needs a ground dark enough for white numerals at 10px. */
.chat-notif-badge { background: #c0392b; }

/* ---------- Admin / Studio sign-in gates ----------
   These power-user doors use the same field and action treatment as auth, so
   signing in looks like the same product on every entry point. */
html[data-theme="light"] #auth-gate .gate-card,
html[data-theme="light"] .auth-gate .auth-card {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(24, 38, 61, 0.09);
}
html[data-theme="light"] #auth-gate input,
html[data-theme="light"] .auth-gate input {
  background: #ffffff;
  border: 1px solid #e4e9f1;
  color: #16202f;
}
html[data-theme="light"] #auth-gate input:focus,
html[data-theme="light"] .auth-gate input:focus { border-color: #7c9bc4; }
html[data-theme="light"] #auth-gate button,
html[data-theme="light"] .auth-gate button {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
}
html[data-theme="light"] #auth-gate button:hover,
html[data-theme="light"] .auth-gate button:hover { background: var(--btn-primary-hover); }
html[data-theme="light"] #auth-gate .error,
html[data-theme="light"] .auth-gate .auth-error { color: #99251d; }
html[data-theme="light"] #auth-gate p,
html[data-theme="light"] .auth-gate p { color: #56657c; }
html[data-theme="light"] #auth-gate h1,
html[data-theme="light"] .auth-gate h1,
html[data-theme="light"] .auth-gate .auth-title { color: #16202f; }
html[data-theme="light"] .auth-gate .auth-divider { color: #5d6c82; }
html[data-theme="light"] .auth-gate .auth-social a,
html[data-theme="light"] .auth-gate .auth-social button {
  background: #ffffff;
  border: 1px solid #e4e9f1;
  color: #33415a;
}
/* Studio's door is a full-viewport scrim; in Light mode it lifts the card off
   paper instead of cutting a black hole into the page. */
html[data-theme="light"] .auth-gate {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- Auth fields ----------
   .field is the shared sign-in control used by the auth split and the chat
   settings sheet; it carries a literal dark fill in the base stylesheet. */
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea,
html[data-theme="light"] .field select {
  background: #ffffff;
  border-color: #d3dce9;
  color: #16202f;
}
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field textarea:focus,
html[data-theme="light"] .field select:focus {
  border-color: #4a6b96;
  box-shadow: 0 0 0 3px rgba(70, 100, 143, 0.14);
}
html[data-theme="light"] .field input::placeholder { color: #77879d; }

/* ---------- MCP: server list head ----------
   The base layer paints this bar as a dark panel header; on paper it is a
   plain section rule above the list. */
html[data-theme="light"] .mcp-page__head {
  background: transparent;
  border-bottom: 1px solid var(--line);
}

/* ---------- Starwork: dimmed platform chips ----------
   Deliberate 55% dimming reads as disabled-but-unreadable on paper, so Light
   keeps the meaning through colour instead of opacity. */
html[data-theme="light"] .platform-badge--soon { opacity: 1; }
html[data-theme="light"] .platform-badge--soon,
html[data-theme="light"] .platform-badge--soon em { color: #404e64; }
html[data-theme="light"] .bridge-line__label { color: #445268; }
/* Active chat item action menu button (the "more" dots) on paper selection.
   The base stylesheet uses a mid-slate icon on a tinted slab that reads muddy
   in light; paper ink in both rest/hover keeps it legible. */
html[data-theme="light"] .chat-list__item.active > button.chat-list__item-action { color: #16202f; }
html[data-theme="light"] .chat-list__item.active > button.chat-list__item-action:hover { background: #d5e2f2; }
html[data-theme="light"] .chat-list__item.active > button.chat-list__item-action svg { stroke: currentColor; }
/* Comments inside code blocks sit on a dark ground in both themes, so in light
   the inherited muted blue (#4a5a76 on #0f1a2c ~= 2.5) needs a stronger ink. */
html[data-theme="light"] .msg__text .hljs-comment,
html[data-theme="light"] .msg__text .hljs-quote { color: #9fb0c8; }


/* ---------- First-run onboarding ----------
   The base chat styles paint this dialog navy, but Light mode must be a
   paper surface like the rest of the app. Scope overrides to Light so Dark
   and Midnight retain their original appearance. */
html[data-theme="light"] .onboard-overlay {
  background: rgba(18, 27, 43, 0.42);
}
html[data-theme="light"] body[data-ui-page="chat"] .onboard-modal {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 24px 64px rgba(20, 32, 52, 0.18);
  scrollbar-color: var(--gray-blue) transparent;
}
html[data-theme="light"] .onboard-modal__header,
html[data-theme="light"] .onboard-section {
  border-color: var(--line);
}
html[data-theme="light"] .onboard-modal__logo .wordmark,
html[data-theme="light"] .onboard-modal__title,
html[data-theme="light"] .onboard-pref__title,
html[data-theme="light"] .onboard-plan-mini__name {
  color: var(--text);
}
html[data-theme="light"] .onboard-modal__subtitle,
html[data-theme="light"] .onboard-section__label,
html[data-theme="light"] .onboard-section__desc,
html[data-theme="light"] .onboard-pref__desc,
html[data-theme="light"] .onboard-prefs__note,
html[data-theme="light"] .onboard-plan-mini__desc {
  color: var(--text-dim);
}
html[data-theme="light"] .onboard-age__input {
  background: #ffffff;
  border-color: #cfd8e5;
  color: var(--text);
  color-scheme: light; /* Native iOS date picker must match the dialog. */
}
html[data-theme="light"] .onboard-age__input:focus {
  border-color: var(--ui-focus);
}
html[data-theme="light"] .onboard-age__error {
  color: var(--danger);
}
html[data-theme="light"] #onboard-lang-picker .lang-picker__trigger,
html[data-theme="light"] #onboard-lang-picker .lang-picker__menu {
  background: #ffffff;
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="light"] #onboard-lang-picker .lang-picker__menu {
  box-shadow: 0 12px 30px rgba(20, 32, 52, 0.14);
}
html[data-theme="light"] #onboard-lang-picker .lang-picker__option {
  color: var(--text-dim);
}
html[data-theme="light"] #onboard-lang-picker .lang-picker__option:hover,
html[data-theme="light"] #onboard-lang-picker .lang-picker__option--active {
  background: #eef3fa;
  color: #1e3a5f;
}
html[data-theme="light"] .onboard-theme-card {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .onboard-theme-card:hover {
  border-color: #9bafc8;
}
html[data-theme="light"] .onboard-theme-card.active {
  border-color: #2d4b74;
}
html[data-theme="light"] .onboard-theme-name {
  color: var(--text);
}
/* A Light preview must look light even when viewed from a dark theme. */
.onboard-theme-swatch--light {
  background: linear-gradient(135deg, #ffffff, #eef3f9);
  border: 1px solid #d3dce9;
}
.onboard-theme-swatch--light .swatch-bar {
  background: #c8d4e3;
}
.onboard-theme-swatch--light .swatch-bar--accent {
  background: #2d4b74;
}
.onboard-theme-swatch--light .swatch-dot {
  background: #2d4b74;
  filter: none;
}
html[data-theme="light"] .onboard-plan-mini {
  background: #ffffff;
  border-color: var(--line);
}
html[data-theme="light"] .onboard-plan-mini:hover {
  border-color: #9bafc8;
}
html[data-theme="light"] .onboard-plan-mini--current {
  background: #f4f7fb;
  border-color: #6a88ae;
}
html[data-theme="light"] .onboard-tag {
  background: #f4f7fb;
  border-color: #e1e7f0;
  color: var(--text-dim);
}
html[data-theme="light"] .onboard-modal__footer .btn--ghost {
  background: #ffffff;
  color: var(--btn-ghost-ink);
  border-color: var(--btn-ghost-border);
}
html[data-theme="light"] .onboard-modal__footer .btn--ghost:hover {
  background: var(--btn-ghost-hover);
}
html[data-theme="light"] .onboard-modal__footer .btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-ink);
  border-color: var(--btn-primary-bg);
  box-shadow: none;
}
html[data-theme="light"] .onboard-modal__footer .btn--primary:hover {
  background: var(--btn-primary-hover);
}


/* ===== Starlight design scrollbar for every scrollable area =====
   The thin, gray-blue-thumb scrollbar used to be re-listed selector by selector
   in style.css, a hand-maintained list that silently went stale and left newer
   surfaces (code blocks, dropdowns, help panel, tool lists, MCP modal, tables,
   docs, the composer effort menu) on the browser default scrollbar. It is now
   applied universally so every scroll container, present or future, uses the
   Starlight scrollbar. The thumb references var(--gray-blue) so it tracks Dark,
   Light and Midnight themes automatically.

   Intentional opt-outs still win by specificity (a class rule beats `*`):
   .plan-view__body and .msg__thinking-preview hide their scrollbar, as does the
   mobile settings tab strip (.settings-nav). None of those are touched here. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-blue) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--gray-blue);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover {
  background: #16202f;
}