/* Theme styles for schnews.

   A theme is a *style* (shape: borders, bevels, button treatment) plus a
   *palette* (colour). Each style ships a light and a dark palette; Classic has
   many. The root element carries three attributes:

     data-style   which style      (classic, mac, win95, ...)
     data-theme   which palette    (light, nord, mac-dark, ...)
     data-mode    light | dark     (what the palette resolved to)

   Classic's palettes live in themes.css. Everything else is here, one section
   per style. Styles only set design tokens; app.css reads them, so a new style
   usually needs no selectors beyond a little flair at the end of its section.

   The theme picker draws each theme as a thumbnail whose elements carry their
   own data-style and data-theme, so tokens must never be inherited from the
   page. The block below therefore sets every token on any [data-style] element
   and each style overrides what it needs. Palette-only helpers (--hi, --lo,
   --bar-a, ...) are only ever read by the style that owns the palette. */

/* ── Token defaults (= Classic) ───────────────────────── */
:root, [data-style] {
  --radius: 10px;
  --r-ctl: var(--radius);      /* inputs, buttons, sidebar rows */
  --r-btn: 6px;                /* .btn, list rows, option buttons */
  --r-tab: 8px;
  --r-icon: var(--radius);     /* square icon buttons */
  --r-pill: 999px;             /* counters, search, floating pills */
  --r-round: 50%;              /* avatars, back-to-top */

  --bw: 1px;                   /* control and card borders */
  --bwp: 1px;                  /* window and popover borders */
  --bsp: solid;
  --raised-bc: var(--border);  /* border colour(s) of a raised control */
  --raised-sh: none;
  --sunken-bc: var(--border);  /* ...of inputs and pressed controls */
  --sunken-sh: none;
  --panel-bc: var(--border);
  --panel-sh: 0 18px 50px rgba(0, 0, 0, 0.35);
  --pop-sh: 0 12px 30px rgba(0, 0, 0, 0.25);
  --float-sh: 0 2px 10px rgba(0, 0, 0, 0.28);
  --tn-sh: none;

  --hover-bc: var(--primary);
  --hover-fg: var(--primary);
  --tab-accent: var(--primary);
  --btn-case: none;
  --btn-track: normal;
  --scrim: rgba(0, 0, 0, 0.45);

  /* unset on purpose: controls keep their own face and bars keep the surface */
  --btn-bg: initial;
  --btn-bg-hover: initial;
  --bar-bg: initial;
  --bar-fg: initial;
  --bar-accent: initial;
  --top-bg: initial;
  --top-fg: initial;
  --sb: initial;
}

/* ── Behaviour shared by every non-Classic style ──────── */
html[data-style]:not([data-style="classic"]) { --sb: var(--muted) var(--surface); }
html[data-style]:not([data-style="classic"]) :is(.btn:not(.ghost), .icon-btn, .mini, .theme-btn, .loadmore):active:not(:disabled) {
  border-color: var(--sunken-bc);
  box-shadow: var(--sunken-sh);
}
html[data-style]:not([data-style="classic"]) .modal-head .icon-btn { margin-left: auto; }


/* ═══ Modern (default) ════════════════════════════════════
   Clean and flat, in the manner of a webmail inbox: square buttons with quiet
   hover tints, hairline-separated rows that lift when you point at them, a
   filled search pill, pill-ended navigation, light-blue selection. Primary is
   the filled-button colour; --sel is the (lighter) selected-row colour. */
[data-theme="modern-light"] {
  --bg: #ffffff; --surface: #f6f8fc; --border: #dadce0;
  --text: #1f1f1f; --muted: #5f6368;
  --primary: #0b57d0; --primary-bg: #0b57d0; --primary-dark: #0842a0; --on-primary: #ffffff;
  --secondary: #f4b400;
  --danger: #d93025; --input-bg: #ffffff; --bg-hover: #edf2fa;
  --line: #eceef1; --read-bg: #f6f8fc; --sel: #d3e3fd; --search-bg: #eaf1fb;
}
[data-theme="modern-dark"] {
  --bg: #1f1f1f; --surface: #161616; --border: #3c4043;
  --text: #e3e3e3; --muted: #9aa0a6;
  --primary: #a8c7fa; --primary-bg: #a8c7fa; --primary-dark: #7cacf8; --on-primary: #062e6f;
  --secondary: #fbbc04;
  --danger: #f28b82; --input-bg: #1f1f1f; --bg-hover: #2b2c2f;
  --line: #2c2d2f; --read-bg: #1a1a1a; --sel: #0f3a6b; --search-bg: #2d2e31;
}
[data-style="modern"] {
  --radius: 12px; --r-ctl: 4px; --r-btn: 4px; --r-tab: 4px; --r-icon: 4px; --r-pill: 999px;
  --panel-bc: transparent;
  --panel-sh: 0 8px 30px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.12);
  --pop-sh: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3);
  --float-sh: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 1px 3px rgba(60, 64, 67, 0.3);
  --tn-sh: 0 1px 3px rgba(60, 64, 67, 0.3);
  --hover-bc: var(--border); --hover-fg: var(--text);
  --btn-bg: transparent; --btn-bg-hover: var(--bg-hover);
  --tab-accent: transparent;
}
[data-style="modern"] .topbar { border-bottom-color: transparent; padding: 8px 16px; }
[data-style="modern"] .topbar-search input {
  padding: 10px 18px; background: var(--search-bg); border-color: transparent;
}
[data-style="modern"] .topbar-search input:focus {
  background: var(--input-bg); border-color: transparent; box-shadow: var(--pop-sh);
}
[data-style="modern"] :is(input, select, textarea):focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
[data-style="modern"] :is(.icon-btn, .mini, .theme-btn),
[data-style="modern"] :is(.icon-btn, .mini, .theme-btn):hover { border-color: transparent; }
[data-style="modern"] .btn { font-weight: 500; }
[data-style="modern"] .btn.solid:hover {
  background: var(--primary-dark); border-color: var(--primary-dark); filter: none;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
[data-style="modern"] .theme-popover { background: var(--bg); }

/* navigation: roomy rows, selected one ends in a pill */
[data-style="modern"] .sidebar { padding: 8px 0 16px; }
[data-style="modern"] .side-heading { padding-left: 16px; }
[data-style="modern"] .node {
  padding: 6px 12px 6px 16px; margin-right: 8px; min-height: 32px;
  border-radius: 0 16px 16px 0;
}
[data-style="modern"] .node.active { background: var(--sel); color: var(--text); font-weight: 600; }
[data-style="modern"] .node .count { background: transparent; padding: 0; font-weight: 600; }
[data-style="modern"] .node.active .count { color: var(--text); }
[data-style="modern"] .kids { border-left-color: transparent; margin-left: 8px; }

/* story rows: hairlines, bold unread, quiet read, lift on hover */
[data-style="modern"] .list-header { padding: 10px 16px; border-bottom-color: var(--line); }
[data-style="modern"] .list-header h2 { font-weight: 500; }
[data-style="modern"] .article {
  position: relative; gap: 12px; padding: 11px 16px;
  border-bottom-color: var(--line);
}
[data-style="modern"] .article.read { background: var(--read-bg); }
[data-style="modern"] .article:hover,
[data-style="modern"] .article.read:hover {
  z-index: 1;
  box-shadow: inset 1px 0 0 var(--border), inset -1px 0 0 var(--border),
    0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}
[data-style="modern"] .article:hover { background: var(--bg); }
[data-style="modern"] .article.read:hover { background: var(--read-bg); }
[data-style="modern"] .article.read .a-title { color: var(--text); }
[data-style="modern"] .article.active,
[data-style="modern"] .article.active:hover { background: var(--sel); }
[data-style="modern"] .article.active,
[data-style="modern"] .article.active .a-title,
[data-style="modern"] .article.active .a-snippet,
[data-style="modern"] .article.active .a-source,
[data-style="modern"] .article.active .a-time,
[data-style="modern"] .article.active .count { color: var(--text); }
[data-style="modern"] .article.active .a-snippet,
[data-style="modern"] .article.active .a-source,
[data-style="modern"] .article.active .a-time { color: var(--muted); }
[data-style="modern"] .article.active .a-star { color: var(--secondary); }
[data-style="modern"] .reader { padding: 24px 32px; }

/* dialogs */
[data-style="modern"] .modal-head { border-bottom: none; padding: 16px 20px 6px; }
[data-style="modern"] .modal-head h2 { font-size: 1.25rem; font-weight: 400; }
[data-style="modern"] .tabs { background: var(--surface); padding: 4px 20px 0; gap: 0; }
[data-style="modern"] .tab { background: transparent; border-color: transparent; border-radius: 0; padding: 10px 18px; }
[data-style="modern"] .tab:hover { background: var(--bg-hover); border-color: transparent; }
[data-style="modern"] .tab.active,
[data-style="modern"] .tab.active:hover {
  background: transparent; color: var(--primary); box-shadow: none;
  border-color: transparent; border-bottom: 3px solid var(--primary);
}
[data-style="modern"] .tab-intro { background: var(--bg); border-left-color: var(--primary); }


/* ═══ Folio ══════════════════════════════════════════════
   Modern and calm, built for long reading: a warm off-white (or soft charcoal)
   instead of stark white/black, text well above AA contrast, a muted colour
   that stays legible, roomy rows and a reading column with generous leading.
   Selection is a quiet tint with an accent edge. */
[data-theme="folio-light"] {
  --bg: #fbfaf7; --surface: #f3f1ec; --border: #ddd9d0;
  --text: #25272a; --muted: #5b6066;
  --primary: #2a5d8a; --primary-bg: #2a5d8a; --primary-dark: #1f4a70; --on-primary: #ffffff;
  --secondary: #b06f10;
  --danger: #b3372c; --input-bg: #ffffff; --bg-hover: #efece5;
  --line: #ebe8e1; --sel: #e3ebf2; --search-bg: #eeebe4;
}
[data-theme="folio-dark"] {
  --bg: #1f2226; --surface: #191b1e; --border: #363a40;
  --text: #dcdfe3; --muted: #a0a6ad;
  --primary: #8fb8de; --primary-bg: #8fb8de; --primary-dark: #74a5d1; --on-primary: #10263a;
  --secondary: #e0b45a;
  --danger: #f08a80; --input-bg: #262a2f; --bg-hover: #2a2e34;
  --line: #2d3136; --sel: #2b3d4f; --search-bg: #2a2e34;
}
[data-style="folio"] {
  --radius: 12px; --r-ctl: 8px; --r-btn: 8px; --r-tab: 8px; --r-icon: 8px;
  --panel-sh: 0 12px 40px rgba(0, 0, 0, 0.22), 0 1px 3px rgba(0, 0, 0, 0.1);
  --pop-sh: 0 6px 20px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.1);
  --float-sh: 0 2px 8px rgba(0, 0, 0, 0.2);
  --tn-sh: 0 1px 2px rgba(0, 0, 0, 0.25);
  --hover-bc: var(--border); --hover-fg: var(--text);
  --btn-bg: transparent; --btn-bg-hover: var(--bg-hover);
  --tab-accent: var(--primary);
}
[data-style="folio"] .topbar { border-bottom-color: var(--line); padding: 8px 16px; }
[data-style="folio"] .topbar-search input { padding: 8px 16px; background: var(--search-bg); border-color: transparent; }
[data-style="folio"] .topbar-search input:focus { background: var(--input-bg); border-color: var(--primary); }
[data-style="folio"] :is(input, select, textarea):focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); outline: none; }
[data-style="folio"] :is(.icon-btn, .mini, .theme-btn),
[data-style="folio"] :is(.icon-btn, .mini, .theme-btn):hover { border-color: transparent; }
[data-style="folio"] .btn { font-weight: 500; }
[data-style="folio"] .btn.solid:hover { background: var(--primary-dark); border-color: var(--primary-dark); filter: none; }
[data-style="folio"] .theme-popover { background: var(--bg); }
[data-style="folio"] .col-resizer { background: linear-gradient(to right, transparent 3px, var(--line) 3px, var(--line) 4px, transparent 4px); }
[data-style="folio"] .col-resizer:hover,
[data-style="folio"] .col-resizer.dragging { background: linear-gradient(to right, transparent 2px, var(--primary-bg) 2px, var(--primary-bg) 5px, transparent 5px); }

