:root {
    color-scheme: dark;
    --bg: #0f1115; --text: #e6e8ee; --panel: #171a21; --input: #1a1e27;
    --border: #232836; --border2: #2b3140; --muted: #98a2b6; --faint: #7b849a;
    --soft: #b6bed0; --link: #7f9cf5; --tag-bg: #232a3d; --tag-fg: #9db1ff;
    --well: #10131a; --thumb: #0b0d11; --hover: #1f2430; --track: #0f1218;
    --overlay: #12151cf2; --chip-on: #263050; --chip-on-fg: #cfd8ff;
    --info-bg: #16202e; --info-border: #24374f;
    --err-bg: #2a1618; --err-border: #553322; --err-fg: #ffb3b3;
    --amber: #e8a13c; --bad: #ff8787; --good: #6ee7a8; --danger: #ff6b6b;
    --danger-solid: #c93535;
    --accent: #4c6ef5; --accent-hover: #5c7cfa; --shadow: #00000055;
    /* Type scale — pick from these, never invent sizes inline */
    --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px;
    --fs-xl: 21px; --fs-2xl: 27px;
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f4f5f8; --text: #1c2128; --panel: #ffffff; --input: #ffffff;
    --border: #e3e7ef; --border2: #ccd4e0; --muted: #5c6577; --faint: #8a93a4;
    --soft: #49525f; --link: #3b5bdb; --tag-bg: #e7ecfb; --tag-fg: #3450c8;
    --well: #f1f3f7; --thumb: #e7eaf0; --hover: #eef1f6; --track: #e4e8ef;
    --overlay: #ffffffee; --chip-on: #dfe6fb; --chip-on-fg: #2b44b8;
    --info-bg: #e9f0fd; --info-border: #c9d8f4;
    --err-bg: #fdecec; --err-border: #f1c0c0; --err-fg: #b42323;
    --amber: #a26a08; --bad: #c92a2a; --good: #12813f; --danger: #e03131;
    --danger-solid: #e03131; --shadow: #1721321f;
  }
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      color-scheme: light;
      --bg: #f4f5f8; --text: #1c2128; --panel: #ffffff; --input: #ffffff;
      --border: #e3e7ef; --border2: #ccd4e0; --muted: #5c6577; --faint: #8a93a4;
      --soft: #49525f; --link: #3b5bdb; --tag-bg: #e7ecfb; --tag-fg: #3450c8;
      --well: #f1f3f7; --thumb: #e7eaf0; --hover: #eef1f6; --track: #e4e8ef;
      --overlay: #ffffffee; --chip-on: #dfe6fb; --chip-on-fg: #2b44b8;
      --info-bg: #e9f0fd; --info-border: #c9d8f4;
      --err-bg: #fdecec; --err-border: #f1c0c0; --err-fg: #b42323;
      --amber: #a26a08; --bad: #c92a2a; --good: #12813f; --danger: #e03131;
    --danger-solid: #e03131; --shadow: #1721321f;
    }
  }
  * { box-sizing: border-box; }
  /* An element's display rule (e.g. flex) silently defeats the hidden
     attribute; this makes hidden mean hidden, always. */
  [hidden] { display: none !important; }
  body { margin: 0; background: var(--bg); color: var(--text);
         font: 15px/1.5 system-ui, "Segoe UI", sans-serif;
         }
  input { background: var(--input); border: 1px solid var(--border2); color: var(--text);
          border-radius: 10px; padding: 10px 14px; font-size: 15px; outline: none; }
  input:focus { border-color: var(--accent); }
  button { background: var(--accent); color: #fff; border: 0; border-radius: 10px;
           padding: 10px 18px; font-size: 15px; cursor: pointer; }
  button:hover { background: var(--accent-hover); }
  svg.ic { width: 18px; height: 18px; fill: none; stroke: currentColor;
           stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
           vertical-align: -3px; }
  svg.ic-sm { width: 15px; height: 15px; vertical-align: -3px; }
  svg.ic-fill { fill: currentColor; stroke: none; }
  svg.ic-logo { width: 25px; height: 25px; vertical-align: -4px; color: var(--link); }
  /* App shell pieces shared by every page that wants the product chrome */
  .topbar { position: sticky; top: 0; z-index: 25; display: flex;
            align-items: center; gap: 18px; padding: 10px 24px;
            background: var(--overlay); backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--border); }
  .brand { display: flex; align-items: center; gap: 9px; font-weight: 650;
           font-size: 16.5px; letter-spacing: -.01em; white-space: nowrap;
           color: inherit; text-decoration: none; }
  .tright { display: flex; gap: 8px; align-items: center; margin-left: auto; }
  .tbtn { width: 34px; height: 34px; border-radius: 50%; padding: 0;
          background: var(--input); color: var(--muted); display: flex;
          align-items: center; justify-content: center; cursor: pointer;
          border: 1px solid var(--border2);
          transition: background .15s ease, color .15s ease,
                      border-color .15s ease; }
  .tbtn:hover { background: var(--hover); color: var(--text);
                border-color: var(--accent); }
  .tbtn svg { width: 19px; height: 19px; }
  button.ghost, a.ghost { background: transparent; color: var(--muted);
                 border: 1px solid var(--border2); font-size: 14px;
                 padding: 9px 14px; border-radius: 10px; cursor: pointer;
                 text-decoration: none; display: inline-flex; gap: 7px;
                 align-items: center;
                 transition: background .15s ease, color .15s ease,
                             border-color .15s ease; }
  button.ghost:hover, a.ghost:hover { background: var(--hover);
                       color: var(--text); border-color: var(--accent); }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }