/* NexaCTF themes. GENERATED from the theme spec: edit scripts/themes/spec.py and run scripts/themes/build.py.
   The <head> bootstrap sets html[data-theme] + html[data-color-mode] before
   first paint; each custom theme is dark- or light-based so the existing
   light/dark rules still apply, and these selectors (0,2,1) win over both
   :root and html[data-color-mode="light"] regardless of order. */
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("../fonts/Orbitron-600.ttf") format("truetype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Orbitron"; src: url("../fonts/Orbitron-700.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }

/* Terminal: Green-on-black hacker CRT */
html[data-color-mode][data-theme="hacker"] {
  --bg: #050A06;
  --bg-muted: #07100A;
  --surface: #0A140D;
  --surface-strong: #0D1A11;
  --line: #1C4026;
  --line-soft: #132B1B;
  --text: #C8FFD4;
  --text-soft: #74C48A;
  --primary: #00FF66;
  --primary-strong: #00C94F;
  --accent: #B6FF3B;
  --accent-strong: #8FD11F;
  --danger: #FF5555;
  --warning: #E6FF3B;
  --grid-line: rgba(0, 255, 102, 0.07);
  --nav-bg-a: #040805;
  --nav-bg-b: #060C08;
  --card-bg: #08110B;
  --field-bg: #050B07;
  --table-bg: #07100A;
  --button-bg: #0F2216;
  --button-bg-hover: #16321F;
  --chip-bg: #0F2417;
  --chip-text: #7CFF9E;
  --link-hover: #B6FF3B;
  --on-primary: #021006;
  --brand-mark-text: #021006;
  --brand-mark-a: #00FF66;
  --brand-mark-b: #B6FF3B;
  --brand-mark-shadow: color-mix(in srgb, #00FF66 40%, transparent);
  --grid-opacity: 0.28;
  --font-main: "IBM Plex Mono", "Consolas", "Courier New", monospace;
}

/* Red Team: Offensive crimson on black */
html[data-color-mode][data-theme="redteam"] {
  --bg: #0E0809;
  --bg-muted: #140B0D;
  --surface: #1A0F12;
  --surface-strong: #211216;
  --line: #3D1F26;
  --line-soft: #2B161B;
  --text: #F7E8EA;
  --text-soft: #BE9AA0;
  --primary: #FF3B4E;
  --primary-strong: #D91E33;
  --accent: #FF8A3D;
  --accent-strong: #E06B1F;
  --danger: #FF5C7A;
  --warning: #FFB547;
  --grid-line: rgba(255, 59, 78, 0.07);
  --nav-bg-a: #0B0607;
  --nav-bg-b: #100809;
  --card-bg: #170D10;
  --field-bg: #120A0C;
  --table-bg: #150C0F;
  --button-bg: #26151A;
  --button-bg-hover: #321B21;
  --chip-bg: #2C161B;
  --chip-text: #FFB3BC;
  --link-hover: #FF8A3D;
  --on-primary: #1A0306;
  --brand-mark-text: #1A0306;
  --brand-mark-a: #FF8A3D;
  --brand-mark-b: #FF3B4E;
  --brand-mark-shadow: color-mix(in srgb, #FF3B4E 40%, transparent);
  --grid-opacity: 0.28;
}

/* Blue Team: Calm defensive navy */
html[data-color-mode][data-theme="blueteam"] {
  --bg: #0A1020;
  --bg-muted: #0D1428;
  --surface: #111A30;
  --surface-strong: #152038;
  --line: #26345A;
  --line-soft: #1C2744;
  --text: #E3EAF7;
  --text-soft: #97A7C7;
  --primary: #4DA3FF;
  --primary-strong: #2B84E8;
  --accent: #2EE6C5;
  --accent-strong: #1FB89D;
  --danger: #FF6B7D;
  --warning: #FFC14D;
  --grid-line: rgba(77, 163, 255, 0.07);
  --nav-bg-a: #090E1C;
  --nav-bg-b: #0C1324;
  --card-bg: #101830;
  --field-bg: #0C1326;
  --table-bg: #0F172C;
  --button-bg: #18233D;
  --button-bg-hover: #1F2C4A;
  --chip-bg: #1A2744;
  --chip-text: #A9CFFF;
  --link-hover: #2EE6C5;
  --on-primary: #04122A;
  --brand-mark-text: #04122A;
  --brand-mark-a: #2EE6C5;
  --brand-mark-b: #4DA3FF;
  --brand-mark-shadow: color-mix(in srgb, #4DA3FF 40%, transparent);
  --grid-opacity: 0.28;
}

/* Cyberpunk: Neon magenta and cyan */
html[data-color-mode][data-theme="cyberpunk"] {
  --bg: #0D0717;
  --bg-muted: #120A20;
  --surface: #170D29;
  --surface-strong: #1D1133;
  --line: #3D2366;
  --line-soft: #2A1747;
  --text: #F5EBFF;
  --text-soft: #BCA6DA;
  --primary: #FF2BD6;
  --primary-strong: #D90FB4;
  --accent: #00F0FF;
  --accent-strong: #00C2D1;
  --danger: #FF4D6D;
  --warning: #FFD23F;
  --grid-line: rgba(255, 43, 214, 0.07);
  --nav-bg-a: #0B0614;
  --nav-bg-b: #100820;
  --card-bg: #150B25;
  --field-bg: #0F081C;
  --table-bg: #140A22;
  --button-bg: #231442;
  --button-bg-hover: #2D1B55;
  --chip-bg: #2A1450;
  --chip-text: #7DF9FF;
  --link-hover: #00F0FF;
  --on-primary: #1A0216;
  --brand-mark-text: #1A0216;
  --brand-mark-a: #00F0FF;
  --brand-mark-b: #FF2BD6;
  --brand-mark-shadow: color-mix(in srgb, #FF2BD6 40%, transparent);
  --grid-opacity: 0.28;
}

/* Dracula: The classic purple editor theme */
html[data-color-mode][data-theme="dracula"] {
  --bg: #282A36;
  --bg-muted: #21222C;
  --surface: #2F3140;
  --surface-strong: #343746;
  --line: #4A4D62;
  --line-soft: #3C3F51;
  --text: #F8F8F2;
  --text-soft: #AEB6D2;
  --primary: #BD93F9;
  --primary-strong: #A67CF0;
  --accent: #50FA7B;
  --accent-strong: #3AD866;
  --danger: #FF7B7B;
  --warning: #FFB86C;
  --grid-line: rgba(189, 147, 249, 0.06);
  --nav-bg-a: #21222C;
  --nav-bg-b: #252733;
  --card-bg: #2D2F3D;
  --field-bg: #21222C;
  --table-bg: #2B2D3A;
  --button-bg: #383A4A;
  --button-bg-hover: #44475A;
  --chip-bg: #3B3550;
  --chip-text: #FF79C6;
  --link-hover: #FF79C6;
  --on-primary: #1B1530;
  --brand-mark-text: #1B1530;
  --brand-mark-a: #FF79C6;
  --brand-mark-b: #BD93F9;
  --brand-mark-shadow: color-mix(in srgb, #BD93F9 40%, transparent);
  --grid-opacity: 0.28;
}

/* Nord: Arctic, frosty and soft */
html[data-color-mode][data-theme="nord"] {
  --bg: #2E3440;
  --bg-muted: #2A303B;
  --surface: #3B4252;
  --surface-strong: #434C5E;
  --line: #4C566A;
  --line-soft: #434C5E;
  --text: #ECEFF4;
  --text-soft: #B8C1D1;
  --primary: #88C0D0;
  --primary-strong: #6FA8BA;
  --accent: #A3BE8C;
  --accent-strong: #8AA673;
  --danger: #F2A0A8;
  --warning: #EBCB8B;
  --grid-line: rgba(136, 192, 208, 0.06);
  --nav-bg-a: #2B303B;
  --nav-bg-b: #2E3440;
  --card-bg: #353C4A;
  --field-bg: #2E3440;
  --table-bg: #323946;
  --button-bg: #434C5E;
  --button-bg-hover: #4C566A;
  --chip-bg: #3E4757;
  --chip-text: #A3D4D3;
  --link-hover: #8FBCBB;
  --on-primary: #1D2530;
  --brand-mark-text: #1D2530;
  --brand-mark-a: #8FBCBB;
  --brand-mark-b: #88C0D0;
  --brand-mark-shadow: color-mix(in srgb, #88C0D0 40%, transparent);
  --grid-opacity: 0.28;
}

/* Tokyo Night: Deep blue city lights */
html[data-color-mode][data-theme="tokyo"] {
  --bg: #1A1B26;
  --bg-muted: #16161E;
  --surface: #1F2335;
  --surface-strong: #24283B;
  --line: #33395A;
  --line-soft: #292E42;
  --text: #C8D1F7;
  --text-soft: #9099C2;
  --primary: #7AA2F7;
  --primary-strong: #5A85E6;
  --accent: #BB9AF7;
  --accent-strong: #9D7CE6;
  --danger: #F7768E;
  --warning: #E0AF68;
  --grid-line: rgba(122, 162, 247, 0.06);
  --nav-bg-a: #16161E;
  --nav-bg-b: #1A1B26;
  --card-bg: #1F2335;
  --field-bg: #16161E;
  --table-bg: #1C1E2D;
  --button-bg: #292E42;
  --button-bg-hover: #343A55;
  --chip-bg: #2A2F4A;
  --chip-text: #7DCFFF;
  --link-hover: #7DCFFF;
  --on-primary: #0F1530;
  --brand-mark-text: #0F1530;
  --brand-mark-a: #7DCFFF;
  --brand-mark-b: #7AA2F7;
  --brand-mark-shadow: color-mix(in srgb, #7AA2F7 40%, transparent);
  --grid-opacity: 0.28;
}

/* Solarized Light: Warm paper, easy on the eyes */
html[data-color-mode][data-theme="solarized"] {
  --bg: #FDF6E3;
  --bg-muted: #EEE8D5;
  --surface: #FFFBF0;
  --surface-strong: #F7F1E1;
  --line: #D9D1BA;
  --line-soft: #E8E1CC;
  --text: #073642;
  --text-soft: #52676E;
  --primary: #1F6FB0;
  --primary-strong: #195C93;
  --accent: #1D7F77;
  --accent-strong: #16655F;
  --danger: #C02A27;
  --warning: #8A6A00;
  --grid-line: transparent;
  --nav-bg-a: #FDF6E3;
  --nav-bg-b: #F7F0DC;
  --card-bg: #FFFBF0;
  --field-bg: #FFFDF7;
  --table-bg: #FFFDF7;
  --button-bg: #EEE8D5;
  --button-bg-hover: #E5DEC8;
  --chip-bg: #F3E9CC;
  --chip-text: #6B4F00;
  --link-hover: #1D7F77;
  --on-primary: #FFFFFF;
  --brand-mark-text: #FFFFFF;
  --brand-mark-a: #1D7F77;
  --brand-mark-b: #1F6FB0;
  --brand-mark-shadow: color-mix(in srgb, #1F6FB0 40%, transparent);
  --grid-opacity: 0;
}

/* High Contrast: Maximum readability */
html[data-color-mode][data-theme="contrast"] {
  --bg: #000000;
  --bg-muted: #000000;
  --surface: #0A0A0A;
  --surface-strong: #111111;
  --line: #9A9A9A;
  --line-soft: #6A6A6A;
  --text: #FFFFFF;
  --text-soft: #E6E6E6;
  --primary: #FFE500;
  --primary-strong: #FFD000;
  --accent: #00E5FF;
  --accent-strong: #00C8E0;
  --danger: #FF7070;
  --warning: #FFB000;
  --grid-line: transparent;
  --nav-bg-a: #000000;
  --nav-bg-b: #000000;
  --card-bg: #0A0A0A;
  --field-bg: #000000;
  --table-bg: #000000;
  --button-bg: #1C1C1C;
  --button-bg-hover: #2E2E2E;
  --chip-bg: #1C1C1C;
  --chip-text: #FFE500;
  --link-hover: #00E5FF;
  --on-primary: #000000;
  --brand-mark-text: #000000;
  --brand-mark-a: #00E5FF;
  --brand-mark-b: #FFE500;
  --brand-mark-shadow: color-mix(in srgb, #FFE500 40%, transparent);
  --grid-opacity: 0;
}

/* ---- shared chrome for custom themes (default top bar is hard-coded) ---- */
html[data-theme-custom] .topnav {
  background: linear-gradient(180deg, var(--nav-bg-b), var(--nav-bg-a));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 55%, transparent), 0 12px 26px rgba(0, 0, 0, 0.28);
}
html[data-theme-custom] .topnav-navlink.active {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--text);
}
html[data-theme-custom] .topnav-avatar-btn {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: var(--text);
}
html[data-theme-custom] .nav-user-name { color: var(--text); }
html[data-theme-custom] .nav-user-role { color: var(--text-soft); }
html[data-theme-custom] body::before {
  background:
    radial-gradient(65% 48% at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 72%),
    radial-gradient(58% 44% at 0% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 75%),
    linear-gradient(180deg, var(--bg-muted), var(--bg));
}

/* ---- Terminal: CRT scanlines + phosphor glow ---- */
html[data-theme="hacker"] body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1600;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.16) 2px 3px);
  mix-blend-mode: multiply;
}
html[data-theme="hacker"] h1, html[data-theme="hacker"] h2 { text-shadow: 0 0 10px color-mix(in srgb, var(--primary) 45%, transparent); }
html[data-theme="hacker"] ::selection { background: var(--primary); color: #021006; }

/* ---- Cyberpunk: display font + neon headings ---- */
html[data-theme="cyberpunk"] h1, html[data-theme="cyberpunk"] h2 { font-family: "Orbitron", var(--font-main); letter-spacing: 0.02em; }
html[data-theme="cyberpunk"] h1 { text-shadow: 0 0 14px color-mix(in srgb, var(--primary) 45%, transparent); }
html[data-theme="cyberpunk"] ::selection { background: var(--accent); color: #0D0717; }

/* ---- High contrast: underlined links, heavy focus ---- */
html[data-theme="contrast"] a:not(.btn):not(.sidebar-link):not(.topnav-navlink) { text-decoration: underline; text-underline-offset: 2px; }
html[data-theme="contrast"] :focus-visible { outline: 3px solid var(--primary) !important; outline-offset: 2px; }
html[data-theme="contrast"] .panel, html[data-theme="contrast"] .sidebar { border-color: var(--line); }

@media (prefers-reduced-motion: reduce) { html[data-theme="hacker"] body::after { display: none; } }
@media print { html[data-theme] body::after { display: none; } }

/* ===== Theme picker: gear tab on the right edge + slide-in drawer ===== */
.theme-fab {
  position: fixed; right: 0; top: 46%; z-index: 1650;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line); border-right: 0; border-radius: 12px 0 0 12px;
  background: var(--surface-strong); color: var(--text-soft); box-shadow: var(--shadow-md);
  cursor: pointer; transition: width 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.theme-fab:hover, .theme-fab:focus-visible, .theme-fab[aria-expanded="true"] { width: 50px; color: var(--primary); }
.theme-fab .bi { font-size: 1.2rem; line-height: 1; animation: theme-gear-spin 9s linear infinite; }
.theme-fab:hover .bi { animation-duration: 2.2s; }
@keyframes theme-gear-spin { to { transform: rotate(360deg); } }
.theme-scrim { position: fixed; inset: 0; z-index: 1660; background: rgba(0, 0, 0, 0.42); opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.theme-scrim.is-open { opacity: 1; pointer-events: auto; }
.theme-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1670; width: min(390px, 92vw);
  display: flex; flex-direction: column; background: var(--surface-strong); color: var(--text);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  transform: translateX(102%); transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1); visibility: hidden;
}
.theme-drawer.is-open { transform: none; visibility: visible; }
.theme-drawer-head { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1.1rem 1.1rem 0.9rem; border-bottom: 1px solid var(--line-soft); }
.theme-drawer-head h2 { margin: 0; font-size: var(--text-lg); display: flex; gap: 0.5rem; align-items: center; }
.theme-drawer-head h2 .bi { color: var(--primary); }
.theme-drawer-head p { margin: 0.2rem 0 0; font-size: var(--text-xs); color: var(--text-soft); }
.theme-close { margin-left: auto; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; border: 1px solid var(--line); background: var(--button-bg); color: var(--text-soft); cursor: pointer; }
.theme-close:hover { color: var(--text); background: var(--button-bg-hover); }
.theme-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.4rem; display: grid; gap: 1rem; align-content: start; }
.theme-label { font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.theme-auto { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid var(--line); background: var(--field-bg); cursor: pointer; text-align: left; color: var(--text); font: inherit; width: 100%; }
.theme-auto .bi { font-size: 1.15rem; color: var(--primary); }
.theme-auto small { display: block; color: var(--text-soft); font-size: var(--text-xs); }
.theme-auto .theme-switch { margin-left: auto; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--button-bg-hover); position: relative; transition: background-color 0.15s ease; }
.theme-auto .theme-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 999px; background: var(--text-soft); transition: transform 0.15s ease, background-color 0.15s ease; }
.theme-auto[aria-checked="true"] .theme-switch { background: var(--primary); }
.theme-auto[aria-checked="true"] .theme-switch::after { transform: translateX(16px); background: var(--on-primary, #15130A); }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.theme-opt {
  position: relative; display: grid; gap: 0.45rem; padding: 0.5rem 0.5rem 0.6rem; text-align: left; cursor: pointer;
  border-radius: 13px; border: 1px solid var(--line); background: var(--field-bg); color: var(--text); font: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-opt:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); transform: translateY(-1px); }
.theme-opt[aria-checked="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.theme-opt:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.theme-prev { position: relative; height: 66px; border-radius: 9px; overflow: hidden; border: 1px solid rgba(127, 127, 127, 0.25); }
.theme-prev .bar { position: absolute; left: 0; right: 0; top: 0; height: 13px; }
.theme-prev .side { position: absolute; left: 0; top: 13px; bottom: 0; width: 18%; opacity: 0.9; }
.theme-prev .card { position: absolute; left: 26%; right: 8%; top: 22px; bottom: 8px; border-radius: 6px; padding: 6px 7px; display: grid; gap: 4px; align-content: start; }
.theme-prev .ln { height: 4px; border-radius: 2px; opacity: 0.85; }
.theme-prev .ln.short { width: 55%; opacity: 0.5; }
.theme-prev .pill { width: 34%; height: 7px; border-radius: 4px; margin-top: 2px; }
.theme-prev .dot { position: absolute; right: 7px; top: 4px; width: 5px; height: 5px; border-radius: 99px; }
.theme-name { display: flex; align-items: center; gap: 0.35rem; font-weight: 700; font-size: var(--text-sm); padding: 0 0.15rem; }
.theme-name .mode { margin-left: auto; font-size: 0.8rem; color: var(--text-soft); }
.theme-blurb { font-size: var(--text-2xs); color: var(--text-soft); padding: 0 0.15rem; line-height: 1.35; }
.theme-check { position: absolute; top: 0.35rem; right: 0.35rem; width: 22px; height: 22px; border-radius: 999px; display: none; place-items: center; font-size: 0.8rem; background: var(--primary); color: var(--on-primary, #15130A); box-shadow: var(--shadow-sm); }
.theme-opt[aria-checked="true"] .theme-check { display: grid; }
.theme-foot { font-size: var(--text-xs); color: var(--text-soft); display: flex; gap: 0.4rem; align-items: center; }
@media (max-width: 600px) { .theme-fab { top: auto; bottom: 5.2rem; width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .theme-fab .bi { animation: none; }
  .theme-drawer, .theme-scrim, .theme-opt { transition: none; }
}
@media print { .theme-fab, .theme-drawer, .theme-scrim { display: none !important; } }
.theme-drawer-head p strong { color: var(--text); }
.theme-foot { justify-content: space-between; flex-wrap: wrap; }
.theme-reset { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--button-bg); color: var(--text-soft); font: inherit; font-size: var(--text-xs); cursor: pointer; }
.theme-reset:hover { color: var(--text); background: var(--button-bg-hover); }
/* The drawer body is a fixed-height scroll area; without this its grid
   squeezed rows to fit, so long switch descriptions spilled out of their box. */
.theme-drawer-body { grid-auto-rows: max-content; }
.theme-auto { justify-content: flex-start; white-space: normal; }
.theme-auto > span:not(.theme-switch) { flex: 1; min-width: 0; display: block; text-align: left; line-height: 1.35; font-weight: 600; }
.theme-auto > span:not(.theme-switch) small { font-weight: 400; margin-top: 0.1rem; }

/* ===== Theme-aware components ========================================
   Older page styles hard-code colours; these follow the active theme.
   html[data-theme] is always set, so the (0,2,1)+ selectors win. */

/* ---- Solve celebration card (challenge list + challenge page) ---- */
html[data-theme] .solve-card {
  border-color: var(--line);
  background: linear-gradient(180deg, var(--surface-strong), var(--surface));
  box-shadow: var(--shadow-lg);
}
html[data-theme] .solve-card-side {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--primary) 10%, var(--surface-strong)), var(--surface) 60%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--text) 4%, transparent) 0 2px, transparent 2px 12px);
  border-right-color: var(--line-soft);
  border-bottom-color: var(--line-soft);
}
html[data-theme] .solve-card-side::after { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 10%, transparent)); }
html[data-theme] .solve-status { border-color: var(--line); background: color-mix(in srgb, var(--bg) 55%, transparent); color: var(--text); }
html[data-theme] .solve-status-dot { background: var(--toast-success); box-shadow: 0 0 14px color-mix(in srgb, var(--toast-success) 70%, transparent); }
html[data-theme] .solve-card-mark {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(145deg, var(--field-bg), var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 4%, transparent), var(--shadow-md);
}
html[data-theme] .solve-side-label, html[data-theme] .solve-stat-label, html[data-theme] .solve-share-note { color: var(--text-soft); }
html[data-theme] .solve-side-title, html[data-theme] .solve-title, html[data-theme] .solve-stat-value { color: var(--text); }
html[data-theme] .solve-side-blurb, html[data-theme] .solve-subtitle { color: var(--text-soft); }
html[data-theme] .solve-kicker, html[data-theme] .solve-subtitle strong { color: var(--primary); }
html[data-theme] .solve-title-accent, html[data-theme] .solve-stat-value.accent { color: var(--accent); }
html[data-theme] .solve-stat { border-color: var(--line-soft); background: var(--field-bg); }
html[data-theme] .solve-badge {
  border-color: color-mix(in srgb, var(--primary) 32%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--text);
}
html[data-theme] .solve-actions .primary {
  color: var(--on-primary, #15130A);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, white 12%), var(--primary));
  border-color: transparent;
}

/* ---- Light-based custom themes (Solarized): Daylight's light rules use a
   fixed light-blue palette; re-derive the most visible pieces from tokens. */
html[data-theme-custom][data-color-mode="light"] .challenge-card {
  border-color: var(--line);
  background: linear-gradient(160deg, var(--surface), var(--surface-strong));
  box-shadow: var(--shadow-md);
}
html[data-theme-custom][data-color-mode="light"] .category-link { background: var(--surface); color: var(--text); }
html[data-theme-custom][data-color-mode="light"] .category-link.active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}
html[data-theme-custom][data-color-mode="light"] .challenge-card-top .chip { color: var(--chip-text); }
html[data-theme-custom][data-color-mode="light"] .challenge-card-meta { color: var(--text-soft); }
html[data-theme-custom][data-color-mode="light"] .challenge-card-corner { border-color: var(--line); background: var(--button-bg); color: var(--text-soft); }
html[data-theme-custom][data-color-mode="light"] .challenge-modal { border-color: var(--line); }
html[data-theme-custom][data-color-mode="light"] .challenge-modal-backdrop { background: color-mix(in srgb, var(--text) 28%, transparent); }

/* ---- Selection + caret follow the theme ---- */
:where(html[data-theme-custom]) ::selection { background: color-mix(in srgb, var(--primary) 38%, transparent); color: var(--text); }
html[data-theme-custom] input, html[data-theme-custom] textarea { caret-color: var(--primary); }

/* ---- Smooth switch (fallback when View Transitions aren't supported) ---- */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, fill 0.35s ease !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.38s; }
@media (prefers-reduced-motion: reduce) {
  html.theme-switching, html.theme-switching * { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}