*, *::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:     89px;
  --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-step-13);
  font-size: var(--font-step-13);
  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-step-21);
  font-size:var(--font-step-21);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rotate-phone-copy {
  max-width: 233px;
  font-family:var(--f-step-13);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-21);
  font-size:var(--font-step-21);
  letter-spacing: 2px;
  color: var(--c-text);
  text-transform: uppercase;
}

.logo-tagline {
  font-family:var(--f-step-8);
  font-size:var(--font-step-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-step-13);
  font-size:var(--font-step-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-step-8);
  font-family:var(--f-step-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-step-8);
  font-size:var(--font-step-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 > svg,
.nav-item > img {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.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-step-8);
  font-size:var(--font-step-8);
  letter-spacing: 2px;
  color: var(--c-accent);
  text-transform: uppercase;
  opacity: 0.8;
}

.rotator-value {
  font-family:var(--f-step-13);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-8);
  color: var(--c-muted);
  text-align: center;
  letter-spacing: 1px;
}

.rotator-countdown {
  font-family:var(--f-step-8);
  font-size:var(--font-step-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);
}

.sidebar .tiles .tile:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px var(--c-accent);
}

.sidebar .tiles .tile.is-active {
  border: 1px solid var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}

.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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-21);
  font-size:var(--font-step-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-step-13);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-21);
  font-size:var(--font-step-21);
  letter-spacing: 6px;
  color: var(--c-border-hi);
  text-transform: uppercase;
}

.main-placeholder-sub {
  font-family:var(--f-step-8);
  font-size:var(--font-step-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;
}

.shell #detail-rail .rail-ctx-btn {
  box-sizing: border-box;
  border: 1px solid var(--c-border-hi);
  border-radius: 4px;
}

.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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-8);
  letter-spacing: 2px;
  color: var(--c-muted);
  text-transform: uppercase;
}

.main-placeholder-detail {
  max-width: 610px;
  font-family:var(--f-step-13);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-8);
  letter-spacing: 2px;
  color: var(--c-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.style-title {
  font-family:var(--f-step-21);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-8);
  letter-spacing: 0;
  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-matrix-row:has(.is-palette) {
  grid-template-columns: 89px minmax(0, 1fr) 118px;
}

.style-panel .style-opacity-stepper > span,
.style-panel .style-set-switch span,
.style-panel .style-set-switch strong,
.style-panel .style-set-switch em,
.style-panel .style-mode-btn,
.style-panel .style-font-label {
  font-family:var(--f-step-8);
  font-size:var(--font-step-8);
  font-weight: 400;
  letter-spacing: 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-step-8);
  font-size:var(--font-step-8);
  line-height: 1;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-style: normal;
}

.style-set-switch strong {
  width: 100%;
  font-family:var(--f-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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: minmax(0, 1fr);
  grid-template-rows: 55px auto;
  gap: 8px;
  min-width: 0;
}

.style-font-toolbar {
  display: grid;
  grid-template-columns: 89px 233px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.style-font-label {
  text-align: center;
  font-family:var(--f-step-13);
  font-size:var(--font-step-13);
}

.style-font-toolbar .font-preview {
  grid-column: auto;
  grid-row: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 8px 13px;
  min-width: 0;
  width: 233px;
  justify-self: end;
}

.style-font-toolbar .font-preview-active {
  display: block;
  flex-shrink: 0;
  margin: 0;
}

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

.style-section-title {
  font-family:var(--f-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-8);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0 8px;
}

.style-mode-toggle {
  display: grid;
  grid-template-columns: repeat(2, 55px);
  height: 34px;
  gap: 8px;
}

.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: 1px solid var(--c-border);
  border-radius: 4px;
  background: var(--c-panel);
  box-shadow: var(--shadow-tile);
  color: var(--c-muted);
  font-family:var(--f-step-8);
  font-size:var(--font-step-8);
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-13);
  font-size:var(--font-step-13);
  letter-spacing: 1px;
  color: var(--c-text);
  text-transform: uppercase;
  margin-bottom: 8px;
}

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

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

.font-choice-grid {
  display: grid;
  grid-template-columns: repeat(8, 89px);
  gap: 5px;
  justify-content: start;
  margin-left: 97px;
}

.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-step-8);
  font-size:var(--font-step-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-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-8);
  letter-spacing: 3px;
  color: var(--c-muted);
  text-transform: uppercase;
}

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

.role-icon-copy {
  max-width: 377px;
  font-family:var(--f-step-13);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-34);
  font-size:var(--font-step-34);
  line-height: 1;
  color: var(--c-text);
  text-transform: uppercase;
}

.inventory-copy {
  max-width: 610px;
  margin-top: 8px;
  font-family:var(--f-step-13);
  font-size:var(--font-step-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-step-21);
  font-size:var(--font-step-21);
  color: var(--c-text);
  line-height: 1;
}

.inventory-stat span {
  margin-top: 5px;
  font-family:var(--f-step-8);
  font-size:var(--font-step-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-step-21);
  font-size:var(--font-step-21);
  font-weight: 700;
}

.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-step-13);
  font-size:var(--font-step-13);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.2;
}

.inventory-card-meta,
.inventory-card-note {
  font-family:var(--f-step-13);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-13);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-13);
  font-size:var(--font-step-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-step-13);
  font-size:var(--font-step-13);
}

.event-row span {
  font-family:var(--f-step-13);
  font-size:var(--font-step-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-step-21);
  font-size:var(--font-step-21);
  line-height: 1;
}

.equipment-hub-step span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family:var(--f-step-8);
  font-size:var(--font-step-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-step-13);
  font-size:var(--font-step-13);
}

.equipment-hub-list-item span {
  font-family:var(--f-step-13);
  font-size:var(--font-step-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-step-13);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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-step-8);
  font-size:var(--font-step-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;
}

.catalog-icon {
  width: 21px;
  height: 21px;
  background-color: currentColor;
  -webkit-mask: var(--icon-source) center / contain no-repeat;
  mask: var(--icon-source) center / contain no-repeat;
}

.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); }

/* ═══════════════════════════════════════════════════════════════════════════
   STD CENTERING — one standard for all shells. Reference: MWS (mws-shell.css),
   the only service that was "mittig und richtig". Replaces the rigid 877px main
   grid (55+178+610+34) that overflowed the 788px main cell (topbar 144 + footer
   55) and made the main frame "kleben unten". Content frame = centered
   min(987px,100%) x min(610px,100%) picture box. Legacy/iframe = full area.
   (Sonderlocken der alten Frame-Chrome fliegen hier bewusst raus.)
   ═══════════════════════════════════════════════════════════════════════════ */
.shell .main { display:flex; align-items:center; justify-content:center; padding:5px; overflow:hidden; position:relative; }
.shell .main::before { display:none; }
.shell .main-frame-corner,
.shell .main-frame-left,
.shell .main-frame-top { display:none; }
.shell .main-frame { display:flex; flex-direction:column; flex:0 0 auto; width:auto; height:auto; max-width:100%; max-height:100%; border:0; padding:0; gap:0; }
.shell .main-frame-content { flex:0 0 auto; width:min(987px,100%); height:min(610px,100%); min-width:0; min-height:0; overflow:hidden; padding:0; }
.shell .main-frame-content .main-context { width:100%; height:100%; margin:0; padding:21px; border:1px solid var(--c-border); border-radius:8px; background:rgba(0,0,0,0.18); overflow:hidden; }

/* legacy / iframe surfaces: use the full remaining stage area, scroll inside */
.shell[data-content="legacy"] .main { display:block; padding:5px; }
.shell[data-content="legacy"] .main-frame { width:100%; height:100%; }
.shell[data-content="legacy"] .main-frame-content { width:auto; height:100%; overflow:auto; }
.shell[data-content="legacy"] .main-frame-content .main-context { width:100%; height:100%; padding:0; border:0; border-radius:0; overflow:auto; }

/* Native document readers + named page layout main987: centered 987x610 surface, content fills it. */
.shell .main:has(.hel-document-reader, .main987) .main-frame { width:min(987px,100%); height:min(610px,100%); flex:0 1 987px; min-height:0; margin:auto; }
.shell .main:has(.hel-document-reader, .main987) .main-frame-content { width:100%; height:100%; flex:1 1 auto; min-height:0; }
.shell .main:has(.hel-document-reader, .main987) .main-context { height:100%; min-height:0; padding:0; display:block; }

/* Named page layout main3: empty corner + MainHeader + MainSideBar + 987x610 body.
   Geometry: 144 | 13 | 987 by 89 | 13 | 610. Content is not filled here. */
