/* The eight dark looks taken from designmd.app specs (2026-10-13): Deep Learning (B2B), IA Creativă (artistic),
   Terminal CRT and PCB (tech), Glass, Cassette and Cyber-Tribal (futurist), Steampunk (premium). Loaded after style.css
   (index.html), so each uses the shared layer of the themed looks there and only sets its variables and a few
   touches. Body text keeps the app's own font; headings use fonts already on Windows (nothing downloaded).
   Status colours (danger / warn / ok) stay distinct in every look. The light ones are in themes-designmd-light.css. */

/* Deep Learning: an enterprise AI console, charcoal with vivid green and electric blue. */
[data-theme=deeptech] {
    --font-display: "Roboto Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;
    --bg: #141414;
    --bg-glow-1: rgba(118, 185, 0, .14);
    --bg-glow-2: rgba(0, 191, 255, .1);
    --grid-line: rgba(118, 185, 0, .04);
    --surface: rgba(30, 30, 30, .9);
    --surface-solid: #1e1e1e;
    --surface-2: rgba(42, 42, 42, .7);
    --surface-hover: rgba(118, 185, 0, .07);
    --chrome: rgba(20, 20, 20, .94);
    --input-bg: rgba(10, 10, 10, .75);
    --line: rgba(189, 189, 189, .14);
    --line-strong: rgba(118, 185, 0, .4);
    --ink: #f2f2f2;
    --ink-2: #c8c8c8;
    --muted: #8f8f8f;
    --heading: #ffffff;
    --accent: #76b900;
    --accent-soft: rgba(118, 185, 0, .13);
    --grad: linear-gradient(120deg, #2a4a00 0%, #5a8f00 50%, #76b900 100%);
    --grad-text: linear-gradient(90deg, #ffffff 0%, #b6f25a 50%, #00bfff 100%);
    --danger: #ff5c5c;
    --warn: #ffc24a;
    --ok: #6efa5f;
    --info: #00bfff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --glow: 0 0 0 1px rgba(118, 185, 0, .55), 0 10px 32px -10px rgba(118, 185, 0, .5);
    --t-cyan: #00bfff; --t-violet: #a99bff; --t-amber: #ffc24a; --t-green: #76b900;
    --t-pink: #ff7ab8; --t-indigo: #7aa2ff; --t-slate: #9e9e9e;
    --trim: #76b900;
    --trim-rgb: 118 185 0;
    --trim-grad: linear-gradient(180deg, #a6e83a 0%, #76b900 55%, #4f7d00 100%);
    --trim-ink: #9bd43a;
    --on-trim: #0d1400;
    --glow-rgb: 118 185 0;
    --primary-bg: linear-gradient(180deg, #86cc0a 0%, #76b900 55%, #5c9100 100%);
    --on-primary: #0d1400;
    --hero-bg: linear-gradient(135deg, rgba(118, 185, 0, .16), rgba(0, 191, 255, .07) 60%, transparent);
    --cut: 2px;
    --cut-sm: 2px;
    --cut-hero: 2px;
    --logo-clip: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='1' fill='%2376b900' fill-opacity='.18'/%3E%3C/svg%3E");
    --pattern-size: 48px 48px;
}
:root[data-theme=deeptech] .primary { text-shadow: none; }
:root[data-theme=deeptech] h1 { font-weight: 700; letter-spacing: -.01em; }

/* IA Creativă: a studio for a creative AI tool, graphite with red, cyan, violet and orange in gradients. */
[data-theme=iacreativa] {
    --font-display: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    --bg: #1e1e1e;
    --bg-glow-1: rgba(255, 0, 80, .2);
    --bg-glow-2: rgba(0, 255, 255, .14);
    --grid-line: rgba(255, 255, 255, .03);
    --surface: rgba(45, 45, 45, .88);
    --surface-solid: #2d2d2d;
    --surface-2: rgba(60, 60, 60, .65);
    --surface-hover: rgba(255, 165, 0, .07);
    --chrome: rgba(30, 30, 30, .93);
    --input-bg: rgba(18, 18, 18, .75);
    --line: rgba(224, 224, 224, .13);
    --line-strong: rgba(0, 255, 255, .35);
    --ink: #f6f6f6;
    --ink-2: #d2d2d2;
    --muted: #9a9a9a;
    --heading: #ffffff;
    --accent: #3df2f2;
    --accent-soft: rgba(0, 255, 255, .12);
    --grad: linear-gradient(120deg, #ff0050 0%, #a020a0 45%, #00d0e0 100%);
    --grad-text: linear-gradient(90deg, #ff4060 0%, #ffa500 35%, #c060ff 65%, #00ffff 100%);
    --danger: #ff4d5e;
    --warn: #ffb020;
    --ok: #3ee87a;
    --info: #5ab8ff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --glow: 0 0 0 1px rgba(255, 64, 96, .5), 0 10px 36px -10px rgba(192, 96, 255, .55);
    --t-cyan: #00e5e5; --t-violet: #c060ff; --t-amber: #ffa500; --t-green: #3ee87a;
    --t-pink: #ff4d8d; --t-indigo: #7a8cff; --t-slate: #a0a0a0;
    --trim: #ffa500;
    --trim-rgb: 255 165 0;
    --trim-grad: linear-gradient(135deg, #ff2d55 0%, #ffa500 50%, #00e5e5 100%);
    --trim-ink: #ffb84a;
    --on-trim: #1a1a1a;
    --glow-rgb: 192 96 255;
    --primary-bg: linear-gradient(120deg, #ff2d55 0%, #b0209f 55%, #6a2bd8 100%);
    --on-primary: #ffffff;
    --hero-bg: linear-gradient(135deg, rgba(255, 0, 80, .16), rgba(128, 0, 128, .14) 45%, rgba(0, 255, 255, .06));
    --cut: 16px;
    --cut-sm: 8px;
    --cut-hero: 24px;
    --logo-clip: none;
    --pattern: none;
    --pattern-size: auto;
}
:root[data-theme=iacreativa] .logo { border-radius: 30%; }
:root[data-theme=iacreativa] .primary { text-shadow: none; }
:root[data-theme=iacreativa] h1 { font-weight: 800; letter-spacing: -.02em; }
:root[data-theme=iacreativa] .hero::after { background: conic-gradient(from 90deg, rgba(255, 0, 80, .4), rgba(255, 165, 0, .35), rgba(0, 255, 255, .35), rgba(128, 0, 128, .4), rgba(255, 0, 80, .4)); filter: blur(22px); }

/* Terminal CRT: green phosphor on black, amber prompts, faint scan lines. */
[data-theme=crt] {
    --font-display: "VT323", "Cascadia Mono", Consolas, "Lucida Console", monospace;
    --bg: #050505;
    --bg-glow-1: rgba(44, 255, 86, .1);
    --bg-glow-2: rgba(255, 178, 0, .06);
    --grid-line: rgba(44, 255, 86, .04);
    --surface: rgba(12, 14, 12, .92);
    --surface-solid: #0c0e0c;
    --surface-2: rgba(17, 17, 17, .85);
    --surface-hover: rgba(44, 255, 86, .07);
    --chrome: rgba(5, 5, 5, .95);
    --input-bg: #000000;
    --line: rgba(44, 255, 86, .18);
    --line-strong: rgba(44, 255, 86, .42);
    --ink: #d4ffdc;
    --ink-2: #9fe8ad;
    --muted: #5fa86c;
    --heading: #2cff56;
    --accent: #ffb200;
    --accent-soft: rgba(255, 178, 0, .12);
    --grad: linear-gradient(120deg, #063d12 0%, #12a030 60%, #2cff56 100%);
    --grad-text: linear-gradient(90deg, #2cff56 0%, #b6ffc4 100%);
    --danger: #ff3333;
    --warn: #ffb200;
    --ok: #2cff56;
    --info: #7fd8ff;
    --shadow: 0 0 0 1px rgba(44, 255, 86, .1), 0 0 24px -12px rgba(44, 255, 86, .35);
    --glow: 0 0 0 1px rgba(44, 255, 86, .6), 0 0 22px -6px rgba(44, 255, 86, .6);
    --t-cyan: #7fd8ff; --t-violet: #c9a6ff; --t-amber: #ffb200; --t-green: #2cff56;
    --t-pink: #ff7aa8; --t-indigo: #8fa8ff; --t-slate: #6fa87a;
    --trim: #2cff56;
    --trim-rgb: 44 255 86;
    --trim-grad: linear-gradient(180deg, #8dffa3 0%, #2cff56 60%, #13b836 100%);
    --trim-ink: #2cff56;
    --on-trim: #031a08;
    --glow-rgb: 44 255 86;
    --primary-bg: linear-gradient(180deg, #111111 0%, #050505 100%);
    --on-primary: #2cff56;
    --hero-bg: linear-gradient(135deg, rgba(44, 255, 86, .1), transparent 60%);
    --cut: 0;
    --cut-sm: 0;
    --cut-hero: 0;
    --logo-clip: none;
    --pattern: repeating-linear-gradient(0deg, rgba(44, 255, 86, .04) 0 1px, transparent 1px 3px);
    --pattern-size: auto;
}
:root[data-theme=crt] .primary { border: 1px solid #2cff56; text-shadow: 0 0 6px rgba(44, 255, 86, .7); }
:root[data-theme=crt] h1 { text-shadow: 0 0 10px rgba(44, 255, 86, .55); letter-spacing: .02em; }
:root[data-theme=crt] h1::after { content: "_"; margin-left: .15em; animation: crt-blink 1.1s steps(1) infinite; }
:root[data-theme=crt] ::selection { background: #2cff56; color: #050505; }
@keyframes crt-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme=crt] h1::after { animation: none; } }

/* PCB: a circuit board, solder-mask green, copper traces, silkscreen cream and gold pads. */
[data-theme=pcb] {
    --font-display: "Courier New", "Cascadia Mono", Consolas, monospace;
    --bg: #0a2a1f;
    --bg-glow-1: rgba(217, 140, 83, .14);
    --bg-glow-2: rgba(22, 91, 69, .5);
    --grid-line: rgba(234, 208, 172, .04);
    --surface: rgba(15, 59, 44, .9);
    --surface-solid: #0f3b2c;
    --surface-2: rgba(22, 91, 69, .6);
    --surface-hover: rgba(217, 140, 83, .08);
    --chrome: rgba(8, 36, 27, .94);
    --input-bg: rgba(4, 22, 16, .8);
    --line: rgba(234, 208, 172, .15);
    --line-strong: rgba(184, 115, 51, .55);
    --ink: #f3e3c8;
    --ink-2: #ead0ac;
    --muted: #a8b59a;
    --heading: #ffe9c4;
    --accent: #e39a5f;
    --accent-soft: rgba(217, 140, 83, .14);
    --grad: linear-gradient(120deg, #6b3e17 0%, #b87333 55%, #ffd700 100%);
    --grad-text: linear-gradient(90deg, #ead0ac 0%, #d98c53 55%, #ffd700 100%);
    --danger: #ff6b5b;
    --warn: #ffd700;
    --ok: #7ee08a;
    --info: #8fd0e8;
    --shadow: inset 0 1px 0 rgba(234, 208, 172, .05), 0 24px 48px -30px rgba(0, 0, 0, .9);
    --glow: 0 0 0 1px rgba(217, 140, 83, .6), 0 10px 30px -10px rgba(255, 215, 0, .35);
    --t-cyan: #8fd0e8; --t-violet: #c0a8ff; --t-amber: #ffd700; --t-green: #7ee08a;
    --t-pink: #ff9a8a; --t-indigo: #9ab0ff; --t-slate: #c0c0c0;
    --trim: #d98c53;
    --trim-rgb: 217 140 83;
    --trim-grad: linear-gradient(160deg, #ffe08a 0%, #d98c53 50%, #8a5225 100%);
    --trim-ink: #e8b07a;
    --on-trim: #1a0f05;
    --glow-rgb: 217 140 83;
    --primary-bg: linear-gradient(180deg, #c98244 0%, #b87333 55%, #8a5225 100%);
    --on-primary: #fff6e6;
    --hero-bg: linear-gradient(135deg, rgba(184, 115, 51, .18), rgba(22, 91, 69, .3) 60%, transparent);
    --cut: 3px;
    --cut-sm: 2px;
    --cut-hero: 4px;
    --logo-clip: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%);
    /* Copper traces with a via at each bend. */
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23b87333' stroke-opacity='.16' stroke-width='2'%3E%3Cpath d='M0 30H40L60 50H120M30 120V90L50 70H80'/%3E%3C/g%3E%3Cg fill='%23ffd700' fill-opacity='.18'%3E%3Ccircle cx='40' cy='30' r='3'/%3E%3Ccircle cx='60' cy='50' r='3'/%3E%3Ccircle cx='50' cy='70' r='3'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-size: 120px 120px;
}
:root[data-theme=pcb] :is(.card, .stat, .tile, .scan-row) { border-color: rgba(184, 115, 51, .35); }
:root[data-theme=pcb] .primary { text-shadow: none; }
:root[data-theme=pcb] h1 { font-weight: 700; letter-spacing: .02em; }

/* Glass: frosted panels floating over a deep night, cyan glowing edges. */
[data-theme=glass] {
    --font-display: "Exo 2", Bahnschrift, "Segoe UI", system-ui, sans-serif;
    --bg: #020814;
    --bg-glow-1: rgba(0, 240, 255, .2);
    --bg-glow-2: rgba(110, 80, 255, .2);
    --grid-line: rgba(0, 240, 255, .035);
    --surface: rgba(255, 255, 255, .06);
    --surface-solid: #0b1424;
    --surface-2: rgba(255, 255, 255, .08);
    --surface-hover: rgba(0, 240, 255, .07);
    --chrome: rgba(255, 255, 255, .05);
    --input-bg: rgba(0, 0, 0, .35);
    --line: rgba(255, 255, 255, .14);
    --line-strong: rgba(0, 240, 255, .45);
    --ink: #ffffff;
    --ink-2: #cfe6ff;
    --muted: #8ea6c2;
    --heading: #ffffff;
    --accent: #00f0ff;
    --accent-soft: rgba(0, 240, 255, .12);
    --grad: linear-gradient(120deg, rgba(0, 240, 255, .25) 0%, rgba(110, 80, 255, .35) 100%);
    --grad-text: linear-gradient(90deg, #ffffff 0%, #9ff8ff 50%, #b9a6ff 100%);
    --danger: #ff6b81;
    --warn: #ffd166;
    --ok: #4cf2a0;
    --info: #7cc4ff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 48px -24px rgba(0, 0, 0, .9);
    --glow: 0 0 0 1px rgba(0, 240, 255, .5), 0 0 32px -6px rgba(0, 240, 255, .55);
    --t-cyan: #00f0ff; --t-violet: #b9a6ff; --t-amber: #ffd166; --t-green: #4cf2a0;
    --t-pink: #ff8fd0; --t-indigo: #7c9cff; --t-slate: #8ea6c2;
    --trim: #00f0ff;
    --trim-rgb: 0 240 255;
    --trim-grad: linear-gradient(160deg, rgba(255, 255, 255, .9) 0%, #00f0ff 50%, #0090c0 100%);
    --trim-ink: #7ff6ff;
    --on-trim: #02121a;
    --glow-rgb: 0 240 255;
    --primary-bg: linear-gradient(180deg, rgba(0, 240, 255, .35) 0%, rgba(0, 150, 200, .3) 100%);
    --on-primary: #ffffff;
    --hero-bg: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(0, 240, 255, .05) 60%, transparent);
    --cut: 18px;
    --cut-sm: 12px;
    --cut-hero: 28px;
    --logo-clip: none;
    --pattern: none;
    --pattern-size: auto;
}
:root[data-theme=glass] :is(.card, .stat, .tile, .scan-row, .sidebar, .modal) { -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
:root[data-theme=glass] .modal { background: rgba(11, 20, 36, .82); }
:root[data-theme=glass] .primary { border: 1px solid rgba(0, 240, 255, .6); text-shadow: 0 0 8px rgba(0, 240, 255, .6); }
:root[data-theme=glass] h1 { font-weight: 600; letter-spacing: .01em; }

/* Cassette: 1980s hardware, charcoal plastic, phosphor amber, beige panels and tape-red buttons. */
[data-theme=cassette] {
    --font-display: "VT323", "Lucida Console", "Cascadia Mono", Consolas, monospace;
    --bg: #1b1b1b;
    --bg-glow-1: rgba(255, 176, 0, .12);
    --bg-glow-2: rgba(27, 40, 56, .7);
    --grid-line: rgba(210, 180, 140, .04);
    --surface: rgba(51, 51, 51, .92);
    --surface-solid: #333333;
    --surface-2: rgba(70, 66, 60, .7);
    --surface-hover: rgba(255, 176, 0, .07);
    --chrome: rgba(36, 36, 36, .95);
    --input-bg: #141414;
    --line: rgba(210, 180, 140, .2);
    --line-strong: rgba(255, 176, 0, .45);
    --ink: #e8e0d0;
    --ink-2: #d2c4a8;
    --muted: #a39a8a;
    --heading: #ffb000;
    --accent: #ffb000;
    --accent-soft: rgba(255, 176, 0, .13);
    --grad: linear-gradient(90deg, #cc0000 0 25%, #ffb000 25% 50%, #d2b48c 50% 75%, #33ff00 75% 100%);
    --grad-text: linear-gradient(90deg, #ffd27a 0%, #ffb000 100%);
    --danger: #ff4a3d;
    --warn: #ffd23f;
    --ok: #4dff2a;
    --info: #8ec5ff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 20px 40px -28px rgba(0, 0, 0, .95);
    --glow: 0 0 0 1px rgba(255, 176, 0, .55), 0 0 22px -6px rgba(255, 176, 0, .5);
    --t-cyan: #8ec5ff; --t-violet: #c6a6ff; --t-amber: #ffb000; --t-green: #4dff2a;
    --t-pink: #ff7a6b; --t-indigo: #8fa0ff; --t-slate: #999999;
    --trim: #ffb000;
    --trim-rgb: 255 176 0;
    --trim-grad: linear-gradient(180deg, #e8d3ae 0%, #d2b48c 60%, #a88c62 100%);
    --trim-ink: #d2b48c;
    --on-trim: #1b1b1b;
    --glow-rgb: 255 176 0;
    --primary-bg: linear-gradient(180deg, #e01a1a 0%, #cc0000 55%, #990000 100%);
    --on-primary: #fff3e0;
    --hero-bg: linear-gradient(135deg, rgba(210, 180, 140, .14), rgba(255, 176, 0, .06) 60%, transparent);
    --cut: 6px;
    --cut-sm: 3px;
    --cut-hero: 8px;
    --logo-clip: none;
    --pattern: repeating-linear-gradient(0deg, rgba(255, 176, 0, .03) 0 1px, transparent 1px 3px);
    --pattern-size: auto;
}
:root[data-theme=cassette] .primary { text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -3px 0 rgba(0, 0, 0, .35); }
:root[data-theme=cassette] .primary:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); }
:root[data-theme=cassette] h1 { text-shadow: 0 0 8px rgba(255, 176, 0, .45); letter-spacing: .03em; }
:root[data-theme=cassette] .hero::before { animation: none; background: linear-gradient(90deg, #cc0000 0 25%, #ffb000 25% 50%, #d2b48c 50% 75%, #33ff00 75% 100%); box-shadow: none; height: 4px; }

/* Steampunk: mahogany panelling, polished brass, copper rivets and a teal gauge needle. */
[data-theme=steampunk] {
    --font-display: "IM Fell English", "Palatino Linotype", "Book Antiqua", Georgia, serif;
    --bg: #1c0d06;
    --bg-glow-1: rgba(184, 115, 51, .22);
    --bg-glow-2: rgba(181, 166, 66, .14);
    --grid-line: rgba(245, 222, 179, .035);
    --surface: rgba(46, 20, 10, .9);
    --surface-solid: #2e140a;
    --surface-2: rgba(92, 0, 0, .35);
    --surface-hover: rgba(181, 166, 66, .08);
    --chrome: rgba(28, 13, 6, .95);
    --input-bg: rgba(14, 6, 3, .8);
    --line: rgba(245, 222, 179, .15);
    --line-strong: rgba(181, 166, 66, .5);
    --ink: #f5deb3;
    --ink-2: #e2c79a;
    --muted: #b09574;
    --heading: #e8d27a;
    --accent: #d4bf55;
    --accent-soft: rgba(181, 166, 66, .14);
    --grad: linear-gradient(120deg, #5c0000 0%, #704214 45%, #b87333 75%, #b5a642 100%);
    --grad-text: linear-gradient(90deg, #f5deb3 0%, #d4bf55 50%, #b87333 100%);
    --danger: #ff6a55;
    --warn: #ffb347;
    --ok: #8fd48a;
    --info: #4fc4c4;
    --shadow: inset 0 1px 0 rgba(245, 222, 179, .06), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --glow: 0 0 0 1px rgba(181, 166, 66, .6), 0 10px 30px -10px rgba(212, 106, 0, .5);
    --t-cyan: #4fc4c4; --t-violet: #c8a2d8; --t-amber: #d46a00; --t-green: #8fd48a;
    --t-pink: #e88a7a; --t-indigo: #9aa8e0; --t-slate: #b09574;
    --trim: #b5a642;
    --trim-rgb: 181 166 66;
    --trim-grad: linear-gradient(160deg, #f0e3a0 0%, #b5a642 45%, #b87333 100%);
    --trim-ink: #d4bf55;
    --on-trim: #1c0d06;
    --glow-rgb: 212 106 0;
    --primary-bg: linear-gradient(180deg, #d9c76a 0%, #b5a642 50%, #8a7a26 100%);
    --on-primary: #1c0d06;
    --hero-bg: linear-gradient(135deg, rgba(184, 115, 51, .2), rgba(92, 0, 0, .2) 60%, transparent);
    --cut: 6px;
    --cut-sm: 4px;
    --cut-hero: 8px;
    --logo-clip: none;
    /* Little cogs. */
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23b87333' stroke-opacity='.13' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Ccircle cx='20' cy='20' r='11' stroke-dasharray='3 3'/%3E%3Ccircle cx='60' cy='60' r='4'/%3E%3Ccircle cx='60' cy='60' r='7' stroke-dasharray='2 2.5'/%3E%3C/g%3E%3C/svg%3E");
    --pattern-size: 80px 80px;
}
:root[data-theme=steampunk] :is(.card, .stat, .tile, .scan-row) { border-color: rgba(184, 115, 51, .45); box-shadow: inset 0 0 0 1px rgba(245, 222, 179, .04), var(--shadow); }
:root[data-theme=steampunk] .logo { border-radius: 50%; }
:root[data-theme=steampunk] .primary { text-shadow: 0 1px 0 rgba(255, 255, 255, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -8px rgba(0, 0, 0, .9); }
:root[data-theme=steampunk] h1 { font-weight: 700; letter-spacing: .01em; }

/* Cyber-Tribal: blacklight indigo with neon cyan, magenta and solar orange in tribal chevrons. The neon stays on
   trims and accents; panels are dark so the status colours still read clearly. */
[data-theme=cybertribal] {
    --font-display: "Azonix", Bahnschrift, "Segoe UI", system-ui, sans-serif;
    --bg: #0a0414;
    --bg-glow-1: rgba(255, 0, 255, .18);
    --bg-glow-2: rgba(0, 255, 255, .14);
    --grid-line: rgba(191, 0, 255, .05);
    --surface: rgba(24, 10, 40, .9);
    --surface-solid: #180a28;
    --surface-2: rgba(75, 0, 130, .35);
    --surface-hover: rgba(0, 255, 255, .07);
    --chrome: rgba(10, 4, 20, .95);
    --input-bg: rgba(4, 0, 10, .8);
    --line: rgba(191, 0, 255, .22);
    --line-strong: rgba(0, 255, 255, .45);
    --ink: #f2ecff;
    --ink-2: #d4c8f0;
    --muted: #9a88c0;
    --heading: #ffffff;
    --accent: #00ffff;
    --accent-soft: rgba(0, 255, 255, .12);
    --grad: linear-gradient(120deg, #4b0082 0%, #bf00ff 45%, #ff00ff 70%, #ff4500 100%);
    --grad-text: linear-gradient(90deg, #00ffff 0%, #ff00ff 50%, #ff8a3d 100%);
    --danger: #ff4d6a;
    --warn: #ffb84d;
    --ok: #29e0a0;
    --info: #00ffff;
    --shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -30px rgba(0, 0, 0, .95);
    --glow: 0 0 0 1px rgba(255, 0, 255, .55), 0 10px 34px -10px rgba(0, 255, 255, .55);
    --t-cyan: #00ffff; --t-violet: #bf00ff; --t-amber: #ff8a3d; --t-green: #29ab87;
    --t-pink: #ff00ff; --t-indigo: #8a7aff; --t-slate: #9a88c0;
    --trim: #ff00ff;
    --trim-rgb: 255 0 255;
    --trim-grad: linear-gradient(135deg, #00ffff 0%, #bf00ff 50%, #ff4500 100%);
    --trim-ink: #ff6bff;
    --on-trim: #0a0414;
    --glow-rgb: 191 0 255;
    --primary-bg: linear-gradient(180deg, #8a2be2 0%, #6a00b0 55%, #4b0082 100%);
    --on-primary: #ffffff;
    --hero-bg: linear-gradient(135deg, rgba(255, 0, 255, .14), rgba(0, 255, 255, .08) 55%, rgba(255, 69, 0, .06));
    --cut: 14px 2px 14px 2px;
    --cut-sm: 8px 2px 8px 2px;
    --cut-hero: 22px 3px 22px 3px;
    --logo-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    /* Tribal chevrons. */
    --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cpath d='M0 24L16 8L32 24L48 8L64 24' fill='none' stroke='%23bf00ff' stroke-opacity='.12' stroke-width='2'/%3E%3C/svg%3E");
    --pattern-size: 64px 32px;
}
:root[data-theme=cybertribal] .primary { border: 1px solid rgba(0, 255, 255, .5); text-shadow: 0 0 8px rgba(255, 0, 255, .6); }
:root[data-theme=cybertribal] h1 { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
:root[data-theme=cybertribal] .hero::before { animation: none; background: linear-gradient(90deg, #00ffff, #ff00ff 50%, #ff4500); box-shadow: 0 0 12px rgba(255, 0, 255, .7); }