*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c-bg:           #060709;
  --c-app:          #0c0d10;
  --c-panel:        #121316;
  --c-surface:      #1a1c20;
  --c-border:       #232529;
  --c-border-hi:    #2e3138;
  --c-text:         #f0eee6;
  --c-muted:        #8b909a;
  --c-accent:       #3b82f6;
  --c-accent-dim:   rgba(59,130,246,0.12);
  --c-accent-glow:  rgba(59,130,246,0.25);
  --c-ready:        #22c55e;
  --c-warn:         #f59e0b;
  --c-danger:       #ef4444;

  --f-display: 'Black Ops One', sans-serif;
  --f-body:    'Inter', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  --f-step-8: var(--f-mono);
  --f-step-13: var(--f-body);
  --f-step-21: var(--f-body);
  --f-step-34: var(--f-display);

  --font-display-5: 5px;
  --font-display-8: 8px;
  --font-display-13: 13px;
  --font-display-21: 21px;
  --font-display-34: 34px;
  --font-display-55: 55px;
  --font-body-5: 5px;
  --font-body-8: 8px;
  --font-body-13: 13px;
  --font-body-21: 21px;
  --font-body-34: 34px;
  --font-body-55: 55px;
  --font-mono-5: 5px;
  --font-mono-8: 8px;
  --font-mono-13: 13px;
  --font-mono-21: 21px;
  --font-mono-34: 34px;
  --font-mono-55: 55px;
  --font-step-8: var(--font-mono-8);
  --font-step-13: var(--font-body-13);
  --font-step-21: var(--font-body-21);
  --font-step-34: var(--font-display-34);
  --font-micro: var(--font-step-8);
  --font-ui: var(--font-step-13);
  --font-title: var(--font-step-21);

  /* Fibonacci shell */
  --w-sidebar: 233px;
  --w-rail:     55px;
  --h-topbar:  144px;
  --h-footer:   55px;
  --w-logo:    610px;
  --h-rotate:   89px;
  --h-tiles:   377px;
  --sz-tile:    55px;
  --sidebar-left-margin: 55px;
  --sidebar-slot-w: 144px;
  --sidebar-right-margin: 34px;
  --rail-left-margin: 13px;
  --rail-slot: 34px;
  --rail-right-margin: 8px;
  --main-w: 1309px;
  --main-h: 788px;
  --main-frame-left-margin: 89px;
  --main-frame-top-margin: 55px;
  --main-sisterbar: 178px;
  --main-content-w: 987px;
  --main-content-h: 610px;
  --main-right-margin: 55px;
  --main-bottom-margin: 34px;

  --shadow-panel: 0 1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.55);
  --shadow-tile:  0 1px 0 rgba(255,255,255,0.05), 0 4px 12px rgba(0,0,0,0.5);
  --glow-accent:  0 0 0 1px rgba(59,130,246,0.45), 0 0 20px rgba(59,130,246,0.18);
}

/* ── THEME: FLECKTARN ────────────────────────────────────────────── */
.shell.theme-flecktarn {
  --c-bg:          rgba(5,8,5,0.70);
  --c-app:         rgba(5,9,5,0.58);
  --c-panel:       rgba(10,18,8,0.68);
  --c-surface:     rgba(19,32,12,0.74);
  --c-border:      rgba(126,158,64,0.30);
  --c-border-hi:   rgba(190,224,86,0.78);
  --c-text:        #E5E9C8;
  --c-muted:       #AAB783;
  --c-accent:      #B8D65A;
  --c-accent-dim:  rgba(184,214,90,0.26);
  --c-accent-glow: rgba(184,214,90,0.38);
  --c-ready:       #84A85D;
  --c-warn:        #D69A35;
  --c-danger:      #C9503E;
  --c-icon:        #C6C78A;
  --c-grid:        rgba(126,158,64,0.13);
  --c-overlay:     rgba(4,8,4,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.62);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.48);
  --glow-accent:   0 0 13px rgba(184,214,90,0.42);
  --f-display: 'Saira Stencil One', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/flecktarn.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: DESERT ───────────────────────────────────────────────── */
.shell.theme-desert {
  --c-bg:          rgba(19,14,8,0.70);
  --c-app:         rgba(17,12,7,0.62);
  --c-panel:       rgba(34,24,13,0.70);
  --c-surface:     rgba(55,39,20,0.76);
  --c-border:      rgba(214,169,93,0.40);
  --c-border-hi:   rgba(242,199,116,0.95);
  --c-text:        #F0E1BE;
  --c-muted:       #B89050;
  --c-accent:      #D49830;
  --c-accent-dim:  rgba(212,152,48,0.28);
  --c-accent-glow: rgba(212,152,48,0.44);
  --c-ready:       #9BA764;
  --c-warn:        #E29A35;
  --c-danger:      #B94A36;
  --c-icon:        #7A5A28;
  --c-grid:        rgba(214,169,93,0.12);
  --c-overlay:     rgba(20,12,5,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.58);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.46);
  --glow-accent:   0 0 13px rgba(224,180,95,0.38);
  --f-display: 'Stardos Stencil', serif;
  --f-body:    'Atkinson Hyperlegible', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/desert.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: TIGERSTRIPE ──────────────────────────────────────────── */
.shell.theme-tigerstripe {
  --c-bg:          rgba(4,6,4,0.55);
  --c-app:         rgba(5,8,5,0.10);
  --c-panel:       rgba(9,14,7,0.12);
  --c-surface:     rgba(23,29,13,0.18);
  --c-border:      rgba(150,142,86,0.28);
  --c-border-hi:   rgba(218,197,106,0.95);
  --c-text:        #E8E1BE;
  --c-muted:       #B7AD7A;
  --c-accent:      #E8C840;
  --c-accent-dim:  rgba(232,200,64,0.28);
  --c-accent-glow: rgba(232,200,64,0.50);
  --c-ready:       #7F9D58;
  --c-warn:        #D48A32;
  --c-danger:      #C34838;
  --c-icon:        #C9BE82;
  --c-grid:        rgba(150,142,86,0.12);
  --c-overlay:     rgba(3,5,3,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.68);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.52);
  --glow-accent:   0 0 13px rgba(210,191,99,0.40);
  --f-display: 'Black Ops One', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/tigerstripe.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: WOODLAND (US M81) ───────────────────────────────────── */
.shell.theme-woodland {
  --c-bg:          rgba(5,6,4,0.70);
  --c-app:         rgba(6,8,5,0.58);
  --c-panel:       rgba(13,17,9,0.68);
  --c-surface:     rgba(24,31,15,0.74);
  --c-border:      rgba(145,132,82,0.30);
  --c-border-hi:   rgba(206,188,105,0.76);
  --c-text:        #E7E1C2;
  --c-muted:       #B5AA78;
  --c-accent:      #CEBC69;
  --c-accent-dim:  rgba(206,188,105,0.25);
  --c-accent-glow: rgba(206,188,105,0.36);
  --c-ready:       #7F9D58;
  --c-warn:        #D79534;
  --c-danger:      #B94A36;
  --c-icon:        #C7BA82;
  --c-grid:        rgba(145,132,82,0.12);
  --c-overlay:     rgba(4,5,3,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.64);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.50);
  --glow-accent:   0 0 13px rgba(206,188,105,0.40);
  --f-display: 'Stardos Stencil', serif;
  --f-body:    'IBM Plex Sans', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/woodland.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: CRYPTIC (Kryptek) ────────────────────────────────────── */
.shell.theme-cryptic {
  --c-bg:          rgba(6,7,6,0.70);
  --c-app:         rgba(7,8,6,0.58);
  --c-panel:       rgba(16,17,12,0.68);
  --c-surface:     rgba(27,29,18,0.74);
  --c-border:      rgba(172,154,91,0.30);
  --c-border-hi:   rgba(224,194,106,0.78);
  --c-text:        #E8E0C2;
  --c-muted:       #B9AA78;
  --c-accent:      #D8BC65;
  --c-accent-dim:  rgba(216,188,101,0.26);
  --c-accent-glow: rgba(216,188,101,0.38);
  --c-ready:       #7F9D58;
  --c-warn:        #D99535;
  --c-danger:      #B94A36;
  --c-icon:        #CDBD82;
  --c-grid:        rgba(172,154,91,0.12);
  --c-overlay:     rgba(4,5,4,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.64);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.50);
  --glow-accent:   0 0 13px rgba(216,188,101,0.42);
  --f-display: 'Wallpoet', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/cryptic.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: DDR-STRIPE (Raindrop / NVA) ─────────────────────────── */
.shell.theme-ddr-stripe {
  --c-bg:          rgba(7,11,6,0.70);
  --c-app:         rgba(8,10,8,0.58);
  --c-panel:       rgba(18,20,13,0.68);
  --c-surface:     rgba(26,29,20,0.74);
  --c-border:      rgba(134,143,110,0.28);
  --c-border-hi:   rgba(180,193,150,0.78);
  --c-text:        #E1DFC9;
  --c-muted:       #A4B094;
  --c-accent:      #B5C179;
  --c-accent-dim:  rgba(181,193,121,0.24);
  --c-accent-glow: rgba(181,193,121,0.32);
  --c-ready:       #7A905E;
  --c-warn:        #C48624;
  --c-danger:      #A84548;
  --c-icon:        #C3C79A;
  --c-grid:        rgba(134,143,110,0.11);
  --c-overlay:     rgba(4,6,4,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.60);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.48);
  --glow-accent:   0 0 13px rgba(181,193,121,0.34);
  --f-display: 'Saira Stencil One', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/ddr-stripe.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: UKRAINE ──────────────────────────────────────────────── */
.shell.theme-ukraine {
  --c-bg:          rgba(5,8,14,0.70);
  --c-app:         rgba(7,12,18,0.58);
  --c-panel:       rgba(13,20,26,0.68);
  --c-surface:     rgba(20,28,42,0.74);
  --c-border:      rgba(82,114,160,0.28);
  --c-border-hi:   rgba(121,159,214,0.72);
  --c-text:        #E3E6E8;
  --c-muted:       #A8B2CE;
  --c-accent:      #FFD844;
  --c-accent-dim:  rgba(255,216,68,0.24);
  --c-accent-glow: rgba(255,216,68,0.36);
  --c-ready:       #50A448;
  --c-warn:        #E5B744;
  --c-danger:      #A94545;
  --c-icon:        #C7D2EA;
  --c-grid:        rgba(92,114,160,0.11);
  --c-overlay:     rgba(4,6,10,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.62);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.48);
  --glow-accent:   0 0 13px rgba(255,216,68,0.40);
  --f-display: 'Saira Stencil One', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/ukraine.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: A-TACS / TERRAIN ────────────────────────────────────── */
.shell.theme-atacs {
  --c-bg:          rgba(5,7,6,0.70);
  --c-app:         rgba(6,8,6,0.58);
  --c-panel:       rgba(13,16,11,0.68);
  --c-surface:     rgba(25,29,19,0.74);
  --c-border:      rgba(143,151,103,0.28);
  --c-border-hi:   rgba(190,197,134,0.72);
  --c-text:        #E1E0C8;
  --c-muted:       #AEB191;
  --c-accent:      #BFC784;
  --c-accent-dim:  rgba(191,199,132,0.24);
  --c-accent-glow: rgba(191,199,132,0.34);
  --c-ready:       #7F9D62;
  --c-warn:        #D19A43;
  --c-danger:      #B94A36;
  --c-icon:        #C5C69A;
  --c-grid:        rgba(143,151,103,0.11);
  --c-overlay:     rgba(4,6,4,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.62);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.48);
  --glow-accent:   0 0 13px rgba(191,199,132,0.36);
  --f-display: 'Saira Stencil One', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/atacs.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: URBAN DIGITAL ───────────────────────────────────────── */
