/* =====================================================================
   Helper 2.1 — design styles, corners, fonts, motion, page transitions, background effects.
   Every style is a set of tokens declared on elements that carry data-style (the page root AND the
   live previews in Settings), so a preview shows the real thing. Root-only flourishes use :root[...].
   ===================================================================== */
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/fraunces-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/fraunces-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: italic; font-display: swap; font-weight: 100 900; src: url(../fonts/fraunces-latin-ext-wght-italic.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-display: swap; font-weight: 100 900; src: url(../fonts/fraunces-latin-wght-italic.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(../fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(../fonts/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-display: swap; font-weight: 300 700; src: url(../fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- base tokens (Caspian), re-declared on any element with data-theme / data-style ---------- */
[data-theme="light"] {
  --bg: #edf1f3; --surface: #ffffff; --surface-2: #e6ecef; --border: #d6dfe4;
  --text: #16202e; --muted: #5d6a77; --accent-text: #ffffff;
  --flame: #e8833a; --warn: #c27c2c; --danger: #c2504a; --success: #2e8b6f;
  --shadow: 0 1px 0 rgb(22 32 46 / .04), 0 10px 26px -16px rgb(22 32 46 / .22);
  --shadow-lift: 0 2px 0 rgb(22 32 46 / .03), 0 22px 40px -22px rgb(22 32 46 / .35);
}
[data-theme="light"][data-accent="sage"] { --accent: #146c7a; }
[data-theme="dark"][data-accent="sage"] { --accent: #4db8c4; }
[data-style] {
  --font: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --h2-font: var(--font);
  --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --btn-radius: 12px;
  --bw: 1px; --bs: solid; --card-bg: var(--surface); --card-border: var(--border); --card-blur: none;
  --btn-shadow: none;
  --btn-primary-bg: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--accent));
  --btn-primary-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgb(255 255 255 / .18);
  --btn-primary-border: transparent;
  --input-bg: var(--surface); --input-shadow: none;
  --h-weight: 600; --h-transform: none; --h-spacing: -.025em; --h-style: normal; --glow: none;
  --bg-img: none; --bg-size: auto;
  --nav-bg: color-mix(in srgb, var(--surface) 86%, transparent);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
  --glass: color-mix(in srgb, var(--surface) 78%, transparent);
  --ink: var(--text); --accent-2: var(--flame);
}

/* ---------- components read the tokens ---------- */
body { font-family: var(--font); background: var(--bg-img) 0 0 / var(--bg-size), var(--bg); background-attachment: fixed; }
h1 { font-family: var(--font-display); font-weight: var(--h-weight); text-transform: var(--h-transform); letter-spacing: var(--h-spacing); font-style: var(--h-style); text-shadow: var(--glow); }
h2 { font-family: var(--h2-font); }
.card { background-color: var(--card-bg); border: var(--bw) var(--bs) var(--card-border); border-radius: var(--radius); -webkit-backdrop-filter: var(--card-blur); backdrop-filter: var(--card-blur); }
.btn { border-radius: var(--btn-radius); border-width: var(--bw); box-shadow: var(--btn-shadow); }
.btn-ghost { box-shadow: none; }
.btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-border); box-shadow: var(--btn-primary-shadow); }
.input, .select, .textarea { border-width: var(--bw); border-radius: var(--btn-radius); background-color: var(--input-bg); box-shadow: var(--input-shadow); }
.chip { border-width: var(--bw); }
@media (min-width: 761px) { .nav { background: var(--nav-bg); } }

/* =====================================================================
   STYLES
   ===================================================================== */
/* ---------- Aurora: frosted glass over northern lights ---------- */
[data-style="aurora"] {
  --bg: #eceffb; --surface: #ffffff; --surface-2: rgb(226 230 248 / .75); --border: rgb(150 160 210 / .28); --text: #171a33; --muted: #5c6286;
  --card-bg: rgb(255 255 255 / .52); --card-border: rgb(255 255 255 / .8); --card-blur: blur(18px) saturate(1.6);
  --shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 18px 40px -24px rgb(40 30 120 / .35);
  --shadow-lift: inset 0 1px 0 rgb(255 255 255 / .7), 0 28px 50px -24px rgb(40 30 120 / .45);
  --radius: 22px; --radius-lg: 30px; --btn-radius: 14px;
  --nav-bg: rgb(255 255 255 / .42); --input-bg: rgb(255 255 255 / .6); --glass: rgb(255 255 255 / .55); --accent-2: #e0559b;
}
[data-style="aurora"][data-accent="sage"] { --accent: #5b4fe0; }
[data-style="aurora"][data-theme="dark"] {
  --bg: #060918; --surface: #141a3a; --surface-2: rgb(255 255 255 / .06); --border: rgb(255 255 255 / .11); --text: #eef0ff; --muted: #9ba1c9;
  --card-bg: rgb(22 26 60 / .42); --card-border: rgb(255 255 255 / .12);
  --shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 24px 50px -24px rgb(0 0 0 / .8);
  --shadow-lift: inset 0 1px 0 rgb(255 255 255 / .1), 0 30px 60px -24px rgb(0 0 0 / .9);
  --nav-bg: rgb(10 12 32 / .38); --input-bg: rgb(255 255 255 / .05); --glass: rgb(16 20 46 / .55); --accent-2: #ff6fb5;
}
[data-style="aurora"][data-theme="dark"][data-accent="sage"] { --accent: #9088ff; --accent-text: #0c0a2a; }
:root[data-style="aurora"] .tabs, :root[data-style="aurora"] .glance-item { background: rgb(255 255 255 / .35); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-style="aurora"][data-theme="dark"] .tabs, :root[data-style="aurora"][data-theme="dark"] .glance-item { background: rgb(255 255 255 / .05); }
:root[data-style="aurora"] .sec-badge { background: linear-gradient(135deg, var(--sec), color-mix(in srgb, var(--sec) 50%, var(--accent-2))); }

/* ---------- Bold: neo-brutalist ---------- */
[data-style="bold"] {
  --ink: #141414;
  --bg: #fff3d6; --surface: #ffffff; --surface-2: #fde7b0; --border: var(--ink); --text: var(--ink); --muted: #4b4b4b;
  --bw: 2px; --shadow: 4px 4px 0 var(--ink); --shadow-lift: 7px 7px 0 var(--ink);
  --radius: 8px; --radius-sm: 6px; --radius-lg: 12px; --btn-radius: 8px;
  --btn-shadow: 3px 3px 0 var(--ink); --btn-primary-bg: var(--accent); --btn-primary-shadow: 3px 3px 0 var(--ink); --btn-primary-border: var(--ink);
  --font: "Space Grotesk", "Onest", system-ui, sans-serif; --font-display: "Space Grotesk", "Onest", sans-serif;
  --h-weight: 700; --h-transform: uppercase; --h-spacing: -.01em;
  --nav-bg: var(--bg); --input-shadow: 2px 2px 0 var(--ink);
  --bg-img: radial-gradient(rgb(20 20 20 / .16) 1.2px, transparent 1.5px); --bg-size: 22px 22px;
}
[data-style="bold"][data-accent="sage"] { --accent: #ff5a36; --accent-text: #141414; }
[data-style="bold"][data-theme="dark"] {
  --ink: #f4ecd6;
  --bg: #15140f; --surface: #22201a; --surface-2: #343024; --muted: #c2b9a0;
  --bg-img: radial-gradient(rgb(244 236 214 / .12) 1.2px, transparent 1.5px);
}
[data-style="bold"][data-theme="dark"][data-accent="sage"] { --accent: #ff7a50; --accent-text: #15140f; }
:root[data-style="bold"] .sec-badge { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); background: var(--sec); }
:root[data-style="bold"] :is(.card-link, .glance-item, .gl-tpl, .tm-cd, .mn-cat, .wn-card) { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
:root[data-style="bold"] :is(.card-link, .glance-item, .gl-tpl, .tm-cd, .mn-cat, .wn-card):hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
:root[data-style="bold"] .btn:not(.btn-ghost):hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
:root[data-style="bold"] .btn:not(.btn-ghost):active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
:root[data-style="bold"] .progress, :root[data-style="bold"] .tm-track { border: 2px solid var(--ink); height: 14px; background: var(--surface); }
:root[data-style="bold"] .progress > span, :root[data-style="bold"] .tm-track span { background: var(--sec, var(--accent)); }
:root[data-style="bold"] .nav-link[aria-current="page"] { background: var(--sec); color: var(--bg); box-shadow: 2px 2px 0 var(--ink); outline: 2px solid var(--ink); }
:root[data-style="bold"] .nav-link[aria-current="page"] svg { color: inherit; }
:root[data-style="bold"] .nav-link[aria-current="page"]::before { display: none; }
:root[data-style="bold"] .tabs { border: 2px solid var(--ink); background: var(--surface); }
:root[data-style="bold"] .tab[aria-selected="true"], :root[data-style="bold"] .chip[aria-pressed="true"], :root[data-style="bold"] .choice[aria-pressed="true"]:not(.swatch) { background: var(--ink); color: var(--bg); box-shadow: none; }
:root[data-style="bold"] .page-header { border-bottom: 3px solid var(--ink); padding-bottom: 16px; }
:root[data-style="bold"] .widget::before { display: none; }
:root[data-style="bold"] .widget { border-top: 8px solid var(--w, var(--accent)); }
:root[data-style="bold"] .hero-sky, :root[data-style="bold"] .dialog { border: 2px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); }
:root[data-style="bold"] .nav { border-right: 2px solid var(--ink); }
:root[data-style="bold"] .tile-value, :root[data-style="bold"] .gl-pct { font-weight: 700; }

/* ---------- Paper: editorial ---------- */
[data-style="paper"] {
  --bg: #f2ecdf; --surface: #fbf8f1; --surface-2: #ebe3d2; --border: #d6c9b2; --text: #2a241c; --muted: #6d6354;
  --shadow: none; --shadow-lift: 0 14px 30px -20px rgb(60 40 10 / .35);
  --radius: 4px; --radius-sm: 3px; --radius-lg: 6px; --btn-radius: 4px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif; --h2-font: "Fraunces", Georgia, serif;
  --h-weight: 500; --h-spacing: -.015em; --h-style: italic;
  --btn-primary-bg: var(--accent); --btn-primary-shadow: none; --nav-bg: #efe7d7;
  --bg-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bg-size: 200px 200px;
}
[data-style="paper"][data-accent="sage"] { --accent: #9b3b26; }
[data-style="paper"][data-theme="dark"] { --bg: #1a1714; --surface: #221e1a; --surface-2: #2d2822; --border: #3e372e; --text: #ece3d1; --muted: #a99d89; --nav-bg: #1e1b17; }
[data-style="paper"][data-theme="dark"][data-accent="sage"] { --accent: #e8a07f; --accent-text: #1a1714; }
:root[data-style="paper"] h1 { font-size: 2.35rem; font-variation-settings: "opsz" 144; }
:root[data-style="paper"] .page-header { border-bottom: 3px double var(--text); padding-bottom: 14px; }
:root[data-style="paper"] .card h2 { font-weight: 500; font-size: 1.22rem; font-style: italic; }
:root[data-style="paper"] .sec-badge { background: none; color: var(--sec); box-shadow: none; border: 1.5px solid currentColor; border-radius: 50% !important; }
:root[data-style="paper"] .widget::before { height: 1px; background: var(--text); opacity: .5; }
:root[data-style="paper"] .nav-link[aria-current="page"] { background: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
:root[data-style="paper"] .hero-sky { box-shadow: 0 0 0 1px var(--border), 0 0 0 6px var(--surface), 0 0 0 7px var(--border); }
:root[data-style="paper"] .tile-value, :root[data-style="paper"] .gl-pct, :root[data-style="paper"] .mn-balance { font-style: italic; }

/* ---------- Neon: synthwave ---------- */
[data-style="neon"] {
  --bg: #f4eeff; --surface: #ffffff; --surface-2: #efe5ff; --border: #ddcdfb; --text: #1d1338; --muted: #6a5f8c;
  --card-border: color-mix(in srgb, var(--accent) 30%, #ddcdfb);
  --shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent), 0 14px 30px -16px color-mix(in srgb, var(--accent) 45%, transparent);
  --shadow-lift: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 20px 40px -16px color-mix(in srgb, var(--accent) 55%, transparent);
  --radius: 14px; --btn-radius: 10px; --accent-2: #00a8d6;
  --font: "Space Grotesk", "Onest", system-ui, sans-serif;
  --h-weight: 700; --glow: 0 0 22px color-mix(in srgb, var(--accent) 40%, transparent);
  --btn-primary-bg: linear-gradient(90deg, var(--accent), var(--accent-2)); --btn-primary-shadow: 0 0 22px -6px var(--accent);
}
[data-style="neon"][data-accent="sage"] { --accent: #e0157f; }
[data-style="neon"][data-theme="dark"] {
  --bg: #07050f; --surface: #110c20; --surface-2: #1a1430; --border: #2b2152; --text: #f3ecff; --muted: #9d92c6;
  --card-bg: rgb(17 12 32 / .8); --card-border: color-mix(in srgb, var(--accent) 42%, #2b2152);
  --shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 32px -12px color-mix(in srgb, var(--accent) 60%, transparent);
  --shadow-lift: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 46px -10px color-mix(in srgb, var(--accent) 75%, transparent);
  --glow: 0 0 10px color-mix(in srgb, var(--accent) 85%, transparent), 0 0 34px color-mix(in srgb, var(--accent) 45%, transparent);
  --nav-bg: rgb(7 5 15 / .72); --accent-2: #22e3ff; --glass: rgb(17 12 32 / .7); --card-blur: blur(10px);
}
[data-style="neon"][data-theme="dark"][data-accent="sage"] { --accent: #ff3ea5; --accent-text: #14001c; }
:root[data-style="neon"] .card, :root[data-style="neon"] .glance-item { transition: border-color .25s, box-shadow .25s, transform .2s var(--ease); }
:root[data-style="neon"] .card:hover { border-color: var(--accent); box-shadow: var(--shadow-lift); }
:root[data-style="neon"] .sec-badge { box-shadow: 0 0 18px -2px var(--sec), inset 0 1px 0 rgb(255 255 255 / .3); }
:root[data-style="neon"] .nav-link[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--sec), 0 0 16px -4px var(--sec); }
:root[data-style="neon"] .progress > span, :root[data-style="neon"] .tm-track span { box-shadow: 0 0 12px var(--sec, var(--accent)); }
:root[data-style="neon"] .hero-sky { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 50px -12px var(--accent); }
:root[data-style="neon"] .tile-value, :root[data-style="neon"] .gl-pct { text-shadow: var(--glow); }
:root[data-style="neon"] .widget::before { height: 2px; box-shadow: 0 0 12px var(--w, var(--accent)); }

/* ---------- Clay: soft, pillowy ---------- */
[data-style="clay"] {
  --hi: #ffffff; --lo: #c2c9d6;
  --bg: #e5e9f0; --surface: #e5e9f0; --surface-2: #dce1ea; --border: #ccd3de; --text: #29303f; --muted: #687186;
  --card-border: transparent;
  --shadow: 9px 9px 20px var(--lo), -9px -9px 20px var(--hi); --shadow-lift: 14px 14px 28px var(--lo), -14px -14px 28px var(--hi);
  --radius: 26px; --radius-sm: 16px; --radius-lg: 32px; --btn-radius: 16px;
  --btn-shadow: 5px 5px 12px var(--lo), -5px -5px 12px var(--hi);
  --btn-primary-bg: var(--accent); --btn-primary-shadow: 5px 5px 12px var(--lo), -5px -5px 12px var(--hi), inset 0 1px 0 rgb(255 255 255 / .3);
  --input-bg: var(--bg); --input-shadow: inset 4px 4px 9px var(--lo), inset -4px -4px 9px var(--hi);
  --nav-bg: var(--bg); --font-display: "Onest", system-ui, sans-serif; --h-weight: 800; --h-spacing: -.035em;
}
[data-style="clay"][data-accent="sage"] { --accent: #5a6cf0; }
[data-style="clay"][data-theme="dark"] { --hi: #303744; --lo: #181c23; --bg: #252a33; --surface: #252a33; --surface-2: #2c323c; --border: #353c48; --text: #e3e7ee; --muted: #98a2b3; }
[data-style="clay"][data-theme="dark"][data-accent="sage"] { --accent: #8f9cff; --accent-text: #10142a; }
:root[data-style="clay"] .input, :root[data-style="clay"] .select, :root[data-style="clay"] .textarea { border-color: transparent; }
:root[data-style="clay"] .btn:not(.btn-ghost) { border-color: transparent; }
:root[data-style="clay"] .btn:not(.btn-ghost):active, :root[data-style="clay"] .chip[aria-pressed="true"], :root[data-style="clay"] .choice[aria-pressed="true"]:not(.swatch) { box-shadow: inset 4px 4px 9px var(--lo), inset -4px -4px 9px var(--hi); }
:root[data-style="clay"] .chip, :root[data-style="clay"] .choice:not(.swatch) { border-color: transparent; background: var(--bg); box-shadow: 3px 3px 8px var(--lo), -3px -3px 8px var(--hi); }
:root[data-style="clay"] .tabs, :root[data-style="clay"] .progress, :root[data-style="clay"] .tm-track { background: var(--bg); box-shadow: inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi); }
:root[data-style="clay"] .tab[aria-selected="true"] { background: var(--bg); box-shadow: 3px 3px 7px var(--lo), -3px -3px 7px var(--hi); }
:root[data-style="clay"] .nav { border-right: 0; }
:root[data-style="clay"] .nav-link[aria-current="page"] { background: var(--bg); box-shadow: inset 3px 3px 7px var(--lo), inset -3px -3px 7px var(--hi); }
:root[data-style="clay"] .nav-link[aria-current="page"]::before { display: none; }
:root[data-style="clay"] :is(.glance-item, .gl-tpl, .tm-cd, .mn-cat, .wn-card, .empty) { border-color: transparent; background: var(--bg); box-shadow: 6px 6px 14px var(--lo), -6px -6px 14px var(--hi); }
:root[data-style="clay"] .widget::before { display: none; }
:root[data-style="clay"] .sec-badge { box-shadow: 4px 4px 10px var(--lo), -4px -4px 10px var(--hi); }
:root[data-style="clay"] .hero-sky { box-shadow: 12px 12px 26px var(--lo), -12px -12px 26px var(--hi); }

/* ---------- Terminal ---------- */
[data-style="terminal"] {
  --bg: #f3f0e4; --surface: #fbf9f1; --surface-2: #e9e4d1; --border: #b4ad94; --text: #22261c; --muted: #67665a;
  --bs: dashed; --shadow: none; --shadow-lift: none;
  --radius: 0px; --radius-sm: 0px; --radius-lg: 0px; --btn-radius: 0px;
  --font: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --font-display: var(--font);
  --h-weight: 700; --h-spacing: -.03em;
  --btn-primary-bg: var(--accent); --btn-primary-shadow: none; --nav-bg: var(--bg);
}
[data-style="terminal"][data-accent="sage"] { --accent: #17803a; }
[data-style="terminal"][data-theme="dark"] {
  --bg: #040a05; --surface: #07120a; --surface-2: #0d1d11; --border: #1f5a2d; --text: #b6f7c4; --muted: #5fae75;
  --glow: 0 0 9px rgb(80 255 130 / .45);
}
[data-style="terminal"][data-theme="dark"][data-accent="sage"] { --accent: #3dff7d; --accent-text: #021a08; }
:root[data-style="terminal"] .sec-badge { display: none; }
:root[data-style="terminal"] h1::before { content: "> "; color: var(--accent); }
:root[data-style="terminal"] h1::after { content: "_"; color: var(--accent); margin-left: .1em; animation: lk-blink 1.05s steps(1) infinite; }
:root[data-style="terminal"] .card h2::before { content: "# "; color: var(--muted); font-weight: 400; }
:root[data-style="terminal"] .widget::before { height: 0; }
:root[data-style="terminal"] .nav-link[aria-current="page"]::before { content: ">"; position: static; width: auto; background: none; color: var(--accent); margin-right: -4px; }
:root[data-style="terminal"] :is(.glance-item, .gl-tpl, .tm-cd, .mn-cat, .wn-card) { border-style: dashed; box-shadow: none; }
:root[data-style="terminal"] .progress > span, :root[data-style="terminal"] .tm-track span { background: repeating-linear-gradient(90deg, var(--sec, var(--accent)) 0 8px, transparent 8px 10px); }
:root[data-style="terminal"][data-theme="dark"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2147483000;
  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 / .35)); }
:root[data-style="terminal"][data-theme="dark"] .card, :root[data-style="terminal"][data-theme="dark"] .tile-value { text-shadow: 0 0 6px rgb(80 255 130 / .25); }
@keyframes lk-blink { 50% { opacity: 0; } }

/* =====================================================================
   CORNERS (override the style; "auto" sets nothing)
   ===================================================================== */
:root[data-corners="sharp"] { --radius: 0px; --radius-sm: 0px; --radius-lg: 0px; --btn-radius: 0px; }
:root[data-corners="small"] { --radius: 6px; --radius-sm: 4px; --radius-lg: 8px; --btn-radius: 5px; }
:root[data-corners="round"] { --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --btn-radius: 12px; }
:root[data-corners="pill"] { --radius: 28px; --radius-sm: 18px; --radius-lg: 34px; --btn-radius: 999px; }
:root[data-corners="sharp"] :is(.card, .btn, .chip, .choice:not(.swatch), .input, .select, .textarea, .tabs, .tab, .glance-item, .widget, .dialog, .toast, .nav-link, .sec-badge, .hero-sky, .mn-cat, .gl-tpl, .tm-cd, .st-place, .empty, .icon-btn, .progress, .progress > span, .tm-track, .tm-track span, .nav-search, .badge, .gl-why, .hl-sm > div, .mn-row-e, .wn-card, .sky-wx, .sky-ring, .sky-btn, .nav-fab button, .gl-status, .lk-tile, .lk-prev) { border-radius: 0 !important; }
:root[data-corners="small"] :is(.card, .btn, .chip, .choice:not(.swatch), .input, .select, .textarea, .tabs, .tab, .glance-item, .widget, .dialog, .toast, .nav-link, .sec-badge, .hero-sky, .mn-cat, .gl-tpl, .tm-cd, .st-place, .empty, .icon-btn, .progress, .progress > span, .tm-track, .tm-track span, .nav-search, .badge, .gl-why, .hl-sm > div, .mn-row-e, .wn-card, .sky-wx, .sky-ring, .sky-btn, .nav-fab button, .gl-status, .lk-tile, .lk-prev) { border-radius: 5px !important; }
:root[data-corners="pill"] :is(.chip, .tab, .tabs, .nav-link, .icon-btn, .nav-search) { border-radius: 999px !important; }
:root[data-corners="pill"] .textarea { border-radius: 20px; }
:root[data-corners="pill"] :is(.glance-item, .gl-tpl, .tm-cd, .mn-cat, .wn-card, .hero-sky) { border-radius: 30px; }

/* =====================================================================
   FONTS (override the style; "auto" sets nothing)
   ===================================================================== */
:root[data-font="modern"]    { --font: "Onest", system-ui, sans-serif; --font-display: "Unbounded", "Onest", sans-serif; --h2-font: var(--font); }
:root[data-font="clean"]     { --font: "Onest", system-ui, sans-serif; --font-display: "Onest", system-ui, sans-serif; --h2-font: var(--font); }
:root[data-font="grotesk"]   { --font: "Space Grotesk", "Onest", sans-serif; --font-display: "Space Grotesk", "Onest", sans-serif; --h2-font: var(--font); }
:root[data-font="editorial"] { --font: "Onest", system-ui, sans-serif; --font-display: "Fraunces", Georgia, serif; --h2-font: "Fraunces", Georgia, serif; }
:root[data-font="mono"]      { --font: "JetBrains Mono", ui-monospace, monospace; --font-display: "JetBrains Mono", ui-monospace, monospace; --h2-font: var(--font); }
:root[data-font="system"]    { --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --h2-font: var(--font); }
.lk-font-modern { font-family: "Unbounded", sans-serif; } .lk-font-clean { font-family: "Onest", sans-serif; } .lk-font-grotesk { font-family: "Space Grotesk", sans-serif; }
.lk-font-editorial { font-family: "Fraunces", serif; font-style: italic; } .lk-font-mono { font-family: "JetBrains Mono", monospace; } .lk-font-system { font-family: system-ui, sans-serif; }

/* =====================================================================
   MOTION
   ===================================================================== */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after, :root[data-motion="off"] ::backdrop { animation: none !important; transition: none !important; }
:root[data-motion="calm"] .fade-in { animation: lk-fade .35s ease both; }
:root[data-motion="calm"] .fade-in :is(.card, .day, .tt-day, .course-card) { animation: none; }
:root[data-motion="calm"] :is(.card-link, .gl-tpl, .glance-item, .mn-cat):hover { transform: none !important; }
:root[data-motion="calm"] :is(.btn, .icon-btn, .chip, .tab, .check):active { transform: none !important; }
@keyframes lk-fade { from { opacity: 0; } }

:root[data-motion="lively"] { --spring: cubic-bezier(.22, 1.25, .36, 1); }
:root[data-motion="lively"] .fade-in :is(.card, .glance-item, .tm-cd, .day, .tt-day, .course-card, .widget) { animation: lk-rise .7s var(--spring) both; }
:root[data-motion="lively"] .fade-in :is(.card, .glance-item, .tm-cd, .widget):nth-child(2) { animation-delay: .05s; }
:root[data-motion="lively"] .fade-in :is(.card, .glance-item, .tm-cd, .widget):nth-child(3) { animation-delay: .1s; }
:root[data-motion="lively"] .fade-in :is(.card, .glance-item, .tm-cd, .widget):nth-child(4) { animation-delay: .15s; }
:root[data-motion="lively"] .fade-in :is(.card, .glance-item, .tm-cd, .widget):nth-child(5) { animation-delay: .2s; }
:root[data-motion="lively"] .fade-in :is(.card, .glance-item, .tm-cd, .widget):nth-child(n+6) { animation-delay: .25s; }
@keyframes lk-rise { from { opacity: 0; transform: perspective(900px) translateY(34px) rotateX(12deg) scale(.96); } }
:root[data-motion="lively"] .lk-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px) !important; transition: transform .18s ease-out, box-shadow .2s !important; animation: none !important; box-shadow: var(--shadow-lift); will-change: transform; }
:root[data-motion="lively"] .lk-spot:not(.mn-overview) { background-image: radial-gradient(420px circle at var(--mx) var(--my), color-mix(in srgb, var(--accent) 11%, transparent), transparent 45%); }
:root[data-motion="lively"] :is(.btn, .chip, .tab, .icon-btn, .choice) { position: relative; overflow: hidden; }
.lk-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .28; transform: scale(0); animation: lk-ripple .6s ease-out forwards; }
@keyframes lk-ripple { to { transform: scale(1); opacity: 0; } }
:root[data-motion="lively"] .nav-link:hover svg { animation: lk-wiggle .5s var(--spring); }
@keyframes lk-wiggle { 30% { transform: rotate(-12deg) scale(1.15); } 60% { transform: rotate(8deg) scale(1.1); } }
:root[data-motion="lively"] .check[aria-pressed="true"] { animation: lk-pop .45s var(--spring); }
@keyframes lk-pop { 40% { transform: scale(1.3); } }
.lk-spark { position: fixed; z-index: 2147483001; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; }
:root[data-motion="lively"] .lk-reveal { opacity: 0; transform: translateY(40px) scale(.97); animation: none !important; }
:root[data-motion="lively"] .lk-reveal.lk-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .8s var(--spring); }

/* =====================================================================
   PAGE TRANSITIONS (data-vt; "none" skips the transition in JS)
   ===================================================================== */
:root[data-vt="slide"]::view-transition-old(root) { animation: lk-slide-out .3s var(--ease) both; }
:root[data-vt="slide"]::view-transition-new(root) { animation: lk-slide-in .38s var(--ease) both; }
:root[data-vt="slide"][data-dir="back"]::view-transition-old(root) { animation-name: lk-slide-out-back; }
:root[data-vt="slide"][data-dir="back"]::view-transition-new(root) { animation-name: lk-slide-in-back; }
@keyframes lk-slide-out { to { opacity: 0; transform: translateX(-70px); } }
@keyframes lk-slide-in { from { opacity: 0; transform: translateX(70px); } }
@keyframes lk-slide-out-back { to { opacity: 0; transform: translateX(70px); } }
@keyframes lk-slide-in-back { from { opacity: 0; transform: translateX(-70px); } }
:root[data-vt="zoom"]::view-transition-old(root) { animation: lk-zoom-out .25s ease-in both; }
:root[data-vt="zoom"]::view-transition-new(root) { animation: lk-zoom-in .4s var(--ease) both; }
@keyframes lk-zoom-out { to { opacity: 0; transform: scale(1.05); } }
@keyframes lk-zoom-in { from { opacity: 0; transform: scale(.93); } }
:root[data-vt="flip"]::view-transition-old(root) { animation: lk-flip-out .26s ease-in both; transform-origin: 50% 40vh; }
:root[data-vt="flip"]::view-transition-new(root) { animation: lk-flip-in .38s .22s var(--ease) both; transform-origin: 50% 40vh; }
@keyframes lk-flip-out { to { opacity: 0; transform: perspective(1400px) rotateY(-70deg); } }
@keyframes lk-flip-in { from { opacity: 0; transform: perspective(1400px) rotateY(70deg); } }
:root[data-vt="reveal"]::view-transition-old(root) { animation: none; }
:root[data-vt="reveal"]::view-transition-new(root) { animation: lk-reveal .6s cubic-bezier(.6, .05, .25, 1) both; }
@keyframes lk-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%)); } }
:root[data-vt="blur"]::view-transition-old(root) { animation: lk-blur-out .28s ease-in both; }
:root[data-vt="blur"]::view-transition-new(root) { animation: lk-blur-in .42s var(--ease) both; }
@keyframes lk-blur-out { to { opacity: 0; filter: blur(16px); } }
@keyframes lk-blur-in { from { opacity: 0; filter: blur(16px); transform: scale(1.02); } }
/* switching style in Settings always ripples out from where you tapped */
:root.lk-switching::view-transition-old(root) { animation: none; }
:root.lk-switching::view-transition-new(root) { animation: lk-reveal .7s cubic-bezier(.6, .05, .25, 1) both; }
:root.lk-switching::view-transition-old(nav), :root.lk-switching::view-transition-new(nav) { animation: none; }
:root.lk-switching .nav { view-transition-name: none; }

/* =====================================================================
   BACKGROUND EFFECTS (#bgfx, a fixed layer behind the page)
   ===================================================================== */
#bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; }
#bgfx canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
body.in-music #bgfx { display: none; }
.bgfx-glow { background: radial-gradient(1100px 520px at 85% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), radial-gradient(800px 420px at -10% 110%, color-mix(in srgb, var(--flame) 8%, transparent), transparent 70%); }
.bx-blob { position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; opacity: .72; will-change: transform; }
.bx-blob:nth-child(1) { left: -20vmax; top: -30vmax; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, transparent), transparent 62%); animation: bx-drift1 26s ease-in-out infinite alternate; }
.bx-blob:nth-child(2) { right: -25vmax; top: -10vmax; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 60%, transparent), transparent 62%); animation: bx-drift2 32s ease-in-out infinite alternate; }
.bx-blob:nth-child(3) { left: 10vmax; bottom: -45vmax; background: radial-gradient(circle, rgb(40 210 190 / .55), transparent 62%); animation: bx-drift3 38s ease-in-out infinite alternate; }
[data-theme="light"] .bx-blob { opacity: .32; }
@keyframes bx-drift1 { to { transform: translate(28vmax, 18vmax) scale(1.2) rotate(40deg); } }
@keyframes bx-drift2 { to { transform: translate(-30vmax, 22vmax) scale(.85); } }
@keyframes bx-drift3 { to { transform: translate(22vmax, -26vmax) scale(1.15); } }
.bx-waves { position: absolute; left: 0; bottom: 0; width: 200%; height: 30vh; min-height: 160px; }
.bx-waves path { fill: var(--accent); }
.bx-waves path:nth-child(1) { opacity: .07; animation: bx-wave 34s linear infinite; }
.bx-waves path:nth-child(2) { opacity: .09; animation: bx-wave 24s linear infinite; }
.bx-waves path:nth-child(3) { opacity: .12; animation: bx-wave 16s linear infinite; }
[data-theme="dark"] .bx-waves path:nth-child(3) { opacity: .16; }
@keyframes bx-wave { to { transform: translateX(-50%); } }
.bx-sun { position: absolute; left: 50%; bottom: 30vh; width: 36vmin; height: 36vmin; transform: translateX(-50%); border-radius: 50%;
  background: linear-gradient(#ffd25a, var(--accent) 75%); opacity: .3;
  -webkit-mask: linear-gradient(#000 48%, transparent 48% 53%, #000 53% 62%, transparent 62% 66%, #000 66% 74%, transparent 74% 79%, #000 79% 86%, transparent 86% 92%, #000 92%);
  mask: linear-gradient(#000 48%, transparent 48% 53%, #000 53% 62%, transparent 62% 66%, #000 66% 74%, transparent 74% 79%, #000 79% 86%, transparent 86% 92%, #000 92%); }
[data-theme="dark"] .bx-sun { opacity: .5; filter: drop-shadow(0 0 40px var(--accent)); }
.bx-grid { position: absolute; left: -50%; right: -50%; bottom: 0; height: 32vh; transform-origin: 50% 100%; transform: perspective(280px) rotateX(64deg);
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 50%, transparent) 1.5px, transparent 1.5px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, transparent) 1.5px, transparent 1.5px);
  background-size: 64px 64px; -webkit-mask: linear-gradient(to top, #000 25%, transparent); mask: linear-gradient(to top, #000 25%, transparent); animation: bx-grid 2.4s linear infinite; }
.bx-horizon { position: absolute; left: 0; right: 0; bottom: 30vh; height: 2px; background: var(--accent); box-shadow: 0 0 24px 4px var(--accent); opacity: .5; }
[data-theme="light"] .bx-grid { opacity: .55; } [data-theme="light"] .bx-horizon { opacity: .25; }
@keyframes bx-grid { to { background-position: 0 64px; } }
@media (max-width: 760px) { .bx-sun { bottom: 34vh; } .bx-horizon { bottom: 34vh; } .bx-grid { height: 36vh; } }

/* =====================================================================
   SETTINGS: the design gallery
   ===================================================================== */
.lk-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 14px 0 6px; }
.lk-tile { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 12px; border: 2px solid transparent; border-radius: 18px; background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform .18s var(--ease), border-color .15s; }
.lk-tile:hover { transform: translateY(-3px); }
.lk-tile[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.lk-tile-text { display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.lk-tile-text strong { display: flex; align-items: center; gap: 6px; }
.lk-tile[aria-pressed="true"] .lk-tile-text strong::after { content: "✓"; color: var(--accent); }
.lk-prev { position: relative; height: 128px; border-radius: 12px; overflow: hidden; isolation: isolate; color: var(--text); font-family: var(--font); font-size: 11px; line-height: 1.3;
  background: var(--bg-img) 0 0 / var(--bg-size), var(--bg); display: grid; grid-template-columns: 26px 1fr; pointer-events: none; }
.lk-prev::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.lk-prev[data-style="caspian"]::before, .lk-prev[data-style="clay"]::before { background: radial-gradient(160px 90px at 90% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%); }
.lk-prev[data-style="aurora"]::before { background: radial-gradient(120px 90px at 15% 10%, color-mix(in srgb, var(--accent) 65%, transparent), transparent 70%), radial-gradient(130px 100px at 95% 30%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent 70%), radial-gradient(120px 80px at 40% 110%, rgb(40 210 190 / .5), transparent 70%); }
.lk-prev[data-style="neon"]::before { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 20%, transparent)), repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent) 0 1px, transparent 1px 18px) 0 100% / 100% 36% no-repeat; }
.lk-p-nav { display: flex; flex-direction: column; gap: 6px; align-items: center; padding: 10px 0; background: var(--nav-bg); border-right: var(--bw) var(--bs) var(--border); }
.lk-p-nav i { width: 12px; height: 12px; border-radius: min(var(--radius-sm), 4px); background: var(--surface-2); }
.lk-p-nav i:first-child { background: var(--accent); }
.lk-p-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lk-p-h { font-family: var(--font-display); font-weight: var(--h-weight); text-transform: var(--h-transform); font-style: var(--h-style); letter-spacing: var(--h-spacing); text-shadow: var(--glow); font-size: 15px; white-space: nowrap; }
.lk-prev[data-style="terminal"] .lk-p-h::before { content: "> "; color: var(--accent); }
.lk-p-card.card { padding: 8px; box-shadow: var(--shadow); border-radius: var(--radius); display: flex; flex-direction: column; gap: 5px; }
.lk-p-line { height: 5px; border-radius: 3px; background: var(--muted); opacity: .35; width: 80%; }
.lk-p-line.short { width: 50%; }
.lk-p-card .progress { height: 5px; } .lk-p-card .progress > span { width: 64%; animation: none; }
.lk-p-row { display: flex; gap: 5px; align-items: center; }
.lk-p-row .btn { padding: 2px 9px; font-size: 10px; border-radius: var(--btn-radius); }
.lk-p-row .chip { padding: 1px 7px; font-size: 10px; border: var(--bw) solid var(--border); border-radius: 99px; }
.lk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 4px; }
.lk-card .choices .choice { min-width: 0; }
.lk-hint { margin: 2px 0 0; }
@media (max-width: 760px) {
  :root[data-style="bold"] .nav { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); background: var(--bg); }
  :root[data-style="bold"] .nav-fab button { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
  :root[data-style="clay"] .nav { border-color: transparent; background: var(--bg); box-shadow: 8px 8px 18px var(--lo), -8px -8px 18px var(--hi); }
  :root[data-style="terminal"] .nav { border-style: dashed; box-shadow: none; background: var(--bg); }
  .lk-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lk-prev { height: 104px; }
  .lk-tile-text .small { display: none; }
}
/* the page's own style flourishes must not leak into the other styles' previews */
.lk-prev .progress { border: 0 !important; height: 5px !important; background: var(--surface-2) !important; box-shadow: none !important; }
.lk-prev .progress > span { background: var(--accent) !important; box-shadow: none !important; }
.lk-prev .chip { box-shadow: none !important; background: transparent !important; color: var(--text) !important; }