.shell .main:has(.main3, .main-three-pane) .main-frame { width:min(1144px,100%); height:min(712px,100%); flex:0 1 1144px; min-height:0; margin:auto; }
.shell .main:has(.main3, .main-three-pane) .main-frame-content { width:100%; height:100%; flex:1 1 auto; min-height:0; }
.shell .main:has(.main3, .main-three-pane) .main-context {
  height:100%;
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none;
  display:block;
  overflow:hidden;
}
.main3,
.main-three-pane {
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns:144px 987px;
  grid-template-rows:89px 610px;
  gap:13px;
  overflow:hidden;
}
.main-header,
.MainHeader {
  grid-column:2;
  grid-row:1;
  width:987px;
  height:89px;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.main-sidebar,
.MainSideBar {
  grid-column:1;
  grid-row:2;
  width:144px;
  height:610px;
  min-width:0;
  min-height:0;
  overflow:auto;
  scrollbar-gutter:stable;
}
.main-body,
.MainBody {
  grid-column:2;
  grid-row:2;
  width:987px;
  height:610px;
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.style-panel.main3 {
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.style-panel.main3 > .MainHeader,
.style-panel.main3 > .MainSideBar,
.style-panel.main3 > .MainBody {
  box-sizing:border-box;
  border:1px solid var(--c-border);
  border-radius:8px;
  padding:13px;
}
.style-panel.main3 > .MainHeader { margin:0; }
.style-panel.main3 > .MainSideBar { color:var(--c-muted); font-size:var(--font-step-13); font-family:var(--f-step-13); }
.style-panel.main3 > .MainBody { overflow:auto; background:var(--c-surface-layer-1); }
.style-panel.main3 .style-title,
.style-panel.main3 .style-eyebrow { letter-spacing:0; }
.style-panel.main3 .style-matrix {
  grid-template-rows:repeat(4,auto);
  gap:21px;
  align-content:start;
  overflow:visible;
}
.style-panel.main3 .style-choice-grid-matrix.is-background { gap:5px; }

.pem-main3 > .MainHeader,
.pem-main3 > .MainSideBar,
.pem-main3 > .MainBody {
  box-sizing:border-box;
  border:1px solid var(--c-border);
  border-radius:8px;
  background:color-mix(in srgb, var(--c-panel), transparent 22%);
  box-shadow:var(--shadow-panel);
}

.pem-main3 > .MainHeader {
  padding:13px;
}

.pem-main3 > .MainSideBar {
  padding:8px;
  overflow:auto;
  scrollbar-gutter:stable;
}

.pem-main3 > .MainBody {
  padding:13px;
  overflow:auto;
  scrollbar-gutter:stable;
}

.pem-main3-head {
  height:100%;
  align-items:center;
}

.pem-main3-head .inventory-title {
  font-size:var(--font-step-21);
  letter-spacing:0;
  font-family:var(--f-step-21);
}

.pem-main3-head .inventory-copy {
  max-width:610px;
  margin-top:5px;
  font-size:var(--font-step-13);
  line-height:1.25;
  font-family:var(--f-step-13);
}

.pem-main3-head .inventory-stats {
  grid-template-columns:repeat(3,89px);
}

.pem-main3-head .inventory-stat {
  min-height:55px;
  background:color-mix(in srgb, var(--c-surface), transparent 34%);
}

.pem-main3-sidebar-panel {
  display:grid;
  gap:8px;
}

.pem-main3-sidebar-title {
  min-height:34px;
  display:grid;
  align-items:center;
  color:var(--c-accent);
  font-family:var(--f-step-8);
  font-size:var(--font-step-8);
  letter-spacing:.8px;
  text-transform:uppercase;
}

.pem-main3-sidebar-list,
.pem-main3-body,
.pem-work-column {
  display:grid;
  gap:13px;
  min-width:0;
}

.pem-main3-sidebar-list .event-row,
.pem-main3-sidebar-list .equipment-hub-list-item,
.pem-main3 .MainSideBar .event-row,
.pem-main3 .MainSideBar .equipment-hub-list-item {
  min-height:55px;
  padding:8px;
  border-radius:6px;
}

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

.pem-main3 .MainSideBar .event-row span,
.pem-main3 .MainSideBar .equipment-hub-list-item span {
  font-size:var(--font-step-8);
  font-family:var(--f-step-8);
}

.pem-side-metric {
  min-height:55px;
  border:1px solid var(--c-border);
  border-radius:6px;
  display:grid;
  place-items:center;
  padding:8px;
  text-align:center;
  background:color-mix(in srgb, var(--c-surface), transparent 40%);
}

.pem-side-metric strong,
.pem-side-metric span {
  display:block;
}

.pem-side-metric strong {
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--c-text);
  font-family:var(--f-step-21);
  font-size:var(--font-step-21);
  line-height:1;
}

.pem-side-metric span {
  margin-top:5px;
  color:var(--c-muted);
  font-family:var(--f-step-8);
  font-size:var(--font-step-8);
  letter-spacing:.8px;
  text-transform:uppercase;
}

.pem-panel-grid,
.pem-event-detail-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

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

.pem-mini-panel {
  min-height:89px;
  border:1px solid var(--c-border);
  border-radius:8px;
  padding:13px;
  display:grid;
  gap:5px;
  align-content:start;
}

.pem-mini-panel strong,
.pem-map-panel strong {
  color:var(--c-accent);
  font-family:var(--f-step-8);
  font-size:var(--font-step-8);
  letter-spacing:.8px;
  text-transform:uppercase;
}

.pem-mini-panel span {
  color:var(--c-text);
  font-family:var(--f-step-13);
  font-size:var(--font-step-13);
  font-weight:700;
  overflow-wrap:anywhere;
}

.pem-mini-panel em,
.pem-map-panel em {
  color:var(--c-muted);
  font-family:var(--f-step-13);
  font-size:var(--font-step-13);
  font-style:normal;
  line-height:1.35;
}

.pem-map-panel {
  grid-column:1 / -1;
  min-height:233px;
  display:grid;
  gap:8px;
  padding:13px;
}

.pem-map-stage {
  min-height:144px;
  border:1px solid var(--c-border);
  border-radius:6px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-accent), transparent 88%) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--c-accent), transparent 88%) 1px, transparent 1px),
    radial-gradient(circle at 60% 45%, color-mix(in srgb, var(--c-accent), transparent 72%), transparent 28%),
    color-mix(in srgb, var(--c-bg), transparent 16%);
  background-size:34px 34px,34px 34px,100% 100%,100% 100%;
}

.pem-map-stage span {
  position:absolute;
  left:13px;
  bottom:13px;
  max-width:calc(100% - 26px);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--c-text);
  font-family:var(--f-step-21);
  font-size:var(--font-step-21);
  line-height:1;
}

/* core.composition.calendarMonth (core.style.calendarMonth) */
.calendar-month { display:grid; gap:8px; padding:13px; }
.calendar-month-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.calendar-month-nav strong { font-size:var(--font-step-21); font-family:var(--f-step-21); color:var(--c-text); }
.calendar-month-weekdays,
.calendar-month-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; }
.calendar-month-weekdays span { color:var(--c-muted); font-family:var(--f-step-8); font-size:var(--font-step-8); letter-spacing:1px; text-align:center; text-transform:uppercase; }
.calendar-month-day { min-height:55px; border:1px solid var(--c-border); border-radius:5px; padding:3px; display:grid; gap:2px; align-content:start; background:color-mix(in srgb, var(--c-surface), transparent 44%); min-width:0; }
.calendar-month-day > span { color:var(--c-muted); font-family:var(--f-step-8); font-size:var(--font-step-8); }
.calendar-month-day.is-muted { opacity:.45; }
.calendar-month-day.is-today { border-color:var(--c-border-hi); }
.calendar-month-day.has-event { border-color:var(--c-border-hi); }
.calendar-month-event { min-height:13px; border:1px solid color-mix(in srgb, var(--c-accent), transparent 55%); border-radius:3px; padding:1px 3px; background:color-mix(in srgb, var(--c-accent), transparent 85%); color:var(--c-text); font-family:var(--f-step-8); font-size:var(--font-step-8); line-height:1.2; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }

/* core.style.participationTone: own status on event tiles and calendar entries (filled tiles;
   overrides the style-pool control background on purpose, active state = inner ring, colour stays) */