.shell.theme-urban-digital {
  --c-bg:          rgba(6,8,10,0.70);
  --c-app:         rgba(8,10,14,0.58);
  --c-panel:       rgba(14,18,24,0.68);
  --c-surface:     rgba(22,28,36,0.74);
  --c-border:      rgba(100,120,148,0.28);
  --c-border-hi:   rgba(140,165,200,0.76);
  --c-text:        #D8E4F0;
  --c-muted:       #8AA0B8;
  --c-accent:      #6B9ED4;
  --c-accent-dim:  rgba(107,158,212,0.22);
  --c-accent-glow: rgba(107,158,212,0.36);
  --c-ready:       #5A8F6A;
  --c-warn:        #D99535;
  --c-danger:      #B94A36;
  --c-icon:        #90AAC4;
  --c-grid:        rgba(80,110,148,0.12);
  --c-overlay:     rgba(4,6,8,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.68);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.52);
  --glow-accent:   0 0 13px rgba(107,158,212,0.42);
  --f-display: 'Wallpoet', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/urban-digital.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: SNOW ─────────────────────────────────────────────────── */
.shell.theme-snow {
  --c-bg:          rgba(8,10,11,0.70);
  --c-app:         rgba(10,12,14,0.58);
  --c-panel:       rgba(16,20,22,0.68);
  --c-surface:     rgba(24,30,32,0.74);
  --c-border:      rgba(160,180,190,0.28);
  --c-border-hi:   rgba(200,215,225,0.76);
  --c-text:        #EAF0F4;
  --c-muted:       #A0B4BE;
  --c-accent:      #7AB4CC;
  --c-accent-dim:  rgba(122,180,204,0.22);
  --c-accent-glow: rgba(122,180,204,0.36);
  --c-ready:       #5A8F6A;
  --c-warn:        #D99535;
  --c-danger:      #B94A36;
  --c-icon:        #B0C8D4;
  --c-grid:        rgba(120,160,180,0.10);
  --c-overlay:     rgba(2,4,6,0.04);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.64);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.48);
  --glow-accent:   0 0 13px rgba(122,180,204,0.40);
  --f-display: 'Black Ops One', sans-serif;
  --f-body:    'Atkinson Hyperlegible', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
  background-image:
    linear-gradient(var(--c-overlay), var(--c-overlay)),
    url('/static/core-ui/camo/snow.png');
  background-size: cover;
  background-position: center;
}

/* ── THEME: SOLID (kein Bild) ────────────────────────────────────── */
.shell.theme-solid {
  --c-bg:          #060806;
  --c-app:         rgba(8,10,8,0.96);
  --c-panel:       rgba(14,18,12,0.94);
  --c-surface:     rgba(22,28,18,0.92);
  --c-border:      rgba(120,140,90,0.28);
  --c-border-hi:   rgba(170,190,120,0.72);
  --c-text:        #E2DFC4;
  --c-muted:       #A8A880;
  --c-accent:      #C8B858;
  --c-accent-dim:  rgba(200,184,88,0.22);
  --c-accent-glow: rgba(200,184,88,0.36);
  --c-ready:       #7A9A58;
  --c-warn:        #D49535;
  --c-danger:      #B84836;
  --c-icon:        #C0B87A;
  --c-grid:        rgba(120,140,90,0.10);
  --c-overlay:     rgba(0,0,0,0);
  --shadow-panel:  0 0 34px rgba(0,0,0,0.60);
  --shadow-tile:   0 0 21px rgba(0,0,0,0.46);
  --glow-accent:   0 0 13px rgba(200,184,88,0.38);
  --f-display: 'Saira Stencil One', sans-serif;
  --f-body:    'Space Grotesk', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
}

/* ── THEME: SOLID LIGHT (Creme/Sand, kein Bild) ─────────────────── */
.shell.theme-solid-light {
  --c-bg:          #D8C59A;
  --c-app:         rgba(226,207,166,0.94);
  --c-panel:       rgba(188,158,103,0.72);
  --c-surface:     rgba(153,120,72,0.26);
  --c-border:      rgba(91,70,39,0.24);
  --c-border-hi:   rgba(104,76,35,0.58);
  --c-text:        #2B2418;
  --c-muted:       #67563A;
  --c-accent:      #6F5428;
  --c-accent-dim:  rgba(111,84,40,0.20);
  --c-accent-glow: rgba(111,84,40,0.28);
  --c-ready:       #587044;
  --c-warn:        #A66B24;
  --c-danger:      #913D30;
  --c-icon:        #4F3E24;
  --c-grid:        rgba(91,70,39,0.11);
  --c-overlay:     rgba(0,0,0,0);
  --shadow-panel:  0 0 34px rgba(48,34,16,0.22);
  --shadow-tile:   0 0 21px rgba(48,34,16,0.18);
  --glow-accent:   0 0 13px rgba(111,84,40,0.24);
  --f-display: 'Stardos Stencil', serif;
  --f-body:    'Atkinson Hyperlegible', sans-serif;
  --f-mono:    'IBM Plex Sans', monospace;
}