/* navigation */
[data-style="folio"] .sidebar { padding: 12px 8px 20px; }
[data-style="folio"] .node { padding: 7px 12px; min-height: 38px; }
[data-style="folio"] .node.active { background: var(--sel); color: var(--text); font-weight: 600; }
[data-style="folio"] .node .count { background: transparent; padding: 0; }
[data-style="folio"] .node.active .count { color: var(--text); }
[data-style="folio"] .kids { border-left-color: var(--line); margin-left: 14px; }

/* story rows: space to breathe, clear unread/read, tinted selection */
[data-style="folio"] .list-header { padding: 14px 20px; border-bottom-color: var(--line); }
[data-style="folio"] .list-header h2 { font-weight: 600; }
[data-style="folio"] .article { gap: 14px; padding: 17px 20px; border-bottom-color: var(--line); }
[data-style="folio"] .a-title { line-height: 1.4; margin-bottom: 6px; }
[data-style="folio"] .a-snippet { line-height: 1.6; }
[data-style="folio"] .a-meta { margin-top: 8px; }
[data-style="folio"] .article.active,
[data-style="folio"] .article.active:hover { background: var(--sel); box-shadow: inset 3px 0 0 var(--primary); }
[data-style="folio"] .article.active,
[data-style="folio"] .article.active .a-title,
[data-style="folio"] .article.active .count { color: var(--text); }
[data-style="folio"] .article.active .a-snippet,
[data-style="folio"] .article.active .a-source,
[data-style="folio"] .article.active .a-time { color: var(--muted); }
[data-style="folio"] .article.active .a-star { color: var(--secondary); }
[data-style="folio"] .tl-card { padding: 18px 14px 18px 20px; }
[data-style="folio"] :is(.tl-content, .tl-summary) { line-height: 1.65; }

/* the reading column */
[data-style="folio"] .reader { padding: 36px clamp(24px, 6vw, 72px) 64px; }
[data-style="folio"] .reader h1 { font-size: 1.8rem; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 10px; }
[data-style="folio"] .r-head { border-bottom-color: var(--line); padding-bottom: 20px; margin-bottom: 30px; }
[data-style="folio"] .reader :is(.r-content, .r-thread-body) { font-size: 1.06rem; line-height: 1.75; max-width: 64ch; }
[data-style="folio"] .reader :is(.r-content, .r-thread-body) p { margin: 0 0 1.3em; }
[data-style="folio"] .reader :is(.r-content, .r-thread-body) :is(h2, h3, h4) { line-height: 1.3; margin: 1.8em 0 0.6em; }
[data-style="folio"] .reader :is(.r-content, .r-thread-body) :is(ul, ol) { padding-left: 1.4em; }
[data-style="folio"] .reader :is(.r-content, .r-thread-body) li { margin-bottom: 0.5em; }
[data-style="folio"] .reader :is(.r-content, .r-thread-body) img { border-radius: var(--r-ctl); }
[data-style="folio"] .reader :is(.r-content, .r-thread-body) blockquote { border-left: 3px solid var(--primary); padding-left: 18px; margin-bottom: 1.3em; }
[data-style="folio"] .reader :is(.r-content, .r-thread-body) pre { padding: 14px 16px; line-height: 1.5; }
[data-style="folio"] .reader a { text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--primary) 55%, transparent); }
[data-style="folio"] .reader a:hover { text-decoration-color: currentColor; }
[data-style="folio"] .r-thread { max-width: 64ch; }

/* dialogs */
[data-style="folio"] .modal-head { padding: 18px 22px 10px; border-bottom-color: var(--line); }
[data-style="folio"] .modal-head h2 { font-size: 1.25rem; font-weight: 600; }
[data-style="folio"] .tabs { background: var(--surface); padding: 4px 22px 0; gap: 0; }
[data-style="folio"] .tab { background: transparent; border-color: transparent; border-radius: 0; padding: 10px 18px; }
[data-style="folio"] .tab:hover { background: var(--bg-hover); border-color: transparent; }
[data-style="folio"] .tab.active,
[data-style="folio"] .tab.active:hover {
  background: transparent; color: var(--primary); box-shadow: none;
  border-color: transparent; border-bottom: 3px solid var(--primary);
}
[data-style="folio"] .tab-intro { background: var(--bg); border-left-color: var(--primary); }


/* ═══ Classic Mac — System 7 ══════════════════════════════
   Black on white, 1px outlines, hard 2px window shadows, striped title bars,
   and a pressed button that flips to inverse video. Dark is inverse video. */
[data-theme="mac-light"] {
  --bg: #ffffff; --surface: #e3e3e3; --border: #000000;
  --text: #000000; --muted: #555555;
  --primary: #0000b8; --primary-bg: #000000; --primary-dark: #000000; --on-primary: #ffffff;
  --secondary: #b86e00;
  --danger: #cc0000; --input-bg: #ffffff; --bg-hover: #eeeeee;
}
[data-theme="mac-dark"] {
  --bg: #000000; --surface: #1c1c1c; --border: #d0d0d0;
  --text: #f4f4f4; --muted: #9e9e9e;
  --primary: #8fb0ff; --primary-bg: #f4f4f4; --primary-dark: #ffffff; --on-primary: #000000;
  --secondary: #ffc24d;
  --danger: #ff6b6b; --input-bg: #000000; --bg-hover: #262626;
}
[data-style="mac"] {
  --radius: 0px; --r-ctl: 3px; --r-btn: 8px; --r-tab: 6px; --r-icon: 3px; --r-pill: 4px; --r-round: 0px;
  --raised-sh: 1px 1px 0 var(--border);
  --sunken-sh: inset 1px 1px 0 rgba(0, 0, 0, 0.3);
  --panel-sh: 2px 2px 0 var(--border);
  --pop-sh: 2px 2px 0 var(--border);
  --float-sh: 2px 2px 0 var(--border);
  --tn-sh: 1px 1px 0 var(--border);
  --hover-bc: var(--border); --hover-fg: var(--text);
  --btn-bg: var(--input-bg); --btn-bg-hover: var(--input-bg);
  --tab-accent: transparent;
  --bar-bg: repeating-linear-gradient(to bottom, var(--border) 0 1px, var(--surface) 1px 3px);
  --bar-fg: var(--text);
}
/* The title is centred on the whole bar (out of flow) and the close box sits
   alone at the left, each with a gap cut out of the stripes around it. */
[data-style="mac"] .modal-head { position: relative; padding: 4px 10px; min-height: 2rem; justify-content: flex-start; }
[data-style="mac"] .modal-head h2 {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  flex: none; margin: 0; padding: 0 10px; max-width: calc(100% - 5rem);
  background: var(--surface); line-height: 1.25; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-style="mac"] .modal-head .spacer { display: none; }
html[data-style="mac"][data-theme] .modal-head .icon-btn {
  margin: 0; width: 1.1rem; height: 1.1rem; flex-basis: 1.1rem; font-size: .8rem;
  background: var(--surface); box-shadow: 0 0 0 3px var(--surface);
}
html[data-style="mac"] :is(.btn:not(.ghost), .icon-btn, .mini, .theme-btn, .loadmore):active:not(:disabled) {
  background: var(--text); color: var(--bg);
}


/* ═══ Mac OS 9 ════════════════════════════════════════════
   Platinum: grey bevelled chrome, pinstriped title bars with a close box on the
   left and zoom/collapse boxes on the right, lavender selection, and splashes
   of colour (the rainbow rule under the top bar, coloured default buttons).
   Dark is a blue-grey slate take on the same bevels. */
[data-theme="os9-light"] {
  --bg: #ffffff; --surface: #dddddd; --border: #8a8a8a;
  --text: #000000; --muted: #4f4f4f;
  --primary: #2b3a8f; --primary-bg: #9aa5dc; --primary-dark: #7f8bc9; --on-primary: #000000;
  --secondary: #e0731a;
  --danger: #c4261d; --input-bg: #ffffff; --bg-hover: #ecebf5;
  --hi: #ffffff; --lo: #9b9b9b; --lo2: #4a4a4a; --bar-s: #c3c3cb; --tab-c: #6f7fd0;
}
[data-theme="os9-dark"] {
  --bg: #23252d; --surface: #43454f; --border: #14151a;
  --text: #ececf2; --muted: #b0b2be;
  --primary: #b4bdf5; --primary-bg: #5a66b3; --primary-dark: #4a5596; --on-primary: #ffffff;
  --secondary: #ffb347;
  --danger: #ff7468; --input-bg: #1a1c22; --bg-hover: #30323b;
  --hi: #6a6c78; --lo: #2a2b33; --lo2: #0c0d10; --bar-s: #383a43; --tab-c: #8a97ee;
}
[data-style="os9"] {
  --radius: 5px; --r-ctl: 3px; --r-btn: 6px; --r-tab: 5px; --r-icon: 3px; --r-pill: 6px;
  --raised-bc: var(--lo2);
  --raised-sh: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  --sunken-bc: var(--lo) var(--hi) var(--hi) var(--lo);
  --sunken-sh: inset 1px 1px 0 rgba(0, 0, 0, 0.25);
  --panel-bc: var(--lo2);
  --panel-sh: 2px 5px 14px rgba(0, 0, 0, 0.4);
  --pop-sh: 2px 4px 10px rgba(0, 0, 0, 0.35);
  --float-sh: 1px 3px 7px rgba(0, 0, 0, 0.35);
  --tn-sh: 1px 2px 4px rgba(0, 0, 0, 0.3);
  --hover-bc: var(--lo2); --hover-fg: var(--text);
  --btn-bg: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 45%, white), var(--surface) 55%, color-mix(in srgb, var(--surface) 88%, black));
  --btn-bg-hover: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 35%, white), color-mix(in srgb, var(--surface) 82%, white));
  --tab-accent: var(--tab-c);
  --top-bg: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 55%, white), var(--surface));
  --bar-bg: repeating-linear-gradient(to bottom, var(--hi) 0 1px, var(--bar-s) 1px 2px);
  --bar-fg: var(--text);
}
[data-style="os9"] .topbar {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #61bb46, #fdb827, #f5821f, #e03a3e, #963d97, #009ddc) 1;
}
[data-style="os9"] .btn.solid {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--primary-bg) 60%, white), var(--primary-bg) 55%, color-mix(in srgb, var(--primary-bg) 85%, black));
  border-color: var(--lo2);
}
[data-style="os9"] .btn.solid:hover { background-color: var(--primary-bg); }
[data-style="os9"] .node.active { box-shadow: inset 0 0 0 1px var(--primary-dark); }
[data-style="os9"] .modal-head { position: relative; padding: 4px 8px; min-height: 2rem; gap: 6px; justify-content: flex-start; border-bottom-color: var(--lo2); }
[data-style="os9"] .modal-head h2 {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  flex: none; margin: 0; padding: 0 12px; max-width: calc(100% - 6.5rem);
  background: var(--surface); border-radius: 3px; line-height: 1.25; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-style="os9"] .modal-head .spacer { display: none; }
