/* Brand themes. Each block overrides the design tokens from style.css and adds its own treatments.
   Selected with <html data-brand="…">; "classic" is style.css on its own. */

.brand-logo { display: inline-flex; width: 26px; height: 26px; flex: none; }
.brand-logo svg { width: 100%; height: 100%; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-tagline { display: none; }

/* ======================================================================
   1. THE ALMANAC: broadsheet newspaper
   ====================================================================== */
:root[data-brand="almanac"] {
  --bg: #f3eee3; --surface: #fbf8f1; --sidebar: #ebe4d3; --text: #1b1a17; --muted: #6b6457; --border: #d5cbb6;
  --accent: #b3261e; --accent-soft: #f2dcd3; --warn: #9c4a00; --warn-soft: #f4e3c8; --danger: #b3261e;
  --code-bg: #ebe4d3; --mark: #f5d76e; --radius: 0px;
  --font: "Newsreader", Georgia, "Times New Roman", serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;

  & body { font-size: 17px; }
  & .sidebar { border-right: 4px double var(--text); }
  & .brand { flex-direction: column; align-items: flex-start; gap: 6px; font: italic 900 30px/1 "Fraunces", serif; letter-spacing: -.03em;
    border-bottom: 4px double var(--text); padding: 4px 6px 12px; margin-bottom: 16px; }
  & .brand-logo { width: 30px; height: 30px; }
  & .brand-tagline { display: block; font: italic 400 13px/1.3 "Newsreader", serif; letter-spacing: 0; color: var(--muted); }
  & nav h3 { font: 600 15px "Newsreader", serif; font-variant: small-caps; text-transform: lowercase; letter-spacing: .1em; color: var(--text);
    border-bottom: 1px solid var(--text); padding-bottom: 2px; }
  & nav a:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
  & nav a.active { background: none; color: var(--accent); font-style: italic; }
  & .btn { border: 1px solid var(--text); background: transparent; font: 500 11.5px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .12em; }
  & .btn:hover { background: var(--text); color: var(--bg); }
  & .btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
  & .btn.primary:hover { background: var(--accent); border-color: var(--accent); }
  & .btn.danger { color: var(--accent); }
  & .topbar { background: var(--bg); border-bottom: 1px solid var(--text); backdrop-filter: none; }
  & #search { border: 0; border-bottom: 2px solid var(--text); border-radius: 0; background: transparent; font-style: italic; font-size: 18px; box-shadow: none; }
  & .list-header { border-bottom: 4px double var(--text); padding-bottom: 8px; margin-bottom: 4px; }
  & .list-header h1, & .card-head h1, & .page-title, & .content h1, & .content h2, & .content h3, & .stat-value, & .panel h2, & dialog h2 { font-family: "Fraunces", serif; letter-spacing: -.02em; }
  & .list-header h1 { font-size: 38px; font-weight: 900; }
  & .card-list li a { background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 18px 0; margin: 0; }
  & .card-list li a:hover .title { color: var(--accent); }
  & .card-list .title { font: 650 22px/1.2 "Fraunces", serif; }
  & .card-list .snippet { font-size: 15.5px; }
  & .card-list .meta, & .crumbs, & .card-footer { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; font-size: 10.5px; letter-spacing: .1em; }
  & .dot { border-radius: 0; transform: rotate(45deg); background: var(--text); width: 7px; height: 7px; }
  & .dot.warn { background: var(--accent); }
  & .card-head h1 { font-size: 48px; font-weight: 900; line-height: 1.02; margin: 10px 0 16px; }
  & .badge { border-radius: 0; background: transparent; border: 1.5px solid currentColor; font: 500 11px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
  & .content { background: transparent; border: 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--text); border-radius: 0; padding: 26px 0; font-size: 18.5px; line-height: 1.65; }
  & .content > p:first-of-type::first-letter { float: left; font: 900 3.6em/.8 "Fraunces", serif; margin: 8px 10px 0 0; color: var(--accent); }
  & .content img { border: 1px solid var(--text); border-radius: 0; filter: sepia(.12); }
  & .content blockquote { border-left: 0; font-style: italic; font-size: 1.15em; color: var(--text); padding: 0 2em; }
  & .content .callout, & .content section { border-left: 4px solid var(--accent); border-radius: 0; }
  & .panel, & .stat, & .comment, & .diff, & .tabs, & .segmented, & dialog { border-radius: 0; border-color: var(--text); background: var(--surface); }
  & .toast { border-radius: 0; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; font-size: 12px; letter-spacing: .1em; }
}

/* ======================================================================
   2. HONEYCOMB: warm and playful (the default)
   ====================================================================== */
:root[data-brand="honeycomb"] {
  --bg: #fff8e6; --surface: #fffdf6; --sidebar: #2b2118; --text: #2b2118; --muted: #7a6752; --border: #f1e0b4;
  --accent: #b86e00; --accent-soft: #fde9b0; --warn: #c2410c; --warn-soft: #ffe2cc; --danger: #c0262d;
  --code-bg: #fbefcf; --mark: #ffd75e; --radius: 18px;
  --font: "Nunito", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
  --honey: #f2b418;
  color-scheme: light;

  & body {
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 32L0 82' fill='none' stroke='%23f2b418' stroke-opacity='.18' stroke-width='2'/%3E%3C/svg%3E");
  }
  & .sidebar { color: #f7e7c4; border-right: 0; border-radius: 0 28px 28px 0; }
  & .brand { color: var(--honey); font: 700 28px "Fredoka", sans-serif; }
  & .brand-logo { width: 34px; height: 34px; animation: honey-bob 3s ease-in-out infinite; }
  & nav h3 { color: #b99d72; font-family: "Fredoka", sans-serif; }
  & nav a { color: #f7e7c4; border-radius: 99px; font-weight: 600; }
  & nav a:hover { background: rgb(255 255 255 / .08); }
  & nav a.active { background: var(--honey); color: var(--text); }
  & nav a .count, & nav a.active .count { color: var(--honey); }
  & nav a.active .count { color: var(--text); }
  & .tag-cloud a { border-color: #5a4633; }
  & .nav-footer { border-color: #4a3a2a; }
  & .btn { border-radius: 99px; border: 2px solid var(--text); border-bottom-width: 4px; font-weight: 700; background: var(--surface); transition: transform .1s; }
  & .btn:hover { transform: translateY(-1px); }
  & .btn:active { transform: translateY(2px); border-bottom-width: 2px; }
  & .btn.primary, & .new-card { background: var(--honey); color: var(--text); border-color: var(--text); }
  & .topbar { background: rgb(255 248 230 / .85); border-bottom: 0; }
  & #search { border: 2px solid var(--text); font-weight: 600; }
  & #search:focus { box-shadow: 0 0 0 4px var(--accent-soft); border-color: var(--text); }
  & h1, & h2, & h3, & .card-list .title, & .stat-value { font-family: "Fredoka", sans-serif; }
  & .list-header h1 { font-size: 30px; }
  & .card-list li a { border: 2px solid var(--border); border-radius: 22px; transition: transform .15s, box-shadow .15s; }
  & .card-list li:nth-child(odd) a:hover { transform: rotate(-.6deg) scale(1.01); }
  & .card-list li:nth-child(even) a:hover { transform: rotate(.6deg) scale(1.01); }
  & .card-list li a:hover { border-color: var(--honey); box-shadow: 0 8px 0 -2px var(--honey); }
  & .card-list .title { font-size: 18px; font-weight: 600; }
  & .dot { width: 12px; height: 13px; border-radius: 0; background: var(--honey); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  & .dot.warn { background: var(--warn); }
  & .card-head h1 { font-size: 36px; }
  & .badge { border: 2px solid currentColor; font-weight: 700; }
  & .content { border: 2px solid var(--border); border-radius: 26px; box-shadow: 0 10px 0 -4px var(--border); }
  & .content ul li::marker { content: "⬢  "; color: var(--honey); font-size: .8em; }
  & .content h1, & .content h2 { color: #6b4200; }
  & .panel, & .stat, & .comment { border-width: 2px; border-radius: 22px; }
  & .star-btn.on, & .star { color: var(--honey); }
  & .toast { background: var(--text); color: var(--honey); border-radius: 99px; font-weight: 700; }
}
@keyframes honey-bob { 50% { transform: translateY(-2px) rotate(-6deg); } }

/* ======================================================================
   3. ~/know: green-phosphor CRT terminal
   ====================================================================== */
:root[data-brand="terminal"] {
  --bg: #0a0f0a; --surface: #0d150d; --sidebar: #070c07; --text: #b8f5b0; --muted: #5f8f5a; --border: #1f3a1f;
  --accent: #39ff6a; --accent-soft: #0f2a14; --warn: #ffcc33; --warn-soft: #2a2410; --danger: #ff5f56;
  --code-bg: #0f200f; --mark: rgb(57 255 106 / .3); --radius: 0px;
  --font: "JetBrains Mono", ui-monospace, monospace; --mono: "JetBrains Mono", ui-monospace, monospace;
  color-scheme: dark;

  & body { font-size: 14px; text-shadow: 0 0 6px rgb(57 255 106 / .18); }
  & body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
    background: repeating-linear-gradient(0deg, rgb(0 0 0 / .22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / .45)); }
  & .sidebar { border-right: 1px dashed var(--border); }
  & .brand { color: var(--accent); font: 400 34px/1 "VT323", monospace; flex-wrap: wrap; text-shadow: 0 0 10px rgb(57 255 106 / .6); }
  & .brand-name::after { content: "█"; animation: term-blink 1s steps(1) infinite; margin-left: 2px; }
  & .brand-tagline { display: block; font: 400 12px var(--font); color: var(--muted); text-shadow: none; margin-top: 4px; }
  & nav h3 { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
  & nav h3::before { content: "## "; }
  & nav a { border-radius: 0; }
  & nav a > span:first-child::before { content: "  "; white-space: pre; }
  & nav a:hover { background: var(--accent-soft); }
  & nav a.active { background: var(--accent); color: var(--bg); text-shadow: none; }
  & nav a.active > span:first-child::before { content: "> "; }
  & nav a.active .count { color: var(--bg); }
  & .btn { background: transparent; border: 0; color: var(--accent); padding: 6px 4px; font-weight: 600; }
  & .btn::before { content: "["; margin-right: 4px; }
  & .btn::after { content: "]"; margin-left: 4px; }
  & .btn:hover { background: var(--accent); color: var(--bg); text-shadow: none; }
  & .btn.primary { background: var(--accent); color: var(--bg); text-shadow: none; }
  & .btn.danger { color: var(--danger); }
  & .topbar { background: var(--bg); border-bottom: 1px dashed var(--border); }
  & .topbar::before { content: "$ grep -ri"; color: var(--accent); white-space: nowrap; font-weight: 700; }
  & #search { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-left: 4px; color: var(--accent); caret-color: var(--accent); }
  & #search::placeholder { color: var(--muted); }
  & h1, & h2, & h3 { font-weight: 700; }
  & .list-header h1::before, & .card-head h1::before, & .page-title::before { content: "# "; color: var(--muted); }
  & .content h2::before { content: "## "; color: var(--muted); }
  & .content h3::before { content: "### "; color: var(--muted); }
  & .card-list li a { background: transparent; border: 0; border-left: 2px solid transparent; border-radius: 0; margin: 0; padding: 10px 14px; }
  & .card-list li a:hover, & .card-list li a:focus { border-left-color: var(--accent); background: var(--accent-soft); }
  & .card-list .title { color: var(--accent); }
  & .dot { border-radius: 0; width: 8px; height: 14px; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
  & .dot.warn { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
  & .badge { border-radius: 0; background: transparent; border: 1px solid currentColor; }
  & .badge::before { content: "status: "; opacity: .7; }
  & .content { background: var(--surface); border: 1px solid var(--border); border-radius: 0; }
  & .content img { filter: grayscale(.4) sepia(.3) hue-rotate(60deg) brightness(.9); border-color: var(--border); }
  & .content img:hover { filter: none; }
  & .content .callout, & .content section { background: var(--warn-soft) !important; color: var(--text) !important; border-left: 3px solid var(--warn); border-radius: 0; }
  & .content [style*="color"] { color: inherit !important; }
  & .content mark[style] { background: var(--mark) !important; }
  & .content a, & .crumbs a { color: var(--accent); }
  & .content pre { border: 1px dashed var(--border); }
  & .panel, & .stat, & .comment, & .diff, & dialog, & .tabs, & .segmented, & .similar, & .banner { border-radius: 0; }
  & .star-btn.on, & .star { color: var(--warn); }
  & .toast { background: var(--accent); color: var(--bg); border-radius: 0; text-shadow: none; }
  & .toast::before { content: "> "; }
  & ::selection { background: var(--accent); color: var(--bg); }
}
@keyframes term-blink { 50% { opacity: 0; } }

/* ======================================================================
   4. FIELDBOOK: hand-kept notebook on graph paper
   ====================================================================== */
:root[data-brand="fieldbook"] {
  --bg: #fdfcf7; --surface: #fffefa; --sidebar: #d8c29a; --text: #2d2a26; --muted: #756c60; --border: #2d2a26;
  --accent: #2f5fd0; --accent-soft: #dfe8ff; --warn: #c2410c; --warn-soft: #fff1b8; --danger: #c0262d;
  --code-bg: #f3efe3; --mark: #fff27a; --radius: 4px;
  --font: "Patrick Hand", "Comic Sans MS", cursive; --mono: "Courier Prime", "Courier New", monospace;
  --sketch: 255px 15px 225px 15px / 15px 225px 15px 255px;
  color-scheme: light;

  & body { font-size: 17.5px;
    background-image: linear-gradient(rgb(47 95 208 / .09) 1px, transparent 1px), linear-gradient(90deg, rgb(47 95 208 / .09) 1px, transparent 1px);
    background-size: 22px 22px; }
  & .sidebar { border-right: 0; box-shadow: inset -8px 0 12px -8px rgb(0 0 0 / .25);
    background-image: radial-gradient(rgb(0 0 0 / .05) 1px, transparent 1px); background-size: 5px 5px; }
  & .brand { font: 400 34px/1 "Caveat Brush", cursive; transform: rotate(-2deg); }
  & .brand-logo { width: 34px; height: 34px; }
  & nav h3 { font: 400 20px "Caveat Brush", cursive; text-transform: none; letter-spacing: 0; color: var(--text); }
  & nav a { font-size: 16.5px; }
  & nav a:hover { background: rgb(255 255 255 / .35); }
  & nav a.active { background: none; color: var(--accent); text-decoration: underline wavy var(--accent); text-underline-offset: 4px; font-weight: 400; }
  & .tag-cloud a { background: #fffefa; border-color: var(--text); }
  & .btn { border: 2px solid var(--text); border-radius: var(--sketch); background: var(--surface); font-size: 16px; box-shadow: 2px 2px 0 var(--text); }
  & .btn:hover { transform: rotate(-1.5deg); }
  & .btn.primary { background: var(--accent); color: #fff; border-color: var(--text); }
  & .topbar { background: transparent; backdrop-filter: none; border-bottom: 0; }
  & #search { border: 2px solid var(--text); border-radius: var(--sketch); font-size: 17px; box-shadow: 3px 3px 0 rgb(0 0 0 / .12); }
  & h1, & h2, & h3, & .card-list .title, & .stat-value, & dialog h2 { font-family: "Caveat Brush", cursive; font-weight: 400; letter-spacing: .01em; }
  & .list-header h1 { font-size: 42px; }
  & .card-list li a { border: 2px solid var(--text); border-radius: var(--sketch); box-shadow: 3px 4px 0 rgb(0 0 0 / .12); background: var(--surface); }
  & .card-list li:nth-child(3n+1) a { transform: rotate(-.5deg); }
  & .card-list li:nth-child(3n+2) a { transform: rotate(.4deg); }
  & .card-list li a:hover { transform: rotate(0) translateY(-2px); background: #fffbe0; }
  & .card-list .title { font-size: 25px; }
  & .dot { width: 10px; height: 10px; background: var(--accent); border-radius: 60% 40% 55% 45%; }
  & .dot.warn { background: var(--warn); }
  & .card-head { position: relative; }
  & .card-head h1 { font-size: 50px; line-height: 1; }
  & .badge { background: transparent; border: 2px solid currentColor; border-radius: var(--sketch); transform: rotate(-2deg); font-size: 15px; }
  & .content { position: relative; border: 2px solid var(--text); border-radius: var(--sketch); padding-left: 58px; font-size: 18px; line-height: 1.6;
    background: linear-gradient(90deg, transparent 36px, #f3a0a0 36px, #f3a0a0 38px, transparent 38px), var(--surface);
    box-shadow: 4px 5px 0 rgb(0 0 0 / .1); }
  & .content::before { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-3deg);
    background: rgb(255 242 122 / .75); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
  & .editor .content::before { display: none; }
  & .content h1, & .content h2, & .content h3 { color: var(--accent); }
  & .content h2 { font-size: 30px; } & .content h3 { font-size: 24px; }
  & .content mark, & mark { background: linear-gradient(100deg, transparent 2%, var(--mark) 4%, var(--mark) 96%, transparent 98%); }
  & .content img { border: 2px solid var(--text); border-radius: 2px; padding: 6px 6px 22px; background: #fff; box-shadow: 3px 3px 0 rgb(0 0 0 / .15); transform: rotate(-.6deg); }
  & .content pre { border: 1px dashed var(--text); }
  & .content .callout, & .content section { border: 2px solid var(--text); border-radius: var(--sketch); transform: rotate(-.4deg); }
  & .panel, & .stat, & .comment, & .diff, & dialog { border: 2px solid var(--text); border-radius: var(--sketch); box-shadow: 3px 3px 0 rgb(0 0 0 / .1); }
  & .star-btn.on, & .star { color: #e0a100; }
  & .toast { font-size: 18px; border-radius: var(--sketch); }
}

/* ======================================================================
   5. KNOWBOX: neo-brutalist blocks
   ====================================================================== */
:root[data-brand="knowbox"] {
  --bg: #efeaff; --surface: #ffffff; --sidebar: #ffd23f; --text: #0b0b0b; --muted: #4a4a4a; --border: #0b0b0b;
  --accent: #e0245e; --accent-soft: #ffd6e3; --warn: #d45a00; --warn-soft: #ffe1c2; --danger: #d11a2a;
  --code-bg: #e9ffd2; --mark: #c3f73a; --radius: 0px;
  --font: "Space Grotesk", system-ui, sans-serif; --mono: "Space Mono", ui-monospace, monospace;
  --pink: #ff5c8a; --lime: #c3f73a; --cyan: #5ce1e6; --yellow: #ffd23f;
  --shadow: 5px 5px 0 var(--text);
  color-scheme: light;

  & body { font-weight: 500; }
  & .sidebar { border-right: 3px solid var(--text); }
  & .brand { font: 400 25px "Archivo Black", sans-serif; letter-spacing: -.02em; }
  & .brand-logo { width: 32px; height: 32px; }
  & nav h3 { font: 400 12px "Archivo Black", sans-serif; color: var(--text); letter-spacing: .08em; }
  & nav a { border: 2px solid transparent; border-radius: 0; font-weight: 600; }
  & nav a:hover { background: var(--surface); border-color: var(--text); }
  & nav a.active { background: var(--text); color: var(--yellow); }
  & nav a.active .count { color: var(--yellow); }
  & nav a .count { color: var(--text); font-weight: 700; }
  & .tag-cloud a { border: 2px solid var(--text); border-radius: 0; background: var(--surface); font-weight: 700; }
  & .btn { border: 3px solid var(--text); border-radius: 0; background: var(--surface); box-shadow: 3px 3px 0 var(--text); font-weight: 700; text-transform: uppercase; font-size: 13px;
    transition: transform .08s, box-shadow .08s; }
  & .btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--text); }
  & .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--text); }
  & .btn.primary { background: var(--pink); color: var(--text); border-color: var(--text); }
  & .new-card { background: var(--lime) !important; }
  & .btn.danger { background: #ffd1d6; color: var(--text); }
  & .topbar { background: var(--bg); border-bottom: 3px solid var(--text); backdrop-filter: none; }
  & #search { border: 3px solid var(--text); border-radius: 0; box-shadow: var(--shadow); font-weight: 600; }
  & #search:focus { box-shadow: 5px 5px 0 var(--pink); border-color: var(--text); }
  & h1, & h2, & .stat-value, & .page-title, & dialog h2 { font-family: "Archivo Black", sans-serif; font-weight: 400; letter-spacing: -.02em; }
  & .list-header h1 { font-size: 40px; text-transform: uppercase; background: var(--lime); border: 3px solid var(--text); padding: 0 12px; box-shadow: var(--shadow); transform: rotate(-1deg); }
  & .card-list li a { border: 3px solid var(--text); border-radius: 0; box-shadow: var(--shadow); margin-bottom: 14px; transition: transform .08s, box-shadow .08s; }
  & .card-list li:nth-child(4n+1) a:hover { background: var(--pink); }
  & .card-list li:nth-child(4n+2) a:hover { background: var(--cyan); }
  & .card-list li:nth-child(4n+3) a:hover { background: var(--lime); }
  & .card-list li:nth-child(4n) a:hover { background: var(--yellow); }
  & .card-list li a:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--text); }
  & .card-list li a:hover .snippet, & .card-list li a:hover .meta { color: var(--text); }
  & .card-list .title { font-size: 18px; font-weight: 700; }
  & .dot { border-radius: 0; width: 12px; height: 12px; border: 2px solid var(--text); background: var(--lime); }
  & .dot.warn { background: var(--pink); }
  & .card-head h1 { font-size: 44px; line-height: 1.02; text-transform: uppercase; }
  & .badge { border: 3px solid var(--text); border-radius: 0; background: var(--lime); color: var(--text); font-weight: 700; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--text); }
  & .badge.warn { background: var(--pink); }
  & .content { border: 3px solid var(--text); border-radius: 0; box-shadow: 8px 8px 0 var(--text); }
  & .content h1, & .content h2 { text-transform: uppercase; }
  & .content h2 { display: inline-block; background: var(--cyan); padding: 0 8px; border: 2px solid var(--text); }
  & .content img { border: 3px solid var(--text); border-radius: 0; box-shadow: 4px 4px 0 var(--text); }
  & .content code { border: 1.5px solid var(--text); border-radius: 0; }
  & .content pre { border: 3px solid var(--text); border-radius: 0; background: var(--text); color: var(--lime); }
  & .content pre code { color: inherit; border: 0; }
  & .content .callout, & .content section { border: 3px solid var(--text); border-radius: 0; box-shadow: 4px 4px 0 var(--text); }
  & .content table, & .content td { border-color: var(--text); border-width: 2px; }
  & .panel, & .stat, & .comment, & .diff, & dialog, & .tabs, & .segmented, & .similar, & .banner { border: 3px solid var(--text); border-radius: 0; box-shadow: var(--shadow); }
  & .stat:nth-child(3n+1) { background: var(--cyan); } & .stat:nth-child(3n+2) { background: var(--yellow); } & .stat:nth-child(3n) { background: var(--lime); }
  & .stat-label, & .stat-sub { color: var(--text); }
  & .star-btn.on, & .star { color: var(--pink); -webkit-text-stroke: 1.5px var(--text); }
  & .toast { background: var(--text); color: var(--lime); border-radius: 0; font-weight: 700; text-transform: uppercase; box-shadow: 5px 5px 0 var(--pink); }
  & .user-chip .avatar { border-radius: 0; background: var(--pink); color: var(--text); border: 2px solid var(--text); }
}

/* ======================================================================
   6. ORBIT: deep-space glass
   ====================================================================== */
:root[data-brand="orbit"] {
  --bg: #07061a; --surface: rgb(255 255 255 / .055); --sidebar: rgb(12 10 40 / .55); --text: #e8e6ff; --muted: #9a95c9; --border: rgb(255 255 255 / .12);
  --accent: #b69cff; --accent-soft: rgb(167 139 250 / .18); --warn: #fbbf24; --warn-soft: rgb(251 191 36 / .13); --danger: #fb7185;
  --code-bg: rgb(255 255 255 / .07); --mark: rgb(34 211 238 / .35); --radius: 16px;
  --font: "Outfit", system-ui, sans-serif; --mono: "Fira Code", ui-monospace, monospace;
  --grad: linear-gradient(120deg, #a78bfa, #22d3ee);
  color-scheme: dark;

  & body { background:
      radial-gradient(1.2px 1.2px at 20% 30%, #fff 50%, transparent 51%) 0 0 / 260px 260px,
      radial-gradient(1px 1px at 70% 80%, #cfc8ff 50%, transparent 51%) 0 0 / 190px 190px,
      radial-gradient(1.4px 1.4px at 45% 60%, #9ff3ff 50%, transparent 51%) 0 0 / 330px 330px,
      radial-gradient(ellipse 60% 50% at 85% 0%, rgb(124 58 237 / .35), transparent 70%),
      radial-gradient(ellipse 50% 45% at 10% 100%, rgb(14 165 233 / .22), transparent 70%),
      var(--bg);
    background-attachment: fixed; }
  & .sidebar { backdrop-filter: blur(18px); border-right: 1px solid var(--border); }
  & .brand { font: 700 26px "Sora", sans-serif; letter-spacing: -.03em; }
  & .brand-name { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  & .brand-logo { width: 34px; height: 34px; filter: drop-shadow(0 0 10px rgb(167 139 250 / .6)); animation: orbit-spin 12s linear infinite; }
  & nav h3 { color: var(--muted); font-family: "Sora", sans-serif; }
  & nav a { border-radius: 10px; }
  & nav a:hover { background: rgb(255 255 255 / .06); }
  & nav a.active { background: var(--accent-soft); color: #fff; box-shadow: inset 2px 0 0 #a78bfa, 0 0 20px rgb(167 139 250 / .15); }
  & .tag-cloud a { border-color: var(--border); background: rgb(255 255 255 / .04); }
  & .btn { border-radius: 99px; background: rgb(255 255 255 / .06); border: 1px solid var(--border); backdrop-filter: blur(8px); color: var(--text); }
  & .btn:hover { border-color: rgb(167 139 250 / .6); box-shadow: 0 0 18px rgb(167 139 250 / .25); }
  & .btn.primary { background: var(--grad); color: #0b0826; border: 0; font-weight: 600; box-shadow: 0 4px 24px rgb(167 139 250 / .35); }
  & .btn.danger { color: var(--danger); }
  & .topbar { background: rgb(7 6 26 / .55); backdrop-filter: blur(16px); }
  & #search { background: rgb(255 255 255 / .06); border-color: var(--border); color: var(--text); }
  & #search:focus { border-color: #a78bfa; box-shadow: 0 0 0 4px rgb(167 139 250 / .18), 0 0 30px rgb(34 211 238 / .15); }
  & h1, & h2, & h3, & .stat-value, & .card-list .title { font-family: "Sora", sans-serif; letter-spacing: -.02em; }
  & .list-header h1, & .card-head h1, & .page-title { background: linear-gradient(120deg, #fff 20%, #b69cff 60%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
  & .list-header h1 { font-size: 32px; }
  & .card-list li a { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .2s, transform .2s; }
  & .card-list li a:hover { border-color: rgb(167 139 250 / .55); box-shadow: 0 0 0 1px rgb(167 139 250 / .25), 0 10px 40px rgb(124 58 237 / .25); transform: translateY(-2px); }
  & .card-list .title { font-weight: 600; }
  & .dot { background: #22d3ee; box-shadow: 0 0 10px #22d3ee, 0 0 3px #fff; }
  & .dot.warn { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
  & .card-head h1 { font-size: 38px; font-weight: 700; }
  & .badge { background: rgb(34 211 238 / .12); color: #7fe9f7; border: 1px solid rgb(34 211 238 / .35); }
  & .badge.warn { background: var(--warn-soft); color: var(--warn); border-color: rgb(251 191 36 / .35); }
  & .content { background: var(--surface); border-color: var(--border); border-radius: 22px; backdrop-filter: blur(12px); box-shadow: 0 20px 60px rgb(0 0 0 / .35); }
  & .content a { color: #9fdcff; }
  & .content h1, & .content h2 { color: #fff; }
  & .content img { border-color: var(--border); border-radius: 12px; }
  & .content .callout, & .content section { background: rgb(251 191 36 / .1) !important; color: var(--text) !important; border: 1px solid rgb(251 191 36 / .3); }
  & .content [style*="color"] { color: inherit !important; }
  & .content mark[style] { background: var(--mark) !important; }
  & .panel, & .stat, & .comment, & .diff, & dialog { background: rgb(18 15 50 / .7); border-color: var(--border); backdrop-filter: blur(12px); border-radius: 18px; }
  & dialog { background: #14113a; }
  & .banner.warn { background: var(--warn-soft); }
  & .star-btn.on, & .star { color: var(--warn); text-shadow: 0 0 12px rgb(251 191 36 / .7); }
  & .toast { background: var(--grad); color: #0b0826; font-weight: 600; box-shadow: 0 10px 40px rgb(124 58 237 / .45); }
  & .user-chip .avatar { background: var(--grad); color: #0b0826; }
  & ::selection { background: rgb(167 139 250 / .45); }
}
@keyframes orbit-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .brand-logo, .brand-name::after { animation: none !important; }
}

/* Brand picker (Settings) */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
.brand-tile { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 12px; border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; color: var(--text); font: inherit; }
.brand-tile:hover { border-color: var(--accent); }
.brand-tile.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.brand-tile-head { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.brand-tile-head svg { width: 26px; height: 26px; flex: none; }
.brand-tile p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.brand-swatches { display: flex; gap: 4px; }
.brand-swatches span { width: 22px; height: 12px; border-radius: 3px; border: 1px solid rgb(0 0 0 / .15); }