/* ── THEME V2: getrennte Backgrounds und Paletten ───────────────── */
.shell.bg-field-ops {
  background: radial-gradient(circle at 20% 10%, rgba(76,147,240,0.16), transparent 34rem), linear-gradient(135deg, #05080D, #0B1420 55%, #030508);
}
.shell.bg-flecktarn { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/flecktarn.png'); background-size: cover; background-position: center; }
.shell.bg-ddr-stripe { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/ddr-stripe.png'); background-size: cover; background-position: center; }
.shell.bg-ukraine { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/ukraine.png'); background-size: cover; background-position: center; }
.shell.bg-desert { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/desert.png'); background-size: cover; background-position: center; }
.shell.bg-tigerstripe { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/tigerstripe.png'); background-size: cover; background-position: center; }
.shell.bg-cryptic { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/cryptic.png'); background-size: cover; background-position: center; }
.shell.bg-woodland { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/woodland.png'); background-size: cover; background-position: center; }
.shell.bg-atacs { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/atacs.png'); background-size: cover; background-position: center; }
.shell.bg-urban-digital { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/urban-digital.png'); background-size: cover; background-position: center; }
.shell.bg-snow { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/snow.png'); background-size: cover; background-position: center; }
.shell.bg-hunter-autumn { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/hunter-autumn.png'); background-size: cover; background-position: center; }
.shell.bg-dawn { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/dawn.png'); background-size: cover; background-position: center; }
.shell.bg-day { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/day.png'); background-size: cover; background-position: center; }
.shell.bg-dusk { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/dusk.png'); background-size: cover; background-position: center; }
.shell.bg-night { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/night.png'); background-size: cover; background-position: center; }
.shell.bg-sand { background: radial-gradient(circle at 20% 10%, rgba(255,244,220,0.26), transparent 34rem), linear-gradient(135deg, #D8C59A, #BFA16B 55%, #8C6B39); }
.shell.bg-tropic { background-image: linear-gradient(var(--c-overlay), var(--c-overlay)), url('/static/core-ui/camo/camo-tropical.png'); background-size: cover; background-position: center; }
.shell.bg-multicam { background: radial-gradient(circle at 20% 10%, rgba(220,202,129,0.14), transparent 34rem), linear-gradient(135deg, #070806, #19180E 55%, #060503); }
.shell.bg-black-ops { background: radial-gradient(circle at 78% 10%, rgba(230,199,94,0.12), transparent 34rem), linear-gradient(135deg, #030303, #10100D 55%, #000000); }

.shell.bg-solid.palette-field-ops { background: radial-gradient(circle at 20% 10%, rgba(76,147,240,0.16), transparent 34rem), linear-gradient(135deg, #05080D, #0B1420 55%, #030508); }
.shell.bg-solid.palette-flecktarn { background: radial-gradient(circle at 18% 12%, rgba(184,214,90,0.13), transparent 34rem), linear-gradient(135deg, #050805, #11190A 55%, #030503); }
.shell.bg-solid.palette-ddr-stripe { background: radial-gradient(circle at 20% 10%, rgba(181,193,121,0.12), transparent 34rem), linear-gradient(135deg, #070806, #171A10 55%, #050604); }
.shell.bg-solid.palette-ukraine { background: radial-gradient(circle at 78% 12%, rgba(255,213,74,0.16), transparent 34rem), linear-gradient(135deg, #05080D, #0B1724 50%, #141009); }
.shell.bg-solid.palette-desert { background: radial-gradient(circle at 22% 10%, rgba(224,180,95,0.18), transparent 34rem), linear-gradient(135deg, #130E08, #2A1D0E 55%, #0A0704); }
.shell.bg-solid.palette-tigerstripe { background: radial-gradient(circle at 24% 12%, rgba(224,200,90,0.14), transparent 34rem), linear-gradient(135deg, #040604, #17190C 48%, #090703); }
.shell.bg-solid.palette-cryptic { background: radial-gradient(circle at 80% 8%, rgba(216,188,101,0.14), transparent 34rem), linear-gradient(135deg, #060706, #16170E 55%, #050504); }
.shell.bg-solid.palette-woodland { background: radial-gradient(circle at 20% 12%, rgba(206,188,105,0.12), transparent 34rem), linear-gradient(135deg, #050604, #171B0E 50%, #090704); }
.shell.bg-solid.palette-atacs { background: radial-gradient(circle at 18% 10%, rgba(191,199,132,0.13), transparent 34rem), linear-gradient(135deg, #050706, #161A12 55%, #050504); }
.shell.bg-solid.palette-urban-digital { background: radial-gradient(circle at 20% 10%, rgba(138,188,216,0.15), transparent 34rem), linear-gradient(135deg, #050709, #0E1820 55%, #030405); }
.shell.bg-solid.palette-snow { background: radial-gradient(circle at 18% 10%, rgba(216,230,234,0.16), transparent 34rem), linear-gradient(135deg, #07090A, #151B1D 55%, #040506); }
.shell.bg-solid.palette-solid { background: radial-gradient(circle at 20% 10%, rgba(194,214,122,0.10), transparent 34rem), linear-gradient(135deg, #060805, #10150B 55%, #030403); }
.shell.bg-solid.palette-sand { background: radial-gradient(circle at 20% 10%, rgba(255,244,220,0.34), transparent 34rem), linear-gradient(135deg, #D8C59A, #BFA16B 55%, #8C6B39); }
.shell.bg-solid.palette-tropic { background: radial-gradient(circle at 20% 10%, rgba(126,204,107,0.15), transparent 34rem), linear-gradient(135deg, #030704, #0B1A0D 55%, #020402); }
.shell.bg-solid.palette-multicam { background: radial-gradient(circle at 20% 10%, rgba(220,202,129,0.14), transparent 34rem), linear-gradient(135deg, #070806, #19180E 55%, #060503); }
.shell.bg-solid.palette-black-ops { background: radial-gradient(circle at 78% 10%, rgba(230,199,94,0.12), transparent 34rem), linear-gradient(135deg, #030303, #10100D 55%, #000000); }

.shell.palette-field-ops { --c-bg:#05080D; --c-app:rgba(7,12,18,0.90); --c-panel:rgba(10,17,25,0.86); --c-surface:rgba(18,30,44,0.78); --c-border:rgba(82,124,172,0.30); --c-border-hi:rgba(100,166,238,0.78); --c-text:#E3EAF0; --c-muted:#A5B8C8; --c-accent:#4C93F0; --c-accent-dim:rgba(76,147,240,0.24); --c-accent-glow:rgba(76,147,240,0.38); --c-ready:#5BA46B; --c-warn:#E0A23A; --c-danger:#C94B3F; --c-icon:#9FC7F2; --c-grid:rgba(82,124,172,0.12); --c-overlay:rgba(3,6,10,0.54); --glow-accent:0 0 13px rgba(76,147,240,0.42); }
.shell.palette-flecktarn { --c-bg:#050805; --c-app:rgba(5,9,5,0.88); --c-panel:rgba(10,18,8,0.86); --c-surface:rgba(19,32,12,0.78); --c-border:rgba(126,158,64,0.30); --c-border-hi:rgba(190,224,86,0.78); --c-text:#E5E9C8; --c-muted:#AAB783; --c-accent:#B8D65A; --c-accent-dim:rgba(184,214,90,0.26); --c-accent-glow:rgba(184,214,90,0.38); --c-ready:#84A85D; --c-warn:#D69A35; --c-danger:#C9503E; --c-icon:#C6C78A; --c-grid:rgba(126,158,64,0.13); --c-overlay:rgba(4,8,4,0.52); --glow-accent:0 0 13px rgba(184,214,90,0.42); }
.shell.palette-ddr-stripe { --c-bg:#070806; --c-app:rgba(8,10,8,0.88); --c-panel:rgba(15,18,13,0.86); --c-surface:rgba(26,29,20,0.78); --c-border:rgba(134,143,110,0.28); --c-border-hi:rgba(185,193,150,0.72); --c-text:#E1DFC9; --c-muted:#ADB094; --c-accent:#B5C179; --c-accent-dim:rgba(181,193,121,0.24); --c-accent-glow:rgba(181,193,121,0.32); --c-ready:#7A9B5E; --c-warn:#D2A24A; --c-danger:#B94A36; --c-icon:#C3C79A; --c-grid:rgba(134,143,110,0.11); --c-overlay:rgba(4,5,4,0.48); --glow-accent:0 0 13px rgba(181,193,121,0.34); }
.shell.palette-ukraine { --c-bg:#05080D; --c-app:rgba(7,12,18,0.90); --c-panel:rgba(13,18,26,0.86); --c-surface:rgba(20,28,42,0.78); --c-border:rgba(82,114,160,0.28); --c-border-hi:rgba(255,213,74,0.74); --c-text:#E3E6EA; --c-muted:#A5AEC2; --c-accent:#FFD54A; --c-accent-dim:rgba(255,213,74,0.24); --c-accent-glow:rgba(255,213,74,0.36); --c-ready:#5BA46B; --c-warn:#E5B74A; --c-danger:#D64545; --c-icon:#C7D2E6; --c-grid:rgba(82,114,160,0.11); --c-overlay:rgba(5,8,13,0.50); --glow-accent:0 0 13px rgba(255,213,74,0.40); }
.shell.palette-desert { --c-bg:#130E08; --c-app:rgba(17,12,7,0.86); --c-panel:rgba(34,24,13,0.84); --c-surface:rgba(55,39,20,0.74); --c-border:rgba(214,169,93,0.30); --c-border-hi:rgba(242,199,116,0.80); --c-text:#F0E1BE; --c-muted:#C9AD7B; --c-accent:#E0B45F; --c-accent-dim:rgba(224,180,95,0.26); --c-accent-glow:rgba(224,180,95,0.36); --c-ready:#9BA764; --c-warn:#E29A35; --c-danger:#B94A36; --c-icon:#D8C18A; --c-grid:rgba(214,169,93,0.12); --c-overlay:rgba(20,12,5,0.42); --glow-accent:0 0 13px rgba(224,180,95,0.38); }
.shell.palette-tigerstripe { --c-bg:#040604; --c-app:rgba(5,8,5,0.90); --c-panel:rgba(9,14,7,0.86); --c-surface:rgba(23,29,13,0.78); --c-border:rgba(150,142,86,0.30); --c-border-hi:rgba(232,203,88,0.82); --c-text:#E8E1BE; --c-muted:#B7AD7A; --c-accent:#E0C85A; --c-accent-dim:rgba(224,200,90,0.25); --c-accent-glow:rgba(224,200,90,0.40); --c-ready:#7F9D58; --c-warn:#D48A32; --c-danger:#C34838; --c-icon:#D4C782; --c-grid:rgba(150,142,86,0.12); --c-overlay:rgba(3,5,3,0.54); --glow-accent:0 0 13px rgba(224,200,90,0.40); }
.shell.palette-cryptic { --c-bg:#060706; --c-app:rgba(7,8,6,0.88); --c-panel:rgba(16,17,12,0.86); --c-surface:rgba(27,29,18,0.78); --c-border:rgba(172,154,91,0.30); --c-border-hi:rgba(224,194,106,0.78); --c-text:#E8E0C2; --c-muted:#B9AA78; --c-accent:#D8BC65; --c-accent-dim:rgba(216,188,101,0.26); --c-accent-glow:rgba(216,188,101,0.38); --c-ready:#7F9D58; --c-warn:#D99535; --c-danger:#B94A36; --c-icon:#CDBD82; --c-grid:rgba(172,154,91,0.12); --c-overlay:rgba(4,5,4,0.50); --glow-accent:0 0 13px rgba(216,188,101,0.42); }
.shell.palette-woodland { --c-bg:#050604; --c-app:rgba(6,8,5,0.88); --c-panel:rgba(13,17,9,0.86); --c-surface:rgba(24,31,15,0.78); --c-border:rgba(145,132,82,0.30); --c-border-hi:rgba(206,188,105,0.76); --c-text:#E7E1C2; --c-muted:#B5AA78; --c-accent:#CEBC69; --c-accent-dim:rgba(206,188,105,0.25); --c-accent-glow:rgba(206,188,105,0.36); --c-ready:#7F9D58; --c-warn:#D79534; --c-danger:#B94A36; --c-icon:#C7BA82; --c-grid:rgba(145,132,82,0.12); --c-overlay:rgba(4,5,3,0.52); --glow-accent:0 0 13px rgba(206,188,105,0.40); }
.shell.palette-atacs { --c-bg:#050706; --c-app:rgba(6,8,6,0.88); --c-panel:rgba(13,16,11,0.86); --c-surface:rgba(25,29,19,0.78); --c-border:rgba(143,151,103,0.28); --c-border-hi:rgba(190,197,134,0.72); --c-text:#E1E0C8; --c-muted:#AEB191; --c-accent:#BFC784; --c-accent-dim:rgba(191,199,132,0.24); --c-accent-glow:rgba(191,199,132,0.34); --c-ready:#7F9D62; --c-warn:#D19A43; --c-danger:#B94A36; --c-icon:#C5C69A; --c-grid:rgba(143,151,103,0.11); --c-overlay:rgba(4,6,4,0.44); --glow-accent:0 0 13px rgba(191,199,132,0.36); }
.shell.palette-urban-digital { --c-bg:#050709; --c-app:rgba(6,9,11,0.90); --c-panel:rgba(11,16,19,0.86); --c-surface:rgba(21,30,36,0.78); --c-border:rgba(103,137,158,0.28); --c-border-hi:rgba(142,188,218,0.76); --c-text:#E0E8EA; --c-muted:#A4BAC4; --c-accent:#8ABCD8; --c-accent-dim:rgba(138,188,216,0.24); --c-accent-glow:rgba(138,188,216,0.36); --c-ready:#6FA36C; --c-warn:#D8A43A; --c-danger:#C24C44; --c-icon:#B7D2DE; --c-grid:rgba(103,137,158,0.11); --c-overlay:rgba(3,6,8,0.50); --glow-accent:0 0 13px rgba(138,188,216,0.42); }
.shell.palette-snow { --c-bg:#07090A; --c-app:rgba(7,9,10,0.88); --c-panel:rgba(14,17,18,0.86); --c-surface:rgba(28,34,36,0.76); --c-border:rgba(158,176,184,0.28); --c-border-hi:rgba(218,232,236,0.72); --c-text:#EDF2F2; --c-muted:#B8C7CA; --c-accent:#D8E6EA; --c-accent-dim:rgba(216,230,234,0.20); --c-accent-glow:rgba(216,230,234,0.30); --c-ready:#7FA86E; --c-warn:#D6A23A; --c-danger:#C34C43; --c-icon:#D6E2E5; --c-grid:rgba(158,176,184,0.10); --c-overlay:rgba(5,7,8,0.36); --glow-accent:0 0 13px rgba(216,230,234,0.32); }
.shell.palette-solid { --c-bg:#060805; --c-app:rgba(7,10,7,0.96); --c-panel:rgba(12,17,10,0.92); --c-surface:rgba(22,29,16,0.82); --c-border:rgba(137,158,92,0.24); --c-border-hi:rgba(194,214,122,0.68); --c-text:#E2E6C8; --c-muted:#A8B28A; --c-accent:#C2D67A; --c-accent-dim:rgba(194,214,122,0.22); --c-accent-glow:rgba(194,214,122,0.30); --c-ready:#7EA45E; --c-warn:#D69A35; --c-danger:#B94A36; --c-icon:#C4CE98; --c-grid:rgba(137,158,92,0.10); --c-overlay:rgba(0,0,0,0); --glow-accent:0 0 13px rgba(194,214,122,0.32); }
.shell.palette-sand { --c-bg:#D8C59A; --c-app:rgba(226,207,166,0.94); --c-panel:rgba(188,158,103,0.72); --c-surface:rgba(153,120,72,0.26); --c-border:rgba(91,70,39,0.24); --c-border-hi:rgba(104,76,35,0.58); --c-text:#2B2418; --c-muted:#67563A; --c-accent:#6F5428; --c-accent-dim:rgba(111,84,40,0.20); --c-accent-glow:rgba(111,84,40,0.24); --c-ready:#587044; --c-warn:#A66B24; --c-danger:#913D30; --c-icon:#4F3E24; --c-grid:rgba(91,70,39,0.11); --c-overlay:rgba(255,244,220,0); --glow-accent:0 0 13px rgba(111,84,40,0.24); }
.shell.palette-tropic { --c-bg:#030704; --c-app:rgba(4,9,5,0.90); --c-panel:rgba(8,18,10,0.86); --c-surface:rgba(15,34,18,0.78); --c-border:rgba(78,135,70,0.30); --c-border-hi:rgba(126,204,107,0.76); --c-text:#DCE8C8; --c-muted:#9BB584; --c-accent:#7ECC6B; --c-accent-dim:rgba(126,204,107,0.24); --c-accent-glow:rgba(126,204,107,0.34); --c-ready:#83C16C; --c-warn:#D2A043; --c-danger:#C14A3C; --c-icon:#B4D99D; --c-grid:rgba(78,135,70,0.12); --c-overlay:rgba(3,7,4,0.48); --glow-accent:0 0 13px rgba(126,204,107,0.36); }
.shell.palette-multicam { --c-bg:#070806; --c-app:rgba(8,9,7,0.88); --c-panel:rgba(18,19,13,0.86); --c-surface:rgba(34,35,22,0.78); --c-border:rgba(160,150,102,0.28); --c-border-hi:rgba(220,204,129,0.74); --c-text:#E7E0C2; --c-muted:#B8AD82; --c-accent:#DCCA81; --c-accent-dim:rgba(220,202,129,0.24); --c-accent-glow:rgba(220,202,129,0.34); --c-ready:#86A263; --c-warn:#D7983A; --c-danger:#B94A36; --c-icon:#D0C690; --c-grid:rgba(160,150,102,0.11); --c-overlay:rgba(5,6,4,0.46); --glow-accent:0 0 13px rgba(220,202,129,0.36); }
.shell.palette-black-ops { --c-bg:#030303; --c-app:rgba(5,5,5,0.92); --c-panel:rgba(11,11,10,0.88); --c-surface:rgba(22,21,17,0.78); --c-border:rgba(132,118,74,0.28); --c-border-hi:rgba(230,199,94,0.80); --c-text:#E8E4D3; --c-muted:#AAA18A; --c-accent:#E6C75E; --c-accent-dim:rgba(230,199,94,0.24); --c-accent-glow:rgba(230,199,94,0.38); --c-ready:#74A866; --c-warn:#D89632; --c-danger:#C54B3F; --c-icon:#D8C98B; --c-grid:rgba(132,118,74,0.10); --c-overlay:rgba(0,0,0,0.56); --glow-accent:0 0 13px rgba(230,199,94,0.42); }

/* ── PALETTE SYSTEM V2: 16 palettes × dark/light ───────────────── */
.shell.mode-dark,
.shell.mode-light {
  --glow-accent: 0 0 13px var(--c-accent-glow);
  --shadow-panel: 0 0 34px rgba(0,0,0,0.38);
  --shadow-tile: 0 0 21px rgba(0,0,0,0.28);
}

.shell.bg-sand {
  background: radial-gradient(circle at 20% 10%, rgba(224,180,95,.18), transparent 34rem), linear-gradient(135deg, #130E08, #2A1D0E 55%, #0A0704);
}

.shell.bg-solid.mode-dark,
.shell.bg-solid.mode-light {
  background: radial-gradient(circle at 20% 10%, var(--c-accent-dim), transparent 34rem), linear-gradient(135deg, var(--c-bg), var(--c-panel) 55%, var(--c-app));
}

.shell.palette-field-ops.mode-dark {
  --c-bg:#05080D; --c-app:rgba(7,12,18,.90); --c-panel:rgba(10,17,25,.86); --c-surface:rgba(18,30,44,.78);
  --c-border:rgba(82,124,172,.30); --c-border-hi:rgba(100,166,238,.78);
  --c-text:#E3EAF0; --c-muted:#A5B8C8; --c-accent:#4C93F0; --c-accent-dim:rgba(76,147,240,.24); --c-accent-glow:rgba(76,147,240,.38);
  --c-ready:#5BA46B; --c-warn:#E0A23A; --c-danger:#C94B3F; --c-icon:#9FC7F2; --c-grid:rgba(82,124,172,.12); --c-overlay:rgba(3,6,10,.54);
}
.shell.palette-field-ops.mode-light {
  --c-bg:#D5DEE7; --c-app:rgba(221,231,239,.94); --c-panel:rgba(199,215,229,.84); --c-surface:rgba(179,201,219,.70);
  --c-border:rgba(53,85,115,.26); --c-border-hi:rgba(44,111,177,.60);
  --c-text:#14202B; --c-muted:#52697C; --c-accent:#2D6FB1; --c-accent-dim:rgba(45,111,177,.18); --c-accent-glow:rgba(45,111,177,.22);
  --c-ready:#3F7C50; --c-warn:#A46C18; --c-danger:#A13C34; --c-icon:#285C8E; --c-grid:rgba(53,85,115,.12); --c-overlay:rgba(230,238,245,.18);
}
.shell.palette-flecktarn.mode-dark {
  --c-bg:#050805; --c-app:rgba(5,9,5,.88); --c-panel:rgba(10,18,8,.86); --c-surface:rgba(19,32,12,.78);
  --c-border:rgba(126,158,64,.30); --c-border-hi:rgba(190,224,86,.78);
  --c-text:#E5E9C8; --c-muted:#AAB783; --c-accent:#B8D65A; --c-accent-dim:rgba(184,214,90,.26); --c-accent-glow:rgba(184,214,90,.38);
  --c-ready:#84A85D; --c-warn:#D69A35; --c-danger:#C9503E; --c-icon:#C6C78A; --c-grid:rgba(126,158,64,.13); --c-overlay:rgba(4,8,4,.52);
}
.shell.palette-flecktarn.mode-light {
  --c-bg:#C9D0A8; --c-app:rgba(217,224,186,.92); --c-panel:rgba(192,203,151,.82); --c-surface:rgba(164,181,112,.64);
  --c-border:rgba(67,87,38,.24); --c-border-hi:rgba(93,126,44,.58);
  --c-text:#1C2614; --c-muted:#56663D; --c-accent:#5D7E2C; --c-accent-dim:rgba(93,126,44,.18); --c-accent-glow:rgba(93,126,44,.22);
  --c-ready:#557B3E; --c-warn:#996519; --c-danger:#96392F; --c-icon:#465F28; --c-grid:rgba(67,87,38,.11); --c-overlay:rgba(225,232,190,.18);
}
.shell.palette-ddr-stripe.mode-dark {
  --c-bg:#070806; --c-app:rgba(8,10,8,.88); --c-panel:rgba(15,18,13,.86); --c-surface:rgba(26,29,20,.78);
  --c-border:rgba(134,143,110,.28); --c-border-hi:rgba(185,193,150,.72);
  --c-text:#E1DFC9; --c-muted:#ADB094; --c-accent:#B5C179; --c-accent-dim:rgba(181,193,121,.24); --c-accent-glow:rgba(181,193,121,.32);
  --c-ready:#7A9B5E; --c-warn:#D2A24A; --c-danger:#B94A36; --c-icon:#C3C79A; --c-grid:rgba(134,143,110,.11); --c-overlay:rgba(4,5,4,.48);
}
.shell.palette-ddr-stripe.mode-light {
  --c-bg:#C9C9AE; --c-app:rgba(216,216,194,.92); --c-panel:rgba(189,192,160,.82); --c-surface:rgba(156,163,124,.62);
  --c-border:rgba(72,77,52,.24); --c-border-hi:rgba(105,115,67,.58);
  --c-text:#202316; --c-muted:#5A5F43; --c-accent:#687543; --c-accent-dim:rgba(104,117,67,.18); --c-accent-glow:rgba(104,117,67,.22);
  --c-ready:#5E7E45; --c-warn:#946A24; --c-danger:#913A30; --c-icon:#535D36; --c-grid:rgba(72,77,52,.11); --c-overlay:rgba(220,220,196,.16);
}
.shell.palette-ukraine.mode-dark {
  --c-bg:#05080D; --c-app:rgba(7,12,18,.90); --c-panel:rgba(13,18,26,.86); --c-surface:rgba(20,28,42,.78);
  --c-border:rgba(82,114,160,.28); --c-border-hi:rgba(255,213,74,.74);
  --c-text:#E3E6EA; --c-muted:#A5AEC2; --c-accent:#FFD54A; --c-accent-dim:rgba(255,213,74,.24); --c-accent-glow:rgba(255,213,74,.36);
  --c-ready:#5BA46B; --c-warn:#E5B74A; --c-danger:#D64545; --c-icon:#C7D2E6; --c-grid:rgba(82,114,160,.11); --c-overlay:rgba(5,8,13,.50);
}
.shell.palette-ukraine.mode-light {
  --c-bg:#D8DFE6; --c-app:rgba(228,234,240,.92); --c-panel:rgba(205,217,229,.82); --c-surface:rgba(184,202,220,.64);
  --c-border:rgba(45,71,106,.24); --c-border-hi:rgba(166,127,16,.62);
  --c-text:#162131; --c-muted:#526277; --c-accent:#A67F10; --c-accent-dim:rgba(166,127,16,.18); --c-accent-glow:rgba(166,127,16,.22);
  --c-ready:#467D51; --c-warn:#B07D18; --c-danger:#A23636; --c-icon:#2F5E96; --c-grid:rgba(45,71,106,.11); --c-overlay:rgba(230,237,244,.16);
}
.shell.palette-arid.mode-dark {
  --c-bg:#130E08; --c-app:rgba(17,12,7,.86); --c-panel:rgba(34,24,13,.84); --c-surface:rgba(55,39,20,.74);
  --c-border:rgba(214,169,93,.30); --c-border-hi:rgba(242,199,116,.80);
  --c-text:#F0E1BE; --c-muted:#C9AD7B; --c-accent:#E0B45F; --c-accent-dim:rgba(224,180,95,.26); --c-accent-glow:rgba(224,180,95,.36);
  --c-ready:#9BA764; --c-warn:#E29A35; --c-danger:#B94A36; --c-icon:#D8C18A; --c-grid:rgba(214,169,93,.12); --c-overlay:rgba(20,12,5,.42);
}
.shell.palette-arid.mode-light {
  --c-bg:#D4C1A0; --c-app:rgba(226,211,186,.92); --c-panel:rgba(202,181,145,.82); --c-surface:rgba(175,146,101,.58);
  --c-border:rgba(93,65,33,.24); --c-border-hi:rgba(128,82,32,.58);
  --c-text:#2A1E12; --c-muted:#67513A; --c-accent:#805220; --c-accent-dim:rgba(128,82,32,.18); --c-accent-glow:rgba(128,82,32,.22);
  --c-ready:#637A42; --c-warn:#A0631E; --c-danger:#8E3A2E; --c-icon:#5C3E1F; --c-grid:rgba(93,65,33,.10); --c-overlay:rgba(236,222,196,.14);
}
.shell.palette-tigerstripe.mode-dark {
  --c-bg:#040604; --c-app:rgba(5,8,5,.90); --c-panel:rgba(9,14,7,.86); --c-surface:rgba(23,29,13,.78);
  --c-border:rgba(150,142,86,.30); --c-border-hi:rgba(232,203,88,.82);
  --c-text:#E8E1BE; --c-muted:#B7AD7A; --c-accent:#E0C85A; --c-accent-dim:rgba(224,200,90,.25); --c-accent-glow:rgba(224,200,90,.40);
  --c-ready:#7F9D58; --c-warn:#D48A32; --c-danger:#C34838; --c-icon:#D4C782; --c-grid:rgba(150,142,86,.12); --c-overlay:rgba(3,5,3,.54);
}
.shell.palette-tigerstripe.mode-light {
  --c-bg:#CCC39A; --c-app:rgba(220,213,180,.92); --c-panel:rgba(192,181,133,.82); --c-surface:rgba(156,141,87,.62);
  --c-border:rgba(76,69,39,.24); --c-border-hi:rgba(122,96,24,.62);
  --c-text:#211E13; --c-muted:#605739; --c-accent:#7A6018; --c-accent-dim:rgba(122,96,24,.18); --c-accent-glow:rgba(122,96,24,.22);
  --c-ready:#5A783F; --c-warn:#9D5F1B; --c-danger:#94362D; --c-icon:#5C4B1D; --c-grid:rgba(76,69,39,.11); --c-overlay:rgba(226,219,188,.14);
}
.shell.palette-cryptic.mode-dark {
  --c-bg:#060706; --c-app:rgba(7,8,6,.88); --c-panel:rgba(16,17,12,.86); --c-surface:rgba(27,29,18,.78);
  --c-border:rgba(172,154,91,.30); --c-border-hi:rgba(224,194,106,.78);
  --c-text:#E8E0C2; --c-muted:#B9AA78; --c-accent:#D8BC65; --c-accent-dim:rgba(216,188,101,.26); --c-accent-glow:rgba(216,188,101,.38);
  --c-ready:#7F9D58; --c-warn:#D99535; --c-danger:#B94A36; --c-icon:#CDBD82; --c-grid:rgba(172,154,91,.12); --c-overlay:rgba(4,5,4,.50);
}
.shell.palette-cryptic.mode-light {
  --c-bg:#CEC3A3; --c-app:rgba(222,214,190,.92); --c-panel:rgba(198,185,146,.82); --c-surface:rgba(160,142,95,.58);
  --c-border:rgba(83,70,37,.24); --c-border-hi:rgba(132,101,35,.60);
  --c-text:#241E12; --c-muted:#65563A; --c-accent:#846523; --c-accent-dim:rgba(132,101,35,.18); --c-accent-glow:rgba(132,101,35,.22);
  --c-ready:#5D7C42; --c-warn:#A4661D; --c-danger:#913A30; --c-icon:#6A5425; --c-grid:rgba(83,70,37,.10); --c-overlay:rgba(232,224,202,.14);
}
.shell.palette-woodland.mode-dark {
  --c-bg:#050604; --c-app:rgba(6,8,5,.88); --c-panel:rgba(13,17,9,.86); --c-surface:rgba(24,31,15,.78);
  --c-border:rgba(145,132,82,.30); --c-border-hi:rgba(206,188,105,.76);
  --c-text:#E7E1C2; --c-muted:#B5AA78; --c-accent:#CEBC69; --c-accent-dim:rgba(206,188,105,.25); --c-accent-glow:rgba(206,188,105,.36);
  --c-ready:#7F9D58; --c-warn:#D79534; --c-danger:#B94A36; --c-icon:#C7BA82; --c-grid:rgba(145,132,82,.12); --c-overlay:rgba(4,5,3,.52);
}
.shell.palette-woodland.mode-light {
  --c-bg:#C7C09C; --c-app:rgba(218,213,185,.92); --c-panel:rgba(190,181,137,.82); --c-surface:rgba(154,140,90,.60);
  --c-border:rgba(70,61,36,.24); --c-border-hi:rgba(113,89,34,.58);
  --c-text:#211D12; --c-muted:#5D5438; --c-accent:#715922; --c-accent-dim:rgba(113,89,34,.18); --c-accent-glow:rgba(113,89,34,.22);
  --c-ready:#55783F; --c-warn:#9B6420; --c-danger:#8F382E; --c-icon:#59471E; --c-grid:rgba(70,61,36,.10); --c-overlay:rgba(226,221,193,.14);
}
.shell.palette-atacs.mode-dark {
  --c-bg:#050706; --c-app:rgba(6,8,6,.88); --c-panel:rgba(13,16,11,.86); --c-surface:rgba(25,29,19,.78);
  --c-border:rgba(143,151,103,.28); --c-border-hi:rgba(190,197,134,.72);
  --c-text:#E1E0C8; --c-muted:#AEB191; --c-accent:#BFC784; --c-accent-dim:rgba(191,199,132,.24); --c-accent-glow:rgba(191,199,132,.34);
  --c-ready:#7F9D62; --c-warn:#D19A43; --c-danger:#B94A36; --c-icon:#C5C69A; --c-grid:rgba(143,151,103,.11); --c-overlay:rgba(4,6,4,.44);
}
.shell.palette-atacs.mode-light {
  --c-bg:#C8CCB1; --c-app:rgba(219,223,202,.92); --c-panel:rgba(193,199,166,.82); --c-surface:rgba(157,168,128,.60);
  --c-border:rgba(65,74,52,.24); --c-border-hi:rgba(91,105,67,.58);
  --c-text:#1D2218; --c-muted:#56604A; --c-accent:#5B6943; --c-accent-dim:rgba(91,105,67,.18); --c-accent-glow:rgba(91,105,67,.22);
  --c-ready:#5C7E4A; --c-warn:#986C25; --c-danger:#913B31; --c-icon:#4F5D3B; --c-grid:rgba(65,74,52,.10); --c-overlay:rgba(226,230,210,.14);
}
.shell.palette-urban-digital.mode-dark {
  --c-bg:#050709; --c-app:rgba(6,9,11,.90); --c-panel:rgba(11,16,19,.86); --c-surface:rgba(21,30,36,.78);
  --c-border:rgba(103,137,158,.28); --c-border-hi:rgba(142,188,218,.76);
  --c-text:#E0E8EA; --c-muted:#A4BAC4; --c-accent:#8ABCD8; --c-accent-dim:rgba(138,188,216,.24); --c-accent-glow:rgba(138,188,216,.36);
  --c-ready:#6FA36C; --c-warn:#D8A43A; --c-danger:#C24C44; --c-icon:#B7D2DE; --c-grid:rgba(103,137,158,.11); --c-overlay:rgba(3,6,8,.50);
}
.shell.palette-urban-digital.mode-light {
  --c-bg:#CFD8DC; --c-app:rgba(224,232,236,.92); --c-panel:rgba(199,213,220,.82); --c-surface:rgba(172,193,204,.62);
  --c-border:rgba(55,78,92,.24); --c-border-hi:rgba(70,121,150,.60);
  --c-text:#172229; --c-muted:#546975; --c-accent:#467996; --c-accent-dim:rgba(70,121,150,.18); --c-accent-glow:rgba(70,121,150,.22);
  --c-ready:#4E7F54; --c-warn:#A36F1F; --c-danger:#993C37; --c-icon:#3E6D86; --c-grid:rgba(55,78,92,.10); --c-overlay:rgba(230,238,242,.14);
}
.shell.palette-snow.mode-dark {
  --c-bg:#07090A; --c-app:rgba(7,9,10,.88); --c-panel:rgba(14,17,18,.86); --c-surface:rgba(28,34,36,.76);
  --c-border:rgba(158,176,184,.28); --c-border-hi:rgba(218,232,236,.72);
  --c-text:#EDF2F2; --c-muted:#B8C7CA; --c-accent:#D8E6EA; --c-accent-dim:rgba(216,230,234,.20); --c-accent-glow:rgba(216,230,234,.30);
  --c-ready:#7FA86E; --c-warn:#D6A23A; --c-danger:#C34C43; --c-icon:#D6E2E5; --c-grid:rgba(158,176,184,.10); --c-overlay:rgba(5,7,8,.36);
}
.shell.palette-snow.mode-light {
  --c-bg:#E0E4E3; --c-app:rgba(236,240,239,.94); --c-panel:rgba(214,222,222,.84); --c-surface:rgba(190,204,205,.64);
  --c-border:rgba(75,91,96,.22); --c-border-hi:rgba(89,121,130,.54);
  --c-text:#182024; --c-muted:#5B6A70; --c-accent:#597982; --c-accent-dim:rgba(89,121,130,.16); --c-accent-glow:rgba(89,121,130,.20);
  --c-ready:#527C50; --c-warn:#9E711F; --c-danger:#963B35; --c-icon:#4B6A72; --c-grid:rgba(75,91,96,.09); --c-overlay:rgba(245,248,248,.14);
}
.shell.palette-black-ops.mode-dark {
  --c-bg:#030303; --c-app:rgba(5,5,5,.92); --c-panel:rgba(11,11,10,.88); --c-surface:rgba(22,21,17,.78);
  --c-border:rgba(132,118,74,.28); --c-border-hi:rgba(230,199,94,.80);
  --c-text:#E8E4D3; --c-muted:#AAA18A; --c-accent:#E6C75E; --c-accent-dim:rgba(230,199,94,.24); --c-accent-glow:rgba(230,199,94,.38);
  --c-ready:#74A866; --c-warn:#D89632; --c-danger:#C54B3F; --c-icon:#D8C98B; --c-grid:rgba(132,118,74,.10); --c-overlay:rgba(0,0,0,.56);
}
.shell.palette-black-ops.mode-light {
  --c-bg:#BDB9AA; --c-app:rgba(210,207,195,.92); --c-panel:rgba(184,179,160,.82); --c-surface:rgba(145,137,112,.60);
  --c-border:rgba(49,45,35,.24); --c-border-hi:rgba(114,86,24,.62);
  --c-text:#15130E; --c-muted:#514B3D; --c-accent:#725618; --c-accent-dim:rgba(114,86,24,.18); --c-accent-glow:rgba(114,86,24,.22);
  --c-ready:#4F7947; --c-warn:#98651B; --c-danger:#94372F; --c-icon:#4B3B17; --c-grid:rgba(49,45,35,.10); --c-overlay:rgba(216,213,202,.14);
}
.shell.palette-tropic.mode-dark {
  --c-bg:#030704; --c-app:rgba(4,9,5,.90); --c-panel:rgba(8,18,10,.86); --c-surface:rgba(15,34,18,.78);
  --c-border:rgba(78,135,70,.30); --c-border-hi:rgba(126,204,107,.76);
  --c-text:#DCE8C8; --c-muted:#9BB584; --c-accent:#7ECC6B; --c-accent-dim:rgba(126,204,107,.24); --c-accent-glow:rgba(126,204,107,.34);
  --c-ready:#83C16C; --c-warn:#D2A043; --c-danger:#C14A3C; --c-icon:#B4D99D; --c-grid:rgba(78,135,70,.12); --c-overlay:rgba(3,7,4,.48);
}
.shell.palette-tropic.mode-light {
  --c-bg:#BFD0AA; --c-app:rgba(211,225,196,.92); --c-panel:rgba(181,205,158,.82); --c-surface:rgba(137,176,114,.60);
  --c-border:rgba(45,83,39,.24); --c-border-hi:rgba(61,124,50,.58);
  --c-text:#122313; --c-muted:#4D6844; --c-accent:#3D7C32; --c-accent-dim:rgba(61,124,50,.18); --c-accent-glow:rgba(61,124,50,.22);
  --c-ready:#4C833E; --c-warn:#936D21; --c-danger:#94382F; --c-icon:#376D2F; --c-grid:rgba(45,83,39,.10); --c-overlay:rgba(220,234,206,.14);
}
.shell.palette-multicam.mode-dark {
  --c-bg:#070806; --c-app:rgba(8,9,7,.88); --c-panel:rgba(18,19,13,.86); --c-surface:rgba(34,35,22,.78);
  --c-border:rgba(160,150,102,.28); --c-border-hi:rgba(220,204,129,.74);
  --c-text:#E7E0C2; --c-muted:#B8AD82; --c-accent:#DCCA81; --c-accent-dim:rgba(220,202,129,.24); --c-accent-glow:rgba(220,202,129,.34);
  --c-ready:#86A263; --c-warn:#D7983A; --c-danger:#B94A36; --c-icon:#D0C690; --c-grid:rgba(160,150,102,.11); --c-overlay:rgba(5,6,4,.46);
}
.shell.palette-multicam.mode-light {
  --c-bg:#CEC7A9; --c-app:rgba(222,217,195,.92); --c-panel:rgba(197,190,154,.82); --c-surface:rgba(158,150,106,.60);
  --c-border:rgba(75,69,45,.24); --c-border-hi:rgba(111,97,45,.58);
  --c-text:#211F14; --c-muted:#5D563C; --c-accent:#6F612D; --c-accent-dim:rgba(111,97,45,.18); --c-accent-glow:rgba(111,97,45,.22);
  --c-ready:#5C7848; --c-warn:#9B6520; --c-danger:#903A30; --c-icon:#5C5129; --c-grid:rgba(75,69,45,.10); --c-overlay:rgba(228,223,201,.14);
}
.shell.palette-hunter-autumn.mode-dark {
  --c-bg:#080604; --c-app:rgba(10,7,4,.90); --c-panel:rgba(20,13,7,.86); --c-surface:rgba(38,25,12,.78);
  --c-border:rgba(159,111,61,.28); --c-border-hi:rgba(218,143,62,.76);
  --c-text:#E8D8BA; --c-muted:#B99A70; --c-accent:#D08A3A; --c-accent-dim:rgba(208,138,58,.24); --c-accent-glow:rgba(208,138,58,.34);
  --c-ready:#778B4E; --c-warn:#D08A3A; --c-danger:#A94432; --c-icon:#D1AD77; --c-grid:rgba(159,111,61,.10); --c-overlay:rgba(6,4,2,.46);
}
.shell.palette-hunter-autumn.mode-light {
  --c-bg:#D0B98F; --c-app:rgba(224,204,170,.92); --c-panel:rgba(198,165,118,.82); --c-surface:rgba(159,115,68,.56);
  --c-border:rgba(82,52,25,.24); --c-border-hi:rgba(130,72,25,.60);
  --c-text:#26180D; --c-muted:#63452B; --c-accent:#824819; --c-accent-dim:rgba(130,72,25,.18); --c-accent-glow:rgba(130,72,25,.22);
  --c-ready:#5E7040; --c-warn:#9D5D1D; --c-danger:#8E352B; --c-icon:#65411C; --c-grid:rgba(82,52,25,.10); --c-overlay:rgba(232,212,181,.14);
}
.shell.palette-command-neutral.mode-dark {
  --c-bg:#050605; --c-app:rgba(7,8,7,.92); --c-panel:rgba(13,15,13,.88); --c-surface:rgba(25,28,24,.78);
  --c-border:rgba(126,132,112,.24); --c-border-hi:rgba(184,190,158,.66);
  --c-text:#E2E2D3; --c-muted:#A9AD96; --c-accent:#B8BE9E; --c-accent-dim:rgba(184,190,158,.20); --c-accent-glow:rgba(184,190,158,.28);
  --c-ready:#6F9360; --c-warn:#C88D31; --c-danger:#B04438; --c-icon:#C1C4A8; --c-grid:rgba(126,132,112,.09); --c-overlay:rgba(0,0,0,.42);
}
.shell.palette-command-neutral.mode-light {
  --c-bg:#D2D2C4; --c-app:rgba(230,230,218,.92); --c-panel:rgba(204,205,190,.82); --c-surface:rgba(172,174,154,.58);
  --c-border:rgba(62,66,54,.22); --c-border-hi:rgba(93,100,76,.56);
  --c-text:#1C1E18; --c-muted:#5A5F50; --c-accent:#5D644C; --c-accent-dim:rgba(93,100,76,.16); --c-accent-glow:rgba(93,100,76,.20);
  --c-ready:#517745; --c-warn:#956821; --c-danger:#8F382F; --c-icon:#505844; --c-grid:rgba(62,66,54,.09); --c-overlay:rgba(235,235,224,.12);
}

/* ── GRID MODES — theme-unabhängig ──────────────────────────────── */
.shell.grid-off      .main::before { display: none; }
.shell.grid-soft     .main::before { opacity: 0.35; }
.shell.grid-tactical .main::before { opacity: 1; }
.shell.grid-edit     .main::before { opacity: 1; background-size: 34px 34px; }

html, body {
  background: #000;
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--font-ui);
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── SHELL ─────────────────────────────────────────────────────── */
.shell {
  width: 1597px;
  height: 987px;
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr var(--w-rail);
  grid-template-rows: var(--h-topbar) 1fr var(--h-footer);
  background: var(--c-app);
  border: 1px solid var(--c-border-hi);
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.06),
    0 40px 80px rgba(0,0,0,0.9),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  position: relative;
}

/* subtle scanline overlay on whole shell */
.shell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
  pointer-events: none;
  z-index: 10;
}

.rotate-phone-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 34px;
  background:
    radial-gradient(circle at 50% 20%, rgba(184,190,158,0.14), transparent 377px),
    rgba(0,0,0,0.86);
  color: var(--c-text);
  text-align: center;
}

.rotate-phone-card {
  width: min(377px, calc(100vw - 42px));
  min-height: 233px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 1px solid var(--c-border-hi);
  border-radius: 8px;
  background: var(--c-panel);
  box-shadow: var(--shadow-panel);
  padding: 34px;
}

.rotate-phone-icon {
  width: 55px;
  height: 89px;
  border: 2px solid var(--c-accent);
  border-radius: 13px;
  position: relative;
  box-shadow: var(--glow-accent);
  transform: rotate(-90deg);
}

.rotate-phone-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent);
  transform: translateX(-50%);
}

.rotate-phone-title {
  font-family: var(--f-display);
  font-size: var(--font-display-21);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rotate-phone-copy {
  max-width: 233px;
  font-family: var(--f-mono);
  font-size: var(--font-mono-13);
  line-height: 1.35;
  color: var(--c-muted);
}

@media (max-width: 760px) and (orientation: portrait) {
  .rotate-phone-hint {
    display: flex;
  }
}

/* ── TOPBAR ────────────────────────────────────────────────────── */
.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 610px 987px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-app);
  position: relative;
  z-index: 5;
}

/* Theme-Kachel */
.theme-tile-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 13px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-icon, var(--c-muted));
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-tile);
}
.theme-tile-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  box-shadow: var(--glow-accent);
}
.sidebar-free .theme-tile-btn {
  width: calc(100% - 42px);
  margin: 0 21px 13px;
}

/* brand / logo left */
.topbar-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 21px;
  border-right: 1px solid var(--c-border);
  padding: 0 34px;
  background: linear-gradient(90deg, rgba(59,130,246,0.08), rgba(59,130,246,0.03), transparent);
}

.logo-icon {
  width: 89px;
  height: 89px;
  border: 1px solid var(--c-border-hi);
  border-radius: 4px;
  background: var(--c-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-tile), inset 0 1px 0 rgba(255,255,255,0.06);
  color: var(--c-accent);
  flex-shrink: 0;
}

.logo-text-block {
  width: 377px;
  height: 89px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0 21px;
  box-shadow: var(--shadow-tile), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}

.logo-title {
  font-family: var(--f-display);
  font-size: var(--font-display-21);
  letter-spacing: 2px;
  color: var(--c-text);
  text-transform: uppercase;
}

.logo-tagline {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 3px;
  color: var(--c-muted);
  text-transform: uppercase;
}

.logo-dots {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
}

.logo-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-border-hi);
}

.logo-dot.on { background: var(--c-accent); box-shadow: 0 0 6px var(--c-accent); }

/* quick access — 3-row column */
.topbar-quick {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 8px 13px;
}

/* row 1: input + action icons */
.topbar-input-row {
  display: flex;
  align-items: center;
  height: 34px;
  gap: 6px;
}

/* row 2: 4 main nav tiles */
.topbar-nav-row {
  display: flex;
  align-items: stretch;
  height: 55px;
  gap: 6px;
}


/* command input */
.cmd-wrap {
  flex: 1;
  position: relative;
}

.cmd-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
  display: flex;
}

.cmd-input {
  width: 100%;
  height: 34px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: var(--font-mono-13);
  letter-spacing: 1px;
  padding: 0 13px 0 32px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cmd-input::placeholder {
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: var(--font-mono-8);
}

.cmd-input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}

/* small icon buttons (34×34) */
.btn-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-icon, var(--c-muted));
  cursor: pointer;
  box-shadow: var(--shadow-tile);
  transition: all 0.14s;
  position: relative;
}

.btn-icon:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  box-shadow: var(--glow-accent);
}

.btn-icon.has-notif::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--c-danger);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(239,68,68,0.6);
}

/* send button (34px tall × 55px wide) */
.btn-send {
  width: 55px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.5), 0 2px 10px rgba(59,130,246,0.35);
  transition: all 0.14s;
}

.btn-send:hover {
  background: #2563eb;
  box-shadow: 0 0 0 1px rgba(59,130,246,0.7), 0 4px 16px rgba(59,130,246,0.5);
}

/* nav tiles in topbar (55px tall, flex-grow) */
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-icon, var(--c-muted));
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--f-display);
  font-size: var(--font-display-8);
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: var(--shadow-tile);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.nav-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}

.nav-item:hover {
  border-color: var(--c-accent);
  color: var(--c-text);
  box-shadow: var(--glow-accent);
  transform: translateY(-1px);
}

.nav-item.is-active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-dim);
  box-shadow: var(--glow-accent);
}

/* ── SIDEBAR ───────────────────────────────────────────────────── */
.sidebar {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: var(--sidebar-left-margin) var(--sidebar-slot-w) var(--sidebar-right-margin);
  grid-template-rows: 89px 13px repeat(7, 55px 13px) 1fr;
  border-right: 1px solid var(--c-border);
  background: var(--c-app);
  overflow: hidden;
}

/* rotation ticker */
.rotator {
  grid-column: 1 / -1;
  grid-row: 1;
  height: var(--h-rotate);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px;
  background: linear-gradient(180deg, rgba(59,130,246,0.05) 0%, transparent 100%);
  cursor: default;
  position: relative;
  overflow: hidden;
}

.rotator::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
  opacity: 0.4;
}

.rotator-badge {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 2px;
  color: var(--c-accent);
  text-transform: uppercase;
  opacity: 0.8;
}

.rotator-value {
  font-family: var(--f-display);
  font-size: var(--font-display-13);
  letter-spacing: 2px;
  color: var(--c-text);
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(59,130,246,0.3);
}

.rotator-sub {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  color: var(--c-muted);
  text-align: center;
  letter-spacing: 1px;
}

.rotator-countdown {
  font-family: var(--f-display);
  font-size: var(--font-display-8);
  color: var(--c-warn);
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(245,158,11,0.4);
}

/* tiles grid */
.tiles {
  grid-column: 2;
  grid-row: 3 / 16;
  height: auto;
  padding: 0;
  display: grid;
  grid-template-columns: var(--sidebar-slot-w);
  grid-template-rows: repeat(7, 55px);
  gap: 13px;
  align-content: start;
  border-bottom: 0;
  overflow: hidden;
}

.tile {
  width: var(--sidebar-slot-w);
  height: 55px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0 10px;
  gap: 8px;
  background: var(--c-panel);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: var(--shadow-tile);
  transition: all 0.14s ease;
  color: var(--c-icon, var(--c-muted));
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.tiles .tile:nth-child(odd),
.tiles .tile:nth-child(even) { justify-content: flex-start; padding: 0 8px; }

.tiles .tile .icon { width: 21px; height: 21px; }

.tiles .tile .tile-label { display: block; }

.tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}

.tile:hover {
  border-color: var(--c-accent);
  color: var(--c-text);
  background: rgba(59,130,246,0.05);
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.35),
    0 8px 20px rgba(0,0,0,0.6),
    0 0 14px rgba(59,130,246,0.1);
  transform: translateY(-2px) scale(1.05);
}

.tile.is-active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-dim);
  box-shadow:
    0 0 0 1px rgba(59,130,246,0.4),
    0 0 20px rgba(59,130,246,0.12);
}

.tile.is-empty,
.rail-btn.is-empty,
.main-frame-left-btn.is-empty {
  pointer-events: none;
  cursor: default;
  opacity: 0.34;
  color: var(--c-border);
  background: color-mix(in srgb, var(--c-panel), transparent 62%);
  box-shadow: none;
}

.tile-label {
  font-family: var(--f-display);
  font-size: var(--font-display-8);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: left;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* badge on tile */
.tile-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 13px;
  height: 13px;
  background: var(--c-danger);
  border-radius: 13px;
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  box-shadow: 0 0 6px rgba(239,68,68,0.5);
}

.tile-badge.warn {
  background: var(--c-warn);
  box-shadow: 0 0 6px rgba(245,158,11,0.5);
}

.sidebar-free {
  grid-column: 1 / -1;
  grid-row: 16;
}

/* ── MAIN ──────────────────────────────────────────────────────── */
.main {
  grid-column: 2;
  grid-row: 2;
  background: var(--c-bg);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns:
    var(--main-frame-left-margin)
    var(--main-sisterbar)
    var(--main-content-w)
    var(--main-right-margin);
  grid-template-rows:
    var(--main-frame-top-margin)
    var(--main-sisterbar)
    var(--main-content-h)
    var(--main-bottom-margin);
}

/* subtle grid bg — nutzt --c-grid aus dem aktiven Theme */
.main::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--c-grid, rgba(35,37,41,0.4)) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-grid, rgba(35,37,41,0.4)) 1px, transparent 1px);
  background-size: 21px 21px;
  pointer-events: none;
}

.main-frame {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-columns:
    var(--main-frame-left-margin)
    var(--main-sisterbar)
    var(--main-content-w)
    var(--main-right-margin);
  grid-template-rows:
    var(--main-frame-top-margin)
    var(--main-sisterbar)
    var(--main-content-h)
    var(--main-bottom-margin);
  min-width: 0;
  min-height: 0;
}

.main-frame-corner {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-panel), transparent 45%);
  box-shadow: var(--shadow-tile), inset 0 1px 0 rgba(255,255,255,0.04);
}

.main-frame-top {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-panel), transparent 36%);
  box-shadow: var(--shadow-tile), inset 0 1px 0 rgba(255,255,255,0.04);
  display: grid;
  grid-template-columns: minmax(0, 233px) minmax(0, 1fr) minmax(0, 377px);
  align-items: center;
  gap: 13px;
  padding: 0 21px;
  overflow: hidden;
}

.main-frame-left {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-panel), transparent 36%);
  box-shadow: var(--shadow-tile), inset 0 1px 0 rgba(255,255,255,0.04);
  display: grid;
  grid-template-columns: 13px 144px 21px;
  grid-template-rows: 13px repeat(8, 55px 13px) 1fr;
  overflow: hidden;
}

.main-frame-content {
  grid-column: 3;
  grid-row: 3;
  width: var(--main-content-w);
  height: var(--main-content-h);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.main-frame-kicker,
.main-frame-meta,
.main-frame-left-rail {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1.5px;
  color: var(--c-muted);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-frame-title {
  min-width: 0;
  font-family: var(--f-display);
  font-size: var(--font-display-21);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--c-text);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-frame-meta {
  text-align: right;
}

.main-frame-left-mark {
  width: 55px;
  height: 55px;
  border: 1px solid var(--c-border-hi);
  border-radius: 8px;
  color: var(--c-accent);
  background: var(--c-accent-dim);
  box-shadow: var(--shadow-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: var(--font-display-13);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.main-frame-left-rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  max-height: 377px;
  text-align: center;
}

.main-frame-left-nav {
  grid-column: 2;
  grid-row: 2 / 17;
  display: grid;
  grid-template-columns: 144px;
  grid-auto-rows: 55px;
  gap: 13px;
  align-content: start;
  min-width: 0;
  min-height: 0;
}

.main-frame-left-btn {
  width: 144px;
  height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  color: var(--c-icon, var(--c-muted));
  background: var(--c-panel);
  box-shadow: var(--shadow-tile);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  padding: 0 13px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.14s ease;
}

.main-frame-left-btn:hover,
.main-frame-left-btn.is-active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-dim);
  box-shadow: var(--glow-accent);
}

.main-frame-left-btn .icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.main-frame-left-btn-label {
  min-width: 0;
  display: block;
  font-family: var(--f-display);
  font-size: var(--font-display-8);
  letter-spacing: 0.4px;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-placeholder {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  text-align: center;
}

.main-placeholder-icon {
  width: 89px;
  height: 89px;
  border: 1px solid var(--c-border-hi);
  border-radius: 8px;
  background: var(--c-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-border-hi);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,0.04);
}

.main-placeholder-title {
  font-family: var(--f-display);
  font-size: var(--font-display-21);
  letter-spacing: 6px;
  color: var(--c-border-hi);
  text-transform: uppercase;
}

.main-placeholder-sub {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 2px;
  color: var(--c-border);
  text-transform: uppercase;
}

/* ── RIGHT RAIL ────────────────────────────────────────────────── */
.rail {
  grid-column: 3;
  grid-row: 2;
  border-left: 1px solid var(--c-border);
  background: var(--c-app);
  display: grid;
  grid-template-columns: var(--rail-left-margin) var(--rail-slot) var(--rail-right-margin);
  grid-template-rows: 55px repeat(5, 89px 13px) 89px 1fr;
  padding: 0;
  overflow: hidden;
}

.rail-btn {
  grid-column: 2;
  width: var(--rail-slot);
  height: 89px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-panel);
  color: var(--c-icon, var(--c-muted));
  cursor: pointer;
  box-shadow: var(--shadow-tile);
  transition: all 0.14s;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.rail-btn:nth-child(1) { grid-row: 2; }
.rail-btn:nth-child(2) { grid-row: 4; }
.rail-btn:nth-child(3) { grid-row: 6; }
.rail-btn:nth-child(4) { grid-row: 8; }
.rail-btn:nth-child(5) { grid-row: 10; }
.rail-btn:nth-child(6) { grid-row: 12; }

.rail-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
}

.rail-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  box-shadow: var(--glow-accent);
}

/* theme-switcher rail buttons */
.rail-btn[data-theme] { transition: all 0.2s ease; }

.rail-btn[data-theme="woodland"] {
  color: #7A9845;
  border-color: rgba(140,174,48,0.45);
}
.rail-btn[data-theme="woodland"]:hover,
.rail-btn[data-theme="woodland"].is-active {
  color: #8CAE30;
  border-color: rgba(140,174,48,0.8);
  background: rgba(140,174,48,0.1);
  box-shadow: 0 0 0 1px rgba(140,174,48,0.55), 0 0 20px rgba(140,174,48,0.22);
  transform: none;
}

.rail-btn[data-theme="desert"] {
  color: #8C6E38;
  border-color: rgba(140,110,56,0.4);
}
.rail-btn[data-theme="desert"]:hover,
.rail-btn[data-theme="desert"].is-active {
  color: #B09048;
  border-color: rgba(176,144,72,0.7);
  background: rgba(176,144,72,0.08);
  box-shadow: 0 0 0 1px rgba(176,144,72,0.45), 0 0 20px rgba(176,144,72,0.18);
  transform: none;
}

.rail-btn[data-theme="tropical"] {
  color: #3A7822;
  border-color: rgba(58,120,34,0.4);
}
.rail-btn[data-theme="tropical"]:hover,
.rail-btn[data-theme="tropical"].is-active {
  color: #4EA82C;
  border-color: rgba(78,168,44,0.7);
  background: rgba(78,168,44,0.08);
  box-shadow: 0 0 0 1px rgba(78,168,44,0.45), 0 0 20px rgba(78,168,44,0.18);
  transform: none;
}

.rail-separator {
  width: 34px;
  height: 1px;
  background: var(--c-border);
  margin: 4px 0;
}

/* cycle-button variant — taller to fit label */
.rail-btn.rail-cycle {
  height: 89px;
  flex-direction: column;
  gap: 6px;
  transition: color 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, box-shadow 0.25s ease;
}

.rail-cycle-label {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  color: inherit;
}

.rail-btn.is-active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-dim);
  box-shadow: var(--glow-accent);
}

.rail-label {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  border: 0;
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-btn .icon {
  width: 21px;
  height: 21px;
}

.main-context {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  overflow: hidden;
}

.main-path {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 2px;
  color: var(--c-muted);
  text-transform: uppercase;
}

.main-placeholder-detail {
  max-width: 610px;
  font-family: var(--f-body);
  font-size: var(--font-body-13);
  line-height: 1.45;
  color: var(--c-muted);
}

.style-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: rgba(0,0,0,0.22);
  box-shadow: var(--shadow-panel), inset 0 1px 0 rgba(255,255,255,0.04);
  padding: 13px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 13px;
}

.style-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  min-height: 55px;
  margin-bottom: 0;
}

.style-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 2px;
  color: var(--c-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.style-title {
  font-family: var(--f-display);
  font-size: var(--font-display-21);
  letter-spacing: 4px;
  color: var(--c-text);
  text-transform: uppercase;
}

.style-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.style-save,
.style-reset {
  height: 34px;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  background: var(--c-panel);
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 0 13px;
  cursor: pointer;
  box-shadow: var(--shadow-tile);
}

.style-save {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-dim);
}

.style-grid {
  display: grid;
  grid-template-columns: 1fr 377px;
  gap: 21px;
  align-items: start;
}

.style-matrix {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(34px, auto);
  gap: 13px;
  overflow: hidden;
}

.style-matrix-block {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.style-matrix-title {
  height: 21px;
  display: flex;
  align-items: center;
  font-family: var(--f-display);
  font-size: var(--font-display-8);
  letter-spacing: 2px;
  color: var(--c-muted);
  text-transform: uppercase;
}

.style-matrix-row {
  height: 55px;
  display: grid;
  grid-template-columns: 89px minmax(0, 1fr) 89px;
  gap: 8px;
  min-width: 0;
}

.style-set-switch {
  width: 89px;
  height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-muted);
  display: grid;
  grid-template-rows: 13px 1fr 13px;
  align-items: center;
  justify-items: center;
  padding: 4px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: var(--shadow-tile);
}

.style-set-switch:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-dim);
  box-shadow: var(--glow-accent);
}

.style-set-switch span,
.style-set-switch em {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-style: normal;
}

.style-set-switch strong {
  width: 100%;
  font-family: var(--f-body);
  font-size: var(--font-body-8);
  line-height: 1;
  color: var(--c-text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-choice-grid-matrix {
  min-width: 0;
  justify-content: start;
}

.style-choice-grid-matrix.is-background {
  grid-template-columns: repeat(8, 89px);
}

.style-choice-grid-matrix.is-palette {
  grid-template-columns: repeat(8, 55px);
}

.style-choice-grid-matrix .style-choice,
.style-choice-empty {
  min-height: 55px;
  height: 55px;
}

.style-choice-grid-matrix.is-background .style-choice {
  padding: 5px;
}

.style-choice-grid-matrix.is-background .style-choice-label,
.style-choice-grid-matrix.is-palette .style-choice-label {
  display: none;
}

.style-choice-grid-matrix.is-palette .style-choice {
  justify-content: center;
  padding: 5px;
}

.style-choice-empty {
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 4px;
  background: rgba(0,0,0,0.08);
}

.style-row-control {
  min-width: 0;
  height: 55px;
  display: flex;
  align-items: stretch;
}

.style-opacity-stepper {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 13px 34px;
  gap: 8px;
}

.style-opacity-stepper > span {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  line-height: 1;
  letter-spacing: 1px;
  color: var(--c-muted);
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.style-stepper-buttons {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr) 21px;
  gap: 3px;
}

.style-stepper-btn,
.style-stepper-value {
  height: 34px;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 0;
  box-shadow: var(--shadow-tile);
}

.style-stepper-btn {
  cursor: pointer;
}

.style-stepper-value {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: var(--c-accent-dim);
}

.style-stepper-value::after {
  content: '%';
  opacity: .72;
  margin-left: 1px;
}

.style-stepper-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  box-shadow: var(--glow-accent);
}

.style-matrix-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  align-items: end;
}

.style-font-matrix {
  display: grid;
  grid-template-columns: 89px 233px minmax(0, 1fr) 233px;
  grid-template-rows: 55px;
  gap: 8px;
  min-height: 89px;
  min-width: 0;
}

.style-section {
  margin-bottom: 21px;
}

.style-section-title {
  font-family: var(--f-display);
  font-size: var(--font-display-8);
  letter-spacing: 2px;
  color: var(--c-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.style-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(89px, 1fr));
  gap: 8px;
}

.style-choice-set {
  display: grid;
  gap: 8px;
  margin-bottom: 13px;
}

.style-choice-set:last-child {
  margin-bottom: 0;
}

.style-choice-set-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  min-height: 21px;
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1.5px;
  color: var(--c-muted);
  text-transform: uppercase;
}

.style-choice-set-count {
  color: var(--c-accent);
}

.style-choice {
  min-height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-muted);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-tile);
  text-align: left;
  overflow: hidden;
  position: relative;
  transition: all 0.14s ease;
}

.style-choice:hover,
.style-choice.is-active {
  border-color: var(--c-accent);
  color: var(--c-text);
  box-shadow: var(--glow-accent);
}

.background-choice {
  min-height: 55px;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.background-choice::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.72));
  z-index: 0;
  pointer-events: none;
}

.style-swatch {
  width: 21px;
  height: 21px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.18);
  flex-shrink: 0;
}

.palette-swatches {
  display: grid;
  grid-template-columns: repeat(4, 13px);
  gap: 3px;
  flex-shrink: 0;
}

.palette-swatch {
  width: 13px;
  height: 13px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.18);
}

.style-choice-label {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-language-select {
  height: 34px;
  min-width: 144px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 8px;
}

.style-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, 55px);
  height: 34px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
  background: var(--c-panel);
  box-shadow: var(--shadow-tile);
}

.style-row-control .style-mode-toggle {
  width: 100%;
  height: 55px;
  align-self: end;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.style-mode-btn {
  border: 0;
  border-right: 1px solid var(--c-border);
  background: transparent;
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.style-mode-btn:last-child {
  border-right: 0;
}

.style-mode-btn:hover,
.style-mode-btn.is-active {
  background: var(--c-accent-dim);
  color: var(--c-accent);
}

.style-layer-controls {
  display: grid;
  gap: 8px;
  margin-bottom: 13px;
}

.style-layer-row {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 8px;
  align-items: center;
}

.style-layer-label {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  color: var(--c-muted);
  text-transform: uppercase;
}

.style-opacity-toggle {
  display: grid;
  grid-template-columns: repeat(6, minmax(34px, 1fr));
  gap: 8px;
}

.style-opacity-btn {
  height: 34px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: var(--shadow-tile);
}

.style-opacity-btn::after {
  content: '%';
  opacity: .7;
}

.style-opacity-btn:hover,
.style-opacity-btn.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent-dim);
  color: var(--c-accent);
  box-shadow: var(--glow-accent);
}

.font-role-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

.font-role-btn {
  height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-muted);
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-tile);
}

.font-role-btn:hover,
.font-role-btn.is-active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-accent-dim);
  box-shadow: var(--glow-accent);
}

.font-preview {
  border: 1px solid var(--c-border-hi);
  border-radius: 4px;
  background: var(--c-panel);
  padding: 5px;
  margin-bottom: 0;
  box-shadow: var(--shadow-panel);
  grid-column: 4;
  grid-row: 1;
  min-height: 55px;
  height: 55px;
  overflow: hidden;
}

.font-preview-active {
  display: none;
  line-height: 1;
  color: var(--c-text);
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-preview-line {
  min-height: 10px;
  display: grid;
  grid-template-columns: 21px 34px minmax(0, 1fr);
  gap: 3px;
  align-items: center;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
}

.font-preview-step {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  color: var(--c-accent);
  letter-spacing: 1px;
}

.font-preview-text {
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-preview-meta {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  color: var(--c-muted);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-preview-display {
  font-family: var(--f-display);
  font-size: var(--font-display-13);
  letter-spacing: 1px;
  color: var(--c-text);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.font-preview-body {
  font-family: var(--f-body);
  font-size: var(--font-body-13);
  line-height: 1;
  color: var(--c-muted);
  margin-bottom: 8px;
}

.font-preview-mono {
  font-family: var(--f-mono);
  font-size: var(--font-mono-13);
  letter-spacing: 1px;
  color: var(--c-accent);
  text-transform: uppercase;
}

.font-choice-grid {
  display: grid;
  grid-template-columns: repeat(8, 55px);
  gap: 8px;
  justify-content: start;
}

.font-choice {
  min-height: 55px;
  height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  color: var(--c-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-tile);
  text-align: center;
  overflow: hidden;
}

.font-choice:hover,
.font-choice.is-active {
  border-color: var(--c-accent);
  color: var(--c-text);
  background: var(--c-accent-dim);
  box-shadow: var(--glow-accent);
}

.font-choice-label {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.72;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-choice-sample {
  font-size: var(--font-display-13);
  line-height: 1;
  font-weight: 400;
  color: var(--c-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-status {
  min-width: 89px;
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  color: var(--c-muted);
  text-transform: uppercase;
  text-align: right;
}

/* ── ROLE ICON TEST GRID ───────────────────────────────────────── */
.role-icon-test {
  width: min(610px, 100%);
  display: grid;
  gap: 21px;
}

.role-icon-test-head {
  display: grid;
  gap: 8px;
  text-align: left;
}

.role-icon-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 3px;
  color: var(--c-muted);
  text-transform: uppercase;
}

.role-icon-title {
  font-family: var(--f-display);
  font-size: var(--font-display-34);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--c-text);
  text-transform: uppercase;
}

.role-icon-copy {
  max-width: 377px;
  font-family: var(--f-mono);
  font-size: var(--font-mono-13);
  line-height: 1.6;
  color: var(--c-muted);
}

.role-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(89px, 1fr));
  gap: 13px;
}

.role-icon-card {
  min-height: 89px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 13px 8px;
  color: var(--c-accent);
  box-shadow: var(--shadow-tile);
  text-align: center;
}

.role-icon-card svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 5px var(--c-accent-glow));
}

.role-icon-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  color: var(--c-muted);
  text-transform: uppercase;
}

.inventory-context {
  align-items: stretch;
  justify-content: stretch;
  overflow: auto;
}

.equipment-inventory {
  width: 100%;
  display: grid;
  gap: 21px;
}

.inventory-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 21px;
  align-items: end;
}

.inventory-title {
  font-family: var(--f-display);
  font-size: var(--font-display-34);
  line-height: 1;
  color: var(--c-text);
  text-transform: uppercase;
}

.inventory-copy {
  max-width: 610px;
  margin-top: 8px;
  font-family: var(--f-content);
  font-size: var(--font-body-13);
  line-height: 1.45;
  color: var(--c-muted);
}

.inventory-stats {
  display: grid;
  grid-template-columns: repeat(3, 89px);
  gap: 8px;
}

.inventory-stat {
  min-height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
}

.inventory-stat strong,
.inventory-stat span {
  display: block;
}

.inventory-stat strong {
  font-family: var(--f-display);
  font-size: var(--font-display-21);
  color: var(--c-text);
  line-height: 1;
}

.inventory-stat span {
  margin-top: 5px;
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  color: var(--c-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.inventory-group {
  display: grid;
  gap: 8px;
}

.inventory-group-title {
  display: flex;
  justify-content: space-between;
  gap: 13px;
  color: var(--c-accent);
  font-family: var(--f-body);
  font-size: var(--font-body-21);
  font-weight: 800;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.inventory-card {
  min-height: 144px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 13px;
  display: grid;
  gap: 8px;
  overflow: hidden;
}

.inventory-card-title {
  font-family: var(--f-body);
  font-size: var(--font-body-13);
  font-weight: 800;
  color: var(--c-text);
  line-height: 1.2;
}

.inventory-card-meta,
.inventory-card-note {
  font-family: var(--f-content);
  font-size: var(--font-body-13);
  color: var(--c-muted);
  line-height: 1.35;
}

.inventory-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.inventory-chip {
  max-width: 100%;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 3px 8px;
  color: var(--c-accent);
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: .6px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-form,
.data-panel {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 13px;
  display: grid;
  gap: 13px;
}

.data-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.data-form-grid .is-wide {
  grid-column: 1 / -1;
}

.data-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.data-field label {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--c-muted);
}

.data-field input,
.data-field select,
.data-field textarea {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--c-panel), transparent 28%);
  color: var(--c-text);
  font-family: var(--f-content);
  font-size: var(--font-body-13);
  padding: 8px;
  outline: none;
}

.data-field textarea {
  min-height: 89px;
  resize: vertical;
}

.data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.data-button {
  min-height: 34px;
  border: 1px solid var(--c-border-hi);
  border-radius: 6px;
  padding: 0 13px;
  background: color-mix(in srgb, var(--c-accent), transparent 82%);
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: .8px;
  text-transform: uppercase;
  cursor: pointer;
}

.data-button.is-danger {
  border-color: var(--c-danger);
  color: var(--c-danger);
}

.data-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.data-status-line {
  font-family: var(--f-content);
  font-size: var(--font-body-13);
  color: var(--c-muted);
}

.event-list-grid {
  display: grid;
  grid-template-columns: minmax(233px, 377px) minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.event-list {
  display: grid;
  gap: 8px;
}

.event-row {
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 13px;
  display: grid;
  gap: 5px;
  text-align: left;
  background: color-mix(in srgb, var(--c-panel), transparent 42%);
  color: var(--c-text);
  cursor: pointer;
}

.event-row.is-active {
  border-color: var(--c-border-hi);
  box-shadow: 0 0 0 1px var(--c-accent-dim);
}

.event-row strong {
  font-family: var(--f-body);
  font-size: var(--font-body-13);
}

.event-row span {
  font-family: var(--f-content);
  font-size: var(--font-body-13);
  color: var(--c-muted);
}

.equipment-hub {
  gap: 13px;
}

.equipment-hub-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.equipment-hub-step {
  min-height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  color: var(--c-muted);
  background: color-mix(in srgb, var(--c-panel), transparent 44%);
}

.equipment-hub-step strong {
  width: 34px;
  height: 34px;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: var(--font-display-21);
  line-height: 1;
}

.equipment-hub-step span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: .8px;
  text-transform: uppercase;
}

.equipment-hub-step.is-active,
.equipment-hub-step.is-done {
  border-color: var(--c-border-hi);
  color: var(--c-text);
}

.equipment-hub-step.is-done strong {
  color: var(--c-accent);
}

.equipment-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 13px;
  align-items: start;
}

.equipment-hub-grid > div {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.equipment-hub-panel {
  min-width: 0;
}

.equipment-hub-list,
.equipment-hub-loadout-items {
  display: grid;
  gap: 8px;
}

.equipment-hub-list-item {
  min-height: 55px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 8px 13px;
  display: grid;
  gap: 5px;
  text-align: left;
  background: color-mix(in srgb, var(--c-panel), transparent 42%);
  color: var(--c-text);
  cursor: pointer;
}

.equipment-hub-list-item.is-active {
  border-color: var(--c-border-hi);
  box-shadow: 0 0 0 1px var(--c-accent-dim);
}

.equipment-hub-list-item strong,
.equipment-hub-list-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.equipment-hub-list-item strong {
  font-family: var(--f-body);
  font-size: var(--font-body-13);
}

.equipment-hub-list-item span {
  font-family: var(--f-content);
  font-size: var(--font-body-13);
  color: var(--c-muted);
}

.tactical-symbol-test .role-icon-test {
  width: min(987px, 100%);
}

.tactical-symbol-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 13px;
}

.tactical-symbol-card {
  min-height: 144px;
  border: 1px solid var(--c-border);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 89px 1fr;
  align-items: center;
  gap: 13px;
  padding: 13px;
  box-shadow: var(--shadow-tile);
}

.tactical-symbol-svg {
  width: 89px;
  height: 89px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  overflow: hidden;
}

.tactical-symbol-svg svg {
  max-width: 76px;
  max-height: 76px;
}

.tactical-symbol-meta {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.tactical-symbol-meta strong {
  font-family: var(--f-display);
  font-size: var(--font-display-13);
  color: var(--c-text);
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tactical-symbol-meta span,
.tactical-symbol-meta em,
.tactical-symbol-fallback {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  color: var(--c-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .role-icon-grid {
    grid-template-columns: repeat(2, minmax(89px, 1fr));
  }
  .tactical-symbol-grid {
    grid-template-columns: 1fr;
  }
}

/* ── FOOTER ────────────────────────────────────────────────────── */
.footer {
  grid-column: 1 / -1;
  grid-row: 3;
  border-top: 1px solid var(--c-border);
  background: var(--c-app);
  display: grid;
  grid-template-columns: var(--w-sidebar) 1fr var(--w-rail);
  align-items: center;
}

.footer-version {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--c-border);
  height: 100%;
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 2px;
  color: var(--c-border-hi);
  text-transform: uppercase;
}

.footer-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--f-display);
  font-size: var(--font-display-8);
  letter-spacing: 5px;
  color: var(--c-border-hi);
  text-transform: uppercase;
}

.footer-tagline-sep {
  width: 3px;
  height: 3px;
  background: var(--c-border-hi);
  border-radius: 50%;
}

.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-left: 1px solid var(--c-border);
  height: 100%;
}

.footer-links a {
  font-family: var(--f-mono);
  font-size: var(--font-mono-8);
  letter-spacing: 1px;
  color: var(--c-border-hi);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.14s;
}

.footer-links a:hover { color: var(--c-muted); }

/* ── SVG ICONS (inline Lucide) ─────────────────────────────────── */
.icon {
  display: block;
  flex-shrink: 0;
  stroke-width: 1.8;
}

.is-active .icon {
  color: var(--c-accent);
  filter: drop-shadow(0 0 4px var(--c-accent-glow));
}

.status-ready .icon { color: var(--c-ready); }
.status-warn  .icon { color: var(--c-warn);  }
.status-danger .icon { color: var(--c-danger); }