html[data-style="os9"][data-theme] .modal-head .icon-btn {
  margin: 0; width: 1.05rem; height: 1.05rem; flex-basis: 1.05rem; font-size: .8rem;
  border-radius: 2px;
}
[data-style="os9"] .modal-head::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-left: auto; margin-right: 20px;
  box-sizing: border-box; border: 1px solid var(--lo2); border-radius: 2px; background: var(--btn-bg);
  box-shadow: inset 1px 1px 0 var(--hi), 19px 0 0 0 var(--surface), 19px 0 0 1px var(--lo2);
}


/* ═══ Windows 95 ══════════════════════════════════════════
   Two-tone bevels on a grey face, navy selection, a navy title bar, and a
   teal desktop behind dialogs. Dark is a charcoal take on the same bevels. */
[data-theme="win95-light"] {
  --bg: #ffffff; --surface: #c0c0c0; --border: #808080;
  --text: #000000; --muted: #404040;
  --primary: #000080; --primary-bg: #000080; --primary-dark: #00005a; --on-primary: #ffffff;
  --secondary: #a06000;
  --danger: #b00000; --input-bg: #ffffff; --bg-hover: #e4e4e4;
  --hi: #ffffff; --hi2: #dfdfdf; --lo: #808080; --lo2: #000000;
  --bar-a: #000080; --bar-b: #1084d0; --bar-t: #ffffff;
  --scrim: rgba(0, 128, 128, 0.55);
}
[data-theme="win95-dark"] {
  --bg: #1b1b1b; --surface: #3c3c3c; --border: #6a6a6a;
  --text: #ececec; --muted: #b4b4b4;
  --primary: #86aaff; --primary-bg: #1c3a9e; --primary-dark: #142a74; --on-primary: #ffffff;
  --secondary: #e0b030;
  --danger: #ff6b6b; --input-bg: #101010; --bg-hover: #2c2c2c;
  --hi: #7a7a7a; --hi2: #565656; --lo: #222222; --lo2: #000000;
  --bar-a: #0a246a; --bar-b: #3a6ea5; --bar-t: #ffffff;
  --scrim: rgba(0, 60, 60, 0.6);
}
[data-style="win95"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --bwp: 2px;
  --raised-bc: var(--hi) var(--lo2) var(--lo2) var(--hi);
  --raised-sh: inset -1px -1px 0 var(--lo), inset 1px 1px 0 var(--hi2);
  --sunken-bc: var(--lo) var(--hi) var(--hi) var(--lo);
  --sunken-sh: inset -1px -1px 0 var(--hi2), inset 1px 1px 0 var(--lo2);
  --panel-bc: var(--hi) var(--lo) var(--lo) var(--hi);
  --panel-sh: 0 0 0 1px var(--lo2), 4px 4px 0 rgba(0, 0, 0, 0.35);
  --pop-sh: 0 0 0 1px var(--lo2), 3px 3px 0 rgba(0, 0, 0, 0.3);
  --float-sh: 0 0 0 1px var(--lo2), 3px 3px 0 rgba(0, 0, 0, 0.3);
  --tn-sh: 1px 1px 0 var(--lo2);
  --hover-bc: var(--raised-bc); --hover-fg: var(--text);
  --btn-bg: var(--surface); --btn-bg-hover: var(--surface);
  --tab-accent: transparent;
  --bar-bg: linear-gradient(90deg, var(--bar-a), var(--bar-b));
  --bar-fg: var(--bar-t);
}
[data-style="win95"] .modal-head { padding: 3px 4px 3px 8px; }
[data-style="win95"] .modal-head h2 { font-size: .95rem; }
[data-style="win95"] .modal-head .icon-btn { width: 1.2rem; height: 1.1rem; flex-basis: 1.2rem; font-size: .85rem; }
[data-style="win95"] .tab { border-bottom-color: var(--lo2); }
[data-style="win95"] .tab.active, [data-style="win95"] .tab.active:hover { border-bottom-color: var(--surface); }


/* ═══ BeOS ════════════════════════════════════════════════
   Soft grey bevels with a black hairline, small radii, and the yellow window
   tab, which shows up on dialogs and on the active tab. */
[data-theme="beos-light"] {
  --bg: #f6f6f6; --surface: #d8d8d8; --border: #9a9a9a;
  --text: #000000; --muted: #505050;
  --primary: #1c4f96; --primary-bg: #8fb4ea; --primary-dark: #6b97d6; --on-primary: #000000;
  --secondary: #d99a00;
  --danger: #b3261e; --input-bg: #ffffff; --bg-hover: #ebebeb;
  --hi: #ffffff; --lo: #8c8c8c; --lo2: #5a5a5a; --tab-y: #ffcb00;
}
[data-theme="beos-dark"] {
  --bg: #262626; --surface: #3a3a3a; --border: #161616;
  --text: #e8e8e8; --muted: #a8a8a8;
  --primary: #8fb8f5; --primary-bg: #3d6aa8; --primary-dark: #2f5588; --on-primary: #ffffff;
  --secondary: #ffcb00;
  --danger: #ff7468; --input-bg: #1c1c1c; --bg-hover: #303030;
  --hi: #5c5c5c; --lo: #222222; --lo2: #0d0d0d; --tab-y: #e0ae00;
}
[data-style="beos"] {
  --radius: 4px; --r-ctl: 3px; --r-btn: 3px; --r-tab: 5px; --r-icon: 3px; --r-pill: 8px;
  --raised-bc: var(--lo2);
  --raised-sh: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--lo);
  --sunken-bc: var(--lo) var(--hi) var(--hi) var(--lo);
  --sunken-sh: inset 1px 1px 0 rgba(0, 0, 0, 0.22);
  --panel-bc: var(--lo2);
  --panel-sh: 0 8px 22px rgba(0, 0, 0, 0.35);
  --pop-sh: 0 6px 16px rgba(0, 0, 0, 0.3);
  --float-sh: 0 2px 6px rgba(0, 0, 0, 0.3);
  --tn-sh: 0 1px 2px rgba(0, 0, 0, 0.3);
  --hover-bc: var(--lo2); --hover-fg: var(--text);
  --btn-bg: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 65%, white), var(--surface));
  --btn-bg-hover: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 55%, white), color-mix(in srgb, var(--surface) 85%, white));
  --tab-accent: var(--tab-y);
  --bar-bg: var(--surface);
  --bar-fg: var(--tab-y);
}
[data-style="beos"] .modal-head { padding: 8px 10px 0; align-items: flex-end; }
[data-style="beos"] .modal-head h2 {
  flex: 0 0 auto; margin: 0; padding: 4px 18px 3px;
  background: var(--tab-y); color: #000;
  border: 1px solid var(--lo2); border-bottom: none; border-radius: 6px 6px 0 0;
  font-size: .95rem;
  position: relative; top: 1px;
}
[data-style="beos"] .modal-head .icon-btn { align-self: center; margin-bottom: 6px; }


/* ═══ Atari ST — GEM ══════════════════════════════════════
   Square, 2px black outlines, shadowed dialogs, dense hatched title bars and
   a green desktop behind them. Dark is the mono monitor in inverse. */
[data-theme="atari-light"] {
  --bg: #ffffff; --surface: #ececec; --border: #000000;
  --text: #000000; --muted: #505050;
  --primary: #007a3d; --primary-bg: #000000; --primary-dark: #000000; --on-primary: #ffffff;
  --secondary: #d40000;
  --danger: #d40000; --input-bg: #ffffff; --bg-hover: #e2f3e8;
  --scrim: rgba(0, 170, 85, 0.55);
}
[data-theme="atari-dark"] {
  --bg: #000000; --surface: #141414; --border: #ececec;
  --text: #ffffff; --muted: #a8a8a8;
  --primary: #44e08a; --primary-bg: #ffffff; --primary-dark: #ffffff; --on-primary: #000000;
  --secondary: #ff5a5a;
  --danger: #ff5a5a; --input-bg: #000000; --bg-hover: #0d2a1a;
  --scrim: rgba(0, 60, 30, 0.7);
}
[data-style="atari-st"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --bw: 2px; --bwp: 2px;
  --raised-sh: 2px 2px 0 var(--border);
  --panel-sh: 5px 5px 0 var(--border);
  --pop-sh: 4px 4px 0 var(--border);
  --float-sh: 3px 3px 0 var(--border);
  --tn-sh: 2px 2px 0 var(--border);
  --hover-bc: var(--border); --hover-fg: var(--text);
  --btn-bg: var(--input-bg); --btn-bg-hover: var(--input-bg);
  --tab-accent: transparent;
  --bar-bg: repeating-linear-gradient(to bottom, var(--border) 0 1px, var(--bg) 1px 2px);
  --bar-fg: var(--text);
}
/* GEM: the close box sits flush at the left edge, the title is centred on the
   whole bar (out of flow), each with a gap cut out of the hatching around it. */
[data-style="atari-st"] .modal-head { position: relative; padding: 5px 8px; min-height: 2.1rem; justify-content: flex-start; }
[data-style="atari-st"] .modal-head h2 {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  flex: none; margin: 0; padding: 0 12px; max-width: calc(100% - 5rem);
  background: var(--bg); line-height: 1.25; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-style="atari-st"] .modal-head .spacer { display: none; }
html[data-style="atari-st"][data-theme] .modal-head .icon-btn,
html[data-style="atari-st"][data-theme] .modal-head .icon-btn:active:not(:disabled) {
  margin: 0; width: 1.2rem; height: 1.2rem; flex: 0 0 1.2rem; padding: 0; font-size: .8rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--bg);
}
[data-style="atari-st"] .topbar { border-bottom-width: 2px; }
[data-style="atari-st"] .list-header { border-bottom-width: 2px; }
html[data-style="atari-st"] :is(.btn:not(.ghost), .icon-btn, .mini, .theme-btn, .loadmore):active:not(:disabled) {
  background: var(--text); color: var(--bg);
}


