/* Looks (skins) for loomlock tasks: Settings › Look (js/shell/skins.js), catalogue and font loading in theme.js.
   The default look, loomlock, sets no data-skin and is exactly styles.css. Every other look sets data-skin on <html>
   and is dressed here, in three layers:
   1. The frame: a handful of extra tokens (--top-hi, --top-key, --plate-*, --chip-*…) that the rules below use where
      styles.css hard-codes the loomlock look (white text on the blue sidebar, black keylines, the blue title plate).
      Their defaults are loomlock's, so a look only sets what it changes. Only applies when data-skin is set.
   2. Each look's tokens, day then night. A night block re-sets every token its day block sets, because the day block
      also matches at night. Always-dark looks (Green Screen, Gold Leaf) have one block; theme.js keeps them dark.
      Each token block also matches [data-skin-preview="…"], so the cards on Settings › Look draw in their own look.
   3. Each look's own touches (corner ticks, tape, scanlines, foil), kept short.
   Dark colours key to [data-theme="dark"], never the media query (test/portal.test.js). The brand stays lowercase:
   no text-transform anywhere. Layout is never changed, only surfaces, type and colour, so every page keeps working. */

/* ========== 1. the frame ========== */

:root[data-skin], [data-skin-preview] {
  --top-hi: #FFFFFF; --top-key: #000000; --top-slot: rgba(5, 8, 60, .55);
  --brand-shadow: 0 2px 0 #000000; --mark-filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45));
  --hud-edge: inset -4px 0 0 rgba(0, 0, 0, .22), 2px 0 0 var(--keyline);
  --plate-ink: #FFFFFF; --plate-sub: #DADCF8; --plate-link: var(--gold); --plate-hover: rgba(255, 255, 255, .12);
  --plate-border: 2px solid var(--keyline); --plate-radius: 18px;
  --plate-shadow: inset 0 -5px 0 rgba(5, 8, 60, .35), inset 0 3px 0 rgba(255, 255, 255, .16), 0 4px 0 var(--keyline);
  --plate-h1: 30px; --plate-h1-weight: 700; --plate-h1-track: -.01em; --plate-h1-shadow: 0 3px 0 rgba(0, 0, 0, .55);
  --locky-glow: radial-gradient(closest-side, rgba(252, 206, 33, .5), rgba(252, 206, 33, 0));
  --current-radius: var(--radius-s);
  --current-shadow: 0 0 0 2px var(--top-key), inset 0 -3px 0 var(--gold-shade), inset 0 2px 0 var(--gold-tint), 0 3px 0 var(--top-key);
  --chip-radius: 999px; --chip-shadow: inset 0 -2px 0 rgba(5, 8, 60, .16); --chip-border: var(--keyline);
  --btn-radius: var(--radius-s); --field-radius: var(--radius-s);
  --h2-font: var(--font); --body-size: 14px; --body-weight: 500;
  --toast-bg: #05083C; --toast-ink: #ECEDFF; --toast-key: #000000;
}

:root[data-skin] body { font-size: var(--body-size); font-weight: var(--body-weight); }
:root[data-skin] :is(.brand, .brand:hover, .me-name, .nav-panel-head, .nav a:hover, .nav-foot a:hover, .nav a:hover .icon,
  .nav-sec-head:hover, .btn-link:hover, .night-toggle:hover, .jump:hover, .tabs .tab:hover, .tabs .tab[aria-current="page"],
  .tabs .tab-menu.has-current, .tabs .tab-menu[aria-expanded="true"], .top-jump, .panel-close) { color: var(--top-hi); }
:root[data-skin] .brand-name { text-shadow: var(--brand-shadow); }
:root[data-skin] .brand-mark { filter: var(--mark-filter); }
:root[data-skin] :is(.jump, .top-jump, .night-toggle, .panel-close) { border-color: var(--top-key); }
:root[data-skin] .jump { background: var(--top-slot); }
:root[data-skin] :is(.nav a, .nav-foot a)[aria-current="page"] { box-shadow: var(--current-shadow); border-radius: var(--current-radius); }
:root[data-skin] :is(.badge, .version-new) { box-shadow: 0 0 0 1.5px var(--top-key), inset 0 -2px 0 var(--gold-shade); }
:root[data-skin] .night-toggle[aria-pressed="true"] { box-shadow: inset 0 -3px 0 var(--gold-shade), 0 2px 0 var(--top-key); }
:root[data-skin] .night-toggle:disabled { opacity: .55; cursor: not-allowed; }
:root[data-skin] .me-avatar { color: var(--face-ink); box-shadow: 0 0 0 2px var(--top-key); }
:root[data-skin] .top { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .12), 0 2px 0 var(--keyline); }
@media (min-width: 900px) { :root[data-skin] body.has-nav .top { box-shadow: var(--hud-edge); } }
@media (max-width: 899px) {
  :root[data-skin] .nav-panel { border-right-color: var(--top-key); box-shadow: 4px 0 0 var(--top-key), 0 0 40px rgba(0, 0, 0, .4); }
  :root[data-skin] body.has-nav .tabs { border-top-color: var(--top-key); }
  :root[data-skin] .tabs .tab[aria-current="page"] .icon, :root[data-skin] .tabs .tab-menu.has-current .icon { box-shadow: 0 0 0 2px var(--top-key), inset 0 -2px 0 var(--gold-shade); border-radius: var(--current-radius); }
}

/* Title plates. */
:root[data-skin] :is(.view > .page-head, .task-head) { color: var(--plate-ink); border: var(--plate-border); border-radius: var(--plate-radius); box-shadow: var(--plate-shadow); }
:root[data-skin] :is(.view > .page-head, .task-head) h1 { font-size: var(--plate-h1); font-weight: var(--plate-h1-weight); letter-spacing: var(--plate-h1-track); text-shadow: var(--plate-h1-shadow); }
:root[data-skin] :is(.view > .page-head, .task-head) :is(.sub, .muted, .hint, .label, .flag, .flag-stale, .flag-count) { color: var(--plate-sub); }
:root[data-skin] :is(.view > .page-head, .task-head) a:not(.btn) { color: var(--plate-link); }
:root[data-skin] :is(.view > .page-head, .task-head) .btn-ghost { color: var(--plate-ink); }
:root[data-skin] :is(.view > .page-head, .task-head) .btn-ghost:hover { background: var(--plate-hover); color: var(--plate-ink); }
:root[data-skin] :is(.view > .page-head, .task-head) :focus-visible { outline-color: var(--focus); }
:root[data-skin] .view > .page-head:first-child::after { background: var(--locky, none) center bottom / auto 92% no-repeat, var(--locky-glow) 50% 62% / 100% 84% no-repeat; }