.tone-requested { --tone:rgba(214, 140, 60, .78); --tone-line:#d68c3c; }
.tone-accepted { --tone:rgba(124, 179, 66, .78); --tone-line:#7cb342; }
.tone-paid { --tone:rgba(46, 125, 50, .95); --tone-line:#2e7d32; }
.shell .list-tile.tone-requested, .shell .list-tile.tone-accepted, .shell .list-tile.tone-paid,
.shell .calendar-month-event.tone-requested, .shell .calendar-month-event.tone-accepted, .shell .calendar-month-event.tone-paid { background:var(--tone) !important; border-color:var(--tone-line) !important; }
.shell .list-tile.tone-requested strong, .shell .list-tile.tone-accepted strong, .shell .list-tile.tone-paid strong,
.shell .calendar-month-event.tone-requested, .shell .calendar-month-event.tone-accepted, .shell .calendar-month-event.tone-paid { color:#fff; }
.shell .list-tile.tone-requested span, .shell .list-tile.tone-accepted span, .shell .list-tile.tone-paid span { color:rgba(255, 255, 255, .82); }
.shell .list-tile.is-active { box-shadow:inset 0 0 0 2px var(--c-text); }

/* core.composition.layout.splitMain (core.shape.splitMain.610) */
.split-main { display:grid; grid-template-columns:610px minmax(0,1fr); gap:13px; align-items:start; }

.pem-main3 .equipment-inventory {
  gap:13px;
}

.pem-main3 .inventory-grid.is-compact {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.pem-main3 .equipment-hub-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.pem-main3 .equipment-hub-steps.is-vertical {
  grid-template-columns:1fr;
}

.pem-main3 .equipment-hub-step {
  min-height:55px;
}

.pem-content-flow {
  display:grid;
  gap:13px;
}

.pem-content-panel {
  display:grid;
  gap:13px;
  padding:13px;
}

.pem-check-row-list {
  display:grid;
  gap:8px;
}

.pem-check-row {
  min-height:55px;
  border:1px solid var(--c-border);
  border-radius:6px;
  padding:8px;
  display:grid;
  grid-template-columns:34px minmax(0,144px) minmax(0,1fr);
  gap:8px;
  align-items:center;
  background:color-mix(in srgb, var(--c-surface), transparent 44%);
}

.pem-check-row > span {
  width:34px;
  height:34px;
  border:1px solid var(--c-border);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--c-accent);
  font-family:var(--f-step-21);
  font-size:var(--font-step-21);
  line-height:1;
}

.pem-check-row strong {
  color:var(--c-text);
  font-family:var(--f-step-13);
  font-size:var(--font-step-13);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pem-check-row em {
  color:var(--c-muted);
  font-family:var(--f-step-13);
  font-size:var(--font-step-13);
  font-style:normal;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.hel-document-reader { width:100%; height:100%; min-width:0; min-height:0; overflow-y:scroll; overflow-x:auto; scrollbar-gutter:stable; scrollbar-color:#747a80 #202226; padding:13px; color:var(--c-text); letter-spacing:0; }
.hel-document-reader::-webkit-scrollbar { width:12px; height:12px; }
.hel-document-reader::-webkit-scrollbar-track { background:#202226; }
.hel-document-reader::-webkit-scrollbar-thumb { background:#747a80; border:2px solid #202226; border-radius:4px; }
.hel-document-reader .document-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.hel-document-reader .document-toolbar[hidden] { display:none; }
.hel-document-reader .document-toolbar label { display:flex; align-items:center; gap:8px; }
.hel-document-reader input,.hel-document-reader select,.hel-document-reader button { font:inherit; color:inherit; background:var(--c-surface,#202226); border:1px solid var(--c-border); border-radius:4px; padding:6px 8px; }
.hel-document-reader select { width:90px; }
.hel-document-reader button { cursor:pointer; }
.hel-document-reader output { font-size:var(--font-step-13); color:var(--c-muted); font-family:var(--f-step-13); }
.hel-document-reader .document-heading { display:flex; justify-content:space-between; align-items:center; gap:13px; margin-bottom:13px; }
.hel-document-reader h1 { font-size:var(--font-step-21); margin:0; font-family:var(--f-step-21); }
.hel-document-reader h2 { font-size:var(--font-step-13); margin:16px 0 8px; font-family:var(--f-step-13); }
.hel-document-reader h3 { font-size:var(--font-step-13); margin:8px 0; font-family:var(--f-step-13); }
.hel-document-reader pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--font-step-13); line-height:1.65; font-family:var(--f-step-13); }
.hel-document-reader .document-greek { font-family:var(--f-step-13); font-size:var(--font-step-13); line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; }
.hel-document-reader .document-section,.hel-document-reader .document-verse { border-bottom:1px solid var(--c-border); padding-bottom:13px; margin-bottom:13px; }
.hel-document-reader .document-graph { margin:13px 0; }
.hel-document-reader figcaption { font-size:var(--font-step-13); margin-bottom:6px; color:var(--c-muted); font-family:var(--f-step-13); }
.hel-document-reader .document-graph-image,.hel-document-reader .document-table { overflow-x:auto; }
.hel-document-reader .document-graph-image img { display:block; width:100%; min-width:750px; height:auto; }
.hel-document-reader .document-image-stage { position:relative; width:100%; }
.hel-document-reader .document-manuscript { display:block; width:100%; height:auto; }
.hel-document-reader table { width:100%; border-collapse:collapse; font-size:var(--font-step-13); font-family:var(--f-step-13); }
.hel-document-reader th,.hel-document-reader td { border-bottom:1px solid var(--c-border); text-align:left; padding:6px; vertical-align:top; overflow-wrap:anywhere; }
.shell:has(.hel-document-reader) .rail-ctx-btn[aria-disabled="true"] { opacity:.35; cursor:default; }

button.pem-check-row { width:100%; text-align:left; cursor:pointer; color:inherit; }
.pem-check-row.is-active,
button.pem-check-row:hover { border-color:var(--c-border-hi); }

/* Core UI catalog building blocks (MWS ui_catalogs core-ui.catalog.v2).
   Structure, sizes and slots are defined in the catalog (shapes / styles / contentModels / compositions);
   this is optics only, class names = catalog style classes. Fibonacci sizes, font steps 8/13/21/34. */

/* core.composition.layout.stack (core.style.stack) */
.stack { display:grid; gap:13px; align-content:start; }
.stack.is-tight { gap:8px; }

/* core.composition.listTile (core.shape.tile.144x89) + core.composition.listRow (core.shape.row.flex89) */
.list-tile,
.list-row { width:100%; box-sizing:border-box; display:grid; align-content:center; gap:8px; border:1px solid var(--c-border); border-radius:8px; background:color-mix(in srgb, var(--c-surface), transparent 44%); color:inherit; text-align:left; text-decoration:none; cursor:pointer; min-width:0; }
.list-tile { height:89px; padding:8px; font-size:var(--font-step-13); font-family:var(--f-step-13); }
.list-row { height:89px; padding:13px 21px; }
.list-tile:hover, .list-tile.is-active,
.list-row:hover, .list-row.is-active { border-color:var(--c-border-hi); }
.list-tile strong { color:var(--c-text); font-size:var(--font-step-13); font-family:var(--f-step-13); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.list-tile span { color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); line-height:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-row strong,
.list-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1; }
.list-row strong { color:var(--c-text); font-size:var(--font-step-21); font-family:var(--f-step-21); }
.list-row span { color:var(--c-muted); font-size:var(--font-step-13); font-family:var(--f-step-13); }

/* core.composition.layout.split2, core.composition.panel377, core.composition.mapPanel */
.split-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; align-items:start; }
.panel-377 { height:377px; box-sizing:border-box; overflow:auto; align-content:start; }
.map-panel { padding:0; overflow:hidden; }
.map-panel iframe { display:block; width:100%; height:100%; border:0; border-radius:8px; }

/* core.composition.checkGrid + core.composition.checkTile (core.shape.check.flex34) */
.check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.check-tile { display:flex; align-items:center; gap:8px; height:34px; box-sizing:border-box; padding:0 8px; border:1px solid var(--c-border); border-radius:8px; cursor:pointer; min-width:0; font-size:var(--font-step-13); font-family:var(--f-step-13); color:var(--c-text); }
.check-tile input { margin:0; width:13px; height:13px; flex:0 0 13px; }
.check-tile span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.check-tile:has(input:checked) { border-color:var(--c-border-hi); background:color-mix(in srgb, var(--c-accent), transparent 89%); }

/* core.composition.controlRow (core.shape.controlRow.flex34) */
.control-row { display:flex; gap:8px; align-items:center; min-height:34px; }
.control-row > input, .control-row > select, .control-row > span { flex:1 1 0; min-width:0; }
.control-row > input[type="number"] { flex:0 0 89px; }
.control-row > button { flex:0 0 auto; }
.control-row input, .control-row select { height:34px; box-sizing:border-box; font-size:var(--font-step-13); font-family:var(--f-step-13); }

/* core.composition.headerInput (core.shape.input.flex55): controls in MainHeader instead of a title */
.header-input { display:flex; gap:13px; align-items:center; height:100%; }
.header-input > textarea, .header-input > input:not([type="number"]) { flex:1 1 0; min-width:0; }
.header-input > select { flex:0 1 233px; min-width:0; }
.header-input > button { flex:0 0 auto; }
.header-input textarea, .header-input input, .header-input select { height:55px; box-sizing:border-box; padding:0 13px; border:1px solid var(--c-border-hi); border-radius:8px; background:color-mix(in srgb, var(--c-surface), transparent 34%); color:var(--c-text); font-size:var(--font-step-13); font-family:var(--f-step-13); }
.header-input textarea { padding:8px 13px; resize:none; }

/* core.composition.statusBadge (core.style.statusBadge = ui-badge) */
.ui-badge { display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px; margin-right:5px; border:1px solid var(--c-border-hi); border-radius:13px; font-size:var(--font-step-13); font-family:var(--f-step-13); }
.ui-badge button { border:0; background:none; color:inherit; cursor:pointer; padding:0; font-size:var(--font-step-13); font-family:var(--f-step-13); }

/* core.composition.compactTable (core.style.compactTable = ui-table compact-table): 34px rows, first column double width */
.compact-table { display:grid; }
.compact-table-row { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:13px; align-items:center; height:34px; padding:0 13px; border-bottom:1px solid var(--c-border); font-size:var(--font-step-13); font-family:var(--f-step-13); color:var(--c-text); }
.compact-table-row > :first-child { grid-column:span 2; }
.compact-table-row > * { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compact-table-row > :has(button, select, input) { overflow:visible; }
.compact-table-row strong { font-weight:700; }
.compact-table-row span { color:var(--c-muted); }
.compact-table-row.is-head { height:21px; font-size:var(--font-step-8); font-family:var(--f-step-8); text-transform:uppercase; letter-spacing:1px; }
.compact-table-row select, .compact-table-row input { height:34px; max-width:100%; box-sizing:border-box; font-size:var(--font-step-13); font-family:var(--f-step-13); }

/* core.composition.formGrid4 (core.style.formGrid4) */
.data-form-grid.form-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }
.data-form-grid.form-grid-4 > .is-wide { grid-column:span 2; }
.data-form-grid.form-grid-4 textarea { height:55px; min-height:55px; }
.header-input > select:first-of-type:not(:last-of-type) { flex-basis:144px; }

/* Published main3 views reuse catalog blocks; the left zone is a transparent
   host for individual STD tiles, never another card around the cards. */
.mws-view:has(> .main3) { display:block; }
.mws-view-main3 > .MainHeader,
.mws-view-main3 > .MainBody { padding:13px; box-sizing:border-box; border:1px solid var(--c-border); border-radius:8px; background:var(--c-surface-layer-1); }
.mws-view-main3 > .MainHeader { display:flex; flex-direction:column; justify-content:center; gap:5px; }
.shell .mws-view-main3 > .MainSideBar { display:flex; flex-direction:column; gap:13px; padding:0; border:0; border-radius:0; background:transparent !important; scrollbar-gutter:auto; scrollbar-width:none; }
.mws-view-main3 > .MainSideBar > * { flex-shrink:0; }
.mws-view-main3 > .MainBody { overflow:auto; }
.mws-view-main3 .mws-stats { display:grid; gap:8px; }
.mws-view-main3 .mws-stats > .list-tile { width:144px; }
.mws-view-main3 .mws-tools { display:grid; grid-template-columns:55px 55px; gap:8px; justify-content:start; }
.mws-view-main3 .mws-tool .icon { width:21px; height:21px; }
.mws-view-main3 .mws-recs-wrap { overflow:visible; }
.mws-rec-copy { min-width:0; display:grid; gap:3px; flex:1 1 auto; }
.mws-rec.list-row { display:flex; align-items:center; justify-content:space-between; }
.mws-rec.list-row strong, .mws-rec.list-row .mws-rec-sub { display:block; }
.design-system-main3 > .MainHeader { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) 34px; justify-content:stretch; gap:5px; padding:8px 13px; }
.design-system-main3 .mws-view-head { display:flex; gap:13px; align-items:center; min-width:0; }
.design-system-main3 .mws-view-title { flex:0 0 auto; }
.design-system-main3 .mws-view-sum { margin:0; font-size:var(--font-step-13); font-family:var(--f-step-13); line-height:1; }
.design-system-main3 .design-system-header-actions { display:flex; gap:13px; align-items:center; }
.design-system-main3 .design-system-modes,
.design-system-main3 .design-system-actions { margin:0; gap:8px; }
.design-system-main3 .design-system { grid-template-columns:minmax(0,1fr) 377px; height:100%; gap:13px; }
.design-system-main3 .design-system-slot { width:144px; flex-shrink:0; }
.design-system-main3 .design-system-preview { min-width:0; overflow:auto; }
.design-system-main3 .design-system-col,
.design-system-main3 .design-system-state,
.design-system-main3 .design-system-summary-card { background:var(--c-surface-layer-1); }
.design-system-main3 .design-system-field input,
.design-system-main3 .design-system-btn { background:var(--c-control-surface); color:var(--c-text); }
.design-system-main3 .design-system-btn.is-active { background:var(--c-control-surface); color:var(--c-text); border-color:var(--c-border-hi); }
.design-system-main3 .design-system-stage { background:var(--c-surface-layer-1); }
.design-lab-main3 > .MainHeader { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:5px; padding:5px 8px; }
.design-lab-title { display:flex; align-items:center; gap:13px; min-width:0; line-height:1; }
.design-lab-title strong { font-size:var(--font-step-21); font-family:var(--f-step-21); white-space:nowrap; }
.design-lab-title span { color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); }
.design-lab-toolbar { display:flex; align-items:center; gap:8px; min-width:0; }
.design-lab-products { display:flex; gap:3px; flex:0 0 auto; }
.design-lab-product,
.design-lab-button,
.design-lab-toolbar select,
.design-lab-inspector input,
.design-lab-inspector textarea,
.design-lab-inspector select,
.design-lab-size-label select { min-height:26px; border:1px solid var(--c-border); border-radius:4px; padding:2px 7px; background:var(--c-control-surface); color:var(--c-text); font:inherit; font-size:var(--font-step-8); font-family:var(--f-step-8); }
.design-lab-product.is-active,
.design-lab-button.is-primary { border-color:var(--c-border-hi); background:var(--c-surface-layer-2); font-weight:700; }
.design-lab-toolbar > select { min-width:0; flex:1 1 auto; }
.design-lab-toolbar [data-dl-page] { flex-basis:233px; }
.design-lab-toolbar [data-dl-template] { flex-basis:144px; }
.design-lab-toolbar > button { flex:0 0 auto; white-space:nowrap; }
.design-lab-status { flex:0 1 144px; overflow:hidden; color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); text-overflow:ellipsis; white-space:nowrap; }
.design-lab-main3 > .MainSideBar { display:flex; flex-direction:column; gap:5px; overflow:hidden; }
.design-lab-main3 > .MainSideBar > strong { font-size:var(--font-step-13); font-family:var(--f-step-13); }
.design-lab-elements { min-height:0; flex:1 1 auto; display:flex; flex-direction:column; gap:3px; overflow:auto; }
.design-lab-element { display:flex; flex-direction:column; gap:2px; min-width:0; border:1px solid transparent; border-radius:4px; padding:4px; background:var(--c-surface-layer-1); color:var(--c-text); text-align:left; cursor:pointer; }
.design-lab-element.is-active { border-color:var(--c-border-hi); }
.design-lab-element strong { overflow:hidden; font-size:var(--font-step-8); font-family:var(--f-step-8); text-overflow:ellipsis; white-space:nowrap; }
.design-lab-element span { color:var(--c-muted); font-size:8px; }
.design-lab-size-label { display:grid; gap:3px; color:var(--c-muted); font-size:8px; }
.design-lab-main3 > .MainBody { display:grid; grid-template-columns:minmax(0,1fr) 233px; gap:8px; padding:8px; overflow:hidden; }
.design-lab-preview-viewport { position:relative; min-width:0; min-height:0; overflow:hidden; border:1px dashed var(--c-border); background:var(--c-bg); }
.design-lab-canvas { position:absolute; top:0; left:0; width:1144px; height:712px; transform-origin:top left; overflow:hidden; background:var(--c-bg); }
.design-lab-live-preview { position:absolute; z-index:0; left:-298px; top:-182px; width:1597px; height:987px; max-width:none; border:0; pointer-events:none; background:var(--c-bg); }
.design-lab-live-preview[hidden] { display:none; }
.design-lab-canvas.has-live-preview > .design-lab-zone { z-index:1; border:1px dashed transparent; border-radius:0; padding:0; background:transparent; pointer-events:auto; }
.design-lab-canvas.has-live-preview > .design-lab-zone.is-selected { border-color:var(--c-accent,#4c93f0); background:color-mix(in srgb,var(--c-accent,#4c93f0) 5%,transparent); }
.design-lab-canvas.has-live-preview > .design-lab-corner { z-index:1; background:transparent; }
.design-lab-canvas.has-live-preview > .design-lab-overlay { z-index:2; }
.design-lab-corner { grid-column:1; grid-row:1; border:1px dashed var(--c-border); background:var(--c-surface-layer-1); }
.design-lab-zone { position:relative; box-sizing:border-box; border:1px solid var(--c-border); border-radius:3px; background:var(--c-surface-layer-1); color:var(--c-text); overflow:hidden; }
.design-lab-canvas > .MainHeader { grid-column:2; grid-row:1; width:987px; height:89px; padding:8px 13px; }
.design-lab-canvas > .MainSideBar { grid-column:1; grid-row:2; width:144px; height:610px; padding:5px; }
.design-lab-canvas > .MainBody { grid-column:2; grid-row:2; width:987px; height:610px; padding:13px; }
.design-lab-zone-label { display:block; color:var(--c-muted); font-size:var(--font-step-13); font-family:var(--f-step-13); font-weight:700; }
.design-lab-zone-sub { display:block; margin-top:5px; color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); }
.design-lab-contract-hint { display:flex; flex-direction:column; gap:5px; margin-top:13px; padding:13px; border:1px dashed var(--c-border-hi); border-radius:5px; background:var(--c-surface-layer-2); font-size:var(--font-step-13); font-family:var(--f-step-13); }
.design-lab-contract-hint span { color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); }
.design-lab-overlay { position:absolute; inset:0; pointer-events:none; }
.design-lab-box { position:absolute; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; box-sizing:border-box; overflow:hidden; border:1px solid var(--c-border-hi); border-radius:4px; padding:5px; background:color-mix(in srgb,var(--c-control-surface) 88%,#4c93f0 12%); color:var(--c-text); text-align:left; cursor:grab; pointer-events:auto; touch-action:none; }
.design-lab-box.is-selected { outline:2px solid var(--c-accent,#4c93f0); z-index:1000; }
.design-lab-box strong { max-width:100%; overflow:hidden; font-size:var(--font-step-13); font-family:var(--f-step-13); text-overflow:ellipsis; white-space:nowrap; }
.design-lab-box span { max-width:100%; overflow:hidden; color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); text-overflow:ellipsis; white-space:nowrap; }
.design-lab-inspector { display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0; overflow:auto; border-left:1px solid var(--c-border); padding-left:8px; }
.design-lab-inspector > strong { font-size:var(--font-step-13); font-family:var(--f-step-13); }
.design-lab-inspector > span { color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); overflow-wrap:anywhere; }
.design-lab-live-link { display:inline-flex; align-self:flex-start; border:1px solid var(--c-border); border-radius:4px; padding:4px 7px; color:var(--c-text); font-size:var(--font-step-8); font-family:var(--f-step-8); text-decoration:none; }
.design-lab-live-link:hover { border-color:var(--c-border-hi); background:var(--c-surface-layer-1); }
.design-lab-inspector label { display:grid; gap:4px; font-size:var(--font-step-8); font-family:var(--f-step-8); }
.design-lab-inspector textarea { min-height:89px; resize:vertical; }
.design-lab-button.is-danger { color:var(--c-danger,#a33); }
.dit-mount { width:100%; height:100%; min-width:0; min-height:0; }
.dit-view.main3 { display:grid; }
.dit-view > .MainBody.stack { align-content:start; }
.dit-status-panel { padding:13px; min-width:0; }
.dit-status-panel > strong { display:block; font-size:var(--font-step-21); font-family:var(--f-step-21); color:var(--c-text); }
.dit-status-panel > span { display:block; font-size:var(--font-step-8); font-family:var(--f-step-8); color:var(--c-muted); }
.dit-workshop-main3 > .MainHeader { gap:5px; padding:8px 13px; }
.dit-workshop-main3 > .MainBody { display:flex; flex-direction:column; gap:8px; }
.dit-workshop-main3 .dit-results { overflow:auto; }
.dit-workshop-main3 .dit-detail { flex-shrink:0; overflow:auto; }

/* Catalog documents share main3; font calibration samples retain measured sizes. */
.mws-document-main3 .page-head { margin:0; }
.mws-document-main3 .page-head p { margin:0; font-size:var(--font-step-13); font-family:var(--f-step-13); }
.mws-document-main3 .page-head .eyebrow { font-size:var(--font-step-8); font-family:var(--f-step-8); }
.mws-document-main3 h1,
.mws-document-main3 h2 { margin:0 0 8px; font-size:var(--font-step-21); font-family:var(--f-step-21); }
.mws-document-main3 h3 { font-size:var(--font-step-21); font-family:var(--f-step-21); }
.mws-document-main3 .actions { display:grid; gap:8px; padding:0; }
.mws-document-main3 .MainBody .button-link,
.mws-document-main3 .mini-button { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:5px 8px; border:1px solid var(--c-border); background:var(--c-control-surface); color:var(--c-text); border-radius:8px; text-decoration:none; font-size:var(--font-step-13); font-family:var(--f-step-13); }
.mws-document-main3 .panel { padding:13px; margin-bottom:13px; border:1px solid var(--c-border); border-radius:8px; background:var(--c-surface-layer-1); }
.mws-document-main3 .grid { display:grid; gap:13px; }
.mws-document-main3 .grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.mws-document-main3 .grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.mws-document-main3 .code-block { white-space:pre-wrap; overflow-wrap:anywhere; }
.mws-document-main3 table { width:100%; border-collapse:collapse; }
.mws-document-main3 th,
.mws-document-main3 td { padding:5px 8px; text-align:left; border-bottom:1px solid var(--c-border); font-size:var(--font-step-13); font-family:var(--f-step-13); }
.mws-document-main3 input,
.mws-document-main3 select { min-height:34px; min-width:0; border:1px solid var(--c-border); background:var(--c-control-surface); color:var(--c-text); font-size:var(--font-step-13); font-family:var(--f-step-13); }
.mws-document-main3 .font-lab-controls { display:grid; grid-template-columns:233px 89px minmax(0,1fr); gap:13px; margin:13px 0; }
.mws-document-main3 .font-lab-controls label,
.mws-document-main3 .font-step-card label { display:flex; flex-direction:column; gap:5px; }
.mws-document-main3 .font-lab-actions,
.mws-document-main3 .section-head { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; }
.mws-document-main3 .font-lab-selected { display:grid; grid-template-columns:233px minmax(0,1fr); gap:13px; margin:13px 0; }
.mws-document-main3 .font-step-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.mws-document-main3 .font-step-card { padding:13px; border:1px solid var(--c-border); border-radius:8px; overflow:auto; }
.mws-document-main3 .font-step-card header { display:flex; gap:13px; justify-content:space-between; }
.mws-document-main3 .font-step-box { display:flex; align-items:center; justify-content:center; border:1px solid var(--c-border); overflow:hidden; white-space:nowrap; }
.mws-document-main3 .font-step-meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mws-document-main3 .font-readable-list { display:grid; gap:8px; }
.mws-document-main3 .font-readable-row { display:grid; grid-template-columns:233px minmax(0,1fr); gap:13px; padding:8px; border:1px solid var(--c-border); }
.mws-document-main3 .font-readable-row p { overflow:auto; white-space:nowrap; margin:0; }

/* Shared Giza module optics, formerly loaded as a separate sheet. */
/* Giza Calibration viewer — shell-adapted into STD main3:
   Header = metadata, SideBar = controls/stats, Body = Three.js stage. */
.giza-host {
  width: 100%;
  height: 100%;
  color-scheme: dark;
  --bg: #090b0f;
  --ink: #e9e4d7;
  --muted: #9c9585;
  --line: rgba(233, 228, 215, .17);
  --gold: #e8b84b;
  --cyan: #7fd2e6;
  --green: #86d6a0;
  --magenta: #ff7ad8;
  --red: #e05555;
  font-family: var(--f-step-13);
  font-size: var(--font-step-13);
  color: var(--ink);
  letter-spacing: 0;
}

.giza-host * { box-sizing: border-box; }

.giza-main-header,
.giza-main-sidebar,
.giza-viewer {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, .18);
  color: var(--ink);
}

.giza-main-header {
  padding: 13px;
  display: grid;
  grid-template-columns: minmax(250px, 377px) 1fr;
  gap: 13px;
  overflow: hidden;
}

.giza-main-sidebar {
  padding: 13px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  scrollbar-color: #747a80 #202226;
}

.giza-main-sidebar::-webkit-scrollbar { width: 10px; }
.giza-main-sidebar::-webkit-scrollbar-track { background: #202226; }
.giza-main-sidebar::-webkit-scrollbar-thumb { background: #747a80; border: 2px solid #202226; border-radius: 4px; }

.giza-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

.giza-viewer #app { position: absolute; inset: 0; }
.giza-viewer #gizaCanvas { width: 100%; height: 100%; display: block; touch-action: none; }

.giza-host .panel {
  z-index: 4;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

.giza-viewer .panel { position: absolute; }

.giza-host #title {
  min-width: 0;
  overflow: hidden;
}
.giza-host #title h1 {
  margin: 0;
  font-family:var(--f-step-34);
  font-weight: 400;
  font-size:var(--font-step-34);
  letter-spacing: .14em;
  line-height: 1;
}
.giza-host #title h1 span { color: var(--gold); }
.giza-host #title .sub {
  margin-top: 8px;
  color: var(--muted);
  font-size:var(--font-step-8);
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;font-family:var(--f-step-8);
}

.giza-host #data {
  min-width: 0;
  align-self: center;
  text-align: right;
  color: #bdb49e;
  font-size:var(--font-step-13);
  line-height: 1.45;
  overflow: hidden;font-family:var(--f-step-13);
}
.giza-host #data b { color: var(--ink); }
.giza-host #data .k { color: var(--gold); }
.giza-host #data .c { color: var(--cyan); }

.giza-host #stats {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: #a9a391;
  font-size:var(--font-step-8);
  line-height: 1.45;font-family:var(--f-step-8);
}
.giza-host #stats .stat-title {
  color: var(--ink);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size:var(--font-step-8);
  margin-bottom: 5px;font-family:var(--f-step-8);
}
.giza-host #stats b { color: var(--gold); font-weight: 500; }
.giza-host #stats .muted { color: #676e79; }

.giza-host #controls {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.giza-host .btn { width:144px; user-select:none; text-align:left; transition:border-color .15s,color .15s; }
.giza-host .btn:hover { border-color:var(--c-border-hi); }
.giza-host .btn.is-on { border-color: var(--gold); color: var(--gold); background: rgba(232,184,75,.08); }
.giza-host .btn.is-cyan.is-on { border-color: var(--cyan); color: var(--cyan); background: rgba(127,210,230,.08); }
.giza-host .btn.is-green.is-on { border-color: var(--green); color: var(--green); background: rgba(134,214,160,.08); }
.giza-host .btn.is-magenta.is-on { border-color: var(--magenta); color: var(--magenta); background: rgba(255,122,216,.08); }

.giza-viewer #hint { right: 22px; bottom: 24px; color: #686e79; font-size:var(--font-step-8); text-align: right;font-family:var(--f-step-8); }
.giza-host #note {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: #686e79;
  font-size:var(--font-step-8);
  line-height: 1.55;font-family:var(--f-step-8);
}

@media (max-width: 760px) {
  .giza-host #data, .giza-host #stats, .giza-host #note { display: none; }
  .giza-host #controls { gap: 5px; }
  .giza-host .btn { padding: 6px 7px; font-size:var(--font-step-8);font-family:var(--f-step-8); }
  .giza-viewer #hint { display: none; }
  .giza-host #title .sub { font-size:var(--font-step-8); max-width: 36ch;font-family:var(--f-step-8); }
}


/* Shared native MAG document optics; content is published by MWS. */
.mag-atomic-document.mag-doc-lightning{ --bg: var(--c-surface-layer-1); --panel: var(--c-surface-layer-1); --line: var(--c-border); --text: var(--c-text); --muted: var(--c-muted); --hot: #64e2b7; --cold: #78a6ff; --warn: #f0c46b;}
.mag-atomic-document.mag-doc-lightning *{box-sizing: border-box;}
.mag-atomic-document.mag-doc-lightning{margin: 0px; min-height: 100vh; background: var(--bg); color: var(--text); font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45;}
.mag-atomic-document.mag-doc-lightning main{width: min(1500px, -32px + 100vw); margin: 0px auto; padding: 24px 0px 42px;}
.mag-atomic-document.mag-doc-lightning header{display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px;}
.mag-atomic-document.mag-doc-lightning h1{margin: 0px; font-size:var(--font-step-21);font-family:var(--f-step-21); letter-spacing: 0px;}
.mag-atomic-document.mag-doc-lightning .muted, .mag-atomic-document.mag-doc-lightning .label{color: var(--muted);}
.mag-atomic-document.mag-doc-lightning .label{font-size:var(--font-step-13);font-family:var(--f-step-13); text-transform: uppercase;}
.mag-atomic-document.mag-doc-lightning .grid{display: grid; gap: 12px;}
.mag-atomic-document.mag-doc-lightning .stats{grid-template-columns: repeat(6, minmax(0px, 1fr));}
.mag-atomic-document.mag-doc-lightning .two{grid-template-columns: 1fr 1fr; margin-top: 12px;}
.mag-atomic-document.mag-doc-lightning .wide{grid-column: 1 / -1;}
.mag-atomic-document.mag-doc-lightning .card{background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-width: 0px;}
.mag-atomic-document.mag-doc-lightning .value{font-size:var(--font-step-21);font-family:var(--f-step-21); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mag-atomic-document.mag-doc-lightning .bar{height: 14px; background: rgb(5, 7, 11); border: 1px solid var(--line); border-radius: 999px; overflow: hidden;}
.mag-atomic-document.mag-doc-lightning .fill{height: 100%; width: 0%; background: linear-gradient(90deg,var(--cold),var(--hot));}
.mag-atomic-document.mag-doc-lightning table{width: 100%; border-collapse: collapse;}
.mag-atomic-document.mag-doc-lightning th, .mag-atomic-document.mag-doc-lightning td{padding: 8px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;}
.mag-atomic-document.mag-doc-lightning th{color: var(--muted); font-size:var(--font-step-13);font-family:var(--f-step-13);}
.mag-atomic-document.mag-doc-lightning .num{text-align: right; font-variant-numeric: tabular-nums;}
.mag-atomic-document.mag-doc-lightning .kind-name{font-weight: 750;}
.mag-atomic-document.mag-doc-lightning .kind-bar{height: 6px; margin-top: 6px; background: rgb(5, 7, 11); border: 1px solid var(--line); border-radius: 999px; overflow: hidden;}
.mag-atomic-document.mag-doc-lightning .kind-fill{height: 100%; width: 0%; background: linear-gradient(90deg,var(--hot),var(--warn));}
.mag-atomic-document.mag-doc-lightning .kind-grid{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 8px; margin: 10px 0px 12px;}
.mag-atomic-document.mag-doc-lightning .kind-stat{border-top: 1px solid var(--line); padding-top: 8px; min-width: 0px;}
.mag-atomic-document.mag-doc-lightning .kind-stat strong{display: block; font-size:var(--font-step-13);font-family:var(--f-step-13); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mag-atomic-document.mag-doc-lightning .mono{font-family: ui-monospace, SFMono-Regular, Menlo, monospace;}
.mag-atomic-document.mag-doc-lightning .pillrow{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;}
.mag-atomic-document.mag-doc-lightning .pill{border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted);}
.mag-atomic-document.mag-doc-lightning textarea.dump{width: 100%; min-height: 210px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: rgb(5, 7, 11); color: var(--text); padding: 10px; font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45; white-space: pre;}
.mag-atomic-document.mag-doc-lightning button{border: 1px solid var(--line); background: rgb(11, 16, 25); color: var(--text); border-radius: 6px; padding: 7px 10px; cursor: pointer;}
.mag-atomic-document.mag-doc-lightning button:hover{border-color: var(--hot);}
.mag-atomic-document.mag-doc-lightning input, .mag-atomic-document.mag-doc-lightning select{border: 1px solid var(--line); background: rgb(5, 7, 11); color: var(--text); border-radius: 6px; padding: 7px 9px; min-width: 0px;}
.mag-atomic-document.mag-doc-lightning .controls{display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)) auto; gap: 8px; align-items: end; margin: 10px 0px 12px;}
.mag-atomic-document.mag-doc-lightning .subtle{font-size:var(--font-step-13);font-family:var(--f-step-13); color: var(--muted);}
@media (max-width: 900px){.mag-atomic-document.mag-doc-lightning .stats, .mag-atomic-document.mag-doc-lightning .two{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 650px){.mag-atomic-document.mag-doc-lightning main{width: calc(-20px + 100vw);}
.mag-atomic-document.mag-doc-lightning .stats, .mag-atomic-document.mag-doc-lightning .two, .mag-atomic-document.mag-doc-lightning .controls{grid-template-columns: 1fr;}
}
.mag-atomic-document.mag-doc-lightning-walk{ --bg: var(--c-surface-layer-1); --panel: var(--c-surface-layer-1); --line: var(--c-border); --text: var(--c-text); --muted: var(--c-muted); --hot: #72e7c8; --warn: #f5c451;}
.mag-atomic-document.mag-doc-lightning-walk *{box-sizing: border-box;}
.mag-atomic-document.mag-doc-lightning-walk{margin: 0px; background: var(--bg); color: var(--text); font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45;}
.mag-atomic-document.mag-doc-lightning-walk main{width: min(1480px, -28px + 100vw); margin: 18px auto 48px;}
.mag-atomic-document.mag-doc-lightning-walk header{display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 14px;}
.mag-atomic-document.mag-doc-lightning-walk h1{margin: 0px; font-size:var(--font-step-21);font-family:var(--f-step-21);}
.mag-atomic-document.mag-doc-lightning-walk .muted, .mag-atomic-document.mag-doc-lightning-walk .subtle{color: var(--muted);}
.mag-atomic-document.mag-doc-lightning-walk .subtle{font-size:var(--font-step-13);font-family:var(--f-step-13);}
.mag-atomic-document.mag-doc-lightning-walk .grid{display: grid; gap: 12px;}
.mag-atomic-document.mag-doc-lightning-walk .stats{grid-template-columns: repeat(6, minmax(0px, 1fr));}
.mag-atomic-document.mag-doc-lightning-walk .two{grid-template-columns: 1fr 1fr;}
.mag-atomic-document.mag-doc-lightning-walk .card{background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-width: 0px;}
.mag-atomic-document.mag-doc-lightning-walk .label{text-transform: uppercase; letter-spacing: 0.08em; font-size:var(--font-step-13);font-family:var(--f-step-13); color: var(--muted); margin-bottom: 4px;}
.mag-atomic-document.mag-doc-lightning-walk .value{font-size:var(--font-step-21);font-family:var(--f-step-21); font-weight: 700; font-variant-numeric: tabular-nums;}
.mag-atomic-document.mag-doc-lightning-walk table{width: 100%; border-collapse: collapse; margin-top: 8px;}
.mag-atomic-document.mag-doc-lightning-walk th, .mag-atomic-document.mag-doc-lightning-walk td{border-bottom: 1px solid var(--line); padding: 7px 6px; text-align: left; vertical-align: top;}
.mag-atomic-document.mag-doc-lightning-walk th{font-size:var(--font-step-13);font-family:var(--f-step-13); text-transform: uppercase; color: var(--muted); letter-spacing: 0.06em;}
.mag-atomic-document.mag-doc-lightning-walk .num{text-align: right; font-variant-numeric: tabular-nums;}
.mag-atomic-document.mag-doc-lightning-walk .mono{font-family: ui-monospace, SFMono-Regular, Menlo, monospace;}
.mag-atomic-document.mag-doc-lightning-walk .bar{height: 6px; background: rgb(5, 7, 11); border-radius: 99px; overflow: hidden; margin-top: 6px;}
.mag-atomic-document.mag-doc-lightning-walk .fill{height: 100%; background: linear-gradient(90deg,var(--hot),var(--warn)); width: 0px;}
.mag-atomic-document.mag-doc-lightning-walk button{border: 1px solid var(--line); background: rgb(11, 16, 25); color: var(--text); border-radius: 6px; padding: 7px 10px; cursor: pointer;}
.mag-atomic-document.mag-doc-lightning-walk button:hover{border-color: var(--hot);}
.mag-atomic-document.mag-doc-lightning-walk textarea{width: 100%; min-height: 170px; background: rgb(5, 7, 11); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45;}
@media (max-width: 900px){.mag-atomic-document.mag-doc-lightning-walk .stats, .mag-atomic-document.mag-doc-lightning-walk .two{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 650px){.mag-atomic-document.mag-doc-lightning-walk .stats, .mag-atomic-document.mag-doc-lightning-walk .two{grid-template-columns: 1fr;}
}
.mag-atomic-document.mag-doc-number-tree{ --bg: var(--c-surface-layer-1); --panel: var(--c-surface-layer-1); --line: var(--c-border); --text: var(--c-text); --muted: var(--c-muted); --hot: #64e2b7; --warn: #f0c46b; --cold: #78a6ff; --bad: #ff7a90;}
.mag-atomic-document.mag-doc-number-tree *{box-sizing: border-box;}
.mag-atomic-document.mag-doc-number-tree{margin: 0px; min-height: 100vh; background: var(--bg); color: var(--text); font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45;}
.mag-atomic-document.mag-doc-number-tree main{width: min(1600px, -32px + 100vw); margin: 0px auto; padding: 24px 0px 42px;}
.mag-atomic-document.mag-doc-number-tree header{display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px;}
.mag-atomic-document.mag-doc-number-tree h1{margin: 0px; font-size:var(--font-step-21);font-family:var(--f-step-21); letter-spacing: 0px;}
.mag-atomic-document.mag-doc-number-tree .muted{color: var(--muted);}
.mag-atomic-document.mag-doc-number-tree .grid{display: grid; gap: 12px;}
.mag-atomic-document.mag-doc-number-tree .stats{grid-template-columns: repeat(6, minmax(0px, 1fr));}
.mag-atomic-document.mag-doc-number-tree .two{grid-template-columns: 1.15fr 0.85fr; margin-top: 12px;}
.mag-atomic-document.mag-doc-number-tree .card{background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; min-width: 0px;}
.mag-atomic-document.mag-doc-number-tree .label{color: var(--muted); font-size:var(--font-step-13);font-family:var(--f-step-13); text-transform: uppercase;}
.mag-atomic-document.mag-doc-number-tree .value{font-size:var(--font-step-21);font-family:var(--f-step-21); font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mag-atomic-document.mag-doc-number-tree .bar{height: 14px; background: rgb(5, 7, 11); border: 1px solid var(--line); border-radius: 999px; overflow: hidden;}
.mag-atomic-document.mag-doc-number-tree .fill{height: 100%; width: 0%; background: linear-gradient(90deg, var(--cold), var(--hot));}
.mag-atomic-document.mag-doc-number-tree table{width: 100%; border-collapse: collapse;}
.mag-atomic-document.mag-doc-number-tree th, .mag-atomic-document.mag-doc-number-tree td{padding: 8px 7px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;}
.mag-atomic-document.mag-doc-number-tree th{color: var(--muted); font-weight: 650; font-size:var(--font-step-13);font-family:var(--f-step-13);}
.mag-atomic-document.mag-doc-number-tree td.num, .mag-atomic-document.mag-doc-number-tree th.num{text-align: right; font-variant-numeric: tabular-nums;}
.mag-atomic-document.mag-doc-number-tree button{border: 1px solid var(--line); background: rgb(11, 16, 25); color: var(--text); border-radius: 6px; padding: 7px 10px; cursor: pointer;}
.mag-atomic-document.mag-doc-number-tree button:hover{border-color: var(--hot);}
.mag-atomic-document.mag-doc-number-tree .target{font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all;}
.mag-atomic-document.mag-doc-number-tree .expr{color: var(--warn);}
.mag-atomic-document.mag-doc-number-tree .timeline{display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 8px; margin-top: 10px; max-height: 360px; overflow: auto; padding-right: 4px;}
.mag-atomic-document.mag-doc-number-tree .bucket{min-height: 74px; text-align: left; display: grid; align-content: space-between; gap: 6px;}
.mag-atomic-document.mag-doc-number-tree .bucket.hot{border-color: var(--hot);}
.mag-atomic-document.mag-doc-number-tree .bucket.empty{color: var(--muted);}
.mag-atomic-document.mag-doc-number-tree .bucket strong{font-size:var(--font-step-13);font-family:var(--f-step-13);}
.mag-atomic-document.mag-doc-number-tree .mini{height: 8px; background: rgb(5, 7, 11); border: 1px solid var(--line); border-radius: 999px; overflow: hidden;}
.mag-atomic-document.mag-doc-number-tree .mini > span{display: block; height: 100%; background: var(--hot); width: 0%;}
.mag-atomic-document.mag-doc-number-tree .pillrow{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;}
.mag-atomic-document.mag-doc-number-tree .pill{border: 1px solid var(--line); border-radius: 999px; padding: 5px 9px; color: var(--muted);}
.mag-atomic-document.mag-doc-number-tree .detail-layout{grid-template-columns: 1fr 1fr; margin-top: 12px;}
.mag-atomic-document.mag-doc-number-tree .copybox{margin-top: 12px;}
.mag-atomic-document.mag-doc-number-tree .copyhead{display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px;}
.mag-atomic-document.mag-doc-number-tree textarea.dump{width: 100%; min-height: 170px; resize: vertical; border: 1px solid var(--line); border-radius: 8px; background: rgb(5, 7, 11); color: var(--text); padding: 10px; font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45; white-space: pre;}
@media (max-width: 1000px){.mag-atomic-document.mag-doc-number-tree .stats, .mag-atomic-document.mag-doc-number-tree .two, .mag-atomic-document.mag-doc-number-tree .detail-layout{grid-template-columns: 1fr 1fr;}
}
@media (max-width: 700px){.mag-atomic-document.mag-doc-number-tree main{width: calc(-20px + 100vw);}
.mag-atomic-document.mag-doc-number-tree .stats, .mag-atomic-document.mag-doc-number-tree .two, .mag-atomic-document.mag-doc-number-tree .detail-layout{grid-template-columns: 1fr;}
}
.mag-atomic-document.mag-doc-path-cube{ --bg: var(--c-surface-layer-1); --panel: var(--c-surface-layer-1); --line: rgba(238, 240, 223, 0.16); --text: var(--c-text); --muted: var(--c-muted); --accent: #d9c27b; --blue: #9ecaff; --green: #94d394; --danger: #d58b8b;}
.mag-atomic-document.mag-doc-path-cube *{box-sizing: border-box;}
.mag-atomic-document.mag-doc-path-cube{margin: 0px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0px; overflow-x: hidden;}
.mag-atomic-document.mag-doc-path-cube main{width: 100%; min-height: 100vh; display: grid; grid-template-rows: auto auto minmax(620px, 78vh) auto; gap: 10px;}
.mag-atomic-document.mag-doc-path-cube .toolbar, .mag-atomic-document.mag-doc-path-cube .stats, .mag-atomic-document.mag-doc-path-cube .detail-row{display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center;}
.mag-atomic-document.mag-doc-path-cube .toolbar{padding: 10px 14px 0px;}
.mag-atomic-document.mag-doc-path-cube .camera-presets{display: inline-flex; gap: 4px; align-items: center;}
.mag-atomic-document.mag-doc-path-cube .camera-presets button{padding-inline: 7px;}
.mag-atomic-document.mag-doc-path-cube .is-hidden{display: none !important;}
.mag-atomic-document.mag-doc-path-cube h1{margin: 0px 12px 0px 0px; font-size:var(--font-step-13);font-family:var(--f-step-13); font-weight: 650; color: var(--accent);}
.mag-atomic-document.mag-doc-path-cube button, .mag-atomic-document.mag-doc-path-cube select, .mag-atomic-document.mag-doc-path-cube .toggle{border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: color-mix(in srgb, var(--accent) 15%, var(--panel)); color: var(--text); font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45;}
.mag-atomic-document.mag-doc-path-cube button, .mag-atomic-document.mag-doc-path-cube select, .mag-atomic-document.mag-doc-path-cube .toggle{cursor: pointer;}
.mag-atomic-document.mag-doc-path-cube .toggle{display: inline-flex; gap: 6px; align-items: center; user-select: none;}
.mag-atomic-document.mag-doc-path-cube input[type="range"]{width: 112px; accent-color: var(--accent);}
.mag-atomic-document.mag-doc-path-cube #tickEnergyRange{width: 260px;}
.mag-atomic-document.mag-doc-path-cube .hint, .mag-atomic-document.mag-doc-path-cube .stats{color: var(--muted); font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45;}
.mag-atomic-document.mag-doc-path-cube .stats{padding: 0px 14px;}
.mag-atomic-document.mag-doc-path-cube .scene-shell{position: relative; min-height: 620px; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(217, 194, 123, 0.075), transparent 38%), linear-gradient(rgba(7, 8, 6, 0.68), rgb(7, 8, 6));}
.mag-atomic-document.mag-doc-path-cube #builderCanvas{display: block; width: 100%; height: 100%; min-height: 620px; outline: none; touch-action: none;}
.mag-atomic-document.mag-doc-path-cube .hud{position: absolute; left: 14px; bottom: 12px; display: grid; gap: 5px; color: rgba(238, 240, 223, 0.78); font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45; pointer-events: none; text-shadow: rgba(0, 0, 0, 0.74) 0px 2px 8px;}
.mag-atomic-document.mag-doc-path-cube .details{display: grid; gap: 6px; max-height: 260px; overflow: auto; padding: 10px 14px 18px; background: rgba(255, 255, 255, 0.01);}
.mag-atomic-document.mag-doc-path-cube .detail-row{justify-content: flex-start; color: var(--muted); font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45; border-bottom: 1px solid rgba(238, 240, 223, 0.07); padding-bottom: 5px;}
.mag-atomic-document.mag-doc-path-cube .detail-row:last-child{border-bottom: 0px;}
.mag-atomic-document.mag-doc-path-cube .detail-row strong{color: var(--text);}
@media (max-width: 900px){.mag-atomic-document.mag-doc-path-cube main{grid-template-rows: auto auto minmax(520px, 76vh) auto;}
.mag-atomic-document.mag-doc-path-cube .toolbar{padding: 8px 8px 0px;}
.mag-atomic-document.mag-doc-path-cube .stats{padding: 0px 8px;}
.mag-atomic-document.mag-doc-path-cube .scene-shell, .mag-atomic-document.mag-doc-path-cube #builderCanvas{min-height: 520px;}
}

.mag-atomic-document{width:987px;height:610px;overflow:auto;padding:13px;box-sizing:border-box;min-height:0!important;color:var(--c-text);font-size:var(--font-step-13);font-family:var(--f-step-13);}
.mag-atomic-document > main{width:100%;min-height:0;margin:0;padding:0;}

/* Shared module optics: injectMwsViewStyle */

      .mws-view{align-self:stretch;flex:1 1 auto;width:100%;height:100%;display:flex;flex-direction:column;gap:21px;overflow:hidden;min-height:0}
      .mws-recs-wrap{flex:1 1 auto;min-height:0;overflow:hidden}
      .mws-recs-more{font-size:var(--font-step-8);font-family:var(--f-step-8);text-transform:uppercase;letter-spacing:1px;color:var(--c-muted,#8a8f7a);margin-top:8px}
      .mws-view-title{font-family:var(--f-step-21);font-size:var(--font-step-21);letter-spacing:2px}
      .mws-view-sum{color:var(--c-muted,#8a8f7a);font-size:var(--font-step-13);font-family:var(--f-step-13);margin-top:5px}
      .mws-stats{display:flex;flex-wrap:wrap;gap:13px}
      .mws-tools{display:flex;flex-wrap:wrap;gap:13px}
      .mws-recs{display:flex;flex-direction:column;gap:8px}
      .mws-rec-meta{font-size:var(--font-step-8);font-family:var(--f-step-8);text-transform:uppercase;letter-spacing:1px;color:var(--c-muted,#8a8f7a)}
      .mws-rec-status{font-size:var(--font-step-8);font-family:var(--f-step-8);text-transform:uppercase;letter-spacing:1px;color:var(--c-accent,#B8BE9E);white-space:nowrap}
      .mws-view-empty{color:var(--c-muted,#8a8f7a);font-size:var(--font-step-13);font-family:var(--f-step-13)}
    

/* Shared module optics: injectDitStyle */

      .dit-view{align-self:stretch;flex:1 1 auto;width:100%;height:100%;min-height:0;display:flex;flex-direction:column;gap:13px;overflow:hidden}
      .dit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:13px}
      .dit-title{font-family:var(--f-step-21);font-size:var(--font-step-21)}
      .dit-sub{font-size:var(--font-step-13);font-family:var(--f-step-13);color:var(--c-muted,#8a8f7a)}
      .dit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
      .dit-form{display:grid;grid-template-columns:minmax(0,1fr) 144px 89px;gap:8px}
      .dit-form input,.dit-form select{min-width:0;height:34px;border:1px solid var(--c-border,rgba(255,255,255,.18));border-radius:6px;background:var(--c-control-surface);color:var(--c-text);padding:0 10px}
      .dit-form button,.dit-button{height:34px;border:1px solid var(--c-border,rgba(255,255,255,.2));border-radius:6px;background:var(--c-control-surface);color:var(--c-text);padding:0 13px}
      .dit-results{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:6px}
      .dit-row{display:grid;grid-template-columns:minmax(0,1fr) 89px 89px 89px 89px;gap:8px;align-items:center;border:1px solid var(--c-border,rgba(255,255,255,.1));border-radius:8px;background:var(--c-surface-layer-1);color:var(--c-text);padding:8px 10px}
      .dit-row-title{min-width:0}
      .dit-row-title strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-step-13);font-family:var(--f-step-13)}
      .dit-row-title code{font-size:var(--font-step-8);font-family:var(--f-step-8);color:var(--c-muted,#8a8f7a)}
      .dit-cell{font-size:var(--font-step-13);font-family:var(--f-step-13);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .dit-detail{border:1px solid var(--c-border,rgba(255,255,255,.14));border-radius:8px;background:var(--c-surface-layer-1);color:var(--c-text);padding:13px;max-height:144px;overflow:hidden}
      .dit-detail p{margin:5px 0 0;color:var(--c-muted,#8a8f7a);font-size:var(--font-step-13);font-family:var(--f-step-13)}
      .dit-status-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-height:0;overflow:hidden}
      .dit-kv{display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--c-border,rgba(255,255,255,.12));padding:6px 0;font-size:var(--font-step-13);font-family:var(--f-step-13)}
      @media (max-width: 760px){.dit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dit-form{grid-template-columns:1fr}.dit-row{grid-template-columns:1fr 1fr}.dit-status-list{grid-template-columns:1fr}}
    

/* Shared module optics: injectMagSkyStyle */

      .mag-sky{align-self:stretch;flex:1 1 auto;width:100%;height:100%;display:grid;grid-template-columns:377px 1fr;gap:13px;overflow:hidden;min-height:0}
      .mag-sky-stage{position:relative;min-height:0;border:1px solid var(--c-border,rgba(255,255,255,.16));border-radius:8px;background:#0b0e14;overflow:hidden}
      .mag-sky-canvas{width:100%;height:100%;display:block}
      .mag-sky-side{min-height:0;display:flex;flex-direction:column;gap:13px;overflow:hidden}
      .mag-sky-title{font-family:var(--f-step-21);font-size:var(--font-step-21);letter-spacing:2px}
      .mag-sky-note{font-size:var(--font-step-13);font-family:var(--f-step-13);line-height:1.45;color:var(--c-muted,#8a8f7a)}
      .mag-sky-controls{display:grid;grid-template-columns:repeat(3,89px) 1fr;gap:8px;align-items:end}
      .mag-sky-field{display:flex;flex-direction:column;gap:5px}
      .mag-sky-field label{font-size:var(--font-step-8);font-family:var(--f-step-8);text-transform:uppercase;letter-spacing:1px;color:var(--c-muted,#8a8f7a)}
      .mag-sky-field input{height:34px;border:1px solid var(--c-border,rgba(255,255,255,.18));border-radius:6px;background:rgba(255,255,255,.86);color:inherit;padding:0 8px;min-width:0}
      .mag-sky-btn{height:34px;border:1px solid var(--c-border,rgba(255,255,255,.2));border-radius:6px;background:rgba(0,0,0,.12);color:inherit}
      .mag-sky-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
      .mag-sky-stat{min-height:55px;border:1px solid var(--c-border,rgba(255,255,255,.14));border-radius:8px;background:rgba(0,0,0,.14);padding:8px 13px;display:flex;flex-direction:column;justify-content:center;gap:3px}
      .mag-sky-stat strong{font-size:var(--font-step-21);font-family:var(--f-step-21);line-height:1}
      .mag-sky-stat span{font-size:var(--font-step-8);font-family:var(--f-step-8);text-transform:uppercase;letter-spacing:1px;color:var(--c-muted,#8a8f7a)}
      .mag-sky-list{min-height:0;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:8px}
      .mag-sky-card{border:1px solid var(--c-border,rgba(255,255,255,.14));border-radius:8px;background:rgba(0,0,0,.12);padding:8px 13px;min-width:0}
      .mag-sky-card strong{display:block;font-size:var(--font-step-13);font-family:var(--f-step-13)}
      .mag-sky-card span{display:block;margin-top:3px;font-size:var(--font-step-13);font-family:var(--f-step-13);color:var(--c-muted,#8a8f7a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .mag-sky-error{color:#b44;font-size:var(--font-step-13);font-family:var(--f-step-13)}
    

/* Shared module optics: injectDesignSystemEditorStyle */

      .design-system{display:grid;grid-template-columns:233px 1fr 377px;gap:13px;height:100%;min-height:0}
      .design-system-col{min-height:0;overflow:auto;border:1px solid var(--c-border,rgba(255,255,255,.14));border-radius:8px;background:rgba(255,255,255,.52);padding:13px}
      .design-system-list{display:flex;flex-direction:column;gap:8px}
      .design-system-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:13px}
      .design-system-modes{display:flex;gap:8px;margin-bottom:13px}
      .design-system-btn{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:0 13px;border:1px solid var(--c-border,rgba(255,255,255,.2));border-radius:6px;background:rgba(255,255,255,.86);color:inherit}
      .design-system-btn.is-active{background:rgba(226,232,215,0.94);border-color:rgba(116,129,102,0.34)}
      .design-system-status{font-size:var(--font-step-13);font-family:var(--f-step-13);color:var(--c-muted,#8a8f7a);display:flex;align-items:center}
      .design-system-preview{display:flex;flex-direction:column;gap:13px;height:100%}
      .design-system-stage{flex:1 1 auto;min-height:377px;border:1px dashed rgba(116,129,102,0.24);border-radius:8px;padding:13px;background:rgba(248,249,245,0.74);overflow:hidden}
      .design-system-form{display:flex;flex-direction:column;gap:13px}
      .design-system-state{display:flex;flex-direction:column;gap:8px;padding:13px;border:1px solid var(--c-border,rgba(255,255,255,.14));border-radius:8px;background:rgba(255,255,255,.64)}
      .design-system-state-head{font-size:var(--font-step-8);font-family:var(--f-step-8);text-transform:uppercase;letter-spacing:1px;color:var(--c-muted,#8a8f7a)}
      .design-system-field{display:flex;flex-direction:column;gap:5px}
      .design-system-field label{font-size:var(--font-step-13);font-family:var(--f-step-13)}
      .design-system-field input{height:34px;border:1px solid var(--c-border,rgba(255,255,255,.18));border-radius:6px;padding:0 8px;background:rgba(255,255,255,.92)}
      .design-preview-shell{display:grid;grid-template-columns:89px 1fr;gap:13px;height:100%}
      .design-preview-rail{display:flex;flex-direction:column;border:1px solid rgba(116,129,102,0.14);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.5)}
      .design-preview-tiles{display:grid;grid-template-columns:repeat(3,89px);gap:8px}
      .design-preview-tiles .tile,.design-preview-rail .rail-ctx-btn{display:flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid rgba(116,129,102,0.16)}
      .design-preview-frame{display:flex;align-items:stretch;justify-content:stretch}
      .design-preview-main-frame{width:100%;max-width:987px;min-height:377px}
      .design-preview-header{display:flex;align-items:center;justify-content:space-between}
      .design-preview-controls{display:flex;flex-wrap:wrap;gap:8px}
      .design-preview-stats{display:flex;gap:8px;flex-wrap:wrap}
      .design-preview-empty{font-size:var(--font-step-13);font-family:var(--f-step-13);color:var(--c-muted,#8a8f7a)}
      .design-system-summary{display:flex;flex-direction:column;gap:8px}
      .design-system-summary-card{padding:13px;border:1px solid var(--c-border,rgba(255,255,255,.14));border-radius:8px;background:rgba(255,255,255,.64)}
      .design-system-summary-card strong{display:block;font-size:var(--font-step-13);font-family:var(--f-step-13)}
      .design-system-summary-card span{display:block;font-size:var(--font-step-13);font-family:var(--f-step-13);color:var(--c-muted,#8a8f7a);margin-top:5px}
    

/* Shared Wordmapping optics; calibrated user font steps. */
.shell .main:has(.wm) .main-frame{width:min(987px,100%);height:min(610px,100%);flex:0 1 987px;min-height:0;margin:auto}
.shell .main:has(.wm) .main-frame-content{width:100%;height:100%;flex:1 1 auto;min-height:0;max-height:100%}
.shell .main:has(.wm) .main-frame-content .main-context{height:100%;min-height:0;padding:0;display:block}
.wm{width:100%;height:100%;min-width:0;min-height:0;overflow-x:auto;overflow-y:scroll;scrollbar-gutter:stable;padding:13px;color:var(--c-text,#eee);background:var(--c-bg,#151515);scrollbar-color:#747a80 #202226}
.wm::-webkit-scrollbar{width:12px;height:12px}.wm::-webkit-scrollbar-track{background:#202226}.wm::-webkit-scrollbar-thumb{background:#747a80;border:2px solid #202226;border-radius:6px}.wm::-webkit-scrollbar-thumb:hover{background:#a1a8ae}
.wm-input{display:grid;gap:8px}.wm textarea{width:100%;min-height:89px;resize:vertical;padding:8px;background:var(--c-panel,#222);color:inherit;border:1px solid var(--c-border,#555);font-size:var(--font-step-13);font-family:var(--f-step-13);border-radius:4px}
.wm-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin:8px 0}.wm-toolbar label{display:flex;align-items:center;gap:5px;font-size:var(--font-step-13);font-family:var(--f-step-13);}.wm button,.wm select{color:inherit;background:var(--c-panel,#222);border:1px solid var(--c-border,#555);padding:6px 12px;border-radius:4px;cursor:pointer}.wm button:disabled{opacity:.5}.wm a{color:#7bcdd0;font-size:var(--font-step-13);font-family:var(--f-step-13);}.wm audio{max-width:100%;height:32px}.wm output{font-size:var(--font-step-13);overflow-wrap:anywhere;font-family:var(--f-step-13);}.wm-summary{display:flex;flex-wrap:wrap;gap:21px;padding:13px 0;border-block:1px solid var(--c-border,#444)}.wm-summary div{min-width:89px}.wm dt{font-size:var(--font-step-13);color:var(--c-muted,#aaa);font-family:var(--f-step-13);}.wm dd{margin:5px 0 0;font-size:var(--font-step-13);font-family:var(--f-step-13);overflow-wrap:anywhere}
.wm-graph{margin:13px 0;border-bottom:1px solid var(--c-border,#444)}.wm-graph header{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:5px 0}.wm h2{font-size:var(--font-step-13);font-weight:500;margin:0;font-family:var(--f-step-13);}.wm-svg{overflow:auto;background:#050607}.wm-svg svg{display:block;max-width:100%;height:auto;min-width:600px}.wm-table{overflow:auto}.wm table{width:100%;border-collapse:collapse;font-size:var(--font-step-13);font-family:var(--f-step-13)}.wm th,.wm td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--c-border,#444);vertical-align:top;max-width:377px;overflow-wrap:anywhere}.wm details{padding:10px 0;border-bottom:1px solid var(--c-border,#444)}.wm summary{cursor:pointer;font-size:var(--font-step-13);margin-bottom:8px;font-family:var(--f-step-13);}.wm pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--font-step-13);font-family:var(--f-step-13)}.wm-warning{font-size:var(--font-step-13);color:#f0cf72;font-family:var(--f-step-13);}.wm-empty{font-size:var(--font-step-13);color:var(--c-muted,#aaa);font-family:var(--f-step-13);}
.wm-ani-normal{fill:none;stroke:#e8f7fb;stroke-width:3}.wm-ani-swing{fill:none;stroke:#edc15a;stroke-width:3}.wm-ani-playhead{stroke:#fff;stroke-width:1;opacity:0}.wm-ani-hot{filter:brightness(2)}
@media(max-width:600px){.wm{padding:8px}.wm-toolbar{gap:8px}.wm-summary{gap:13px}.wm audio{width:100%}}


/* core.style.listTile modifier compact (core.shape.tile.144x55): title only */
.list-tile.is-compact { height:55px; padding:8px; }
.list-tile.is-compact strong { -webkit-line-clamp:2; }

/* Native content uses the same STD zones; scientific data/scene colors stay
   in their original renderers. These selectors only arrange catalog nodes. */
.mws-view-main3, .dit-view { color:var(--c-text); }
.mag-atomic-document.main3 { width:100%; height:100%; padding:0; background:transparent; overflow:hidden; }
.mag-atomic-document.main3 > .MainHeader { margin:0; align-items:center; flex-direction:row; justify-content:space-between; gap:13px; }
.mag-atomic-document.main3 > .MainHeader h1 { margin:0; line-height:1; }
.mag-atomic-document.main3 > .MainHeader .muted { font-size:var(--font-step-8); font-family:var(--f-step-8); overflow-wrap:anywhere; }
.mag-atomic-document.main3 > .MainBody > main { width:100%; margin:0; padding:0; }
.mag-atomic-document.main3 .MainSideBar .stats { display:grid; grid-template-columns:144px; gap:8px; }
.mag-atomic-document.main3 .MainSideBar .list-tile .value { font-size:var(--font-step-13); font-family:var(--f-step-13); color:var(--c-text); white-space:normal; font-weight:700; line-height:1.3; }
.mag-atomic-document.main3 .MainSideBar .list-tile .label { font-size:var(--font-step-8); font-family:var(--f-step-8); color:var(--c-muted); }
.shell .giza-host > .giza-main-sidebar { padding:0; border:0; border-radius:0; background:transparent !important; scrollbar-gutter:auto; scrollbar-width:none; }
.giza-main-sidebar > * { flex-shrink:0; min-width:0; max-width:144px; }
.giza-main-sidebar #controls { gap:5px; }
.giza-main-sidebar .btn { width:144px; height:34px; min-height:34px; }
.giza-main-header { padding:5px 13px; grid-template-columns:233px minmax(0,1fr); }
.giza-host #data { font-size:var(--font-step-8); font-family:var(--f-step-8); line-height:1.35; }

.mws-rec-details { min-width:0; flex:0 1 34%; display:grid; gap:5px; text-align:right; }
.mws-rec-details .mws-rec-meta { overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

.giza-host #title .sub { margin-top:3px; line-height:1.3; }

.giza-host .btn .ui-text-micro { line-height:1.3; }

/* core.style.listTile modifier square (core.shape.tile.89x89): smallest font step */
.list-tile.is-square { width:89px; height:89px; padding:8px; gap:3px; align-content:start; }
.list-tile.is-square strong, .list-tile.is-square span { font-size:var(--font-step-8); font-family:var(--f-step-8); line-height:1.3; white-space:normal; -webkit-line-clamp:3; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; }
.list-tile.is-square span { -webkit-line-clamp:2; }

/* core.composition.layout.tileRow */
.tile-row { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start; }

/* core.composition.chip */
.chip { display:inline-flex; align-items:center; gap:5px; height:21px; max-width:100%; box-sizing:border-box; padding:0 3px 0 8px; border:1px solid var(--c-border); border-radius:5px; color:var(--c-text); font-size:var(--font-step-13); font-family:var(--f-step-13); }
.chip > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chip-meta { color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); }
.chip-remove { flex:0 0 auto; width:13px; height:13px; padding:0; border:0; background:transparent; color:var(--c-muted); font-size:var(--font-step-8); font-family:var(--f-step-8); line-height:13px; cursor:pointer; }
.chip-remove:hover { color:var(--c-text); }

/* core.composition.layout.columnBoard */
.column-board { display:grid; grid-template-columns:repeat(auto-fill,minmax(144px,1fr)); gap:8px; align-items:start; }
.column-board-col { display:flex; flex-direction:column; gap:3px; padding:8px; border:1px solid var(--c-border); border-radius:8px; min-width:0; }
.column-board-head { display:flex; align-items:center; justify-content:space-between; gap:5px; color:var(--c-text); font-size:var(--font-step-13); font-family:var(--f-step-13); font-weight:700; padding-bottom:3px; border-bottom:1px solid var(--c-border); }

/* core.style.listTile modifier small (144x55, font step 8): event tiles in side bars */
.list-tile.is-small { height:55px; padding:5px 8px; gap:3px; }
.list-tile.is-small strong { font-size:var(--font-step-8); font-family:var(--f-step-8); -webkit-line-clamp:2; }

/* core.composition.searchPicker: search input, server results as chips in a drop-down layer */
.search-picker { position:relative; flex:1 1 0; min-width:0; }
.search-picker > input[type="search"] { width:100%; height:34px; box-sizing:border-box; font-size:var(--font-step-13); font-family:var(--f-step-13); }
.search-picker-results { position:absolute; top:100%; left:0; right:0; z-index:8; display:flex; flex-wrap:wrap; gap:3px; margin-top:3px; padding:5px; border:1px solid var(--c-border-hi); border-radius:8px; background:var(--c-surface); }
.search-picker-results:empty { display:none; }
.search-picker-results .chip { cursor:pointer; background:transparent; }
.search-picker-results .chip:hover { border-color:var(--c-border-hi); }
.search-picker.is-wide { flex:3 1 0; }

/* side bar tiles: Fibonacci width (89) instead of the 111px left by the side bar padding; titles in the
   chosen step font without bold (bold read as "wrong font" next to the rest of the side bar) */
.list-tile.is-small { width:89px; justify-self:center; }
.list-tile.is-small strong, .list-tile.is-compact strong, .list-tile.is-square strong { font-weight:400; }

/* TRIAL (Pieter 2026-10-06, only Event > Übersicht, remove after viewing): side bar one Fibonacci step
   wider (233 instead of 144), event tiles 144 wide, 13px gaps. */
.shell .main:has(.pem-event-detail-view) .main-frame { width:min(1233px,100%); flex-basis:1233px; }
.pem-main3.pem-event-detail-view { grid-template-columns:233px 987px; }
.pem-main3.pem-event-detail-view > .MainSideBar { width:233px; padding:13px; }
.pem-main3.pem-event-detail-view > .MainSideBar .stack.is-tight { gap:13px; }
.pem-main3.pem-event-detail-view > .MainSideBar .list-tile.is-small { width:144px; }

.main-context:has(> .mag-knowledge-host) { display:block; padding:0; overflow:hidden; }
.mag-knowledge-host { width:100%; height:100%; min-height:0; box-sizing:border-box; padding:13px; overflow:auto; color:var(--c-text); }
.mag-knowledge { display:flex; flex-direction:column; gap:13px; min-width:0; font-family:var(--f-step-13); font-size:var(--font-step-13); }
.mag-knowledge .mk-header { display:flex; align-items:flex-start; justify-content:space-between; gap:13px; padding-bottom:8px; border-bottom:1px solid var(--c-border); }
.mag-knowledge h1 { margin:0; font-family:var(--f-step-21); font-size:var(--font-step-21); font-weight:500; }
.mag-knowledge h2 { margin:0 0 8px; font-size:var(--font-step-13); font-weight:500; }
.mag-knowledge p { margin:4px 0 0; color:var(--c-muted); }
.mag-knowledge .mk-toolbar { display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.mag-knowledge label { display:flex; flex-direction:column; gap:3px; min-width:0; color:var(--c-muted); font-size:var(--font-step-8); }
.mag-knowledge .mk-query { flex:1 1 360px; }
.mag-knowledge .mk-source { flex:0 1 260px; }
.mag-knowledge .mk-file { flex:1 1 360px; }
.mag-knowledge input, .mag-knowledge select, .mag-knowledge button { min-height:34px; box-sizing:border-box; font:inherit; color:var(--c-text); background:var(--c-surface); border:1px solid var(--c-border); border-radius:4px; padding:5px 8px; }
.mag-knowledge button { cursor:pointer; }
.mag-knowledge button:hover { border-color:var(--c-border-hi); }
.mag-knowledge button:disabled { opacity:.55; cursor:wait; }
.mag-knowledge .mk-results { display:flex; flex-direction:column; border-top:1px solid var(--c-border); }
.mag-knowledge .mk-result { display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr); gap:3px 13px; padding:8px 5px; border-bottom:1px solid var(--c-border); color:var(--c-text); text-decoration:none; }
.mag-knowledge .mk-result:hover { background:var(--c-surface); }
.mag-knowledge .mk-result strong { overflow-wrap:anywhere; font-weight:500; }
.mag-knowledge .mk-result > span { color:var(--c-muted); font-size:var(--font-step-8); overflow-wrap:anywhere; }
.mag-knowledge .mk-result p { grid-column:2; overflow-wrap:anywhere; white-space:pre-wrap; }
.mag-knowledge .mk-result-kind { grid-row:span 3; }
.mag-knowledge .mk-empty, .mag-knowledge .mk-status, .mag-knowledge .mk-help { padding:8px 0; color:var(--c-muted); }
.mag-knowledge .mk-error { color:var(--c-danger, #b33); }
.mag-knowledge .mk-section { display:flex; flex-direction:column; gap:5px; padding:8px 0 13px; border-bottom:1px solid var(--c-border); }
.mag-knowledge .mk-table-wrap { max-width:100%; overflow:auto; }
.mag-knowledge .mk-table { width:100%; border-collapse:collapse; text-align:left; }
.mag-knowledge .mk-table th, .mag-knowledge .mk-table td { padding:7px 8px; vertical-align:top; border-bottom:1px solid var(--c-border); }
.mag-knowledge .mk-table th { color:var(--c-muted); font-size:var(--font-step-8); font-weight:500; }
.mag-knowledge .mk-table small { display:block; margin-top:3px; color:var(--c-muted); overflow-wrap:anywhere; }
.mag-knowledge .mk-fields { margin:0; border-top:1px solid var(--c-border); }
.mag-knowledge .mk-field { display:grid; grid-template-columns:minmax(180px,28%) minmax(0,1fr); border-bottom:1px solid var(--c-border); }
.mag-knowledge .mk-field dt, .mag-knowledge .mk-field dd { min-width:0; margin:0; padding:8px; }
.mag-knowledge .mk-field dt { color:var(--c-muted); font-size:var(--font-step-8); }
.mag-knowledge .mk-field pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; }
.mag-knowledge .mk-back { display:inline-block; margin-bottom:8px; color:var(--c-text); }
.mag-knowledge .mk-object-meta { margin-bottom:8px; font-size:var(--font-step-8); }
@media (max-width:700px) {
  .mag-knowledge-host { padding:8px; }
  .mag-knowledge .mk-result { grid-template-columns:1fr; }
  .mag-knowledge .mk-result-kind { grid-row:auto; }
  .mag-knowledge .mk-result p { grid-column:1; }
  .mag-knowledge .mk-field { grid-template-columns:1fr; }
  .mag-knowledge .mk-field dt { padding-bottom:0; }
}

/* Catalog-selected single Main surface. Shared optics; no product page CSS. */
.mws-view.main987,
.dit-view.main987 {
  width:100%; height:100%; min-width:0; min-height:0; box-sizing:border-box;
  padding:13px; border:1px solid var(--c-border); border-radius:8px;
  background:var(--c-surface-layer-1); color:var(--c-text); overflow:auto;
}
.dit-view.main987 > :not(.dit-view) { flex-shrink:0; }
.dit-view.main987 .dit-grid > .list-tile { width:auto; min-width:0; }
.dit-view.main987 .dit-results { overflow:auto; }
.dit-view.main987 .dit-detail { flex-shrink:0; overflow:auto; }
.shell .main-context:has(.mws-view.main987, .dit-view.main987) { border:0; background:transparent; }