/* ═══ Amiga Workbench ═════════════════════════════════════
   Light is Workbench 3: grey, two-pixel white/black bevels, a blue title bar.
   Dark is Workbench 1.3: blue, white lines and orange highlights. */
[data-theme="amiga-light"] {
  --bg: #cfcfcf; --surface: #aaaaaa; --border: #000000;
  --text: #000000; --muted: #3c3c3c;
  --primary: #0055aa; --primary-bg: #0055aa; --primary-dark: #003d7a; --on-primary: #ffffff;
  --secondary: #e06c00;
  --danger: #cc2200; --input-bg: #e8e8e8; --bg-hover: #dddddd;
  --hi: #ffffff; --lo: #000000;
  --bar-a: #0055aa; --bar-t: #ffffff;
  --scrim: rgba(0, 40, 100, 0.55);
}
[data-theme="amiga-dark"] {
  --bg: #0055aa; --surface: #004488; --border: #ffffff;
  --text: #ffffff; --muted: #b8d4f4;
  --primary: #ff8800; --primary-bg: #ff8800; --primary-dark: #cc6e00; --on-primary: #000000;
  --secondary: #ffcc00;
  --danger: #ff6655; --input-bg: #002b5c; --bg-hover: #1066bb;
  --hi: #ffffff; --lo: #000000;
  --bar-a: #ffffff; --bar-t: #000000;
  --scrim: rgba(0, 20, 60, 0.65);
}
[data-style="amiga"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --bw: 2px; --bwp: 2px;
  --raised-bc: var(--hi) var(--lo) var(--lo) var(--hi);
  --sunken-bc: var(--lo) var(--hi) var(--hi) var(--lo);
  --panel-bc: var(--hi) var(--lo) var(--lo) var(--hi);
  --panel-sh: 0 0 0 1px var(--lo), 4px 4px 0 rgba(0, 0, 0, 0.4);
  --pop-sh: 0 0 0 1px var(--lo), 3px 3px 0 rgba(0, 0, 0, 0.4);
  --float-sh: 2px 2px 0 var(--lo);
  --tn-sh: 1px 1px 0 var(--lo);
  --hover-bc: var(--raised-bc); --hover-fg: var(--text);
  --btn-bg: var(--surface); --btn-bg-hover: var(--surface);
  --tab-accent: transparent;
  --bar-bg: var(--bar-a);
  --bar-fg: var(--bar-t);
}
[data-style="amiga"] .modal-head { padding: 3px 6px; border-bottom: 2px solid var(--lo); }
[data-style="amiga"] .modal-head h2 { font-size: .95rem; }
[data-style="amiga"] .modal-head .icon-btn { width: 1.3rem; height: 1.2rem; flex-basis: 1.3rem; font-size: .85rem; }
[data-style="amiga"] .topbar { border-bottom-width: 2px; border-bottom-color: var(--lo); }


/* ═══ 1992 DOS ════════════════════════════════════════════
   Text-mode UI: blue screen, cyan menu bar, double-line dialog frames, hard
   black drop shadows and <Bracketed> buttons. Light is a grey dialog scheme. */
[data-theme="dos-dark"] {
  --bg: #0000aa; --surface: #00008c; --border: #00aaaa;
  --text: #ffffff; --muted: #aaaaaa;
  --primary: #55ffff; --primary-bg: #00aaaa; --primary-dark: #008888; --on-primary: #000000;
  --secondary: #ffff55;
  --danger: #ff5555; --input-bg: #000000; --bg-hover: #0000cc;
  --btn-face: #000000;
  --top-a: #00aaaa; --top-t: #000000;
  --scrim: rgba(0, 0, 40, 0.65);
}
[data-theme="dos-light"] {
  --bg: #ffffff; --surface: #aaaaaa; --border: #000000;
  --text: #000000; --muted: #444444;
  --primary: #0000aa; --primary-bg: #0000aa; --primary-dark: #000080; --on-primary: #ffffff;
  --secondary: #aa5500;
  --danger: #aa0000; --input-bg: #ffffff; --bg-hover: #d4d4d4;
  --btn-face: #aaaaaa;
  --top-a: #00aaaa; --top-t: #000000;
  --scrim: rgba(0, 0, 130, 0.5);
}
[data-style="dos"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --bwp: 3px; --bsp: double;
  --raised-sh: 2px 2px 0 #000000;
  --panel-sh: 6px 6px 0 rgba(0, 0, 0, 0.6);
  --pop-sh: 4px 4px 0 #000000;
  --float-sh: 3px 3px 0 #000000;
  --tn-sh: 2px 2px 0 #000000;
  --btn-bg: var(--btn-face); --btn-bg-hover: var(--btn-face);
  --tab-accent: transparent;
  --top-bg: var(--top-a); --top-fg: var(--top-t);
  --bar-bg: var(--top-a); --bar-fg: var(--top-t);
}
[data-style="dos"] .modal-head h2 { text-align: center; font-size: .95rem; }
[data-style="dos"] .modal-head .icon-btn { width: 1.3rem; height: 1.3rem; flex-basis: 1.3rem; margin-left: 0; order: -1; }
[data-style="dos"] .btn::before { content: "<"; }
[data-style="dos"] .btn::after { content: ">"; }
[data-style="dos"] .btn:not(.ghost) { box-shadow: var(--raised-sh); }
[data-style="dos"] .topbar { border-bottom-color: #000000; }


/* ═══ Aqua ════════════════════════════════════════════════
   Early Mac OS X: candy pill buttons, brushed toolbar, pinstriped sidebar and
   dialogs, gel traffic-light window buttons. Dark is Graphite. */
[data-theme="aqua-light"] {
  --bg: #ffffff; --surface: #ececec; --border: #b4b4b4;
  --text: #1c1c1c; --muted: #6c6c6c;
  --primary: #1f66d1; --primary-bg: #3b82e6; --primary-dark: #2a68c0; --on-primary: #ffffff;
  --secondary: #f0a30a;
  --danger: #d93a2f; --input-bg: #ffffff; --bg-hover: #eef4fd;
  --btn-hi: #ffffff; --btn-lo: #dcdcdc; --gloss: rgba(255, 255, 255, 0.9);
  --stripe: rgba(255, 255, 255, 0.6); --top-a: #f3f3f3; --top-b: #cfcfcf;
}
[data-theme="aqua-dark"] {
  --bg: #2a2a2d; --surface: #38383c; --border: #17171a;
  --text: #ececee; --muted: #a2a2a8;
  --primary: #6eaeff; --primary-bg: #3f78c8; --primary-dark: #2f60a6; --on-primary: #ffffff;
  --secondary: #ffb938;
  --danger: #ff6b60; --input-bg: #1e1e21; --bg-hover: #343439;
  --btn-hi: #5d5d63; --btn-lo: #3a3a3f; --gloss: rgba(255, 255, 255, 0.2);
  --stripe: rgba(255, 255, 255, 0.04); --top-a: #58585d; --top-b: #3a3a3e;
}
[data-style="aqua"] {
  --r-ctl: 6px; --r-btn: 8px; --r-tab: 10px; --r-icon: 999px;
  --raised-sh: inset 0 1px 0 var(--gloss), 0 1px 2px rgba(0, 0, 0, 0.25);
  --sunken-sh: inset 0 1px 3px rgba(0, 0, 0, 0.3);
  --panel-sh: 0 14px 36px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(0, 0, 0, 0.45);
  --pop-sh: 0 8px 24px rgba(0, 0, 0, 0.35);
  --float-sh: 0 3px 10px rgba(0, 0, 0, 0.35);
  --tn-sh: 0 1px 3px rgba(0, 0, 0, 0.3);
  /* candy: a bright upper half over a deeper lower half, split at the middle */
  --btn-bg: linear-gradient(to bottom, var(--btn-hi) 0%, color-mix(in srgb, var(--btn-hi) 55%, var(--btn-lo)) 49%, var(--btn-lo) 50%, color-mix(in srgb, var(--btn-lo) 65%, var(--btn-hi)) 100%);
  --btn-bg-hover: linear-gradient(to bottom, var(--btn-hi) 0%, color-mix(in srgb, var(--btn-hi) 55%, var(--primary-bg)) 49%, color-mix(in srgb, var(--btn-lo) 70%, var(--primary-bg)) 50%, color-mix(in srgb, var(--btn-lo) 50%, var(--btn-hi)) 100%);
  --tab-accent: transparent;
  --top-bg: linear-gradient(to bottom, var(--top-a), var(--top-b));
  --bar-bg: linear-gradient(to bottom, var(--top-a), var(--top-b));
  --bar-fg: var(--text);
  --scrim: rgba(0, 0, 0, 0.35);
}
[data-style="aqua"] .btn { border-radius: 999px; padding-left: 18px; padding-right: 18px; }
[data-style="aqua"] .btn.sm { padding-left: 14px; padding-right: 14px; }
[data-style="aqua"] .btn.solid {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--primary-bg) 45%, white),
    color-mix(in srgb, var(--primary-bg) 85%, white) 49%,
    var(--primary-bg) 50%,
    color-mix(in srgb, var(--primary-bg) 70%, white));
  border-color: color-mix(in srgb, var(--primary-bg) 70%, black);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), inset 0 -3px 5px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.35);
}
[data-style="aqua"] .btn.solid:hover { background: linear-gradient(to bottom,
  color-mix(in srgb, var(--primary-bg) 38%, white),
  color-mix(in srgb, var(--primary-bg) 78%, white) 49%,
  color-mix(in srgb, var(--primary-bg) 92%, black) 50%,
  color-mix(in srgb, var(--primary-bg) 62%, white)); filter: none; }
[data-style="aqua"] :is(.node.active, .article.active) {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.08) 51%);
}
/* pinstripes: the sidebar and every dialog body */
[data-style="aqua"] :is(.sidebar, .modal-card) {
  background-image: repeating-linear-gradient(to bottom, var(--stripe) 0 2px, transparent 2px 4px);
}
/* gel traffic lights: the close button is the red one, the other two are for show */
[data-style="aqua"] .modal-head { position: relative; padding: 7px 12px; min-height: 2.2rem; gap: 6px; justify-content: flex-start; }
[data-style="aqua"] .modal-head h2 {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  flex: none; margin: 0; max-width: calc(100% - 6rem); line-height: 1.25; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
[data-style="aqua"][data-mode="dark"] .modal-head h2 { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); }
[data-style="aqua"] .modal-head .spacer { display: none; }
html[data-style="aqua"][data-theme] .modal-head .icon-btn {
  order: -1; margin: 0; width: 13px; height: 13px; flex: 0 0 13px; padding: 0;
  border-radius: 50%; font-size: 11px; font-weight: 700; color: transparent;
  border: 1px solid #b0261c;
  background: radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.85) 0 22%, rgba(255, 255, 255, 0) 55%), radial-gradient(circle at 50% 85%, #ff9a8f, #ff5f57 55%, #d8382e);
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
}
html[data-style="aqua"][data-theme] .modal-head .icon-btn:hover { color: rgba(90, 0, 0, 0.85); }
[data-style="aqua"] .modal-head::before {
  content: ""; flex: 0 0 32px; width: 32px; height: 13px;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.85) 0 22%, rgba(255, 255, 255, 0) 55%) 0 0 / 13px 13px no-repeat,
    radial-gradient(circle at 50% 85%, #ffe28a, #febc2e 55%, #d89a0c) 0 0 / 13px 13px no-repeat,
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.85) 0 22%, rgba(255, 255, 255, 0) 55%) 19px 0 / 13px 13px no-repeat,
    radial-gradient(circle at 50% 85%, #8ff0a0, #28c840 55%, #14962a) 19px 0 / 13px 13px no-repeat;
  filter: drop-shadow(0 1px 0.5px rgba(0, 0, 0, 0.3));
}
[data-style="aqua"] .tn-brand {
  flex: 0 0 4px; width: 4px; height: 4px; margin-right: 11px; border-radius: 50%;
  background: #ff5f57; box-shadow: 6px 0 0 #febc2e, 12px 0 0 #28c840;
}