/* Shapes and type. */
:root[data-skin] .panel-head h2 { font-family: var(--h2-font); }
:root[data-skin] .chip { border-radius: var(--chip-radius); box-shadow: var(--chip-shadow); border-color: var(--chip-border); }
:root[data-skin] :is(.btn, .btn-small) { border-radius: var(--btn-radius); }
:root[data-skin] :is(input[type="text"], input[type="search"], input[type="email"], input[type="date"], input:not([type]), select, textarea) { border-radius: var(--field-radius); }
:root[data-skin] .seg-btn:not(.seg-blocked, .seg-done, .seg-dropped, .seg-todo, .seg-doing)[aria-pressed="true"] { --seg-face: var(--cobalt); --seg-shade: rgba(0, 0, 0, .25); color: var(--seg-ink, #FFFFFF); }
:root[data-skin] .tk-seg-btn[aria-pressed="true"] { color: var(--seg-ink, #FFFFFF); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25); }
:root[data-skin] .toast { background: var(--toast-bg); color: var(--toast-ink); border-color: var(--toast-key); box-shadow: inset 0 -5px 0 var(--toast-band), 0 3px 0 var(--toast-key), 0 12px 28px rgba(0, 0, 0, .3); }
:root[data-skin] .tk-bulk { color: var(--top-ink); border-color: var(--top-key); box-shadow: 0 3px 0 var(--top-key), 0 12px 28px rgba(0, 0, 0, .2); }
:root[data-skin] .tk-bulk .btn { --keyline: var(--top-key); --btn-face: var(--top-field); color: var(--top-ink); }
:root[data-skin] .tk-bulk .btn:hover { color: var(--top-hi); }
:root[data-skin] .key-chip { background: var(--raised); color: var(--ink); }

/* ========== 2 and 3. the looks ========== */

/* ---------- Blueprint: a drafting sheet. Blue grid, fine ruled frames with registration ticks, red for what to do. */

:root[data-skin="blueprint"], [data-skin-preview="blueprint"] {
  --bg: #F3F7FD; --surface: #FFFFFF; --sunk: #EAF1FB; --raised: #FFFFFF; --tray: #E5EEFA;
  --ink: #0B2A5B; --muted: #46628F; --faint: #6E86AD; --line: #D3E0F2; --line-strong: #9DB6DA;
  --accent: #1F5FD1; --accent-hover: #174BA8; --accent-ink: #FFFFFF; --accent-soft: #E1ECFD; --focus: #E0352B;
  --keyline: #1F4E9B; --shade: transparent; --tint: transparent; --attn: #FFF4F2;
  --gold: #E0352B; --gold-shade: #B5241C; --gold-tint: #FF6A5F; --navy: #FFFFFF; --cobalt: #1F4E9B;
  --grid: rgba(31, 78, 155, .07); --grid-major: rgba(31, 78, 155, .13);
  --ground: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px, #F3F7FD;
  --hud: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 20px 20px, #0C3270;
  --stage: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(160deg, #1A4FA3, #0F3A80);
  --slab: 4px 4px 0 -1px var(--bg), 4px 4px 0 0 var(--line-strong);
  --slab-s: 3px 3px 0 -1px var(--bg), 3px 3px 0 0 var(--line-strong);
  --shadow-lift: 6px 6px 0 -1px var(--bg), 6px 6px 0 0 var(--keyline);
  --radius: 3px; --radius-s: 2px;
  --font: "IBM Plex Sans", system-ui, sans-serif; --display: "Space Mono", ui-monospace, monospace; --mono: "Space Mono", ui-monospace, monospace;
  --top-ink: #E6EEFB; --top-muted: #9DB7E3; --top-line: rgba(255, 255, 255, .18); --top-field: rgba(255, 255, 255, .08); --top-key: #061E4A; --top-slot: rgba(3, 18, 48, .5);
  --brand-shadow: none; --hud-edge: 2px 0 0 var(--keyline);
  --plate-border: 1.5px solid #0B2A5B; --plate-radius: 3px; --plate-shadow: 6px 6px 0 -1px var(--bg), 6px 6px 0 0 #0B2A5B;
  --plate-h1: 26px; --plate-h1-track: -.03em; --plate-h1-shadow: none; --plate-sub: #C8D8F4; --plate-link: #FFD4D0;
  --locky-glow: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  --current-shadow: 0 0 0 1.5px var(--top-key); --chip-radius: 2px; --chip-shadow: none; --h2-font: var(--display);
  --toast-bg: #0C3270; --toast-key: #061E4A;
}
:root[data-skin="blueprint"][data-theme="dark"], :root[data-theme="dark"] [data-skin-preview="blueprint"] {
  --bg: #0B2D63; --surface: #0F3775; --sunk: #0C3069; --raised: #12407F; --tray: #0A2A5C;
  --ink: #EAF2FF; --muted: #A9C2EA; --faint: #7F9DCC; --line: #24508F; --line-strong: #4472B5;
  --accent: #8EC5FF; --accent-hover: #B5DAFF; --accent-ink: #06224F; --accent-soft: #163F80; --focus: #FF7A6B;
  --keyline: #CFE2FF; --shade: transparent; --tint: transparent; --attn: #2A2F6B;
  --gold: #FF6B5A; --gold-shade: #D4483A; --gold-tint: #FF9C90; --navy: #FFFFFF; --cobalt: #4472B5;
  --grid: rgba(255, 255, 255, .05); --grid-major: rgba(255, 255, 255, .1);
  --ground: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(90deg, var(--grid-major) 1px, transparent 1px) 0 0 / 120px 120px, #0B2D63;
  --hud: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 20px 20px, #072352;
  --stage: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(160deg, #164A98, #0D3878);
  --slab: 4px 4px 0 -1px var(--bg), 4px 4px 0 0 #4472B5;
  --slab-s: 3px 3px 0 -1px var(--bg), 3px 3px 0 0 #4472B5;
  --shadow-lift: 6px 6px 0 -1px var(--bg), 6px 6px 0 0 var(--keyline);
  --top-key: #03142F; --plate-border: 1.5px solid #CFE2FF; --plate-shadow: 6px 6px 0 -1px var(--bg), 6px 6px 0 0 #4472B5;
  --todo-bg: #12407F; --todo-ink: #CFE2FF; --doing-bg: #1F5FD1; --doing-ink: #FFFFFF; --dropped-bg: #0C3069;
}
/* Fine frames with registration ticks at the corners, and a dashed inner border on the plate. */
:root[data-skin="blueprint"] :is(.panel, .person, .tile, .error-box, .signin) {
  border-width: 1px; border-color: var(--line-strong);
  background:
    linear-gradient(var(--keyline), var(--keyline)) 0 0 / 12px 2px no-repeat, linear-gradient(var(--keyline), var(--keyline)) 0 0 / 2px 12px no-repeat,
    linear-gradient(var(--keyline), var(--keyline)) 100% 0 / 12px 2px no-repeat, linear-gradient(var(--keyline), var(--keyline)) 100% 0 / 2px 12px no-repeat,
    linear-gradient(var(--keyline), var(--keyline)) 0 100% / 12px 2px no-repeat, linear-gradient(var(--keyline), var(--keyline)) 0 100% / 2px 12px no-repeat,
    linear-gradient(var(--keyline), var(--keyline)) 100% 100% / 12px 2px no-repeat, linear-gradient(var(--keyline), var(--keyline)) 100% 100% / 2px 12px no-repeat,
    var(--surface);
}
:root[data-skin="blueprint"] .panel-muted, :root[data-skin="library"] .panel-muted { background: var(--sunk); border: 1px dashed var(--line-strong); box-shadow: none; }
:root[data-skin="blueprint"] .panel-attn { background-color: var(--attn); box-shadow: inset 0 4px 0 var(--gold), var(--slab); }
:root[data-skin="blueprint"] .tile { box-shadow: inset 0 3px 0 var(--tile-band), var(--slab); }
:root[data-skin="blueprint"] :is(.view > .page-head, .task-head) { outline: 1px dashed rgba(255, 255, 255, .35); outline-offset: -7px; }
:root[data-skin="blueprint"] :is(.btn, .card, .dash-tile, .seg) { border-width: 1.5px; }
:root[data-skin="blueprint"] .btn { --btn-shade: transparent; --btn-tint: transparent; }
:root[data-skin="blueprint"] .key, :root[data-skin="blueprint"] .dash-num { letter-spacing: -.02em; }

/* ---------- Library: index cards on an oak desk; green leather, brass and a lamp. */

:root[data-skin="library"], [data-skin-preview="library"] {
  --bg: #E9DCC3; --surface: #FFFDF6; --sunk: #F6F0E3; --raised: #FFFDF6; --tray: #E2D3B6;
  --ink: #2B2118; --muted: #6E5C47; --faint: #8F7B62; --line: #E9DFCB; --line-strong: #CDBB9C;
  --accent: #1F5C45; --accent-hover: #17483A; --accent-ink: #FFFFFF; --accent-soft: #E3EEE6; --focus: #B4862A;
  --keyline: #5B4630; --shade: transparent; --tint: transparent; --attn: #FFF6DA;
  --gold: #C9A23B; --gold-shade: #9E7B22; --gold-tint: #E8CB75; --navy: #2B2118; --cobalt: #1F5C45;
  --ground: repeating-linear-gradient(91deg, rgba(120, 80, 40, .05) 0 2px, transparent 2px 9px), repeating-linear-gradient(89deg, rgba(120, 80, 40, .045) 0 1px, transparent 1px 23px), linear-gradient(180deg, #EDE1CA, #E4D5B9);
  --hud: radial-gradient(120% 50% at 30% 0%, rgba(255, 255, 255, .08), transparent 60%), linear-gradient(180deg, #21402F, #172E23);
  --stage: radial-gradient(90% 120% at 20% 0%, rgba(255, 255, 255, .1), transparent 60%), linear-gradient(160deg, #2A5240, #1C3B2D);
  --slab: 0 1px 0 rgba(60, 40, 20, .1), 0 8px 16px -8px rgba(60, 40, 20, .4);
  --slab-s: 0 1px 0 rgba(60, 40, 20, .1), 0 5px 10px -6px rgba(60, 40, 20, .4);
  --shadow-lift: 0 14px 28px -10px rgba(60, 40, 20, .55);
  --radius: 6px; --radius-s: 5px;
  --font: "Source Sans 3", system-ui, sans-serif; --display: "Fraunces", Georgia, serif; --body-size: 15px;
  --top-ink: #F1E8D2; --top-muted: #BFB291; --top-hi: #FFF8E6; --top-line: rgba(241, 232, 210, .14); --top-field: rgba(241, 232, 210, .08); --top-key: #0D1A13; --top-slot: rgba(0, 0, 0, .28);
  --brand-shadow: 0 1px 0 rgba(0, 0, 0, .5); --hud-edge: inset -3px 0 0 rgba(0, 0, 0, .25), 2px 0 0 #0D1A13;
  --plate-ink: #F1E8D2; --plate-sub: #CFC4A4; --plate-link: #E8CB75; --plate-border: 2px solid #12271D; --plate-radius: 8px;
  --plate-shadow: inset 0 0 0 5px #1E3E2F, inset 0 0 0 6.5px rgba(201, 162, 59, .75), 0 10px 20px -10px rgba(40, 25, 10, .6);
  --plate-h1: 32px; --plate-h1-weight: 800; --plate-h1-shadow: 0 1px 0 rgba(0, 0, 0, .45);
  --locky-glow: radial-gradient(closest-side, rgba(255, 214, 140, .45), rgba(255, 214, 140, 0));
  --current-shadow: 0 0 0 1.5px var(--top-key), inset 0 -2px 0 var(--gold-shade), inset 0 1px 0 var(--gold-tint);
  --chip-radius: 4px; --chip-shadow: none; --chip-border: rgba(43, 33, 24, .35); --h2-font: var(--display);
  --toast-bg: #1C3B2D; --toast-ink: #F1E8D2; --toast-key: #0D1A13;
}
:root[data-skin="library"][data-theme="dark"], :root[data-theme="dark"] [data-skin-preview="library"] {
  --bg: #17140F; --surface: #24201A; --sunk: #1D1914; --raised: #2A251E; --tray: #15120E;
  --ink: #EFE5CF; --muted: #B7A88C; --faint: #8E8069; --line: #372F25; --line-strong: #54493A;
  --accent: #8FD1AE; --accent-hover: #B0E3C7; --accent-ink: #10221A; --accent-soft: #1E3328; --focus: #E8CB75;
  --keyline: #0A0806; --shade: transparent; --tint: transparent; --attn: #2D2617;
  --gold: #D9B44A; --gold-shade: #A9862A; --gold-tint: #F0D88A; --navy: #1A140A; --cobalt: #2E6B52;
  --ground: radial-gradient(70% 60% at 75% -10%, rgba(255, 190, 90, .16), transparent 70%), repeating-linear-gradient(91deg, rgba(255, 220, 160, .025) 0 2px, transparent 2px 9px), linear-gradient(180deg, #1C1812, #13100C);
  --hud: radial-gradient(120% 50% at 30% 0%, rgba(255, 220, 150, .06), transparent 60%), linear-gradient(180deg, #13261D, #0E1C15);
  --stage: radial-gradient(90% 120% at 20% 0%, rgba(255, 220, 150, .08), transparent 60%), linear-gradient(160deg, #1F3D30, #142A20);
  --slab: 0 1px 0 rgba(0, 0, 0, .4), 0 10px 18px -8px rgba(0, 0, 0, .7);
  --slab-s: 0 1px 0 rgba(0, 0, 0, .4), 0 6px 12px -6px rgba(0, 0, 0, .7);
  --shadow-lift: 0 14px 28px -10px rgba(0, 0, 0, .8);
  --chip-border: rgba(0, 0, 0, .45);
  --todo-bg: #2C271F; --todo-ink: #D9CDB2; --doing-bg: #1E3A2E; --doing-ink: #B9EBD0; --dropped-bg: #1D1914;
}
/* Every slab is an index card: a red rule under its heading and a punched hole at the foot. */
:root[data-skin="library"] :is(.panel, .person) {
  border-width: 1px; border-color: var(--line-strong);
  background: linear-gradient(transparent 42px, rgba(196, 64, 52, .5) 42px 43.5px, transparent 43.5px) no-repeat,
    radial-gradient(circle at 50% calc(100% - 10px), var(--bg) 0 4.5px, rgba(60, 40, 20, .28) 5px, transparent 6px) no-repeat, var(--surface);
}
:root[data-skin="library"] .panel-attn { background-color: var(--attn); box-shadow: inset 0 4px 0 var(--gold), var(--slab); }
:root[data-skin="library"] :is(.tile, .dash-tile, .card, .error-box) { border-width: 1px; border-color: var(--line-strong); }
:root[data-skin="library"] :is(.btn, .seg) { border-width: 1.5px; }
@media (min-width: 900px) { :root[data-skin="library"] body.has-nav .top-inner { outline: 1.5px dashed rgba(201, 162, 59, .45); outline-offset: -6px; } }
:root[data-skin="library"] :is(.view > .page-head, .task-head) h1 { color: #F4E3B0; }

/* ---------- Green Screen: an old terminal. Phosphor on black, reverse video for what's on, a blinking cursor. */

:root[data-skin="greenscreen"], [data-skin-preview="greenscreen"] {
  --bg: #030A04; --surface: #061208; --sunk: #040D06; --raised: #08180B; --tray: #030A04;
  --ink: #8CFF9B; --muted: #4FC463; --faint: #379A4A; --line: #11391A; --line-strong: #1E6B2E;
  --accent: #B8FFC2; --accent-hover: #FFFFFF; --accent-ink: #021004; --accent-soft: #0B2A12; --focus: #FFB000;
  --keyline: #2E9E45; --shade: transparent; --tint: transparent; --attn: #0D1F0A;
  --gold: #8CFF9B; --gold-shade: #4FC463; --gold-tint: #CFFFD6; --navy: #021004; --cobalt: #1E6B2E; --seg-ink: #CFFFD6;
  --face-lav: #4FC463; --face-blue: #8CFF9B; --face-sky: #6FE3C8; --face-green: #8CFF9B; --face-coral: #FF7A50;
  --face-gold: #FFB000; --face-sand: #FFD36B; --face-grey: #379A4A; --face-ink: #021004;
  --todo-bg: #0B2010; --todo-ink: #8CFF9B; --todo-dot: #4FC463; --doing-bg: #0F3A18; --doing-ink: #CFFFD6; --doing-dot: #8CFF9B;
  --blocked-bg: #2A0E06; --blocked-ink: #FF7A50; --blocked-dot: #FF7A50; --done-bg: #0B2A12; --done-ink: #8CFF9B; --done-dot: #8CFF9B;
  --dropped-bg: #081108; --dropped-ink: #379A4A; --dropped-dot: #1E6B2E; --warn-bg: #2A1F00; --warn-ink: #FFB000;
  --high-bg: #FFB000; --high-ink: #021004; --ok-ink: #8CFF9B; --danger: #FF6040; --danger-bg: #2A0E06;
  --ground: radial-gradient(80% 70% at 50% 40%, rgba(40, 140, 60, .16), transparent 75%), #030A04;
  --hud: #020803; --stage: radial-gradient(70% 140% at 30% 0%, rgba(80, 255, 110, .08), transparent 70%), #051207;
  --slab: 0 0 18px rgba(80, 255, 110, .07); --slab-s: none; --shadow-lift: 0 0 0 1px var(--keyline), 0 0 30px rgba(80, 255, 110, .15);
  --radius: 0px; --radius-s: 0px;
  --font: "IBM Plex Mono", ui-monospace, monospace; --display: "VT323", ui-monospace, monospace; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --body-size: 13.5px; --body-weight: 500;
  --top-ink: #8CFF9B; --top-muted: #4FC463; --top-hi: #CFFFD6; --top-line: #11391A; --top-field: #071A0B; --top-key: #2E9E45; --top-slot: #020803;
  --brand-shadow: 0 0 8px rgba(140, 255, 155, .6); --mark-filter: brightness(0) invert(84%) sepia(40%) saturate(900%) hue-rotate(70deg) drop-shadow(0 0 4px rgba(140, 255, 155, .6));
  --hud-edge: 1px 0 0 var(--keyline);
  --plate-ink: #8CFF9B; --plate-sub: #4FC463; --plate-link: #FFB000; --plate-hover: #0B2A12; --plate-border: 1px solid var(--keyline); --plate-radius: 0px;
  --plate-shadow: 0 0 24px rgba(80, 255, 110, .1); --plate-h1: 44px; --plate-h1-weight: 400; --plate-h1-track: 0;
  --plate-h1-shadow: 0 0 10px rgba(140, 255, 155, .55);
  --locky-glow: radial-gradient(closest-side, rgba(80, 255, 110, .25), rgba(80, 255, 110, 0));
  --current-radius: 0px; --current-shadow: none; --chip-radius: 0px; --chip-shadow: none; --chip-border: transparent;
  --toast-bg: #020803; --toast-ink: #8CFF9B; --toast-key: #2E9E45;
  color-scheme: dark;
}
:root[data-skin="greenscreen"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .2) 2px 3px);
}
:root[data-skin="greenscreen"] ::selection { background: #8CFF9B; color: #021004; }
:root[data-skin="greenscreen"] :is(h1, h2, .brand-name, .dash-num, .tile-n) { text-shadow: 0 0 6px rgba(140, 255, 155, .45); }
:root[data-skin="greenscreen"] :is(.panel, .person, .tile, .dash-tile, .card, .error-box, .signin, .col) { border-width: 1px; }
:root[data-skin="greenscreen"] .panel-attn { box-shadow: inset 0 3px 0 var(--focus), var(--slab); }
:root[data-skin="greenscreen"] .dash-num, :root[data-skin="greenscreen"] .tile-n { font-family: var(--display); font-size: 30px; font-weight: 400; }
:root[data-skin="greenscreen"] .view > .page-head h1::after { content: "_"; margin-left: 4px; animation: cursor-blink 1.06s steps(1) infinite; }
@keyframes cursor-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-skin="greenscreen"] .view > .page-head h1::after { animation: none; } }
:root[data-skin="greenscreen"] .btn { --btn-face: transparent; --btn-shade: transparent; --btn-tint: transparent; border-width: 1px; color: var(--ink); }
:root[data-skin="greenscreen"] .btn:hover:not(:disabled) { --btn-face: #0B2A12; color: var(--accent); }
:root[data-skin="greenscreen"] .btn-primary { --btn-face: #8CFF9B; color: #021004; }
:root[data-skin="greenscreen"] .btn-primary:hover:not(:disabled) { --btn-face: #CFFFD6; color: #021004; }
:root[data-skin="greenscreen"] .btn-danger { --btn-face: #FF6040; color: #021004; border-color: #FF6040; }
:root[data-skin="greenscreen"] :is(input, select, textarea) { background: #020803; border-width: 1px; caret-color: #8CFF9B; box-shadow: none; }
:root[data-skin="greenscreen"] .locky, :root[data-skin="greenscreen"] .view > .page-head:first-child::after { filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(3.5) brightness(.95) drop-shadow(0 0 6px rgba(80, 255, 110, .35)); }
:root[data-skin="greenscreen"] .nav a[aria-current="page"] .badge { background: #021004; color: #8CFF9B; }

/* ---------- Riso: a two-ink zine. Blue ink on cream, pink printed just off register, yellow for go. */

:root[data-skin="riso"], [data-skin-preview="riso"] {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .2 0 0 0 0 .5 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bg: #F6F1E7; --surface: #FFFCF5; --sunk: #F2EBDD; --raised: #FFFCF5; --tray: #EEE6D6;
  --ink: #233C8C; --muted: #5A6AA6; --faint: #7E89B9; --line: #E6DECD; --line-strong: #C9BEA8;
  --accent: #D62E82; --accent-hover: #B31C69; --accent-ink: #FFFFFF; --accent-soft: #FFE1F0; --focus: #FF4FA3;
  --keyline: #233C8C; --shade: transparent; --tint: transparent; --attn: #FFF6C9;
  --gold: #FFE14D; --gold-shade: #F2C200; --gold-tint: #FFF09A; --navy: #233C8C; --cobalt: #233C8C;
  --pink: #FF4FA3;
  --ground: var(--grain) 0 0 / 180px 180px, #F6F1E7;
  --hud: radial-gradient(rgba(35, 60, 140, .22) 1.1px, transparent 1.6px) 0 0 / 6px 6px, #FF5AAA;
  --stage: radial-gradient(rgba(255, 79, 163, .6) 1.3px, transparent 1.8px) 0 0 / 7px 7px, #2D4FA0;
  --slab: 5px 5px 0 0 rgba(255, 79, 163, .9); --slab-s: 3px 3px 0 0 rgba(255, 79, 163, .9); --shadow-lift: 7px 7px 0 0 rgba(255, 79, 163, .9);
  --radius: 5px; --radius-s: 4px;
  --font: "Bricolage Grotesque", system-ui, sans-serif; --display: "Bricolage Grotesque", system-ui, sans-serif;
  --top-ink: #1E2F75; --top-muted: #33438A; --top-hi: #0E1A52; --top-line: rgba(30, 47, 117, .25); --top-field: rgba(255, 255, 255, .25); --top-key: #1E2F75; --top-slot: rgba(255, 255, 255, .45);
  --brand-shadow: 2px 2px 0 rgba(255, 255, 255, .55); --mark-filter: brightness(0) invert(17%) sepia(38%) saturate(2900%) hue-rotate(218deg);
  --hud-edge: 2px 0 0 var(--keyline);
  --plate-ink: #FFF6E0; --plate-sub: #FFD9EC; --plate-link: #FFE14D; --plate-border: 2px solid #1A2D6E; --plate-radius: 6px;
  --plate-shadow: 6px 6px 0 0 #FF4FA3; --plate-h1: 34px; --plate-h1-weight: 800; --plate-h1-track: -.03em; --plate-h1-shadow: 3px 3px 0 #FF4FA3;
  --locky-glow: radial-gradient(closest-side, rgba(255, 225, 77, .6), rgba(255, 225, 77, 0));
  --current-shadow: 0 0 0 2px var(--top-key), 3px 3px 0 0 var(--top-key); --chip-shadow: none; --h2-font: var(--display);
  --toast-bg: #233C8C; --toast-ink: #FFF6E0; --toast-key: #1A2D6E;
}
:root[data-skin="riso"][data-theme="dark"], :root[data-theme="dark"] [data-skin-preview="riso"] {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .9 0 0 0 0 .95 0 0 0 .4 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bg: #17141C; --surface: #211D27; --sunk: #1B1821; --raised: #27222E; --tray: #141118;
  --ink: #F5EFE4; --muted: #BBB1C6; --faint: #8F86A0; --line: #322C3B; --line-strong: #4D4559;
  --accent: #FF7DBE; --accent-hover: #FFA6D2; --accent-ink: #1A1033; --accent-soft: #3A1A30; --focus: #FFE14D;
  --keyline: #8EA6FF; --shade: transparent; --tint: transparent; --attn: #2E2A14;
  --gold: #FFE14D; --gold-shade: #E0BE10; --gold-tint: #FFF09A; --navy: #1A1033; --cobalt: #4561C9;
  --ground: var(--grain) 0 0 / 180px 180px, #17141C;
  --hud: radial-gradient(rgba(23, 20, 28, .3) 1.1px, transparent 1.6px) 0 0 / 6px 6px, #E63E93;
  --stage: radial-gradient(rgba(255, 79, 163, .5) 1.3px, transparent 1.8px) 0 0 / 7px 7px, #2A3F8F;
  --slab: 5px 5px 0 0 rgba(255, 79, 163, .75); --slab-s: 3px 3px 0 0 rgba(255, 79, 163, .75); --shadow-lift: 7px 7px 0 0 rgba(255, 79, 163, .75);
  --top-ink: #1A1033; --top-muted: #3A2150; --top-hi: #0B0618; --top-key: #1A1033; --top-line: rgba(26, 16, 51, .25);
  --mark-filter: brightness(0) invert(8%);
  --todo-bg: #2A2533; --todo-ink: #D8D0E4; --doing-bg: #2A3F8F; --doing-ink: #FFFFFF; --dropped-bg: #1B1821;
}
:root[data-skin="riso"] .btn-primary { color: #233C8C; }
:root[data-skin="riso"] .brand-bot { color: #FFE14D; text-shadow: 2px 2px 0 #1E2F75; }
:root[data-skin="riso"] :is(.btn, .seg) { --btn-shade: transparent; --btn-tint: transparent; }
:root[data-skin="riso"] .btn { box-shadow: 3px 3px 0 0 var(--pink, #FF4FA3); }
:root[data-skin="riso"] .btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 0 #FF4FA3; }
:root[data-skin="riso"] .btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
:root[data-skin="riso"] .btn-ghost { box-shadow: none; }
:root[data-skin="riso"] .panel-head h2, :root[data-skin="riso"] .dash-num { letter-spacing: -.02em; }
:root[data-skin="riso"] .panel-attn { box-shadow: inset 0 6px 0 var(--gold), var(--slab); }
:root[data-skin="riso"] .dash-tile.is-attn { box-shadow: inset 0 4px 0 var(--gold), var(--slab-s); }

/* ---------- Swiss: black, white and one red. Square edges, a rule over every block, big tight type. */

:root[data-skin="swiss"], [data-skin-preview="swiss"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --sunk: #F3F3F3; --raised: #FFFFFF; --tray: #F3F3F3;
  --ink: #111111; --muted: #555555; --faint: #767676; --line: #E3E3E3; --line-strong: #BDBDBD;
  --accent: #D9000E; --accent-hover: #A8000B; --accent-ink: #FFFFFF; --accent-soft: #FFE5E7; --focus: #D9000E;
  --keyline: #111111; --shade: transparent; --tint: transparent; --attn: #FFF4F4;
  --gold: #E3000F; --gold-shade: #E3000F; --gold-tint: #E3000F; --navy: #FFFFFF; --cobalt: #111111;
  --ground: linear-gradient(90deg, rgba(0, 0, 0, .035) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%, #FFFFFF;
  --hud: #111111; --stage: transparent;
  --slab: none; --slab-s: none; --shadow-lift: 0 0 0 2px #111111;
  --radius: 0px; --radius-s: 0px;
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif; --display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --top-ink: #FFFFFF; --top-muted: #A3A3A3; --top-line: #2A2A2A; --top-field: #1F1F1F; --top-key: #111111; --top-slot: #222222;
  --brand-shadow: none; --mark-filter: none; --hud-edge: none;
  --plate-ink: #111111; --plate-sub: #555555; --plate-link: #D9000E; --plate-hover: #F3F3F3; --plate-border: 0;
  --plate-radius: 0px; --plate-shadow: inset 0 -6px 0 #111111; --plate-h1: 52px; --plate-h1-weight: 900; --plate-h1-track: -.05em; --plate-h1-shadow: none;
  --locky-glow: linear-gradient(transparent, transparent);
  --current-radius: 0px; --current-shadow: none; --chip-radius: 0px; --chip-shadow: none; --chip-border: transparent;
  --h2-font: var(--display); --toast-bg: #111111; --toast-ink: #FFFFFF; --toast-key: #111111;
}
:root[data-skin="swiss"][data-theme="dark"], :root[data-theme="dark"] [data-skin-preview="swiss"] {
  --bg: #0D0D0D; --surface: #0D0D0D; --sunk: #1A1A1A; --raised: #141414; --tray: #161616;
  --ink: #F2F2F2; --muted: #A6A6A6; --faint: #8A8A8A; --line: #262626; --line-strong: #4D4D4D;
  --accent: #FF4A4A; --accent-hover: #FF7A7A; --accent-ink: #000000; --accent-soft: #3A0E0E; --focus: #FF4A4A;
  --keyline: #F2F2F2; --shade: transparent; --tint: transparent; --attn: #1F0F0F;
  --gold: #FF2D2D; --gold-shade: #FF2D2D; --gold-tint: #FF2D2D; --navy: #FFFFFF; --cobalt: #F2F2F2; --seg-ink: #0D0D0D;
  --ground: linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%, #0D0D0D;
  --hud: #000000; --stage: transparent; --shadow-lift: 0 0 0 2px #F2F2F2;
  --top-line: #262626; --top-field: #1A1A1A; --top-key: #000000; --hud-edge: 1px 0 0 #262626;
  --plate-ink: #F2F2F2; --plate-sub: #A6A6A6; --plate-link: #FF4A4A; --plate-hover: #1A1A1A; --plate-shadow: inset 0 -6px 0 #F2F2F2;
  --toast-bg: #F2F2F2; --toast-ink: #0D0D0D; --toast-key: #F2F2F2;
}
:root[data-skin="swiss"] :is(.panel, .person, .error-box) { border: 0; border-top: 3px solid var(--ink); border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; }
:root[data-skin="swiss"] .panel-attn { border-top-color: var(--gold); background: transparent; box-shadow: none; padding-top: 14px; }
:root[data-skin="swiss"] .panel-muted { border-top-style: dashed; }
:root[data-skin="swiss"] .panel-head h2 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
:root[data-skin="swiss"] :is(.tile, .dash-tile, .card) { border-width: 0 0 0 3px; box-shadow: none; }
:root[data-skin="swiss"] .tile { box-shadow: none; border-left-color: var(--tile-band); }
:root[data-skin="swiss"] .dash-tile.is-attn { border-left-color: var(--gold); box-shadow: none; }
:root[data-skin="swiss"] .dash-num { font-weight: 900; letter-spacing: -.04em; }
:root[data-skin="swiss"] .view > .page-head { padding-left: 0; padding-right: 0; padding-top: 34px; margin-bottom: 22px; }
:root[data-skin="swiss"] .view > .page-head::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; background: var(--gold); }
:root[data-skin="swiss"] .view > .page-head h1, :root[data-skin="swiss"] .task-head h1 { line-height: .95; }
:root[data-skin="swiss"] .task-head { padding-left: 0; padding-right: 0; }
:root[data-skin="swiss"] .btn { --btn-shade: transparent; --btn-tint: transparent; --btn-drop: 0px; }
:root[data-skin="swiss"] .btn:hover:not(:disabled) { transform: none; --btn-face: var(--ink); color: var(--bg); }
:root[data-skin="swiss"] .btn-primary:hover:not(:disabled) { --btn-face: var(--ink); color: var(--bg); }
:root[data-skin="swiss"] .btn-ghost:hover:not(:disabled) { background: var(--sunk); color: var(--ink); }
:root[data-skin="swiss"] :is(input, select, textarea) { border-width: 0 0 2px; background: var(--sunk); box-shadow: none; }
:root[data-skin="swiss"] .seg { box-shadow: none; }
@media (max-width: 719px) { :root[data-skin="swiss"] { --plate-h1: 38px; } }

/* ---------- Glass: frosted panes over a soft aurora. */

:root[data-skin="glass"], [data-skin-preview="glass"] {
  --bg: #EEF0FB; --surface: rgba(255, 255, 255, .58); --sunk: rgba(255, 255, 255, .42); --raised: rgba(255, 255, 255, .78); --tray: rgba(255, 255, 255, .32);
  --ink: #1B1838; --muted: #55527A; --faint: #77749A; --line: rgba(27, 24, 56, .08); --line-strong: rgba(27, 24, 56, .18);
  --accent: #5B3DF5; --accent-hover: #4426DB; --accent-ink: #FFFFFF; --accent-soft: rgba(91, 61, 245, .12); --focus: #5B3DF5;
  --keyline: rgba(255, 255, 255, .85); --shade: transparent; --tint: transparent; --attn: rgba(255, 246, 220, .75);
  --gold: #5B3DF5; --gold-shade: #4426DB; --gold-tint: #8D78FF; --navy: #FFFFFF; --cobalt: #5B3DF5;
  --ground: radial-gradient(55% 45% at 8% 6%, rgba(255, 160, 200, .55), transparent 70%), radial-gradient(50% 50% at 95% 15%, rgba(130, 200, 255, .6), transparent 70%),
    radial-gradient(60% 55% at 55% 105%, rgba(175, 145, 255, .55), transparent 70%), #EEF0FB;
  --hud: rgba(255, 255, 255, .4); --stage: linear-gradient(120deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35));
  --slab: inset 0 1px 0 rgba(255, 255, 255, .7), 0 12px 32px -14px rgba(40, 30, 110, .35);
  --slab-s: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 18px -10px rgba(40, 30, 110, .35);
  --shadow-lift: 0 24px 48px -16px rgba(40, 30, 110, .45);
  --radius: 22px; --radius-s: 13px;
  --font: "Plus Jakarta Sans", system-ui, sans-serif; --display: "Plus Jakarta Sans", system-ui, sans-serif;
  --top-ink: #1B1838; --top-muted: #55527A; --top-hi: #0E0B2A; --top-line: rgba(27, 24, 56, .1); --top-field: rgba(255, 255, 255, .55); --top-key: rgba(27, 24, 56, .12); --top-slot: rgba(255, 255, 255, .6);
  --brand-shadow: none; --mark-filter: brightness(0) invert(9%) sepia(30%) saturate(1800%) hue-rotate(225deg);
  --hud-edge: 1px 0 0 rgba(255, 255, 255, .7);
  --plate-ink: #1B1838; --plate-sub: #55527A; --plate-link: #5B3DF5; --plate-hover: rgba(255, 255, 255, .6);
  --plate-border: 1px solid rgba(255, 255, 255, .85); --plate-radius: 26px; --plate-shadow: 0 22px 44px -22px rgba(40, 30, 110, .4);
  --plate-h1: 32px; --plate-h1-weight: 800; --plate-h1-track: -.03em; --plate-h1-shadow: none;
  --plate-grad: linear-gradient(90deg, #5B3DF5, #D9479E);
  --locky-glow: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
  --current-radius: 12px; --current-shadow: 0 8px 18px -8px rgba(91, 61, 245, .7);
  --chip-shadow: none; --chip-border: rgba(255, 255, 255, .9); --btn-radius: 999px; --field-radius: 12px;
  --toast-bg: rgba(27, 24, 56, .88); --toast-ink: #FFFFFF; --toast-key: rgba(255, 255, 255, .2);
}
:root[data-skin="glass"][data-theme="dark"], :root[data-theme="dark"] [data-skin-preview="glass"] {
  --bg: #0A0B1C; --surface: rgba(28, 30, 66, .55); --sunk: rgba(255, 255, 255, .04); --raised: rgba(36, 38, 80, .72); --tray: rgba(255, 255, 255, .03);
  --ink: #EEF0FF; --muted: #A6A9D6; --faint: #7F82B3; --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16);
  --accent: #A594FF; --accent-hover: #C2B7FF; --accent-ink: #0A0B1C; --accent-soft: rgba(165, 148, 255, .15); --focus: #C2B7FF;
  --keyline: rgba(255, 255, 255, .12); --shade: transparent; --tint: transparent; --attn: rgba(80, 64, 20, .4);
  --gold: #7C63FF; --gold-shade: #6A50F0; --gold-tint: #B3A4FF; --navy: #FFFFFF; --cobalt: #7C63FF;
  --ground: radial-gradient(55% 45% at 8% 6%, rgba(200, 60, 160, .3), transparent 70%), radial-gradient(50% 50% at 95% 15%, rgba(0, 150, 255, .25), transparent 70%),
    radial-gradient(60% 55% at 55% 105%, rgba(120, 60, 255, .35), transparent 70%), #0A0B1C;
  --hud: rgba(10, 11, 28, .45); --stage: linear-gradient(120deg, rgba(60, 60, 130, .55), rgba(30, 30, 80, .35));
  --slab: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -14px rgba(0, 0, 0, .7);
  --slab-s: inset 0 1px 0 rgba(255, 255, 255, .06), 0 6px 18px -10px rgba(0, 0, 0, .7);
  --shadow-lift: 0 24px 48px -16px rgba(0, 0, 0, .8);
  --top-ink: #EEF0FF; --top-muted: #A6A9D6; --top-hi: #FFFFFF; --top-line: rgba(255, 255, 255, .08); --top-field: rgba(255, 255, 255, .06); --top-key: rgba(255, 255, 255, .1); --top-slot: rgba(0, 0, 0, .3);
  --mark-filter: none; --hud-edge: 1px 0 0 rgba(255, 255, 255, .08);
  --plate-ink: #FFFFFF; --plate-sub: #C4C6EE; --plate-link: #C2B7FF; --plate-hover: rgba(255, 255, 255, .08);
  --plate-border: 1px solid rgba(255, 255, 255, .14); --plate-shadow: 0 22px 44px -22px rgba(0, 0, 0, .8);
  --plate-grad: linear-gradient(90deg, #C2B7FF, #FF9CCF);
  --locky-glow: radial-gradient(closest-side, rgba(165, 148, 255, .45), rgba(165, 148, 255, 0));
  --chip-border: rgba(255, 255, 255, .2);
}
:root[data-skin="glass"] body { background-attachment: fixed; }
:root[data-skin="glass"] :is(.panel, .person, .tile, .dash-tile, .card, .col, .error-box, .signin, .top, .nav-panel, .tabs, .view > .page-head, .task-head, .tk-bulk) {
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
}
:root[data-skin="glass"] :is(.panel, .person, .tile, .dash-tile, .card, .error-box, .signin) { border-width: 1px; }
:root[data-skin="glass"] .col { border-color: var(--keyline); box-shadow: none; }
:root[data-skin="glass"] :is(.view > .page-head, .task-head) h1 { background: var(--plate-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin="glass"] .btn { --btn-face: var(--raised); --btn-shade: transparent; --btn-tint: transparent; --btn-drop: 0px; border-width: 1px; border-color: var(--keyline); box-shadow: 0 4px 14px -8px rgba(40, 30, 110, .45); }
:root[data-skin="glass"] .btn:hover:not(:disabled) { box-shadow: 0 8px 20px -8px rgba(40, 30, 110, .5); }
:root[data-skin="glass"] .btn-primary { --btn-face: linear-gradient(135deg, #6E4BFF, #4A2BE8); color: #FFFFFF; border-color: rgba(255, 255, 255, .35); box-shadow: 0 8px 20px -8px rgba(91, 61, 245, .8); }
:root[data-skin="glass"] .btn-primary:hover { color: #FFFFFF; }
:root[data-skin="glass"] .btn-ghost { box-shadow: none; border-color: transparent; }
:root[data-skin="glass"] .panel-attn { box-shadow: inset 0 3px 0 var(--gold), var(--slab); }
:root[data-skin="glass"] :is(input, select, textarea) { background: rgba(255, 255, 255, .6); border-color: rgba(27, 24, 56, .12); box-shadow: none; }
:root[data-skin="glass"][data-theme="dark"] :is(input, select, textarea) { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }

/* ---------- Pixel: an 8-bit console. Notched pixel frames, hard drops, pixel type, sky plates with a strip of grass. */

:root[data-skin="pixel"], [data-skin-preview="pixel"] {
  --px: 3px; --pk: #1D2B53;
  --bg: #FFF1E8; --surface: #FFFFFF; --sunk: #F5E8DE; --raised: #FFFFFF; --tray: #EEDFD3;
  --ink: #1D2B53; --muted: #5F574F; --faint: #83769C; --line: #EADBCE; --line-strong: #C2B4A8;
  --accent: #0F5FB8; --accent-hover: #1D2B53; --accent-ink: #FFFFFF; --accent-soft: #DDEFFF; --focus: #FF004D;
  --keyline: #1D2B53; --shade: #EADBCE; --tint: transparent; --attn: #FFF8C4;
  --gold: #FFEC27; --gold-shade: #FFA300; --gold-tint: #FFF7A0; --navy: #1D2B53; --cobalt: #1D2B53;
  --face-lav: #C2C3C7; --face-blue: #29ADFF; --face-sky: #9ADDFF; --face-green: #00E436; --face-coral: #FF77A8; --face-gold: #FFEC27; --face-sand: #FFCCAA; --face-grey: #C2C3C7; --face-ink: #1D2B53;
  --ground: conic-gradient(rgba(29, 43, 83, .045) 25%, transparent 0 50%, rgba(29, 43, 83, .045) 0 75%, transparent 0) 0 0 / 16px 16px, #FFF1E8;
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' shape-rendering='crispEdges'%3E%3Cg fill='%23FFF1E8'%3E%3Crect x='8' y='10' width='2' height='2' opacity='.8'/%3E%3Crect x='44' y='6' width='2' height='2' opacity='.5'/%3E%3Crect x='60' y='34' width='3' height='3' opacity='.9'/%3E%3Crect x='22' y='46' width='2' height='2' opacity='.6'/%3E%3Crect x='36' y='62' width='2' height='2' opacity='.4'/%3E%3C/g%3E%3C/svg%3E");
  --clouds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='70' shape-rendering='crispEdges'%3E%3Cg fill='%23FFF1E8'%3E%3Crect x='20' y='18' width='36' height='6'/%3E%3Crect x='14' y='24' width='54' height='6'/%3E%3Crect x='26' y='12' width='18' height='6'/%3E%3Crect x='140' y='40' width='30' height='6'/%3E%3Crect x='134' y='46' width='48' height='6'/%3E%3Crect x='146' y='34' width='14' height='6'/%3E%3C/g%3E%3C/svg%3E");
  --hud: var(--stars) 0 0 / 72px 72px, #1D2B53;
  --stage: linear-gradient(transparent calc(100% - 10px), #00E436 calc(100% - 10px) calc(100% - 4px), #008751 calc(100% - 4px)), var(--clouds) 0 0 / 220px 70px, #29ADFF;
  --slab: 0 calc(-1 * var(--px)) 0 0 var(--pk), 0 var(--px) 0 0 var(--pk), calc(-1 * var(--px)) 0 0 0 var(--pk), var(--px) 0 0 0 var(--pk), inset 0 -4px 0 var(--shade), 6px 6px 0 0 rgba(29, 43, 83, .22);
  --slab-s: 0 -2px 0 0 var(--pk), 0 2px 0 0 var(--pk), -2px 0 0 0 var(--pk), 2px 0 0 0 var(--pk), 4px 4px 0 0 rgba(29, 43, 83, .2);
  --shadow-lift: 0 -3px 0 0 var(--pk), 0 3px 0 0 var(--pk), -3px 0 0 0 var(--pk), 3px 0 0 0 var(--pk), 8px 8px 0 0 rgba(29, 43, 83, .3);
  --radius: 0px; --radius-s: 0px;
  --font: "DotGothic16", "Pixelify Sans", ui-monospace, monospace; --display: "Press Start 2P", "Pixelify Sans", monospace; --h2-font: "Pixelify Sans", ui-monospace, monospace; --body-size: 14.5px; --body-weight: 400;
  --top-ink: #FFF1E8; --top-muted: #C2C3C7; --top-line: rgba(255, 241, 232, .15); --top-field: rgba(255, 241, 232, .08); --top-key: #000000; --top-slot: #000000;
  --brand-shadow: 2px 2px 0 #000000; --mark-filter: drop-shadow(2px 2px 0 #000000); --hud-edge: 3px 0 0 #000000;
  --plate-ink: #FFF1E8; --plate-sub: #1D2B53; --plate-link: #1D2B53; --plate-hover: rgba(255, 241, 232, .25); --plate-border: 0 solid transparent; --plate-radius: 0px;
  --plate-shadow: 0 -4px 0 0 #000000, 0 4px 0 0 #000000, -4px 0 0 0 #000000, 4px 0 0 0 #000000, 8px 8px 0 0 rgba(29, 43, 83, .3);
  --plate-h1: 20px; --plate-h1-weight: 400; --plate-h1-track: 0; --plate-h1-shadow: 3px 3px 0 #1D2B53;
  --locky-glow: linear-gradient(transparent, transparent);
  --current-radius: 0px; --current-shadow: 0 -3px 0 0 #000000, 0 3px 0 0 #000000, -3px 0 0 0 #000000, 3px 0 0 0 #000000;
  --chip-radius: 0px; --chip-shadow: none; --btn-radius: 0px; --field-radius: 0px;
  --toast-bg: #1D2B53; --toast-ink: #FFF1E8; --toast-key: #000000;
}
:root[data-skin="pixel"][data-theme="dark"], :root[data-theme="dark"] [data-skin-preview="pixel"] {
  --pk: #000000;
  --bg: #0B0F1F; --surface: #1D2B53; --sunk: #151F40; --raised: #243466; --tray: #10172F;
  --ink: #FFF1E8; --muted: #C2C3C7; --faint: #9A90B4; --line: #2D3B66; --line-strong: #5F6B99;
  --accent: #29ADFF; --accent-hover: #7FD1FF; --accent-ink: #000000; --accent-soft: #1A3A6B; --focus: #FF77A8;
  --keyline: #000000; --shade: rgba(0, 0, 0, .35); --tint: transparent; --attn: #2E2A3E;
  --gold: #FFEC27; --gold-shade: #FFA300; --gold-tint: #FFF7A0; --navy: #1D2B53; --cobalt: #29ADFF; --seg-ink: #000000;
  --ground: conic-gradient(rgba(255, 241, 232, .03) 25%, transparent 0 50%, rgba(255, 241, 232, .03) 0 75%, transparent 0) 0 0 / 16px 16px, #0B0F1F;
  --hud: var(--stars) 0 0 / 72px 72px, #000000;
  --stage: linear-gradient(transparent calc(100% - 10px), #008751 calc(100% - 10px) calc(100% - 4px), #005A36 calc(100% - 4px)), var(--stars) 0 0 / 72px 72px, #1D2B53;
  --slab: 0 calc(-1 * var(--px)) 0 0 var(--pk), 0 var(--px) 0 0 var(--pk), calc(-1 * var(--px)) 0 0 0 var(--pk), var(--px) 0 0 0 var(--pk), inset 0 -4px 0 var(--shade), 6px 6px 0 0 rgba(0, 0, 0, .45);
  --slab-s: 0 -2px 0 0 var(--pk), 0 2px 0 0 var(--pk), -2px 0 0 0 var(--pk), 2px 0 0 0 var(--pk), 4px 4px 0 0 rgba(0, 0, 0, .45);
  --plate-sub: #C2C3C7; --plate-link: #FFEC27; --plate-h1-shadow: 3px 3px 0 #000000;
  --todo-bg: #243466; --todo-ink: #FFF1E8; --doing-bg: #29ADFF; --doing-ink: #000000; --dropped-bg: #151F40;
}
:root[data-skin="pixel"] :is(.panel, .person, .tile, .dash-tile, .card, .error-box, .signin, .btn, .seg, .view > .page-head, .task-head, .banner) { border-color: transparent; }
:root[data-skin="pixel"] .btn { --btn-drop: 0px; box-shadow: 0 -2px 0 0 var(--pk), 0 2px 0 0 var(--pk), -2px 0 0 0 var(--pk), 2px 0 0 0 var(--pk), inset 0 -3px 0 var(--btn-shade), 4px 4px 0 0 rgba(29, 43, 83, .25); }
:root[data-skin="pixel"] .btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 0 -2px 0 0 var(--pk), 0 2px 0 0 var(--pk), -2px 0 0 0 var(--pk), 2px 0 0 0 var(--pk), inset 0 -3px 0 var(--btn-shade), 5px 5px 0 0 rgba(29, 43, 83, .25); }
:root[data-skin="pixel"] .btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 -2px 0 0 var(--pk), 0 2px 0 0 var(--pk), -2px 0 0 0 var(--pk), 2px 0 0 0 var(--pk); }
:root[data-skin="pixel"] .btn-ghost, :root[data-skin="pixel"] .btn-ghost:hover:not(:disabled) { box-shadow: none; transform: none; }
:root[data-skin="pixel"] .panel-attn { box-shadow: inset 0 6px 0 var(--gold), var(--slab); }
:root[data-skin="pixel"] .tile { box-shadow: inset 0 5px 0 var(--tile-band), var(--slab); }
:root[data-skin="pixel"] .dash-tile.is-attn { box-shadow: inset 0 4px 0 var(--gold), var(--slab-s); }
:root[data-skin="pixel"] :is(.dash-num, .tile-n) { font-family: var(--display); font-size: 17px; font-weight: 400; }
:root[data-skin="pixel"] :is(.btn, .nav a, .nav-foot a, .tabs .tab, .chip) { font-family: "Pixelify Sans", ui-monospace, monospace; }
:root[data-skin="pixel"] :is(.view > .page-head, .task-head) h1 { line-height: 1.5; padding-top: 6px; }
:root[data-skin="pixel"] .task-head h1 { font-size: 16px; }
:root[data-skin="pixel"] .view > .page-head { padding-bottom: 22px; }
:root[data-skin="pixel"] .panel-head h2 { font-weight: 700; font-size: 17px; }
:root[data-skin="pixel"] .count { font-family: var(--font); }
:root[data-skin="pixel"] :is(input, select, textarea) { border-width: 2px; border-color: var(--pk); box-shadow: inset 2px 2px 0 rgba(29, 43, 83, .12); }
:root[data-skin="pixel"] img { image-rendering: auto; }
:root[data-skin="pixel"] .spinner { border-radius: 0; }

/* ---------- Sticky Notes: notes taped to a corkboard, titles in marker. */

:root[data-skin="sticky"], [data-skin-preview="sticky"] {
  --cork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .08 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --tape: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .45)) 50% 0 / 88px 16px no-repeat;
  --bg: #C69C64; --surface: #FFF6A8; --sunk: #F6EA92; --raised: #FFFBD6; --tray: rgba(255, 255, 255, .2);
  --ink: #2A2418; --muted: #67593A; --faint: #857652; --line: rgba(90, 70, 20, .16); --line-strong: rgba(90, 70, 20, .34);
  --accent: #B42A22; --accent-hover: #8E1C15; --accent-ink: #FFFFFF; --accent-soft: #FFE0D6; --focus: #1F6FD1;
  --keyline: rgba(80, 60, 20, .28); --shade: transparent; --tint: transparent; --attn: #FFD6E8;
  --gold: #E2453C; --gold-shade: #B92E26; --gold-tint: #FF7B71; --navy: #FFFFFF; --cobalt: #2A2418;
  --ground: var(--cork) 0 0 / 200px 200px, radial-gradient(120% 90% at 50% 0%, #D2AB72, #BC9058);
  --hud: repeating-linear-gradient(90deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 11px), linear-gradient(90deg, #4A3221, #5E412B 50%, #4A3221);
  --stage: repeating-linear-gradient(transparent 0 25px, rgba(60, 110, 200, .18) 25px 26px) 0 14px / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 38px, rgba(220, 70, 70, .5) 38px 39.5px, transparent 39.5px), #FFFDF5;
  --slab: 0 1px 1px rgba(0, 0, 0, .14), 0 14px 18px -12px rgba(50, 30, 5, .6);
  --slab-s: 0 1px 1px rgba(0, 0, 0, .14), 0 8px 12px -8px rgba(50, 30, 5, .6);
  --shadow-lift: 0 20px 30px -12px rgba(50, 30, 5, .7);
  --radius: 2px; --radius-s: 4px;
  --font: "Nunito", system-ui, sans-serif; --display: "Permanent Marker", "Nunito", cursive; --h2-font: "Caveat", "Nunito", cursive;
  --top-ink: #FBEBD3; --top-muted: #D2B997; --top-hi: #FFFFFF; --top-line: rgba(251, 235, 211, .16); --top-field: rgba(251, 235, 211, .08); --top-key: #2A1A0F; --top-slot: rgba(0, 0, 0, .3);
  --brand-shadow: 0 2px 0 rgba(0, 0, 0, .5); --hud-edge: inset -3px 0 0 rgba(0, 0, 0, .3), 3px 0 0 #2A1A0F;
  --plate-ink: #2A2418; --plate-sub: #67593A; --plate-link: #B42A22; --plate-hover: rgba(0, 0, 0, .05); --plate-border: 0 solid transparent; --plate-radius: 2px;
  --plate-shadow: 0 1px 1px rgba(0, 0, 0, .14), 0 16px 22px -14px rgba(50, 30, 5, .7);
  --plate-h1: 34px; --plate-h1-weight: 400; --plate-h1-track: 0; --plate-h1-shadow: none;
  --locky-glow: linear-gradient(transparent, transparent);
  --current-radius: 2px; --current-shadow: 0 6px 8px -5px rgba(0, 0, 0, .6);
  --chip-shadow: none; --chip-border: rgba(42, 36, 24, .25);
  --toast-bg: #2A2418; --toast-ink: #FFF6A8; --toast-key: #2A1A0F;
}
:root[data-skin="sticky"][data-theme="dark"], :root[data-theme="dark"] [data-skin-preview="sticky"] {
  --cork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .03 0 0 0 0 .01 0 0 0 1.1 -.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  --tape: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .12)) 50% 0 / 88px 16px no-repeat;
  --bg: #4A3826; --surface: #3B3622; --sunk: #33301D; --raised: #444026; --tray: rgba(0, 0, 0, .18);
  --ink: #F3E9C6; --muted: #C9BB8F; --faint: #A39570; --line: rgba(243, 233, 198, .1); --line-strong: rgba(243, 233, 198, .24);
  --accent: #FF8A7E; --accent-hover: #FFB0A6; --accent-ink: #2A0E0A; --accent-soft: #4A2620; --focus: #8CC1FF;
  --keyline: rgba(0, 0, 0, .4); --shade: transparent; --tint: transparent; --attn: #4A2A36;
  --gold: #FF6B5E; --gold-shade: #D44A3E; --gold-tint: #FF9A90; --navy: #FFFFFF; --cobalt: #6B5F38;
  --ground: var(--cork) 0 0 / 200px 200px, radial-gradient(120% 90% at 50% 0%, #554029, #3B2B1B);
  --hud: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 11px), linear-gradient(90deg, #2A1C12, #36251A 50%, #2A1C12);
  --stage: repeating-linear-gradient(transparent 0 25px, rgba(140, 180, 255, .1) 25px 26px) 0 14px / 100% 100% no-repeat,
    linear-gradient(90deg, transparent 38px, rgba(255, 110, 110, .35) 38px 39.5px, transparent 39.5px), #2F2B22;
  --slab: 0 1px 1px rgba(0, 0, 0, .3), 0 14px 18px -12px rgba(0, 0, 0, .8);
  --slab-s: 0 1px 1px rgba(0, 0, 0, .3), 0 8px 12px -8px rgba(0, 0, 0, .8);
  --plate-ink: #F3E9C6; --plate-sub: #C9BB8F; --plate-link: #FF8A7E; --plate-hover: rgba(255, 255, 255, .06);
  --chip-border: rgba(0, 0, 0, .35);
  --todo-bg: #403A26; --todo-ink: #E8DDB6; --doing-bg: #2E3D5A; --doing-ink: #DCE8FF; --dropped-bg: #33301D;
}
:root[data-skin="sticky"] :is(.panel, .person, .error-box) { border-color: transparent; background: var(--tape), var(--surface); }
:root[data-skin="sticky"] .panel-attn { background: var(--tape), var(--attn); box-shadow: var(--slab); padding-top: 14px; }
:root[data-skin="sticky"] .panel-muted { background: var(--tape), var(--sunk); border: 0; box-shadow: var(--slab-s); }
:root[data-skin="sticky"] .panel-head h2 { font-size: 24px; font-weight: 700; line-height: 1; }
:root[data-skin="sticky"] :is(.tile, .dash-tile, .card) { border-color: transparent; }
:root[data-skin="sticky"] .dash-tile:nth-child(4n + 1) { background: #FFF6A8; transform: rotate(-1.2deg); }
:root[data-skin="sticky"] .dash-tile:nth-child(4n + 2) { background: #FFD6E8; transform: rotate(.8deg); }
:root[data-skin="sticky"] .dash-tile:nth-child(4n + 3) { background: #CDEBFF; transform: rotate(-.6deg); }
:root[data-skin="sticky"] .dash-tile:nth-child(4n + 4) { background: #D4F5C9; transform: rotate(1.1deg); }
:root[data-skin="sticky"][data-theme="dark"] .dash-tile:nth-child(n) { background: var(--surface); }
:root[data-skin="sticky"] .dash-tile.is-zero { opacity: .7; box-shadow: var(--slab-s); }
:root[data-skin="sticky"] .dash-num { font-family: "Caveat", cursive; font-size: 30px; }
:root[data-skin="sticky"] .tile { box-shadow: inset 0 5px 0 var(--tile-band), var(--slab); }
:root[data-skin="sticky"] .col { border: 0; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2); }
/* The title plate is a ruled sheet with a pushpin. */
:root[data-skin="sticky"] .view > .page-head { padding-left: 54px; }
:root[data-skin="sticky"] .view > .page-head::before {
  content: ""; position: absolute; left: 50%; top: -7px; width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FF8A80, #D32F2F 55%, #8E1C15); box-shadow: 0 3px 3px rgba(0, 0, 0, .35);
}
:root[data-skin="sticky"] :is(.view > .page-head, .task-head) h1 { color: #1F3FA8; }
:root[data-skin="sticky"][data-theme="dark"] :is(.view > .page-head, .task-head) h1 { color: #9FB8FF; }
:root[data-skin="sticky"] .btn { --btn-shade: transparent; --btn-tint: transparent; --btn-drop: 0px; border-width: 1.5px; box-shadow: 0 3px 5px -2px rgba(0, 0, 0, .35); }
:root[data-skin="sticky"] .btn-ghost { box-shadow: none; }
:root[data-skin="sticky"] :is(.nav a, .nav-foot a)[aria-current="page"] { background: #FFF27A; color: #2A2418; transform: rotate(-1deg); }
:root[data-skin="sticky"] :is(.nav a, .nav-foot a)[aria-current="page"] .icon { color: #2A2418; }
:root[data-skin="sticky"] .nav a[aria-current="page"] .badge { background: #E2453C; color: #FFFFFF; }
@media (max-width: 719px) { :root[data-skin="sticky"] .view > .page-head { padding-left: 46px; } }

/* ---------- Sage: quiet greens, soft edges, pill buttons, no hard lines. */

:root[data-skin="sage"], [data-skin-preview="sage"] {
  --bg: #EEF2EA; --surface: #FBFCF9; --sunk: #F2F5EF; --raised: #FFFFFF; --tray: #E6ECE1;
  --ink: #26332B; --muted: #5E6E63; --faint: #7F8D82; --line: #E1E7DC; --line-strong: #C5D0BE;
  --accent: #46714F; --accent-hover: #365A3E; --accent-ink: #FFFFFF; --accent-soft: #E3EDE3; --focus: #46714F;
  --keyline: #D6DFD0; --shade: transparent; --tint: transparent; --attn: #F7F2E2;
  --gold: #5E8A67; --gold-shade: #4F7A5A; --gold-tint: #8DB596; --navy: #FFFFFF; --cobalt: #5E8A67;
  --face-lav: #E4E6EE; --face-blue: #CFE3EE; --face-sky: #DCEDF3; --face-green: #D2EACF; --face-coral: #F3D3C9; --face-gold: #EFE2B5; --face-sand: #F3EAD0; --face-grey: #E5E7E3; --face-ink: #26332B;
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Cg fill='none' stroke='%2346714F' stroke-opacity='.22' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 112C60 70 96 46 150 30'/%3E%3Cpath d='M70 76c-8-22 2-44 26-52 6 22-4 42-26 52z' fill='%2346714F' fill-opacity='.08'/%3E%3Cpath d='M104 54c4-22 22-36 46-34-4 22-22 36-46 34z' fill='%2346714F' fill-opacity='.08'/%3E%3Cpath d='M52 92c-20-8-30-28-24-50 20 8 30 28 24 50z' fill='%2346714F' fill-opacity='.08'/%3E%3C/g%3E%3C/svg%3E");
  --ground: radial-gradient(70% 60% at 100% 0%, rgba(180, 205, 170, .4), transparent 70%), radial-gradient(60% 50% at 0% 100%, rgba(220, 210, 180, .35), transparent 70%), #EEF2EA;
  --hud: linear-gradient(180deg, #E2EADC, #D9E3D2);
  --stage: var(--leaf) right 120px bottom -10px / 200px 150px no-repeat, linear-gradient(120deg, #DDE8D7, #EEF2EA);
  --slab: 0 1px 2px rgba(38, 51, 43, .06), 0 10px 24px -16px rgba(38, 51, 43, .3);
  --slab-s: 0 1px 2px rgba(38, 51, 43, .07);
  --shadow-lift: 0 18px 36px -16px rgba(38, 51, 43, .35);
  --radius: 18px; --radius-s: 12px;
  --font: "Nunito", system-ui, sans-serif; --display: "Fraunces", Georgia, serif; --body-size: 14.5px;
  --top-ink: #26332B; --top-muted: #5E6E63; --top-hi: #142019; --top-line: rgba(38, 51, 43, .1); --top-field: rgba(255, 255, 255, .55); --top-key: rgba(38, 51, 43, .14); --top-slot: rgba(255, 255, 255, .7);
  --brand-shadow: none; --mark-filter: brightness(0) invert(36%) sepia(22%) saturate(800%) hue-rotate(80deg); --hud-edge: 1px 0 0 #D0DAC9;
  --plate-ink: #26332B; --plate-sub: #5E6E63; --plate-link: #46714F; --plate-hover: rgba(255, 255, 255, .6); --plate-border: 0 solid transparent; --plate-radius: 26px;
  --plate-shadow: none; --plate-h1: 34px; --plate-h1-weight: 500; --plate-h1-track: -.02em; --plate-h1-shadow: none;
  --locky-glow: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  --current-radius: 999px; --current-shadow: 0 1px 2px rgba(38, 51, 43, .12), 0 6px 14px -8px rgba(38, 51, 43, .35);
  --chip-shadow: none; --chip-border: transparent; --btn-radius: 999px; --field-radius: 12px;
  --toast-bg: #26332B; --toast-ink: #F2F5EF; --toast-key: #26332B;
}
:root[data-skin="sage"][data-theme="dark"], :root[data-theme="dark"] [data-skin-preview="sage"] {
  --bg: #121814; --surface: #1A221D; --sunk: #151C18; --raised: #202A24; --tray: #141B17;
  --ink: #E4ECE4; --muted: #A3B3A7; --faint: #7D8C81; --line: #26312A; --line-strong: #3A4840;
  --accent: #9CC9A7; --accent-hover: #B9DCC1; --accent-ink: #102016; --accent-soft: #20342A; --focus: #9CC9A7;
  --keyline: #2C3830; --shade: transparent; --tint: transparent; --attn: #2A281C;
  --gold: #8DB596; --gold-shade: #6E9A78; --gold-tint: #B3D3BA; --navy: #102016; --cobalt: #4F7A5A;
  --face-lav: #CFD2E0; --face-blue: #B6D2E2; --face-sky: #C6E1EA; --face-green: #BCDDB8; --face-coral: #E8BBAD; --face-gold: #E3D296; --face-sand: #E8DCB6; --face-grey: #CDD1CB; --face-ink: #142019;
  --leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120' viewBox='0 0 160 120'%3E%3Cg fill='none' stroke='%239CC9A7' stroke-opacity='.18' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M30 112C60 70 96 46 150 30'/%3E%3Cpath d='M70 76c-8-22 2-44 26-52 6 22-4 42-26 52z' fill='%239CC9A7' fill-opacity='.06'/%3E%3Cpath d='M104 54c4-22 22-36 46-34-4 22-22 36-46 34z' fill='%239CC9A7' fill-opacity='.06'/%3E%3Cpath d='M52 92c-20-8-30-28-24-50 20 8 30 28 24 50z' fill='%239CC9A7' fill-opacity='.06'/%3E%3C/g%3E%3C/svg%3E");
  --ground: radial-gradient(70% 60% at 100% 0%, rgba(80, 120, 90, .18), transparent 70%), #121814;
  --hud: linear-gradient(180deg, #161E19, #131A16);
  --stage: var(--leaf) right 120px bottom -10px / 200px 150px no-repeat, linear-gradient(120deg, #1E2A23, #161D19);
  --slab: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -16px rgba(0, 0, 0, .7);
  --slab-s: 0 1px 2px rgba(0, 0, 0, .3);
  --top-ink: #E4ECE4; --top-muted: #A3B3A7; --top-hi: #FFFFFF; --top-line: rgba(228, 236, 228, .08); --top-field: rgba(255, 255, 255, .05); --top-key: rgba(0, 0, 0, .4); --top-slot: rgba(0, 0, 0, .25);
  --mark-filter: none; --hud-edge: 1px 0 0 #222C25;
  --plate-ink: #E4ECE4; --plate-sub: #A3B3A7; --plate-link: #9CC9A7; --plate-hover: rgba(255, 255, 255, .06);
  --locky-glow: radial-gradient(closest-side, rgba(156, 201, 167, .25), rgba(156, 201, 167, 0));
  --todo-bg: #222C25; --todo-ink: #CFD9D0; --doing-bg: #24392C; --doing-ink: #C6E8CF; --dropped-bg: #171E19;
}
:root[data-skin="sage"] :is(.panel, .person, .tile, .dash-tile, .card, .error-box, .signin, .seg) { border-width: 1px; }
:root[data-skin="sage"] .panel-attn { box-shadow: inset 0 3px 0 var(--gold), var(--slab); }
:root[data-skin="sage"] .tile { box-shadow: inset 0 3px 0 var(--tile-band), var(--slab); }
:root[data-skin="sage"] .col { border-color: var(--line); box-shadow: none; }
:root[data-skin="sage"] .panel-head h2 { font-weight: 800; }
:root[data-skin="sage"] .btn { --btn-shade: transparent; --btn-tint: transparent; --btn-drop: 0px; border-width: 1px; border-color: var(--line-strong); box-shadow: 0 1px 2px rgba(38, 51, 43, .08); }
:root[data-skin="sage"] .btn:hover:not(:disabled) { transform: none; box-shadow: 0 4px 10px -4px rgba(38, 51, 43, .25); }
:root[data-skin="sage"] .btn-primary { border-color: transparent; }
:root[data-skin="sage"] .btn-ghost { box-shadow: none; border-color: transparent; }
:root[data-skin="sage"] :is(.nav a, .nav-foot a)[aria-current="page"] { background: var(--raised); color: var(--accent); }
:root[data-skin="sage"] :is(.nav a, .nav-foot a)[aria-current="page"] .icon { color: var(--accent); }
:root[data-skin="sage"] .nav a[aria-current="page"] .badge { background: var(--accent); color: var(--accent-ink); }
:root[data-skin="sage"] :is(input, select, textarea) { border-width: 1px; box-shadow: none; }
:root[data-skin="sage"] :is(.badge, .version-new) { box-shadow: none; }

/* ---------- Gold Leaf: obsidian and gold foil, hairline frames. Always dark. */

:root[data-skin="goldleaf"], [data-skin-preview="goldleaf"] {
  --foil: linear-gradient(135deg, #9C7A1C 0%, #F7E7A6 24%, #D4AF37 46%, #8C6A14 72%, #E6C46A 100%);
  --bg: #0C0B0A; --surface: #141210; --sunk: #100F0D; --raised: #1A1714; --tray: #0F0E0C;
  --ink: #F1E9D6; --muted: #B9AD92; --faint: #8C826C; --line: #2A251C; --line-strong: #4A3F2A;
  --accent: #E6C46A; --accent-hover: #F5DC93; --accent-ink: #14100A; --accent-soft: #2A2416; --focus: #F5DC93;
  --keyline: rgba(212, 175, 55, .45); --shade: transparent; --tint: transparent; --attn: #1E1A10;
  --gold: #D4AF37; --gold-shade: #A8841F; --gold-tint: #F7E7A6; --navy: #14100A; --cobalt: #4A3F2A; --seg-ink: #F7E7A6;
  --todo-bg: #1C1913; --todo-ink: #D9CFB8; --todo-dot: #8C826C; --doing-bg: #2A2416; --doing-ink: #F5DC93; --doing-dot: #D4AF37;
  --blocked-bg: #2E1512; --blocked-ink: #F2A08F; --blocked-dot: #E07A62; --done-bg: #142219; --done-ink: #A9DDB8; --done-dot: #6FBF8A;
  --dropped-bg: #161411; --dropped-ink: #8C826C; --dropped-dot: #4A3F2A; --warn-bg: #2A2210; --warn-ink: #F5DC93;
  --high-bg: #D4AF37; --high-ink: #14100A; --ok-ink: #A9DDB8; --danger: #F2A08F; --danger-bg: #2E1512;
  --ground: repeating-linear-gradient(45deg, rgba(212, 175, 55, .03) 0 1px, transparent 1px 16px), radial-gradient(80% 60% at 50% 0%, rgba(212, 175, 55, .07), transparent 70%), #0C0B0A;
  --hud: linear-gradient(180deg, #0A0908, #080706);
  --stage: radial-gradient(80% 140% at 15% 0%, rgba(212, 175, 55, .12), transparent 70%), #100E0B;
  --slab: inset 0 0 0 4px var(--surface), inset 0 0 0 5px rgba(212, 175, 55, .14), 0 18px 40px -24px rgba(0, 0, 0, .9);
  --slab-s: 0 10px 24px -16px rgba(0, 0, 0, .9);
  --shadow-lift: 0 0 0 1px rgba(212, 175, 55, .5), 0 24px 48px -20px rgba(0, 0, 0, .95);
  --radius: 4px; --radius-s: 3px;
  --font: "Montserrat", system-ui, sans-serif; --display: "Cormorant Garamond", Georgia, serif;
  --top-ink: #E9DFC6; --top-muted: #9C9079; --top-hi: #F7E7A6; --top-line: rgba(212, 175, 55, .16); --top-field: rgba(212, 175, 55, .06); --top-key: rgba(212, 175, 55, .35); --top-slot: #050404;
  --brand-shadow: none; --mark-filter: brightness(0) invert(78%) sepia(45%) saturate(700%) hue-rotate(5deg); --hud-edge: 1px 0 0 rgba(212, 175, 55, .35);
  --plate-ink: #F1E9D6; --plate-sub: #B9AD92; --plate-link: #E6C46A; --plate-hover: rgba(212, 175, 55, .1); --plate-border: 1px solid rgba(212, 175, 55, .55); --plate-radius: 4px;
  --plate-shadow: inset 0 0 0 5px #100E0B, inset 0 0 0 6px rgba(212, 175, 55, .3), 0 20px 40px -24px rgba(0, 0, 0, .9);
  --plate-h1: 40px; --plate-h1-weight: 700; --plate-h1-track: .005em; --plate-h1-shadow: none;
  --locky-glow: radial-gradient(closest-side, rgba(212, 175, 55, .3), rgba(212, 175, 55, 0));
  --current-shadow: 0 0 0 1px rgba(247, 231, 166, .4), 0 6px 18px -8px rgba(212, 175, 55, .6);
  --chip-radius: 999px; --chip-shadow: none; --chip-border: currentColor; --h2-font: var(--display);
  --toast-bg: #141210; --toast-ink: #F1E9D6; --toast-key: rgba(212, 175, 55, .5);
  color-scheme: dark;
}
:root[data-skin="goldleaf"] :is(.panel, .person, .tile, .dash-tile, .card, .error-box, .signin, .btn, .seg, .col) { border-width: 1px; }
:root[data-skin="goldleaf"] :is(.view > .page-head, .task-head) h1 { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-skin="goldleaf"] .panel-head h2 { font-size: 21px; font-weight: 700; letter-spacing: .005em; }
:root[data-skin="goldleaf"] :is(.dash-num, .tile-n) { font-family: var(--display); font-weight: 700; color: var(--accent); }
:root[data-skin="goldleaf"] .chip { background: transparent; color: var(--chip-face); }
:root[data-skin="goldleaf"] :is(.nav a, .nav-foot a)[aria-current="page"], :root[data-skin="goldleaf"] .badge,
:root[data-skin="goldleaf"] .night-toggle[aria-pressed="true"] { background: var(--foil); color: #14100A; }
:root[data-skin="goldleaf"] .btn { --btn-shade: transparent; --btn-tint: transparent; --btn-drop: 0px; box-shadow: none; }
:root[data-skin="goldleaf"] .btn:hover:not(:disabled) { transform: none; box-shadow: 0 0 0 1px rgba(247, 231, 166, .5); }
:root[data-skin="goldleaf"] .btn-primary { --btn-face: var(--foil); color: #14100A; border-color: rgba(247, 231, 166, .6); box-shadow: 0 8px 22px -10px rgba(212, 175, 55, .7); }
:root[data-skin="goldleaf"] .btn-primary:hover { color: #14100A; }
:root[data-skin="goldleaf"] .panel-attn { box-shadow: inset 0 2px 0 var(--gold), var(--slab); }
:root[data-skin="goldleaf"] .tile { box-shadow: inset 0 2px 0 var(--tile-band), var(--slab); }
:root[data-skin="goldleaf"] :is(input, select, textarea) { background: #0A0908; border-width: 1px; border-color: var(--line-strong); box-shadow: none; }
:root[data-skin="goldleaf"] .timeline li::before, :root[data-skin="goldleaf"] .spinner { background: var(--foil); }

/* ========== Settings › Look ========== */

/* The default look's tokens for its own preview card (the other looks' blocks above already match their cards). */
[data-skin-preview="loomlock"] {
  --ground: url("/img/padlock-paper.svg") 0 0 / 60px 52px, #ECEDFF; --surface: #FFFFFF; --ink: #05083C; --muted: #4D5285; --line: #DCDFF5;
  --keyline: #05083C; --gold: #FCCE21; --gold-shade: #FFA600; --navy: #05083C; --top-ink: #ECEDFF; --top-muted: #C3C7F2;
  --hud: url("/img/padlock-ink.svg") 0 0 / 60px 52px, #121B95; --stage: url("/img/padlock-ink.svg") 0 0 / 60px 52px, linear-gradient(165deg, #3F49CC, #1D26A3);
  --slab-s: inset 0 -3px 0 #E3E5FF, 0 2px 0 #05083C; --radius: 16px; --radius-s: 10px; --plate-radius: 12px; --plate-ink: #FFFFFF;
  --font: "Montserrat", system-ui, sans-serif; --display: "Baloo Bhaina 2", "Montserrat", sans-serif;
}
:root[data-theme="dark"] [data-skin-preview="loomlock"] {
  --ground: url("/img/padlock-night.svg") 0 0 / 60px 52px, #070B45; --surface: #10165C; --ink: #ECEDFF; --muted: #AEB2DD; --line: #232B7A;
  --keyline: #000000; --hud: url("/img/padlock-ink.svg") 0 0 / 60px 52px, #0D1477; --slab-s: inset 0 -3px 0 rgba(0, 0, 0, .28), 0 2px 0 #000000;
}

.looks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); }
.look-card {
  display: grid; gap: 4px; align-content: start; padding: 8px 8px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius); min-width: 0;
}
.look-card:hover { border-color: var(--accent); }
.look-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.look-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding: 0 4px; font-weight: 800; font-size: 14px; }
.look-blurb { padding: 0 4px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.look-on { margin-left: auto; color: var(--accent); font-size: 12px; font-weight: 800; }
.look-mini {
  display: grid; grid-template-columns: 30% 1fr; height: 112px; overflow: hidden; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--ground); font-family: var(--font); color: var(--ink); pointer-events: none;
}
.lm-hud { display: grid; align-content: start; gap: 5px; padding: 9px 7px; background: var(--hud); }
.lm-hud i { display: block; height: 6px; border-radius: 3px; background: var(--top-muted); opacity: .55; }
.lm-hud i.on { opacity: 1; height: 9px; background: var(--gold); box-shadow: 0 0 0 1px var(--top-key, #000000); border-radius: var(--current-radius, 3px); }
.lm-page { display: grid; align-content: start; gap: 6px; padding: 8px; min-width: 0; }
.lm-plate {
  display: block; padding: 5px 8px 6px; background: var(--stage); color: var(--plate-ink, #FFFFFF); border-radius: min(var(--plate-radius, 12px), 10px);
  font: 700 13px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lm-panel { display: grid; gap: 4px; padding: 7px 8px; background: var(--surface); border: 1px solid var(--keyline); border-radius: min(var(--radius, 12px), 10px); box-shadow: var(--slab-s); }
.lm-panel i { display: block; height: 5px; border-radius: 3px; background: var(--ink); opacity: .7; }
.lm-panel i:nth-child(2) { opacity: .35; width: 80%; }
.lm-panel i.short { width: 46%; opacity: .25; }
.lm-row { display: flex; align-items: center; gap: 6px; }
.lm-btn { display: inline-block; padding: 1px 9px; background: var(--gold); color: var(--navy); border: 1px solid var(--keyline); border-radius: min(var(--btn-radius, 8px), 8px); font: 700 10.5px/1.6 var(--font); }
.lm-chip { display: inline-block; width: 24px; height: 9px; border-radius: 999px; background: var(--muted); opacity: .4; }
:root[data-skin] .look-card { border-radius: var(--radius); }