/* ═══ Cyberpunk ═══════════════════════════════════════════
   Near-black with a yellow selection slab, cyan hover, cut-corner buttons,
   shouty tracked caps and a glow. Light is the same city at midday. */
[data-theme="cyber-dark"] {
  --bg: #0a0a12; --surface: #101120; --border: #2a2d4a;
  --text: #e8e8f4; --muted: #8084ad;
  --primary: #fcee0a; --primary-bg: #fcee0a; --primary-dark: #d9cc00; --on-primary: #000000;
  --secondary: #00f0ff;
  --danger: #ff2a6d; --input-bg: #0c0d18; --bg-hover: #1a1c34;
  --neon: #00f0ff; --glow: rgba(252, 238, 10, 0.3);
}
[data-theme="cyber-light"] {
  --bg: #f1f1ec; --surface: #e2e2dc; --border: #15151f;
  --text: #0d0d16; --muted: #585870;
  --primary: #c2005c; --primary-bg: #fcee0a; --primary-dark: #d9cc00; --on-primary: #000000;
  --secondary: #008c9a;
  --danger: #d4004a; --input-bg: #ffffff; --bg-hover: #fbf6b0;
  --neon: #c2005c; --glow: rgba(0, 0, 0, 0.12);
}
[data-style="cyberpunk"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --panel-sh: 0 0 0 1px var(--border), 0 0 34px var(--glow);
  --pop-sh: 0 0 0 1px var(--border), 0 0 22px var(--glow);
  --float-sh: 0 0 16px var(--glow);
  --tn-sh: 0 0 6px var(--glow);
  --hover-bc: var(--neon); --hover-fg: var(--neon);
  --btn-case: uppercase; --btn-track: 0.08em;
  --tab-accent: var(--primary-bg);
  --bar-bg: var(--surface); --bar-fg: var(--text); --bar-accent: var(--primary-bg);
  --scrim: rgba(0, 0, 0, 0.6);
}
[data-style="cyberpunk"] :is(.btn, .theme-btn, .mini, .loadmore, .icon-btn, .login button, .new-articles) {
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
}
[data-style="cyberpunk"] .modal-card { border-top: 3px solid var(--primary-bg); }
[data-style="cyberpunk"] .modal-head h2 { text-transform: uppercase; letter-spacing: 0.14em; font-size: .95rem; }
[data-style="cyberpunk"] .modal-head::before {
  content: ""; align-self: stretch; flex: 0 0 5px; margin: -10px 4px -10px -12px;
  background: var(--primary-bg);
}
[data-style="cyberpunk"] .topbar { border-bottom-color: var(--primary-bg); box-shadow: 0 1px 14px var(--glow); }
[data-style="cyberpunk"] .side-heading, [data-style="cyberpunk"] .list-header h2 { letter-spacing: 0.14em; }
[data-style="cyberpunk"] .list-header h2 { text-transform: uppercase; }


/* ═══ Phosphor ════════════════════════════════════════════
   A terminal. Dark is green phosphor with a soft glow and faint scanlines;
   light is greenbar fanfold paper. Buttons are [ BRACKETED ]. */
[data-theme="phosphor-dark"] {
  --bg: #030a05; --surface: #06140a; --border: #0f5a28;
  --text: #35ff72; --muted: #22b058;
  --primary: #b9ffcf; --primary-bg: #35ff72; --primary-dark: #1fcc58; --on-primary: #021208;
  --secondary: #ffb000;
  --danger: #ff5f56; --input-bg: #000000; --bg-hover: #0b2a15;
  --glow: rgba(53, 255, 114, 0.35); --scan: rgba(0, 0, 0, 0.16); --bar-green: transparent;
}
[data-theme="phosphor-light"] {
  --bg: #f7faf1; --surface: #e4eedb; --border: #a9c9b0;
  --text: #10301a; --muted: #4c6e57;
  --primary: #0b7a32; --primary-bg: #0b7a32; --primary-dark: #075c25; --on-primary: #ffffff;
  --secondary: #b36a00;
  --danger: #c0392b; --input-bg: #ffffff; --bg-hover: #dcebd2;
  --glow: transparent; --scan: transparent; --bar-green: rgba(60, 160, 90, 0.11);
}
[data-style="phosphor"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --panel-sh: 0 0 0 1px var(--border), 0 0 26px var(--glow);
  --pop-sh: 0 0 0 1px var(--border), 0 0 18px var(--glow);
  --float-sh: 0 0 12px var(--glow);
  --tn-sh: 0 0 6px var(--glow);
  --btn-case: uppercase; --btn-track: 0.1em;
  --tab-accent: var(--primary-bg);
  --bar-bg: var(--surface); --bar-fg: var(--text); --bar-accent: var(--primary-bg);
}
[data-style="phosphor"] body { text-shadow: 0 0 4px var(--glow); }
[data-style="phosphor"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--scan) 0 1px, transparent 1px 3px);
}
[data-style="phosphor"] .btn::before { content: "["; }
[data-style="phosphor"] .btn::after { content: "]"; }
[data-style="phosphor"] .modal-head h2 { text-transform: uppercase; letter-spacing: 0.12em; font-size: .95rem; }
[data-style="phosphor"] .modal-head h2::before { content: "> "; }
[data-theme="phosphor-light"] .article:nth-child(even):not(.active):not(:hover) { background: var(--bar-green); }


/* ═══ Broadsheet ══════════════════════════════════════════
   Newsprint: paper stock, ink-black rules, double-rule frames, square corners,
   buttons that print in reverse when you point at them. Dark is the night
   edition. */
[data-theme="news-light"] {
  --bg: #f6f1e4; --surface: #ece4d0; --border: #b9ae95;
  --text: #1c1a17; --muted: #6a6252;
  --primary: #9c1c1c; --primary-bg: #1c1a17; --primary-dark: #000000; --on-primary: #f6f1e4;
  --secondary: #b8860b;
  --danger: #a01212; --input-bg: #fbf8ee; --bg-hover: #e8dfc8;
  --ink: #1c1a17;
}
[data-theme="news-dark"] {
  --bg: #17150f; --surface: #201d16; --border: #4a4435;
  --text: #e8e0cb; --muted: #a39a82;
  --primary: #e0a45c; --primary-bg: #e8e0cb; --primary-dark: #ffffff; --on-primary: #17150f;
  --secondary: #d9b45a;
  --danger: #e8705f; --input-bg: #1c1912; --bg-hover: #29251b;
  --ink: #e8e0cb;
}
[data-style="broadsheet"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --bwp: 3px; --bsp: double;
  --raised-bc: var(--ink);
  --sunken-bc: var(--ink);
  --panel-bc: var(--ink);
  --panel-sh: 6px 6px 0 rgba(0, 0, 0, 0.2);
  --pop-sh: 4px 4px 0 rgba(0, 0, 0, 0.2);
  --float-sh: 3px 3px 0 rgba(0, 0, 0, 0.25);
  --tn-sh: 2px 2px 0 rgba(0, 0, 0, 0.2);
  --hover-bc: var(--ink); --hover-fg: var(--bg);
  --btn-bg-hover: var(--ink);
  --btn-case: uppercase; --btn-track: 0.08em;
  --tab-accent: var(--ink);
  --bar-bg: var(--surface); --bar-fg: var(--text);
}
[data-style="broadsheet"] .topbar { border-bottom: 3px double var(--ink); }
[data-style="broadsheet"] .modal-head { border-bottom: 3px double var(--ink); }
[data-style="broadsheet"] .modal-head h2 { flex: 1; text-align: center; text-transform: uppercase; letter-spacing: 0.14em; font-size: .95rem; }
[data-style="broadsheet"] .list-header { border-bottom: 2px solid var(--ink); }
[data-style="broadsheet"] .list-header h2 { text-transform: uppercase; letter-spacing: 0.12em; }
[data-style="broadsheet"] .side-heading { border-bottom: 1px solid var(--ink); }


/* ═══ Soviet ══════════════════════════════════════════════
   Constructivist agitprop: cream stock, black ink, one loud red. Square
   corners, hard red offset shadows, red title bars with shouty caps and a star.
   Dark is the red-star night: near-black with cream ink and gold links. */
[data-theme="soviet-light"] {
  --bg: #efe6cf; --surface: #e2d6b8; --border: #1a1614;
  --text: #1a1614; --muted: #5a5040;
  --primary: #b00d28; --primary-bg: #c8102e; --primary-dark: #9a0b22; --on-primary: #f6eed8;
  --secondary: #8a6400;
  --danger: #a00018; --input-bg: #f7f0dc; --bg-hover: #ead9b0;
  --ink: #1a1614; --red: #c8102e; --cream: #f6eed8;
}
[data-theme="soviet-dark"] {
  --bg: #121010; --surface: #1f1818; --border: #5a4a44;
  --text: #f0e6cc; --muted: #b0a488;
  --primary: #ffd23f; --primary-bg: #c8102e; --primary-dark: #e02a42; --on-primary: #f6eed8;
  --secondary: #ffd23f;
  --danger: #ff6b5a; --input-bg: #0b0909; --bg-hover: #2a1313;
  --ink: #f0e6cc; --red: #c8102e; --cream: #f6eed8;
}
[data-style="soviet"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --bw: 2px; --bwp: 3px;
  --raised-bc: var(--ink);
  --raised-sh: 3px 3px 0 var(--red);
  --sunken-bc: var(--ink);
  --panel-bc: var(--ink);
  --panel-sh: 8px 8px 0 var(--red);
  --pop-sh: 5px 5px 0 var(--red);
  --float-sh: 3px 3px 0 var(--red);
  --tn-sh: 2px 2px 0 var(--red);
  --hover-bc: var(--red); --hover-fg: var(--text);
  --btn-case: uppercase; --btn-track: 0.1em;
  --btn-bg: var(--input-bg); --btn-bg-hover: var(--bg-hover);
  --tab-accent: var(--red);
  --bar-bg: var(--red); --bar-fg: var(--cream);
  --scrim: rgba(60, 8, 8, 0.6);
}
[data-style="soviet"] .topbar { border-bottom: 4px solid var(--red); box-shadow: 0 3px 0 var(--ink); }
[data-style="soviet"] .list-header { border-bottom: 3px solid var(--red); }
[data-style="soviet"] .list-header h2,
[data-style="soviet"] .side-heading { text-transform: uppercase; letter-spacing: 0.12em; }
[data-style="soviet"] .modal-head { border-bottom: 3px solid var(--ink); padding: 8px 12px; }
[data-style="soviet"] .modal-head h2 { text-transform: uppercase; letter-spacing: 0.16em; font-size: .95rem; font-weight: 800; }
[data-style="soviet"] .modal-head h2::before { content: "\2605\00a0"; }
[data-style="soviet"] .modal-head .icon-btn { background: var(--cream); color: #1a1614; border-color: #1a1614; box-shadow: 2px 2px 0 #1a1614; }
[data-style="soviet"] .article { border-left: 5px solid transparent; }
[data-style="soviet"] .article:not(.read):not(.active) { border-left-color: var(--red); }


/* ═══ Windows XP ══════════════════════════════════════════
   Luna: beige dialog faces, glossy blue title bars with a red close button,
   rounded top corners, orange hover glow, and the Bliss hill behind dialogs.
   Dark is Royale Noir: charcoal chrome on a night-time hill. */
[data-theme="xp-light"] {
  --bg: #ffffff; --surface: #ece9d8; --border: #aca899;
  --text: #000000; --muted: #5a5a5a;
  --primary: #0b45b8; --primary-bg: #316ac5; --primary-dark: #2456a8; --on-primary: #ffffff;
  --secondary: #d97a00;
  --danger: #c42b1c; --input-bg: #ffffff; --bg-hover: #eaf1fc;
  --frame: #0831d9; --edge: #003c74; --field: #7f9db9;
  --b1: #ffffff; --b2: #d6d0c5; --bh1: #fffdf5; --bh2: #ffd98a; --glow: #f59a1b;
  --bar-g: linear-gradient(to bottom, #0058ee 0%, #3593ff 8%, #288eff 16%, #127dff 36%, #036ffc 80%, #0262ee 88%, #0057e5 94%, #0054e3 100%);
  --title-sh: #0a1a8a;
  --scrim:
    radial-gradient(ellipse 16% 5% at 24% 24%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 22% 6% at 66% 15%, rgba(255, 255, 255, 0.7), transparent 70%),
    radial-gradient(ellipse 130% 52% at 22% 114%, #5aa624 0 62%, transparent 63%),
    radial-gradient(ellipse 100% 40% at 88% 120%, #3f8a1a 0 64%, transparent 65%),
    linear-gradient(to bottom, #1e5fd0 0%, #4a90e8 38%, #9cc8f7 66%, #d6e9fb 100%);
}
[data-theme="xp-dark"] {
  --bg: #1b1d22; --surface: #2d3037; --border: #0d0e11;
  --text: #e9ecf2; --muted: #a7adbb;
  --primary: #7fb4ff; --primary-bg: #2f6fd0; --primary-dark: #2458a8; --on-primary: #ffffff;
  --secondary: #ffa94d;
  --danger: #ff7468; --input-bg: #14161a; --bg-hover: #262a33;
  --frame: #3a3d46; --edge: #0b0c0e; --field: #4a4e58;
  --b1: #5b606c; --b2: #2a2d34; --bh1: #6c7280; --bh2: #3a3d46; --glow: #5d9cf0;
  --bar-g: linear-gradient(to bottom, #6d727f 0%, #4b4f5a 14%, #35383f 52%, #23252b 100%);
  --title-sh: #000000;
  --scrim:
    radial-gradient(ellipse 130% 52% at 22% 114%, #1d4a1a 0 62%, transparent 63%),
    radial-gradient(ellipse 100% 40% at 88% 120%, #143a14 0 64%, transparent 65%),
    linear-gradient(to bottom, #060f2a 0%, #112a5c 45%, #27508f 85%, #3a6aa8 100%);
}
[data-style="xp"] {
  --radius: 8px; --r-ctl: 3px; --r-btn: 3px; --r-tab: 3px; --r-icon: 3px; --r-pill: 3px;
  --bwp: 3px;
  --raised-bc: var(--edge);
  --raised-sh: inset 0 -2px 2px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  --sunken-bc: var(--field);
  --sunken-sh: none;
  --panel-bc: var(--frame);
  --panel-sh: 3px 5px 12px rgba(0, 0, 0, 0.5);
  --pop-sh: 2px 4px 9px rgba(0, 0, 0, 0.4);
  --float-sh: 1px 3px 6px rgba(0, 0, 0, 0.4);
  --tn-sh: 1px 2px 4px rgba(0, 0, 0, 0.35);
  --hover-bc: var(--glow); --hover-fg: var(--text);
  --btn-bg: linear-gradient(to bottom, var(--b1) 0%, color-mix(in srgb, var(--b1) 40%, var(--b2)) 85%, var(--b2) 100%);
  --btn-bg-hover: linear-gradient(to bottom, var(--bh1) 0%, color-mix(in srgb, var(--bh1) 40%, var(--bh2)) 85%, var(--bh2) 100%);
  --tab-accent: #f5a623;
  --top-bg: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 45%, white), var(--surface));
  --bar-bg: var(--bar-g); --bar-fg: #ffffff;
}
[data-theme="xp-dark"][data-style="xp"] { --top-bg: linear-gradient(to bottom, var(--b1), var(--surface) 70%); }
[data-style="xp"] .btn.solid {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--primary-bg) 70%, white), var(--primary-bg) 60%, color-mix(in srgb, var(--primary-bg) 85%, black));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
[data-style="xp"] .btn.solid:hover { filter: brightness(1.1); }
[data-style="xp"] .modal-head { border-bottom: none; padding: 4px 5px 4px 10px; min-height: 1.9rem; }
[data-style="xp"] .modal-head h2 { font-size: .95rem; font-weight: 700; text-shadow: 1px 1px 0 var(--title-sh); }
html[data-style="xp"][data-theme] .modal-head .icon-btn {
  width: 21px; height: 21px; flex: 0 0 21px; padding: 0; margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #ffffff; border-radius: 3px; color: #ffffff; font-weight: 700; font-size: .85rem; line-height: 1;
  background: radial-gradient(ellipse at 30% 25%, #f3a58a, #d8431f 55%, #b82a08);
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
html[data-style="xp"][data-theme] .modal-head .icon-btn:hover { filter: brightness(1.12); }


/* ═══ Liquid Glass ════════════════════════════════════════
   Translucent panes that blur a soft wallpaper behind them, a luminous edge on
   everything, big rounded corners and capsule controls. The wallpaper is a
   colour-mesh drawn in CSS (--wall). Dark is the same glass at night. */
[data-theme="liquid-light"] {
  --bg: rgba(255, 255, 255, 0.5); --surface: rgba(255, 255, 255, 0.36); --border: rgba(20, 40, 90, 0.13);
  --text: #14213a; --muted: #43536e;
  --primary: #0a62d8; --primary-bg: #0a7aff; --primary-dark: #0060d8; --on-primary: #ffffff;
  --secondary: #e07b00;
  --danger: #d92b20; --input-bg: rgba(255, 255, 255, 0.6); --bg-hover: rgba(10, 122, 255, 0.12);
  --glass-strong: rgba(255, 255, 255, 0.78); --edge: rgba(255, 255, 255, 0.85); --spec: rgba(255, 255, 255, 0.9);
  --g1: rgba(255, 255, 255, 0.78); --g2: rgba(255, 255, 255, 0.32); --g1h: rgba(255, 255, 255, 0.95); --g2h: rgba(255, 255, 255, 0.55);
  --dim: rgba(20, 30, 70, 0.26); --shade: rgba(10, 20, 60, 0.28);
  --wall:
    radial-gradient(60% 55% at 14% 20%, #ffb3d9 0, transparent 70%),
    radial-gradient(55% 60% at 86% 14%, #8ec5ff 0, transparent 70%),
    radial-gradient(60% 60% at 82% 88%, #ffd49a 0, transparent 70%),
    radial-gradient(55% 55% at 18% 90%, #a9f0cc 0, transparent 70%),
    linear-gradient(135deg, #c9dcff, #f0d9ff);
}
[data-theme="liquid-dark"] {
  --bg: rgba(14, 18, 36, 0.5); --surface: rgba(28, 34, 66, 0.42); --border: rgba(255, 255, 255, 0.13);
  --text: #eef2ff; --muted: #a9b3d0;
  --primary: #7db4ff; --primary-bg: #2f7cf6; --primary-dark: #1f63d0; --on-primary: #ffffff;
  --secondary: #ffb84d;
  --danger: #ff7a7a; --input-bg: rgba(255, 255, 255, 0.1); --bg-hover: rgba(125, 180, 255, 0.16);
  --glass-strong: rgba(26, 32, 62, 0.82); --edge: rgba(255, 255, 255, 0.26); --spec: rgba(255, 255, 255, 0.3);
  --g1: rgba(255, 255, 255, 0.2); --g2: rgba(255, 255, 255, 0.06); --g1h: rgba(255, 255, 255, 0.3); --g2h: rgba(255, 255, 255, 0.12);
  --dim: rgba(0, 0, 12, 0.45); --shade: rgba(0, 0, 0, 0.5);
  --wall:
    radial-gradient(60% 55% at 14% 20%, #5b2a86 0, transparent 70%),
    radial-gradient(55% 60% at 86% 14%, #1d4ed8 0, transparent 70%),
    radial-gradient(60% 60% at 82% 88%, #0e7490 0, transparent 70%),
    radial-gradient(55% 55% at 18% 90%, #9d174d 0, transparent 70%),
    linear-gradient(135deg, #0b1026, #1a1038);
}
[data-style="liquid"] {
  --radius: 22px; --r-ctl: 12px; --r-btn: 12px; --r-tab: 12px; --r-icon: 12px;
  --raised-bc: var(--edge);
  --raised-sh: inset 0 1px 0 var(--spec), 0 2px 8px var(--shade);
  --sunken-bc: var(--edge);
  --sunken-sh: inset 0 1px 3px var(--shade);
  --panel-bc: var(--edge);
  --panel-sh: inset 0 1px 0 var(--spec), 0 22px 54px var(--shade);
  --pop-sh: inset 0 1px 0 var(--spec), 0 14px 34px var(--shade);
  --float-sh: inset 0 1px 0 var(--spec), 0 4px 16px var(--shade);
  --tn-sh: 0 2px 6px rgba(0, 0, 0, 0.3);
  --btn-bg: linear-gradient(to bottom, var(--g1), var(--g2));
  --btn-bg-hover: linear-gradient(to bottom, var(--g1h), var(--g2h));
  --tab-accent: var(--primary-bg);
  --bar-bg: linear-gradient(to bottom, var(--g1), transparent); --bar-fg: var(--text);
  --scrim: var(--dim);
}
html[data-style="liquid"] { background-color: var(--bg); background-image: var(--wall); background-attachment: fixed; }
html[data-style="liquid"] body { background: transparent; }
.tn-layer[data-style="liquid"] { background-image: var(--wall); }
html[data-style="liquid"] :is(.topbar, .sidebar, .listpane, .reader) {
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
}
html[data-style="liquid"] .modal { -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); }
html[data-style="liquid"] :is(.modal-card, .theme-popover) { background: var(--glass-strong); }
html[data-style="liquid"] .topbar { border-bottom-color: var(--edge); box-shadow: inset 0 -1px 0 var(--border), 0 4px 18px var(--shade); position: relative; z-index: 5; }
html[data-style="liquid"] .col-resizer { background: none; }
html[data-style="liquid"] .col-resizer:hover, html[data-style="liquid"] .col-resizer.dragging {
  background: linear-gradient(to right, transparent 2px, var(--edge) 2px, var(--edge) 5px, transparent 5px);
}
html[data-style="liquid"] .btn { border-radius: 999px; padding-left: 16px; padding-right: 16px; }
html[data-style="liquid"] .btn.solid {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--primary-bg) 70%, white), var(--primary-bg));
  border-color: rgba(255, 255, 255, 0.55); color: var(--on-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 3px 10px color-mix(in srgb, var(--primary-bg) 45%, transparent);
}
html[data-style="liquid"] .btn.solid:hover { filter: brightness(1.08); }
html[data-style="liquid"] :is(.node, .article) { border-radius: var(--r-ctl); }
html[data-style="liquid"] :is(.node.active, .article.active) {
  background: linear-gradient(to bottom, color-mix(in srgb, var(--primary-bg) 78%, white), var(--primary-bg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 8px color-mix(in srgb, var(--primary-bg) 40%, transparent);
}
html[data-style="liquid"] .modal-head { border-bottom-color: var(--border); padding: 14px 16px 10px; }
html[data-style="liquid"] .modal-head h2 { font-weight: 600; }


/* ═══ Neo-Brutalist ═══════════════════════════════════════
   Thick black outlines, hard offset shadows, flat saturated colour, and
   controls that sink into their shadow when pressed. Dark swaps the black for
   cream outlines on a deep purple. */
[data-theme="brutal-light"] {
  --bg: #fffdf2; --surface: #ffdc5e; --border: #000000;
  --text: #000000; --muted: #4a4a4a;
  --primary: #3d2fd9; --primary-bg: #ff6fb5; --primary-dark: #e0509a; --on-primary: #000000;
  --secondary: #e8470f;
  --danger: #d90f3c; --input-bg: #ffffff; --bg-hover: #ffc9e3;
}
[data-theme="brutal-dark"] {
  --bg: #15131f; --surface: #2a2342; --border: #f5f0e1;
  --text: #f5f0e1; --muted: #b6abcc;
  --primary: #ffe45c; --primary-bg: #ffe45c; --primary-dark: #e6c800; --on-primary: #000000;
  --secondary: #5ef0c0;
  --danger: #ff6b8a; --input-bg: #0e0c16; --bg-hover: #3a2f5c;
}
[data-style="brutal"] {
  --radius: 10px; --r-ctl: 8px; --r-btn: 8px; --r-tab: 8px; --r-icon: 8px;
  --bw: 2px; --bwp: 3px;
  --raised-sh: 3px 3px 0 var(--border);
  --panel-sh: 8px 8px 0 var(--border);
  --pop-sh: 5px 5px 0 var(--border);
  --float-sh: 3px 3px 0 var(--border);
  --tn-sh: 2px 2px 0 var(--border);
  --hover-bc: var(--border); --hover-fg: var(--text);
  --btn-bg: var(--input-bg); --btn-bg-hover: var(--bg-hover);
  --tab-accent: var(--primary-bg);
  --bar-bg: var(--primary-bg); --bar-fg: var(--on-primary);
  --scrim: rgba(0, 0, 0, 0.5);
}
html[data-style="brutal"] :is(.btn:not(.ghost), .icon-btn, .mini, .theme-btn, .loadmore):active:not(:disabled) { transform: translate(2px, 2px); }
[data-style="brutal"] .topbar { border-bottom-width: 3px; }
[data-style="brutal"] .list-header { border-bottom-width: 3px; }
[data-style="brutal"] .modal-head { border-bottom: 3px solid var(--border); }
[data-style="brutal"] .modal-head h2 { font-weight: 800; }
[data-style="brutal"] .btn { font-weight: 700; }
[data-style="brutal"] :is(.node.active, .article.active) { box-shadow: inset 0 0 0 2px var(--border); }
[data-style="brutal"] .tab.active { font-weight: 700; }


/* ═══ 1980s ════════════════════════════════
    Parallel racing bands (red, orange, yellow, teal) separated by thin cream
    gaps, on a warm cream ground. Dark is the sunset-on-navy take. */
[data-theme="pinstripe-light"] {
  --bg: #fff6df; --surface: #f8ecd0; --border: #3b2a20;
  --text: #3b2a20; --muted: #8a7766;
  --primary: #d1190f; --primary-bg: #d1190f; --primary-dark: #a8110a; --on-primary: #fff6df;
  --secondary: #2f9a9e;
  --danger: #c81e1e; --input-bg: #fffbef; --bg-hover: #f3e0b5;
  --band1: #d1190f; --band2: #f26b21; --band3: #ffa90a; --band4: #2f9a9e; --gap: #fff6df;
}
[data-theme="pinstripe-dark"] {
  --bg: #12284f; --surface: #1a3562; --border: #7fa6c4;
  --text: #fbe8c4; --muted: #9db4cc;
  --primary: #f07a3a; --primary-bg: #f07a3a; --primary-dark: #d9621f; --on-primary: #12284f;
  --secondary: #3a9bb0;
  --danger: #ff7b6b; --input-bg: #0d1e3e; --bg-hover: #234478;
  --band1: #e8743b; --band2: #f4b983; --band3: #f9e3b8; --band4: #3a9bb0; --gap: #12284f;
}
[data-style="pinstripe"] {
  --bands: linear-gradient(180deg,
    var(--band1) 0 25%, var(--gap) 25% 31%,
    var(--band2) 31% 50%, var(--gap) 50% 56%,
    var(--band3) 56% 75%, var(--gap) 75% 81%,
    var(--band4) 81% 100%);
  --radius: 10px; --r-ctl: 8px; --r-btn: 999px; --r-tab: 8px; --r-icon: 8px; --r-pill: 999px;
  --bw: 2px; --bwp: 2px;
  --raised-bc: var(--border);
  --raised-sh: 0 2px 0 var(--border);
  --sunken-bc: var(--border);
  --sunken-sh: inset 0 2px 0 rgba(0, 0, 0, 0.12);
  --panel-bc: var(--border);
  --panel-sh: 0 6px 0 var(--band1);
  --pop-sh: 0 4px 0 var(--band1);
  --float-sh: 0 3px 0 var(--band1);
  --tn-sh: 0 2px 0 var(--band1);
  --hover-bc: var(--primary); --hover-fg: var(--primary);
  --btn-case: uppercase; --btn-track: 0.06em;
  --btn-bg: var(--surface); --btn-bg-hover: var(--bg-hover);
  --tab-accent: var(--primary-bg);
  --bar-bg: var(--primary-bg); --bar-fg: var(--on-primary); --bar-accent: var(--secondary);
  --top-bg: var(--surface); --top-fg: var(--text);
  --scrim: rgba(40, 25, 15, 0.5);
}
/* banded strip: under the topbar, on dialog headers, down the sidebar edge */
[data-style="pinstripe"] .topbar { border-bottom: 0; position: relative; }
[data-style="pinstripe"] .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  background: var(--bands); pointer-events: none; z-index: 5;
}
[data-style="pinstripe"] .sidebar { border-right: 0; position: relative; }
[data-style="pinstripe"] .sidebar::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 14px;
  background: linear-gradient(90deg,
    var(--band1) 0 25%, var(--gap) 25% 31%,
    var(--band2) 31% 50%, var(--gap) 50% 56%,
    var(--band3) 56% 75%, var(--gap) 75% 81%,
    var(--band4) 81% 100%);
  pointer-events: none;
}
[data-style="pinstripe"] .modal-head { position: relative; padding-bottom: 14px; }
[data-style="pinstripe"] .modal-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--bands);
}
[data-style="pinstripe"] .list-header { border-bottom: 3px solid var(--border); padding-top: 22px; }
[data-style="pinstripe"] .list-header h2,
[data-style="pinstripe"] .side-heading { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; }
[data-style="pinstripe"] .modal-head { border-bottom: 0; background: var(--bar-bg); color: var(--bar-fg); }
[data-style="pinstripe"] .modal-head h2 { text-transform: uppercase; letter-spacing: 0.12em; font-size: .95rem; font-weight: 800; }
[data-style="pinstripe"] .btn { font-weight: 700; }
[data-style="pinstripe"] .btn.solid {
  background: var(--primary-bg); color: var(--on-primary);
  border-color: var(--border); box-shadow: 0 3px 0 var(--primary-dark);
}
[data-style="pinstripe"] .btn.solid:hover { background: var(--primary-dark); filter: none; }
html[data-style="pinstripe"] :is(.btn:not(.ghost), .icon-btn, .mini, .theme-btn, .loadmore):active:not(:disabled) {
  transform: translate(2px, 2px);
}
[data-style="pinstripe"] .node.active { background: var(--primary-bg); color: var(--on-primary); box-shadow: inset 0 0 0 2px var(--border); }
[data-style="pinstripe"] .node.active .count { background: transparent; color: var(--on-primary); }
[data-style="pinstripe"] .article { border-left: 4px solid transparent; }
[data-style="pinstripe"] .article:not(.read):not(.active) { border-left-color: var(--secondary); }
[data-style="pinstripe"] .article.active,
[data-style="pinstripe"] .article.active:hover { background: var(--primary-bg); box-shadow: inset 0 0 0 2px var(--border); }
[data-style="pinstripe"] .article.active :is(.a-title, .a-star, .count) { color: var(--on-primary); }
[data-style="pinstripe"] .article.active :is(.a-snippet, .a-source, .a-time) { color: color-mix(in srgb, var(--on-primary) 78%, transparent); }


/* ═══ Airy ════════════════════════════════════════════════
    A light, open modern look: big soft corners, hairline rules, barely-there
    shadows and a pastel palette. Roomy rows and a wide, calm reading column;
    meant to be paired with a characterful headline face. */
[data-theme="airy-light"] {
  --bg: #fdfdff; --surface: #f3f5fc; --border: #e2e7f3;
  --text: #242a3d; --muted: #7b829c;
  --primary: #6d7ef7; --primary-bg: #6d7ef7; --primary-dark: #5969e8; --on-primary: #ffffff;
  --secondary: #e58fc0;
  --danger: #e0607e; --input-bg: #ffffff; --bg-hover: #edf0fb;
  --line: #eceff8; --read-bg: #f7f8fd; --sel: #e3e9fe; --search-bg: #eef1fa;
}
[data-theme="airy-dark"] {
  --bg: #161923; --surface: #1d212e; --border: #2c3145;
  --text: #e8eaf4; --muted: #9aa1b8;
  --primary: #a5b0ff; --primary-bg: #7c88f0; --primary-dark: #9aa6ff; --on-primary: #14162a;
  --secondary: #e08bb8;
  --danger: #ff8ba0; --input-bg: #1a1e2a; --bg-hover: #242a3b;
  --line: #262b3c; --read-bg: #1a1e2b; --sel: #2a3154; --search-bg: #212634;
}
[data-style="airy"] {
  --radius: 20px; --r-ctl: 14px; --r-btn: 12px; --r-tab: 12px; --r-icon: 14px; --r-pill: 999px;
  --raised-sh: 0 1px 2px rgba(36, 42, 61, 0.04), 0 10px 28px rgba(36, 42, 61, 0.07);
  --sunken-sh: inset 0 1px 3px rgba(36, 42, 61, 0.07);
  --panel-sh: 0 28px 70px rgba(36, 42, 61, 0.16);
  --pop-sh: 0 14px 36px rgba(36, 42, 61, 0.13);
  --float-sh: 0 4px 16px rgba(36, 42, 61, 0.13);
  --tn-sh: 0 1px 3px rgba(36, 42, 61, 0.08);
  --hover-bc: var(--border); --hover-fg: var(--text);
  --btn-bg: transparent; --btn-bg-hover: var(--bg-hover);
  --tab-accent: var(--primary);
  --top-bg: var(--bg); --top-fg: var(--text);
  --scrim: rgba(22, 25, 35, 0.35);
}
[data-style="airy"] .topbar { border-bottom-color: var(--line); padding: 10px 18px; }
[data-style="airy"] .topbar-search input { padding: 10px 18px; background: var(--search-bg); border-color: transparent; border-radius: var(--r-pill); }
[data-style="airy"] .topbar-search input:focus { background: var(--input-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
[data-style="airy"] :is(input, select, textarea):focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); outline: none; }
[data-style="airy"] :is(.icon-btn, .mini, .theme-btn),
[data-style="airy"] :is(.icon-btn, .mini, .theme-btn):hover { border-color: transparent; }
[data-style="airy"] .btn { font-weight: 500; }
[data-style="airy"] .btn.solid { border-radius: var(--r-pill); }
[data-style="airy"] .btn.solid:hover { background: var(--primary-dark); border-color: var(--primary-dark); filter: none; }
[data-style="airy"] .theme-popover { background: var(--bg); }

/* navigation: roomy rounded rows, quiet selection tint */
[data-style="airy"] .sidebar { padding: 14px 8px 22px; }
[data-style="airy"] .node { padding: 8px 14px; min-height: 40px; border-radius: var(--r-ctl); }
[data-style="airy"] .node.active { background: var(--sel); color: var(--text); font-weight: 600; }
[data-style="airy"] .node .count { background: transparent; padding: 0; }
[data-style="airy"] .node.active .count { color: var(--text); }
[data-style="airy"] .kids { border-left-color: var(--line); margin-left: 15px; }

/* story rows: hairlines, space to breathe, tinted selection with an accent edge */
[data-style="airy"] .list-header { padding: 16px 22px; border-bottom-color: var(--line); }
[data-style="airy"] .list-header h2 { font-weight: 600; }
[data-style="airy"] .article { gap: 12px; padding: 18px 22px; border-bottom-color: var(--line); }
[data-style="airy"] .article.read { background: var(--read-bg); }
[data-style="airy"] .article:hover { background: var(--bg); }
[data-style="airy"] .article.read:hover { background: var(--read-bg); }
[data-style="airy"] .a-title { line-height: 1.45; margin-bottom: 6px; }
[data-style="airy"] .a-snippet { line-height: 1.6; }
[data-style="airy"] .a-meta { margin-top: 8px; }
[data-style="airy"] .article.active,
[data-style="airy"] .article.active:hover { background: var(--sel); box-shadow: inset 3px 0 0 var(--primary); }
[data-style="airy"] .article.active :is(.a-title, .count) { color: var(--text); }
[data-style="airy"] .article.active :is(.a-snippet, .a-source, .a-time) { color: var(--muted); }
[data-style="airy"] .article.active .a-star { color: var(--secondary); }

/* the reading column: wide, generous leading */
[data-style="airy"] .reader { padding: 44px clamp(28px, 8vw, 104px) 88px; }
[data-style="airy"] .reader h1 { font-size: 2.1rem; line-height: 1.22; letter-spacing: -0.015em; margin-bottom: 12px; }
[data-style="airy"] .r-head { border-bottom-color: var(--line); padding-bottom: 24px; margin-bottom: 34px; }
[data-style="airy"] .reader :is(.r-content, .r-thread-body) { font-size: 1.08rem; line-height: 1.85; max-width: 62ch; }
[data-style="airy"] .reader :is(.r-content, .r-thread-body) p { margin: 0 0 1.35em; }
[data-style="airy"] .reader :is(.r-content, .r-thread-body) blockquote { border-left: 3px solid var(--primary); padding-left: 20px; margin-bottom: 1.35em; }
[data-style="airy"] .reader :is(.r-content, .r-thread-body) img { border-radius: var(--r-ctl); }

/* dialogs */
[data-style="airy"] .modal-head { padding: 20px 24px 12px; border-bottom-color: var(--line); }
[data-style="airy"] .modal-head h2 { font-size: 1.3rem; font-weight: 600; }
[data-style="airy"] .tabs { background: var(--surface); padding: 5px 24px 0; gap: 0; }
[data-style="airy"] .tab { background: transparent; border-color: transparent; border-radius: 0; padding: 11px 18px; }
[data-style="airy"] .tab:hover { background: var(--bg-hover); border-color: transparent; }
[data-style="airy"] .tab.active,
[data-style="airy"] .tab.active:hover {
  background: transparent; color: var(--primary); box-shadow: none;
  border-color: transparent; border-bottom: 3px solid var(--primary);
}
[data-style="airy"] .tab-intro { background: var(--bg); border-left-color: var(--primary); }
[data-style="airy"] .col-resizer { background: linear-gradient(to right, transparent 3px, var(--line) 3px, var(--line) 4px, transparent 4px); }


/* ═══ CRT — 1980s terminal ════════════════════════════════
    A cathode-ray screen: scanlines, a vignette darkening the edges, phosphor
    glow, chromatic-aberration headings and [ BRACKETED ] buttons. Dark is
    green phosphor; light is the white-phosphor paper terminal. */
[data-theme="crt-dark"] {
  --bg: #050805; --surface: #0a120a; --border: #1d4d26;
  --text: #4dff7a; --muted: #2fae54;
  --primary: #c8ffd9; --primary-bg: #37f06e; --primary-dark: #25cc59; --on-primary: #03140a;
  --secondary: #ffb000;
  --danger: #ff5f56; --input-bg: #030503; --bg-hover: #0d2413;
  --glow: rgba(77, 255, 122, 0.32); --scan: rgba(0, 0, 0, 0.3); --vig: rgba(0, 0, 0, 0.42);
}
[data-theme="crt-light"] {
  --bg: #edf3e9; --surface: #e0ead9; --border: #a9c2a4;
  --text: #123a1e; --muted: #4d6b55;
  --primary: #0e7a34; --primary-bg: #0e7a34; --primary-dark: #0a5c28; --on-primary: #f2fff4;
  --secondary: #b36a00;
  --danger: #b3271e; --input-bg: #f8fcf4; --bg-hover: #d9e6cf;
  --glow: rgba(14, 122, 52, 0.12); --scan: rgba(18, 58, 30, 0.06); --vig: rgba(70, 90, 70, 0.14);
}
[data-style="crt"] {
  --radius: 0px; --r-ctl: 0px; --r-btn: 0px; --r-tab: 0px; --r-icon: 0px; --r-pill: 0px; --r-round: 0px;
  --bw: 2px;
  --raised-bc: var(--border);
  --raised-sh: 0 0 0 1px var(--border);
  --sunken-bc: var(--border);
  --sunken-sh: inset 0 0 10px var(--glow), inset 0 2px 5px rgba(0, 0, 0, 0.45);
  --panel-bc: var(--border);
  --panel-sh: 0 0 0 1px var(--border), 0 0 44px var(--glow);
  --pop-sh: 0 0 0 1px var(--border), 0 0 26px var(--glow);
  --float-sh: 0 0 18px var(--glow);
  --tn-sh: 0 0 8px var(--glow);
  --hover-bc: var(--primary-bg); --hover-fg: var(--primary-bg);
  --btn-case: uppercase; --btn-track: 0.12em;
  --btn-bg: transparent; --btn-bg-hover: var(--bg-hover);
  --tab-accent: var(--primary-bg);
  --bar-bg: var(--surface); --bar-fg: var(--text); --bar-accent: var(--primary-bg);
  --top-bg: var(--surface); --top-fg: var(--text);
  --scrim: rgba(2, 10, 4, 0.72);
}
[data-style="crt"] body { text-shadow: 0 0 6px var(--glow); }
/* the screen itself: scanlines plus a vignette at the edges */
[data-style="crt"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 52%, var(--vig) 100%),
    repeating-linear-gradient(to bottom, var(--scan) 0 1px, transparent 1px 3px);
}
[data-style="crt"] .btn { font-weight: 700; }
[data-style="crt"] .btn::before { content: "["; }
[data-style="crt"] .btn::after { content: "]"; }
/* chromatic aberration on headings */
[data-style="crt"] :is(.list-header h2, .modal-head h2, .reader h1, .side-heading) {
  text-shadow: 1.5px 0 rgba(255, 0, 80, 0.5), -1.5px 0 rgba(0, 240, 255, 0.5), 0 0 8px var(--glow);
}
[data-style="crt"] .modal-head { border-bottom: 2px solid var(--border); }
[data-style="crt"] .modal-head h2 { text-transform: uppercase; letter-spacing: 0.14em; font-size: .95rem; }
[data-style="crt"] .modal-head h2::before { content: "> "; }
[data-style="crt"] .topbar { border-bottom: 2px solid var(--border); box-shadow: 0 1px 14px var(--glow); }
[data-style="crt"] .list-header { border-bottom: 2px solid var(--border); }
[data-style="crt"] .list-header h2 { text-transform: uppercase; letter-spacing: 0.14em; }
[data-style="crt"] .article { border-left: 3px solid transparent; }
[data-style="crt"] .article:not(.read):not(.active) { border-left-color: var(--primary-bg); }
[data-style="crt"] :is(.node.active, .article.active) { background: var(--bg-hover); box-shadow: inset 0 0 0 1px var(--primary-bg); }
[data-style="crt"] .node.active { color: var(--primary); font-weight: 700; }
[data-style="crt"] .article.active .a-title { color: var(--primary); }