/* ── PALETTE ── */

/* ══ TOKENS ══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light;

  --sage:        #9CAF9B; --sage-rgb: 156,175,155;
  --sage-deep:   #5D735E;
  --sage-ink:    #3E4F41; --sage-ink-rgb: 62,79,65;
  --active:      #E6B44C; --active-on: #33362E;
  --champagne:   #E8D8C3; --champagne-rgb: 232,216,195;
  --champagne-deep: #C9B296;
  --gold:        #B99A5B;
  --gold-ink:    #7A6234;
  --cream:       #FAF7F0; --cream-rgb: 250,247,240;
  --ink:         #33362E; --ink-rgb: 51,54,46;
  --muted:       #8B8778; --muted-rgb: 139,135,120;
  --white:       #FFFFFF; --white-rgb: 255,255,255;

  --green:  #5F9367; --green-rgb: 95,147,103;
  --amber:  #C98F2C; --amber-rgb: 201,143,44;
  --red:    #C25E4C; --red-rgb: 194,94,76;

  --card:      #FFFFFF;
  --panel:     #F3EEE3;
  --border:    rgba(var(--sage-ink-rgb),.14);
  --input-bg:  #FDFCF8;
  --input-bdr: rgba(var(--sage-ink-rgb),.22);
  --shadow:    0 10px 28px rgba(var(--sage-ink-rgb),.10);
  --shadow-sm: 0 3px 10px rgba(var(--sage-ink-rgb),.08);
  --shadow-md: 0 6px 18px rgba(0,0,0,.18);

  --main-max: 1280px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --nav-h: 50px;
  --side-w: 200px;
}

/* ══ NAMED THEMES ════════════════════════════════════════════════════════ */
:root[data-theme="midnight-tailoring"] {
  --sage:        #4F758B; --sage-rgb: 79,117,139;
  --sage-deep:   #003B5C;
  --active:      #7EC8E3; --active-on: #131E29;
  --sage-ink:    #131E29; --sage-ink-rgb: 19,30,41;
  --champagne:   #E5DDD0; --champagne-rgb: 229,221,208;
  --champagne-deep: #D6D2C4;
  --gold:        #B9975B;
  --gold-ink:    #78623B;
  --cream:       #E9EEF2; --cream-rgb: 233,238,242;
  --ink:         #252A2E; --ink-rgb: 37,42,46;
  --muted:       #747A7F; --muted-rgb: 116,122,127;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #D6E0E8;
  --border:    rgba(19,30,41,.14);
  --input-bg:  #F2F6F9;
  --input-bdr: rgba(19,30,41,.22);
  --shadow:    0 10px 28px rgba(19,30,41,.11);
  --shadow-sm: 0 3px 10px rgba(19,30,41,.09);
}
:root[data-theme="forest-heritage"] {
  --sage:        #9CAF88; --sage-rgb: 156,175,136;
  --sage-deep:   #22372B;
  --active:      #A8C24E; --active-on: #183028;
  --sage-ink:    #183028; --sage-ink-rgb: 24,48,40;
  --champagne:   #D6D2C4; --champagne-rgb: 214,210,196;
  --champagne-deep: #BDB8A8;
  --gold:        #B9975B;
  --gold-ink:    #78623B;
  --cream:       #E9EEE3; --cream-rgb: 233,238,227;
  --ink:         #25312A; --ink-rgb: 37,49,42;
  --muted:       #777F79; --muted-rgb: 119,127,121;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #D7E0CC;
  --border:    rgba(24,48,40,.14);
  --input-bg:  #F3F7EE;
  --input-bdr: rgba(24,48,40,.22);
  --shadow:    0 10px 28px rgba(24,48,40,.10);
  --shadow-sm: 0 3px 10px rgba(24,48,40,.08);
}
:root[data-theme="peacock-night"] {
  --sage:        #4F94A6; --sage-rgb: 79,148,166;
  --sage-deep:   #04756B;
  --active:      #B48CE0; --active-on: #131E29;
  --sage-ink:    #131E29; --sage-ink-rgb: 19,30,41;
  --champagne:   #D5C2D8; --champagne-rgb: 213,194,216;
  --champagne-deep: #B49ABB;
  --gold:        #8246AF;
  --gold-ink:    #552E72;
  --cream:       #ECE9F3; --cream-rgb: 236,233,243;
  --ink:         #252632; --ink-rgb: 37,38,50;
  --muted:       #7D7585; --muted-rgb: 125,117,133;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #DCD3EA;
  --border:    rgba(19,30,41,.14);
  --input-bg:  #F5F2FA;
  --input-bdr: rgba(19,30,41,.22);
  --shadow:    0 10px 28px rgba(19,30,41,.11);
  --shadow-sm: 0 3px 10px rgba(19,30,41,.09);
}
:root[data-theme="aubergine-sunset"] {
  --sage:        #B5567D; --sage-rgb: 181,86,125;
  --sage-deep:   #991E66;
  --active:      #FF8367; --active-on: #3F2021;
  --sage-ink:    #3F2021; --sage-ink-rgb: 63,32,33;
  --champagne:   #E4D5D3; --champagne-rgb: 228,213,211;
  --champagne-deep: #D6B7B1;
  --gold:        #E56A54;
  --gold-ink:    #954537;
  --cream:       #F5E9EC; --cream-rgb: 245,233,236;
  --ink:         #332629; --ink-rgb: 51,38,41;
  --muted:       #8A7479; --muted-rgb: 138,116,121;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #EBD3D9;
  --border:    rgba(63,32,33,.14);
  --input-bg:  #FAF0F2;
  --input-bdr: rgba(63,32,33,.22);
  --shadow:    0 10px 28px rgba(63,32,33,.10);
  --shadow-sm: 0 3px 10px rgba(63,32,33,.08);
}

:root[data-theme="oxford-reserve"] {
  --sage:        #53677F; --sage-rgb: 83,103,127;
  --sage-deep:   #0C2340;
  --active:      #C8455A; --active-on: #FFFFFF;
  --sage-ink:    #131E29; --sage-ink-rgb: 19,30,41;
  --champagne:   #E8DED0; --champagne-rgb: 232,222,208;
  --champagne-deep: #D6D2C4;
  --gold:        #B9975B;
  --gold-ink:    #78623B;
  --cream:       #E9EBEE; --cream-rgb: 233,235,238;
  --ink:         #282A2F; --ink-rgb: 40,42,47;
  --muted:       #797A7E; --muted-rgb: 121,122,126;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #D4D9DF;
  --border:    rgba(19,30,41,.14);
  --input-bg:  #F5F6F7;
  --input-bdr: rgba(19,30,41,.22);
  --shadow:    0 10px 28px rgba(19,30,41,.11);
  --shadow-sm: 0 3px 10px rgba(19,30,41,.09);
}
:root[data-theme="obsidian-copper"] {
  --sage:        #5B6770; --sage-rgb: 91,103,112;
  --sage-deep:   #101820;
  --active:      #E07B3C; --active-on: #1D252D;
  --sage-ink:    #1D252D; --sage-ink-rgb: 29,37,45;
  --champagne:   #E3DDD2; --champagne-rgb: 227,221,210;
  --champagne-deep: #D6D2C4;
  --gold:        #9E5330;
  --gold-ink:    #67361F;
  --cream:       #EAEBEC; --cream-rgb: 234,235,236;
  --ink:         #252A2E; --ink-rgb: 37,42,46;
  --muted:       #767C80; --muted-rgb: 118,124,128;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #D6D9DB;
  --border:    rgba(29,37,45,.14);
  --input-bg:  #F5F6F6;
  --input-bdr: rgba(29,37,45,.22);
  --shadow:    0 10px 28px rgba(29,37,45,.11);
  --shadow-sm: 0 3px 10px rgba(29,37,45,.09);
}
:root[data-theme="graphite-cognac"] {
  --sage:        #7A6855; --sage-rgb: 122,104,85;
  --sage-deep:   #333F48;
  --active:      #DDA15E; --active-on: #1A2026;
  --sage-ink:    #1D252D; --sage-ink-rgb: 29,37,45;
  --champagne:   #E5E0D6; --champagne-rgb: 229,224,214;
  --champagne-deep: #D5D1C4;
  --gold:        #AD7C59;
  --gold-ink:    #70513A;
  --cream:       #EEEBE9; --cream-rgb: 238,235,233;
  --ink:         #2C3033; --ink-rgb: 44,48,51;
  --muted:       #7B7974; --muted-rgb: 123,121,116;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #DED9D5;
  --border:    rgba(29,37,45,.14);
  --input-bg:  #F7F6F5;
  --input-bdr: rgba(29,37,45,.22);
  --shadow:    0 10px 28px rgba(29,37,45,.11);
  --shadow-sm: 0 3px 10px rgba(29,37,45,.09);
}

:root[data-theme="bi-twilight"] {
  --sage:        #8246AF; --sage-rgb: 130,70,175;
  --sage-deep:   #004C97;
  --active:      #5B8FF0; --active-on: #131E29;
  --sage-ink:    #131E29; --sage-ink-rgb: 19,30,41;
  --champagne:   #D5C2D8; --champagne-rgb: 213,194,216;
  --champagne-deep: #B99FC1;
  --gold:        #CE0F69;
  --gold-ink:    #860A44;
  --cream:       #EFE7F5; --cream-rgb: 239,231,245;
  --ink:         #2C2733; --ink-rgb: 44,39,51;
  --muted:       #807586; --muted-rgb: 128,117,134;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #E0D1EB;
  --border:    rgba(19,30,41,.14);
  --input-bg:  #F8F4FA;
  --input-bdr: rgba(19,30,41,.22);
  --shadow:    0 10px 28px rgba(19,30,41,.11);
  --shadow-sm: 0 3px 10px rgba(19,30,41,.09);
}
:root[data-theme="trans-dawn"] {
  --sage:        #8EBFD5; --sage-rgb: 142,191,213;
  --sage-deep:   #476B80;
  --active:      #F58FB0; --active-on: #131E29;
  --sage-ink:    #131E29; --sage-ink-rgb: 19,30,41;
  --champagne:   #F2D3DC; --champagne-rgb: 242,211,220;
  --champagne-deep: #DAB5C1;
  --gold:        #B97A93;
  --gold-ink:    #784F60;
  --cream:       #DDECF2; --cream-rgb: 221,236,242;
  --ink:         #293038; --ink-rgb: 41,48,56;
  --muted:       #7A8188; --muted-rgb: 122,129,136;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #C7DFEA;
  --border:    rgba(19,30,41,.14);
  --input-bg:  #EEF5F9;
  --input-bdr: rgba(19,30,41,.22);
  --shadow:    0 10px 28px rgba(19,30,41,.11);
  --shadow-sm: 0 3px 10px rgba(19,30,41,.09);
}
:root[data-theme="nonbinary-noir"] {
  --sage:        #8246AF; --sage-rgb: 130,70,175;
  --sage-deep:   #4E2A68;
  --active:      #F5C518; --active-on: #101820;
  --sage-ink:    #101820; --sage-ink-rgb: 16,24,32;
  --champagne:   #E5E1E6; --champagne-rgb: 229,225,230;
  --champagne-deep: #CAC4CD;
  --gold:        #D8A500;
  --gold-ink:    #7E6000;
  --cream:       #EFE7F5; --cream-rgb: 239,231,245;
  --ink:         #28252D; --ink-rgb: 40,37,45;
  --muted:       #79747E; --muted-rgb: 121,116,126;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #E0D1EB;
  --border:    rgba(16,24,32,.14);
  --input-bg:  #F8F4FA;
  --input-bdr: rgba(16,24,32,.22);
  --shadow:    0 10px 28px rgba(16,24,32,.11);
  --shadow-sm: 0 3px 10px rgba(16,24,32,.09);
}
:root[data-theme="pan-sunset"] {
  --sage:        #3D8EBC; --sage-rgb: 61,142,188;
  --sage-deep:   #006A8E;
  --active:      #31C5E8; --active-on: #131E29;
  --sage-ink:    #131E29; --sage-ink-rgb: 19,30,41;
  --champagne:   #F1D5E5; --champagne-rgb: 241,213,229;
  --champagne-deep: #DAB7CC;
  --gold:        #D6A400;
  --gold-ink:    #7D6000;
  --cream:       #E2EEF5; --cream-rgb: 226,238,245;
  --ink:         #292934; --ink-rgb: 41,41,52;
  --muted:       #7C7781; --muted-rgb: 124,119,129;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #C5DDEB;
  --border:    rgba(19,30,41,.14);
  --input-bg:  #F1F7FA;
  --input-bdr: rgba(19,30,41,.22);
  --shadow:    0 10px 28px rgba(19,30,41,.11);
  --shadow-sm: 0 3px 10px rgba(19,30,41,.09);
}

:root[data-theme="sage-green"] {
  --sage:        #9CAF9B; --sage-rgb: 156,175,155;
  --sage-deep:   #3F463C;
  --active:      #4FAE8B; --active-on: #10261E;
  --sage-ink:    #24382C; --sage-ink-rgb: 36,56,44;
  --champagne:   #DFE4D8; --champagne-rgb: 223,228,216;
  --champagne-deep: #C4CEBE;
  --gold:        #C0A062;
  --gold-ink:    #7C663A;
  --cream:       #F2F0E7; --cream-rgb: 242,240,231;
  --ink:         #2C2E28; --ink-rgb: 44,46,40;
  --muted:       #7E8479; --muted-rgb: 126,132,121;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #DCE4D6;
  --border:    rgba(36,56,44,.14);
  --input-bg:  #F9F9F3;
  --input-bdr: rgba(36,56,44,.22);
  --shadow:    0 10px 28px rgba(36,56,44,.10);
  --shadow-sm: 0 3px 10px rgba(36,56,44,.08);
}
:root[data-theme="warm-champagne"] {
  --sage:        #C9B79B; --sage-rgb: 201,183,155;
  --sage-deep:   #7A6247;
  --active:      #E8CE8F; --active-on: #2A2113;
  --sage-ink:    #3B2E22; --sage-ink-rgb: 59,46,34;
  --champagne:   #E8D8C3; --champagne-rgb: 232,216,195;
  --champagne-deep: #CDB697;
  --gold:        #B8964F;
  --gold-ink:    #786031;
  --cream:       #F7F2E9; --cream-rgb: 247,242,233;
  --ink:         #33302A; --ink-rgb: 51,48,42;
  --muted:       #8A8071; --muted-rgb: 138,128,113;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #ECE1D0;
  --border:    rgba(59,46,34,.14);
  --input-bg:  #FCF9F3;
  --input-bdr: rgba(59,46,34,.22);
  --shadow:    0 10px 28px rgba(59,46,34,.10);
  --shadow-sm: 0 3px 10px rgba(59,46,34,.08);
}
:root[data-theme="dusty-blue"] {
  --sage:        #A8C0D8; --sage-rgb: 168,192,216;
  --sage-deep:   #4A6D96;
  --active:      #2A73AE; --active-on: #FFFFFF;
  --sage-ink:    #1F3A5F; --sage-ink-rgb: 31,58,95;
  --champagne:   #E4E9EF; --champagne-rgb: 228,233,239;
  --champagne-deep: #C8D8E8;
  --gold:        #B9975B;
  --gold-ink:    #78623B;
  --cream:       #F2F6FA; --cream-rgb: 242,246,250;
  --ink:         #2A3138; --ink-rgb: 42,49,56;
  --muted:       #7B848E; --muted-rgb: 123,132,142;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #D8E4EE;
  --border:    rgba(31,58,95,.14);
  --input-bg:  #F9FBFD;
  --input-bdr: rgba(31,58,95,.22);
  --shadow:    0 10px 28px rgba(31,58,95,.10);
  --shadow-sm: 0 3px 10px rgba(31,58,95,.08);
}
:root[data-theme="terracotta"] {
  --sage:        #C97A63; --sage-rgb: 201,122,99;
  --sage-deep:   #A85B44;
  --active:      #E5806E; --active-on: #3A1C14;
  --sage-ink:    #5C3325; --sage-ink-rgb: 92,51,37;
  --champagne:   #F0D9CC; --champagne-rgb: 240,217,204;
  --champagne-deep: #DDBBA9;
  --gold:        #B98A52;
  --gold-ink:    #7A5A34;
  --cream:       #FBF3ED; --cream-rgb: 251,243,237;
  --ink:         #352A25; --ink-rgb: 53,42,37;
  --muted:       #8C7A71; --muted-rgb: 140,122,113;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #F3DED2;
  --border:    rgba(92,51,37,.14);
  --input-bg:  #FEFAF7;
  --input-bdr: rgba(92,51,37,.22);
  --shadow:    0 10px 28px rgba(92,51,37,.10);
  --shadow-sm: 0 3px 10px rgba(92,51,37,.08);
}
:root[data-theme="deep-forest"] {
  --sage:        #6E9A88; --sage-rgb: 110,154,136;
  --sage-deep:   #2F5D50;
  --active:      #C68A2E; --active-on: #14261F;
  --sage-ink:    #14261F; --sage-ink-rgb: 20,38,31;
  --champagne:   #E4DCC9; --champagne-rgb: 228,220,201;
  --champagne-deep: #CFC3A8;
  --gold:        #C9A227;
  --gold-ink:    #7E6417;
  --cream:       #F0F4F1; --cream-rgb: 240,244,241;
  --ink:         #26302B; --ink-rgb: 38,48,43;
  --muted:       #79837D; --muted-rgb: 121,131,125;
  --white:       #FFFFFF; --white-rgb: 255,255,255;
  --card:      #FFFFFF;
  --panel:     #D5E1D9;
  --border:    rgba(20,38,31,.14);
  --input-bg:  #F7FAF8;
  --input-bdr: rgba(20,38,31,.22);
  --shadow:    0 10px 28px rgba(20,38,31,.10);
  --shadow-sm: 0 3px 10px rgba(20,38,31,.08);
}

/* ══ RESET / BASE ════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
html { scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: var(--sage-deep); }
::selection { background: var(--champagne); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--sage-ink-rgb),.25); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

h1,h2,h3,h4,h5,h6,.page-h1,.card-title { font-family: var(--font-head); color: var(--sage-ink); }
footer, .fineprint { font-family: var(--font-foot); }

/* ══ PAGE STRUCTURE ══════════════════════════════════════════════════════ */
main {
  position: relative; z-index: 1;
  padding: 28px 26px 80px;
  max-width: var(--main-max);
  margin: 0 auto;
  overflow-x: hidden;
}
@media(max-width:640px){ main { padding: 16px 14px 70px; } }

.eyebrow {
  font-family: var(--font-body);
  font-size: .67rem; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 6px;
}
h1, .page-h1 {
  font-family: var(--font-display);
  font-size: 2.15rem; font-weight: 600;
  color: var(--sage-deep);
  margin-bottom: 2px; letter-spacing: .005em; line-height: 1.15;
}
@media(max-width:640px){ h1, .page-h1 { font-size: 1.75rem; } }
.lead {
  font-family: var(--font-display);
  font-style: italic; font-weight: 600;
  font-size: 1.08rem; line-height: 1.45;
  color: var(--gold-ink);
  margin-bottom: 22px;
}

/* ══ TABS (main .ptab row + sub .sec-btn row) ════════════════════════════ */
.page-tabs { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.page-tabs::-webkit-scrollbar { display: none; }
.ptab {
  appearance: none; font: inherit; font-size: .8rem; font-weight: 600;
  padding: 7px 16px; cursor: pointer; color: var(--muted);
  background: var(--white); border: 1px solid var(--border); border-radius: 20px;
  white-space: nowrap; flex-shrink: 0; transition: .18s;
}
.ptab.active { color: var(--white); background: var(--sage-deep); border-color: var(--sage-deep); }
.ptab:hover:not(.active) { border-color: var(--sage); color: var(--sage-ink); }
/* ── Mobile: tab row collapses to a dropdown ── */
.ptabs-toggle{display:none}
@media(max-width:640px){
  .ptabs-shell{position:relative;margin-bottom:20px}
  .ptabs-toggle{
    display:flex;align-items:center;width:100%;cursor:pointer;
    appearance:none;font:inherit;font-size:.82rem;font-weight:600;text-align:left;
    padding:10px 34px 10px 14px;color:var(--white);
    background:var(--sage-deep);border:1px solid var(--sage-deep);
    border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 14px center;background-size:15px;
  }
  .ptabs-toggle[aria-expanded="true"]{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 15l-6-6-6 6'/%3E%3C/svg%3E");
  }
  .page-tabs{display:none;margin-bottom:0}
  .page-tabs.expanded{
    display:flex;flex-direction:column;gap:2px;
    position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
    max-height:min(58vh,400px);overflow-y:auto;
    background:var(--white);border:1px solid var(--input-bdr);border-radius:var(--radius-lg);
    padding:6px;box-shadow:var(--shadow);
  }
  .ptab{width:100%;text-align:left;border:none;border-radius:var(--radius);padding:10px 14px;background:none}
  .ptab.active{color:var(--sage-ink);background:rgba(var(--sage-rgb),.16)}
}
.section-bar { display: flex; align-items: center; gap: 4px; margin-bottom: 18px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; background: var(--panel); border-radius: var(--radius-lg); padding: 5px; }
.section-bar::-webkit-scrollbar { display: none; }
.sec-btn {
  appearance: none; font: inherit; font-size: .8rem; font-weight: 600;
  cursor: pointer; padding: 7px 14px; white-space: nowrap; flex-shrink: 0;
  background: none; border: none; border-radius: var(--radius); color: var(--muted); transition: .15s;
}
.sec-btn:hover { color: var(--sage-ink); background: rgba(var(--white-rgb),.5); }
.sec-btn.active { background: var(--sage-deep); color: var(--white); box-shadow: var(--shadow-sm); }

.section-bar-label { display: inline-flex; font-size: .78rem; font-weight: 700; color: var(--sage-ink); white-space: nowrap; align-items: center; flex-shrink: 0; padding: 0 4px 0 6px; }
.section-bar-label::after { content: '|'; margin-left: 8px; color: var(--muted); font-weight: 400; opacity: .5; }

.section-bar.pinned {
  position: sticky; top: var(--nav-h); z-index: 20;
  background: var(--panel); border-radius: 0; padding: 10px 4px; margin-left: -4px; margin-right: -4px;
  box-shadow: var(--shadow-sm);
}

/* ══ CARDS ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  padding: 20px;
}
.card + .card { margin-top: 16px; }
.card-title { font-size: 1.08rem; font-weight: 700; margin-bottom: 12px; }
.card-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card-grid > .card { margin-top: 0; }

/* ── Highlighted card + ribbon ── */
.card-hl { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(185,154,91,.16); }
.card-ribbon {
  margin: -20px -20px 14px; padding: 6px 20px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: linear-gradient(120deg, var(--gold), var(--champagne-deep));
  color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-align: center;
}

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .stat-label { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.stat .stat-value { font-family: var(--font-body); font-size: 1.7rem; font-weight: 700; color: var(--sage-ink); }
.stat .stat-sub { font-size: .78rem; color: var(--muted); }

/* ══ FORMS ═══════════════════════════════════════════════════════════════ */
.form-grid { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: .76rem; font-weight: 600; color: var(--sage-ink); }
.field-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.field-label-row > label { font-size: .76rem; font-weight: 600; color: var(--sage-ink); }
.field .hint { font-size: .72rem; color: var(--muted); }

/* ── Fixed-column form grid (.col-N spans; 3-up → 2-up → 1-up) ── */
.form-grid-6 { display: grid; gap: 14px 16px; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.form-grid-6 > .field { grid-column: span 2; }
.form-grid-6 > .col-2 { grid-column: span 2; }
.form-grid-6 > .col-3 { grid-column: span 3; }
.form-grid-6 > .col-6 { grid-column: span 6; }
@media (max-width: 820px) {
  .form-grid-6 > .field, .form-grid-6 > .col-2, .form-grid-6 > .col-3 { grid-column: span 3; }
  .form-grid-6 > .col-6 { grid-column: span 6; }
}
@media (max-width: 560px) {
  .form-grid-6 > .field, .form-grid-6 > .col-2, .form-grid-6 > .col-3, .form-grid-6 > .col-6 { grid-column: 1 / -1; }
}
.field.field-inline { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.field.field-inline > label { flex-shrink: 0; }

/* ── Combo (type-or-pick) — BEAPage.wireCombo ── */
.combo { position: relative; }
.combo > input { width: 100%; }
.combo-menu {
  position: fixed; z-index: 600;
  max-height: 240px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 5px;
}
.combo-opt {
  display: block; width: 100%; text-align: left; appearance: none; border: none; background: none;
  font: inherit; color: var(--ink); padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.combo-opt:hover, .combo-opt.active { background: rgba(var(--sage-rgb), .14); color: var(--sage-ink); }
.combo-new { padding: 8px 10px; font-size: .8rem; color: var(--muted); }

.access-boxes { display: flex; flex-wrap: wrap; gap: 8px; }
.access-boxes label { display: flex; align-items: center; gap: 6px; font-size: .78rem; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 6px 11px; cursor: pointer; }
.access-boxes input { accent-color: var(--sage-deep); }

.hint-icon { position: relative; display: inline-flex; vertical-align: -0.2em; color: var(--muted); cursor: help; margin-left: 2px; }
.hint-icon .icon { width: .95em; height: .95em; }

.edit-banner { background: rgba(var(--champagne-rgb),.4); border: 1px solid var(--champagne-deep); border-radius: var(--radius); padding: 9px 14px; font-size: .82rem; color: var(--sage-ink); margin-bottom: 14px; }
.xlsx-check { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: .84rem; }
.xlsx-check .icon { width: 16px; height: 16px; flex-shrink: 0; }
.xlsx-check.pass .icon { color: var(--green); }
.xlsx-check.fail .icon { color: var(--red); }
.xlsx-error-row { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: .8rem; }
.bea-tip {
  position: fixed; left: 0; top: 0; z-index: 990;
  background: var(--sage-ink); color: var(--white);
  font-size: .72rem; font-weight: 500; line-height: 1.35; text-align: left;
  white-space: normal; width: max-content; max-width: 230px;
  padding: 7px 10px; border-radius: var(--radius); box-shadow: var(--shadow);
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
}
.bea-tip.open { opacity: 1; visibility: visible; }
.bea-tip::after {
  content: ''; position: absolute; left: var(--tip-arrow, 50%);
  margin-left: -5px; border: 5px solid transparent;
}
.bea-tip.above::after { top: 100%; border-top-color: var(--sage-ink); }
.bea-tip.below::after { bottom: 100%; border-bottom-color: var(--sage-ink); }
.bea-side [data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 7px);
  transform: translateX(-50%);
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s ease;
  pointer-events: none; z-index: 30;
  background: var(--sage-ink); color: var(--white);
  font-size: .72rem; font-weight: 500; line-height: 1.35; text-align: left;
  white-space: normal; width: max-content; max-width: 230px;
  padding: 7px 10px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.bea-side [data-tip]:hover::after,
.bea-side [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=tel],
select, textarea {
  font: inherit; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--input-bdr);
  border-radius: var(--radius); padding: 9px 12px; width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
  cursor: pointer; opacity: .55; transition: opacity .15s;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator,
input[type=datetime-local]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .55; font-style: italic; }
select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8778' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
  padding-right: 34px; cursor: pointer;
}
select.select-auto { width: auto; min-width: 130px; display: inline-block; align-self: flex-start; }
textarea { min-height: 90px; resize: vertical; }
input:focus, textarea:focus {
  outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(var(--sage-rgb),.25);
}
select:focus { outline: none; border-color: var(--sage-deep); }
.field-invalid { border-color: var(--red) !important; box-shadow: 0 0 0 3px rgba(var(--red-rgb),.25); }
.field-warn { border-color: var(--amber) !important; box-shadow: 0 0 0 3px rgba(var(--amber-rgb),.25); }
input[disabled], select[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Select picker ── */
@supports (appearance: base-select) {
  select { appearance: base-select; }
  select.select-auto { display: inline-flex; align-items: center; }
  select::picker-icon { display: none; }
  select::picker(select) {
    appearance: base-select;
    box-sizing: border-box; margin-block: 6px; padding: 5px;
    max-height: min(320px, 60vh); overflow-y: auto; overscroll-behavior: contain;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow);
    opacity: 0; transform: translateY(-4px) scale(.985);
    transition: opacity .14s ease, transform .14s ease,
                overlay .14s allow-discrete, display .14s allow-discrete;
  }
  select:open::picker(select) { opacity: 1; transform: none; }
  @starting-style {
    select:open::picker(select) { opacity: 0; transform: translateY(-4px) scale(.985); }
  }
  select option {
    font: inherit; font-weight: 400; color: var(--ink); cursor: pointer;
    padding: 8px 11px; border-radius: var(--radius);
    transition: background-color .12s, color .12s;
  }
  select option::checkmark { display: none; }
  select option:checked { background: rgba(var(--sage-rgb),.14); color: var(--sage-ink); }
  select optgroup {
    font-size: .75em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted);
    padding: 11px 11px 3px; margin-top: 5px; border-top: 1px solid var(--input-bdr);
  }
  select optgroup:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
  select optgroup option {
    font-size: 1.3333em; font-weight: 400; letter-spacing: normal;
    text-transform: none; color: var(--ink);
  }
  select optgroup option:checked { color: var(--sage-ink); }
  select option:hover, select option:focus {
    background: rgba(var(--sage-rgb),.24); color: var(--sage-ink); outline: none;
  }
  select option:disabled { background: none; color: var(--muted); opacity: .55; cursor: not-allowed; }
  @media (prefers-reduced-motion: reduce) { select::picker(select) { transition: none; } }
}

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 38px; }
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear { display: none; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  appearance: none; border: none; background: none; cursor: pointer;
  color: var(--muted); padding: 7px; border-radius: 6px; display: flex;
  visibility: hidden; opacity: 0; transition: opacity .12s ease;
}
.pw-wrap input.field-filled + .pw-toggle { visibility: visible; opacity: 1; }
.pw-wrap input:-webkit-autofill + .pw-toggle { visibility: visible; opacity: 1; }
.pw-wrap input:autofill + .pw-toggle { visibility: visible; opacity: 1; }
.pw-toggle:hover { color: var(--sage-ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }

.pw-checklist { list-style: none; margin: 6px 0 0; padding: 0; display: none; flex-direction: column; gap: 3px; }
.pw-checklist.show { display: flex; }
.pw-checklist li { font-size: .74rem; color: var(--muted); padding-left: 20px; position: relative; }
.pw-checklist li::before { content: '○'; position: absolute; left: 0; color: var(--border); }
.pw-checklist li.met { color: var(--green); }
.pw-checklist li.met::before { content: '✓'; color: var(--green); font-weight: 700; }

.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-switch .track { position: absolute; inset: 0; background: var(--input-bdr); border-radius: 22px; transition: .18s; cursor: pointer; }
.toggle-switch .track::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--white); border-radius: 50%; transition: .18s; box-shadow: var(--shadow-sm); }
.toggle-switch input:checked + .track { background: var(--sage-deep); }
.toggle-switch input:checked + .track::before { transform: translateX(18px); }
.toggle-switch input:disabled + .track { opacity: .5; cursor: not-allowed; }
.toggle-switch input:focus-visible + .track { outline: 2px solid var(--sage); outline-offset: 2px; }

/* ── Change-request comparison ── */
.chg-list { margin: 2px 0 4px; }
.chg-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: baseline; font-size: .82rem; margin-top: 5px; }
.chg-field { min-width: 74px; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.chg-vals { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.chg-was { color: var(--muted); text-decoration: line-through; }
.chg-arrow { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }

.combo-wrap { position: relative; }
.combo-list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(340px, 84vw); max-height: 260px; overflow-y: auto; scrollbar-gutter: stable; padding: 5px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.combo-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 11px; border-radius: var(--radius); cursor: pointer; font-size: .84rem; }
.combo-row:hover { background: rgba(var(--sage-rgb),.1); }
.combo-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-row .pin-btn { flex-shrink: 0; background: none; border: none; padding: 2px; cursor: pointer; color: var(--input-bdr); display: flex; }
.combo-row .pin-btn .icon { width: 15px; height: 15px; }
.combo-row .pin-btn.active { color: var(--gold); }
.combo-row .pin-btn:hover { color: var(--sage-deep); }
.combo-empty { padding: 9px 11px; font-size: .8rem; color: var(--muted); }
.theme-option { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 10px; cursor: pointer; transition: .15s; }
.theme-option:hover { border-color: var(--sage); }
.theme-option.active { border-color: var(--sage-deep); background: rgba(var(--sage-rgb),.06); }
.theme-swatches { display: flex; flex-shrink: 0; }
.theme-swatches span { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--border); margin-left: -8px; }
.theme-swatches span:first-child { margin-left: 0; }
.theme-option-name { font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.theme-check { width: 16px; height: 16px; color: var(--sage-deep); }
.theme-category-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.theme-category-label:first-child { margin-top: 0; }
.combo-group-label { margin-top: 6px; padding: 11px 11px 5px; border-top: 1px solid var(--input-bdr); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.combo-group-label:first-child { margin-top: 0; padding-top: 4px; border-top: none; }
.select-btn {
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: var(--input-bg); border: 1px solid var(--input-bdr);
  border-radius: var(--radius); padding: 9px 34px 9px 12px; width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: border-color .15s, box-shadow .15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B8778' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 15px;
}
.select-btn:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(var(--sage-rgb),.25); }

.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.settings-row:last-child { border-bottom: none; }
.settings-row-label { display: flex; align-items: center; font-size: .86rem; font-weight: 600; color: var(--ink); }

.search-box { position: relative; }
.search-box .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search-box input { padding-left: 36px; }
.search-box.grow { flex: 1 1 260px; max-width: 380px; }
@media(max-width:640px){
  .search-box.grow { flex-basis: 100%; max-width: none; }
}

.searchfilter-row { display: flex; flex: 1; gap: 10px; flex-wrap: wrap; align-items: center; }
.searchfilter-row select { flex: 0 0 auto; max-width: 170px; }
@media(max-width:640px){
  .searchfilter-row { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  .searchfilter-row .search-box.grow, .searchfilter-row select { max-width: none; }
}

.file-picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-picker-input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.file-picker-name { font-size: .78rem; color: var(--muted); }

/* ══ BUTTONS ═════════════════════════════════════════════════════════════ */
.btn {
  appearance: none; font: inherit; font-size: .84rem; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border-radius: 10px; padding: 9px 18px; cursor: pointer; transition: .18s;
  border: 1px solid transparent; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.btn-primary { background: var(--sage-deep); color: var(--white); }
.btn-primary:hover { background: var(--sage-ink); }
.btn-gold { background: var(--champagne); color: var(--sage-ink); border-color: var(--champagne-deep); }
.btn-gold:hover { background: var(--champagne-deep); }
.btn-ghost { background: transparent; color: var(--sage-ink); border-color: var(--input-bdr); }
.btn-ghost:hover { border-color: var(--sage); background: rgba(var(--sage-rgb),.10); }
.btn-danger { background: transparent; color: var(--red); border-color: rgba(var(--red-rgb),.4); }
.btn-danger:hover { background: rgba(var(--red-rgb),.08); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-sm { font-size: .76rem; padding: 5px 12px; border-radius: 8px; }

.seg-pair { display: inline-flex; border: 1px solid var(--input-bdr); border-radius: 999px; overflow: hidden; }
.seg-pair button { appearance: none; border: none; background: var(--input-bg); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 600; padding: 7px 14px; cursor: pointer; }
.seg-pair button.active { background: var(--sage-deep); color: var(--white); }
.seg-pair button:disabled { opacity: .45; cursor: not-allowed; }

/* ── FONT PICKER ── */
.fontpick { position: relative; }
.fontpick-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; cursor: pointer; font: inherit; font-size: .9rem; padding: 7px 10px; background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 8px; color: var(--ink); text-align: left; }
.fontpick-btn:hover { border-color: var(--sage-deep); }
.fontpick-cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fontpick-btn .icon { width: 15px; height: 15px; flex: 0 0 auto; color: var(--muted); }
.fontpick-pop { display: none; position: absolute; z-index: 80; top: calc(100% + 5px); left: 0; right: 0; min-width: 210px; padding: 8px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.fontpick.open .fontpick-pop { display: block; }
.fontpick.compact .fontpick-btn { min-width: 116px; }
.fontpick.compact .fontpick-pop { right: auto; width: 240px; }
.fontpick-q { width: 100%; font: inherit; font-size: .82rem; padding: 7px 10px; margin-bottom: 6px; background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 8px; color: var(--ink); }
.fontpick-list { max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.fontpick-o { display: block; width: 100%; cursor: pointer; font-size: 1rem; line-height: 1.35; padding: 7px 9px; background: none; border: none; border-radius: 7px; color: var(--ink); text-align: left; }
.fontpick-o:hover { background: var(--input-bg); }
.fontpick-none { font-size: .78rem; color: var(--muted); padding: 8px 9px; }

/* ── FILTER BAR ── */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.filter-bar > select,
.filter-bar input[type="search"],
.filter-bar input[type="text"] {
  width: auto; min-width: 140px; border-radius: 999px; padding: 7px 14px;
  padding-right: 34px; font-size: .8rem; font-weight: 600;
}
.filter-bar input[type="search"], .filter-bar input[type="text"] { padding-right: 14px; font-weight: 400; }
.filter-bar > select:hover, .filter-bar .seg-pair:hover { border-color: var(--sage); }
.filter-bar .seg-pair button { padding: 7px 15px; font-size: .8rem; }
.filter-bar .filter-spacer { flex: 1 1 auto; }
@media (max-width: 700px) {
  .filter-bar { gap: 8px; }
  .filter-bar > select, .filter-bar input[type="search"], .filter-bar input[type="text"] {
    flex: 1 1 140px; min-width: 0;
  }
  .filter-bar .seg-pair { width: 100%; }
  .filter-bar .seg-pair button { flex: 1 1 0; padding: 8px 6px; }
}
.seg-pair.chip-group { display: flex; flex-wrap: wrap; gap: 8px; border: none; border-radius: 0; overflow: visible; }
.seg-pair.chip-group button { border: 1px solid var(--input-bdr); border-radius: 20px; background: var(--white); color: var(--ink); }
.seg-pair.chip-group button.active { border-color: var(--sage-deep); background: rgba(var(--sage-rgb),.16); color: var(--sage-ink); }
.seg-pair-compact { border: none; gap: 6px; }
.seg-pair-compact button { border: 1px solid var(--input-bdr); border-radius: 6px; padding: 4px 10px; font-size: .72rem; }
.seg-pair-compact button.active { border-color: var(--sage-deep); }

/* ── Icon segments ── */
.ce-seg { display: inline-flex; flex: 0 0 auto; background: var(--input-bg);
  border: 1px solid var(--input-bdr); border-radius: 7px; overflow: hidden; }
.ce-segb { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 24px; padding: 0; cursor: pointer; font: inherit; font-size: .78rem;
  color: var(--muted); background: none; border: none; transition: color .12s ease, background-color .12s ease; }
.ce-segb + .ce-segb { border-left: 1px solid var(--input-bdr); }
.ce-segb .icon { width: 14px; height: 14px; }
.ce-segb:hover { color: var(--sage-ink); }
.ce-segb.on { color: var(--white); background: var(--sage-deep); }

.icon-btn {
  position: relative; appearance: none; border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; padding: 5px; border-radius: 6px; flex-shrink: 0;
}
.icon-btn .icon { width: 15px; height: 15px; }
.icon-btn:hover, .icon-btn:focus-visible { color: var(--sage-ink); background: rgba(var(--sage-rgb),.14); }
.icon-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.icon-btn-danger { color: rgba(var(--red-rgb),.6); }
.icon-btn-danger:hover, .icon-btn-danger:focus-visible { color: var(--red); background: rgba(var(--red-rgb),.10); }
.btn.icon-only { position: relative; padding-left: 12px; padding-right: 12px; gap: 0; }

/* ── Glyph picker ── */
.glyph-wrap { position: relative; display: inline-flex; }
.glyph-pop {
  display: none; position: absolute; z-index: 80; top: calc(100% + 6px); left: 0;
  width: 228px; padding: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow);
  grid-template-columns: repeat(6, 1fr); gap: 4px;
}
.glyph-wrap.open .glyph-pop { display: grid; }
.glyph-btn {
  appearance: none; background: none; cursor: pointer;
  border: 1px solid transparent; border-radius: 8px;
  height: 32px; font-family: var(--font-body); font-size: 1.02rem; line-height: 1;
  color: var(--sage-ink);
}
.glyph-btn:hover { background: rgba(var(--sage-rgb),.14); border-color: var(--sage); }
.glyph-btn:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }

.cfg-tag { display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:5px 8px 5px 14px; font-size:.8rem; margin:0 6px 8px 0; }

/* ══ TABLES ══════════════════════════════════════════════════════════════ */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); position: relative; }
.tbl-wrap::before, .tbl-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 28px; pointer-events: none;
  opacity: 0; transition: opacity .15s; z-index: 2;
}
.tbl-wrap::before { left: 0; background: linear-gradient(to right, var(--card), transparent); }
.tbl-wrap::after { right: 0; background: linear-gradient(to left, var(--card), transparent); }
.tbl-wrap.scroll-l::before { opacity: 1; }
.tbl-wrap.scroll-r::after { opacity: 1; }
table.tbl { border-collapse: collapse; width: 100%; font-size: .84rem; }
.tbl th {
  text-align: left; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; padding: 11px 14px;
  background: var(--panel); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(var(--sage-rgb),.07); }
.tbl tr[data-view] { cursor: pointer; }
.tbl tr[data-view] [data-edit] { cursor: pointer; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.tbl th.tbl-col-sticky, .tbl td.tbl-col-sticky {
  position: sticky; right: 0; z-index: 3; border-left: 1px solid var(--border);
}
.tbl th.tbl-col-sticky { background: var(--panel); }
.tbl td.tbl-col-sticky { background: var(--card); }
.tbl tr:hover td.tbl-col-sticky { background: rgba(var(--sage-rgb),.07); }

.gs-table th, .gs-table td { text-align: center; }
.gs-table th:first-child, .gs-table td:first-child { text-align: left; min-width: 150px; }
.gs-event-th { font-weight: 600; }
.gs-event-time { display: block; font-weight: 400; color: var(--muted); font-size: .7rem; text-transform: none; letter-spacing: normal; }
.gs-name-input { border: none; background: transparent; font: inherit; font-weight: 600; font-size: .84rem; width: 100%; padding: 4px 0; color: var(--ink); }
.gs-name-input:focus { outline: none; border-bottom: 1px solid var(--sage-deep); }
.gs-name-static { font-weight: 600; font-size: .84rem; }
.gs-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--input-bdr);
  background: var(--white); color: transparent; cursor: default; padding: 0; transition: .15s;
}
.gs-check .icon { width: 14px; height: 14px; }
.gs-check.active { border-color: var(--sage-deep); background: var(--sage-deep); color: var(--white); }
.gs-table.gs-editing .gs-check { cursor: pointer; }
.gs-table.gs-editing .gs-check:hover { border-color: var(--sage-deep); }

/* ── Stacked rows (phone) ── */
@media(max-width:640px){
  .tbl-wrap:has(> .tbl-stack) {
    overflow: visible; border: none; border-radius: 0; background: none;
  }
  .tbl-wrap:has(> .tbl-stack)::before,
  .tbl-wrap:has(> .tbl-stack)::after { content: none; }

  .tbl-stack, .tbl-stack thead, .tbl-stack tbody, .tbl-stack tfoot,
  .tbl-stack tr { display: block; width: auto; }

  .tbl-stack thead tr {
    display: flex; gap: 6px; padding: 0 0 10px;
    overflow-x: auto; scrollbar-width: none;
  }
  .tbl-stack thead tr::-webkit-scrollbar { display: none; }
  .tbl-stack thead tr:not(:has(.sortable)) { display: none; }
  .tbl-stack thead th {
    flex: 0 0 auto; padding: 8px 13px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--card);
  }
  .tbl-stack thead th:not(.sortable) { display: none; }

  .tbl-stack tbody tr {
    padding: 10px 14px; margin-bottom: 10px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--card); transition: border-color .13s ease;
  }
  .tbl-stack tbody tr:last-child { margin-bottom: 0; }
  .tbl-stack tbody tr:hover { border-color: var(--sage); }
  .tbl-stack tbody tr:hover td { background: none; }

  .tbl-stack td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 4px 0; border-bottom: none;
    text-align: left; overflow-wrap: anywhere;
  }
  .tbl-stack td:empty { display: none; }
  .tbl-stack td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto;
    font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
  }
  .tbl-stack td:not([data-label]):last-child { justify-content: flex-end; }
  .tbl-stack td[colspan] { display: block; text-align: center; }
  .tbl-stack td.tbl-col-sticky {
    position: static; background: none;
    margin-top: 5px; padding-top: 9px;
    border-left: none; border-top: 1px solid var(--border);
  }
  .tbl-stack tbody tr:hover td.tbl-col-sticky { background: none; }

  .tbl-stack tfoot tr {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-top: 10px; padding: 11px 14px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--panel); font-weight: 700;
  }
  .tbl-stack tfoot td { display: block; padding: 0; border-bottom: none; }
  .tbl-stack tfoot td:empty { display: none; }
}

.chevron { transition: transform .15s; flex-shrink: 0; color: var(--muted); }
.chevron.open { transform: rotate(180deg); }

.headcount-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; padding: 10px 14px; user-select: none;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--panel); transition: border-radius .15s;
}
.headcount-toggle:hover { border-color: var(--sage); }
.headcount-toggle > span { font-size: .76rem; font-weight: 600; color: var(--sage-ink); }
.headcount-toggle.open { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.headcount-toggle.open .chevron { transform: rotate(180deg); }
.headcount-body {
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 12px 14px;
}

.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--sage-ink); }
.tbl th.sortable .sort-ind { display: inline-flex; margin-left: 4px; width: 12px; height: 12px; opacity: .35; transition: transform .15s, opacity .15s; vertical-align: -2px; }
.tbl th.sortable:hover .sort-ind, .tbl th.sort-active .sort-ind { opacity: .9; }
.tbl th.sort-asc .sort-ind { transform: rotate(180deg); }

/* ══ BADGES / STATUS ═════════════════════════════════════════════════════ */
.badge {
  display: inline-block; font-size: .68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; letter-spacing: .03em; white-space: nowrap;
}
.badge-sage  { background: rgba(var(--sage-rgb),.25); color: var(--sage-ink); }
.badge-gold  { background: rgba(var(--champagne-rgb),.7);  color: var(--gold-ink); }
.badge-green { background: rgba(var(--green-rgb),.16);  color: var(--green); }
.badge-amber { background: rgba(var(--amber-rgb),.15);  color: var(--amber); }
.badge-red   { background: rgba(var(--red-rgb),.14);   color: var(--red); }
.badge-muted { background: rgba(var(--muted-rgb),.15); color: var(--muted); }

/* ══ MODAL ═══════════════════════════════════════════════════════════════ */
.modal-back {
  position: fixed; inset: 0; z-index: 400; display: none;
  background: rgba(var(--ink-rgb),.45); backdrop-filter: blur(3px);
  align-items: flex-start; justify-content: center; overflow-y: auto; padding: 6vh 16px 40px;
  will-change: transform; transform: translateZ(0);
}
.modal-back.open { display: flex; }
body.modal-open { overflow: hidden; }
.modal {
  background: var(--card); border-radius: var(--radius-xl); box-shadow: var(--shadow);
  width: 100%; max-width: 640px; padding: 24px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-head h3 { font-size: 1.15rem; }
.modal-x { appearance: none; border: none; background: none; font-size: 1.3rem; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ── Alert dialog ── */
.modal-back.modal-center > .modal { margin: auto 0; }
.modal-back.modal-alert { z-index: 950; }
.alert-modal { max-width: 400px; text-align: center; }
.alert-icon {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--red-rgb),.12); color: var(--red);
}
.alert-icon .icon { width: 26px; height: 26px; stroke-width: 1.6; }
.alert-modal.tone-ok .alert-icon   { background: rgba(var(--green-rgb),.16); color: var(--green); }
.alert-modal.tone-info .alert-icon { background: rgba(var(--sage-rgb),.20); color: var(--sage-ink); }
.alert-modal h3 { font-size: 1.1rem; margin-bottom: 8px; }
.alert-modal p { font-size: .88rem; color: var(--muted); line-height: 1.55; word-break: break-word; }
.alert-modal .modal-actions { justify-content: center; margin-top: 22px; }
.alert-modal .modal-actions .btn { min-width: 130px; }

/* ══ CALCULATOR ══════════════════════════════════════════════════════════ */
.calc-field { display: flex; align-items: center; gap: 4px; }
.calc-field > input { flex: 1 1 auto; min-width: 0; }
.calc-field > .calc-btn { flex: 0 0 auto; }
.tbl .num .num-input { text-align: right; }
.calc-pop {
  position: fixed; z-index: 700; display: none; width: 236px; padding: 12px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.calc-pop.open { display: block; }
.calc-display { width: 100%; text-align: right; font-variant-numeric: tabular-nums; }
.calc-preview {
  min-height: 17px; margin: 5px 2px 9px; text-align: right;
  font-size: .78rem; font-weight: 600; color: var(--sage-ink); font-variant-numeric: tabular-nums;
}
.calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-grid button {
  appearance: none; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  padding: 9px 0; border-radius: 8px; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--input-bdr); transition: .12s;
}
.calc-grid button:hover { border-color: var(--sage); background: rgba(var(--sage-rgb),.14); }
.calc-grid button.calc-op { color: var(--sage-ink); }
.calc-actions { display: flex; margin-top: 9px; }
.calc-actions .btn { flex: 1 1 0; }

/* ══ TOAST (built by bea-page.js — no HTML needed on pages) ══════════════ */
.result-float {
  position: fixed; top: calc(var(--nav-h) + 12px); right: 16px; z-index: 500;
  min-width: 240px; max-width: 340px;
  background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  border-left: 4px solid var(--active); padding: 12px 16px;
  opacity: 0; transform: translateY(-8px); pointer-events: none; transition: .22s;
}
.result-float.open { opacity: 1; transform: none; pointer-events: auto; }
.result-float.err { border-left-color: var(--red); }
.result-float-title { font-weight: 700; font-size: .82rem; color: var(--sage-ink); }
.result-float.err .result-float-title { color: var(--red); }
.result-float-msg { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ══ EMPTY STATE ═════════════════════════════════════════════════════════ */
.empty {
  text-align: center; color: var(--muted); font-size: .85rem;
  padding: 40px 16px; border: 1px dashed var(--input-bdr); border-radius: var(--radius-lg);
  background: var(--input-bg);
}

/* ══ RESPONSIVE POLISH (mobile ≤640 / tablet ≤1024) ══════════════════════ */
@media(max-width:640px){
  h1, .page-h1 { font-size: 1.4rem; }
  .stat .stat-value { font-size: 1.4rem; }
  .card { padding: 16px 14px; }
  .modal-back { padding: 3vh 8px 30px; }
  .modal { padding: 18px 14px; }
  .modal-actions { flex-wrap: wrap; }
  .row:not(.nowrap), .row-between:not(.nowrap) { flex-wrap: wrap; }
  .tbl th, .tbl td { padding: 9px 10px; }
}
@media(max-width:480px){
  .card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-grid.card-grid-flow { grid-template-columns: 1fr; }
}

/* ══ ICONS ═══════════════════════════════════════════════════════════════ */
.icon {
  width: 1em; height: 1em; display: inline-block; flex-shrink: 0;
  vertical-align: -0.15em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-lg { width: 1.3em; height: 1.3em; }

/* ══ QR / INVITE-LINK BOX (guest.html modal, invitation.html per-guest links) ══ */
.qr-box { text-align: center; }
.qr-box img { width: 200px; height: 200px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); padding: 8px; }

/* ══ Donut chart ══ */
.fin-donut-wrap { position: relative; width: 180px; height: 180px; flex-shrink: 0; margin: 0 auto; }
.fin-donut { width: 100%; height: 100%; transform: rotate(-90deg); }
.fin-donut circle { transition: stroke-dasharray .3s; }
.fin-donut-center { position: absolute; inset: 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.fin-donut-total { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--sage-ink); line-height: 1.15; word-break: break-word; }
.fin-donut-label { font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 480px) { .fin-donut-wrap { width: 150px; height: 150px; } }
.fin-donut-slice { transition: opacity .12s; }
.fin-donut-slice:hover { opacity: .8; }
.fin-donut-tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--sage-ink); color: var(--white); font-size: .76rem; line-height: 1.4;
  border-radius: 8px; padding: 8px 11px; max-width: 240px;
  opacity: 0; visibility: hidden; transition: opacity .1s;
  box-shadow: var(--shadow-md);
}
.fin-donut-tip.show { opacity: 1; visibility: visible; }
.fin-donut-tip b { color: var(--white); }

/* ── spend/contribution breakdown bars ── */
.fin-split { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.fin-bars { display: flex; flex-direction: column; gap: 14px; min-width: 240px; flex: 1; }
.fin-bar-item { padding: 4px 6px; margin: 0 -6px; border-radius: 8px; }
.fin-bar-clickable { cursor: pointer; transition: background .12s; }
.fin-bar-clickable:hover, .fin-bar-clickable:focus-visible { background: rgba(var(--sage-rgb),.1); outline: none; }
.fin-bar-row-top { display: flex; align-items: center; gap: 8px; font-size: .8rem; margin-bottom: 5px; }
.fin-bar-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.fin-bar-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-bar-pct { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fin-bar-amt { font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.fin-bar { height: 10px; border-radius: 6px; background: var(--panel); overflow: hidden; }
.fin-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--sage),var(--sage-deep)); border-radius: 6px; }
@media(max-width:480px){ .fin-bar-row-top{ font-size:.74rem } }

/* ── simple legend ── */
.fin-legend-simple { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px 10px; min-width: 160px; flex: 1; }
.fin-legend-simple-row { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 8px; cursor: pointer; transition: background .12s; font-size: .82rem; }
.fin-legend-simple-row:hover, .fin-legend-simple-row:focus-visible { background: rgba(var(--sage-rgb),.1); outline: none; }
.fin-bar-amt-inline { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.fin-bar-total { font-family: var(--font-body); font-size: 1.05rem; color: var(--sage-ink); }
.chart-card-sm .fin-donut-wrap { width: 120px; height: 120px; }

/* ── single-line 100%-stacked bar ── */
.fin-stackbar { display: flex; width: 100%; height: 26px; border-radius: 8px; overflow: hidden; background: var(--panel); }
.fin-stackbar-seg { height: 100%; min-width: 3px; cursor: pointer; transition: filter .12s; }
.fin-stackbar-seg:hover { filter: brightness(1.08); }

/* ══ Color tag swatches ══ */
.color-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; flex-shrink: 0; }
.color-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.color-swatch { appearance: none; border: 2px solid transparent; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; padding: 0; transition: .15s; }
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected { border-color: var(--sage-ink); box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--sage-ink); }
.color-swatch-none { background: var(--panel) !important; display: flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; color: var(--muted); border: 1px dashed var(--input-bdr) !important; }
.dsg-color-input { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; overflow: hidden; }
.dsg-color-wheel {
  display: inline-block; width: 24px; height: 24px; border-radius: 50%; cursor: pointer; vertical-align: middle;
  border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--border);
  background: conic-gradient(from 90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #00c7be, #007aff, #5856d6, #af52de, #ff3b30);
}

/* ── Colour wheel ── */
.cw-back { position: fixed; inset: 0; z-index: 970; }
.cw-pop {
  position: fixed; width: 216px; padding: 14px; display: flex; flex-direction: column; gap: 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
}
.cw-wheel {
  position: relative; width: 188px; height: 188px; margin: 0 auto; border-radius: 50%;
  cursor: crosshair; touch-action: none; outline: none;
  box-shadow: 0 0 0 1px var(--border);
  background:
    radial-gradient(circle closest-side, #fff, rgba(255,255,255,0) 100%),
    conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
}
.cw-wheel:focus-visible { box-shadow: 0 0 0 2px var(--sage-deep); }
.cw-shade { position: absolute; inset: 0; border-radius: 50%; background: #000; pointer-events: none; }
.cw-dot {
  position: absolute; width: 15px; height: 15px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45); pointer-events: none;
}
.cw-val {
  appearance: none; width: 100%; height: 12px; border-radius: 999px; padding: 0; cursor: pointer;
  border: 1px solid var(--input-bdr);
  background: linear-gradient(90deg, #000, var(--cw-tint, #b99a5b));
}
.cw-val::-webkit-slider-thumb {
  appearance: none; width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  background: var(--card); border: 2px solid var(--sage-deep);
}
.cw-val::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  background: var(--card); border: 2px solid var(--sage-deep);
}
.cw-row { display: flex; align-items: center; gap: 8px; }
.cw-prev { flex: 0 0 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 1px var(--border); }
.cw-hex {
  flex: 1 1 auto; min-width: 0; width: 100%; font: inherit; font-size: .82rem;
  text-transform: uppercase; padding: 5px 8px; border-radius: 8px;
  background: var(--input-bg); border: 1px solid var(--input-bdr); color: var(--ink);
}
.cw-acts { display: flex; gap: 8px; }
.cw-acts .btn { flex: 1 1 0; justify-content: center; }

/* ══ GAMES ═══════════════════════════════════════════════════════════════ */

.drag-handle {
  flex: 0 0 auto; width: 22px; height: 26px; cursor: grab; touch-action: none;
  border-radius: var(--radius); opacity: .5; transition: opacity .15s ease;
  background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
  background-size: 7px 7px; background-position: 4px 5px; background-repeat: repeat;
  color: var(--muted);
}
.drag-handle:hover { opacity: 1; }
.reorder-active { opacity: .65; box-shadow: var(--shadow-md); cursor: grabbing; }

.modal-wide { max-width: 900px; }
.gs-editor { max-width: 960px; }

/* ── couple: game list ─────────────────────────────────────────────────── */
.gs-game + .gs-game { margin-top: 12px; }
.gs-game-name { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; }
.gs-game-sub { font-size: .82rem; }
.gs-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; font-size: .85rem; color: var(--muted); }
.gs-stats b { color: var(--ink); }
.gs-stat-warn b { color: var(--amber); }
.gs-actions { gap: 8px; }
.gs-sub { font-size: .85rem; margin-top: -4px; }

/* ── couple: template picker ───────────────────────────────────────────── */
.gs-tpl { display: flex; flex-direction: column; }
.gs-tpl-name { font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; }
.gs-tpl-sub { color: var(--gold-ink); font-style: italic; font-size: .88rem; margin-top: 2px; }
.gs-tpl-blurb { font-size: .85rem; margin: 10px 0 0; flex: 1; }
.gs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gs-tpl-soon { opacity: .62; }

/* ── couple: builders ──────────────────────────────────────────────────── */
.gs-builder .gs-row + .gs-row { margin-top: 10px; }
.gs-row-head { display: flex; align-items: center; gap: 8px; }
.gs-row-foot { gap: 10px; align-items: flex-end; margin-top: 10px; }
.gs-mini { max-width: 96px; }
.gs-narrow { max-width: 190px; }
.gs-choices { margin: 10px 0 0 30px; }
.gs-choice { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.gs-correct { display: inline-flex; align-items: center; cursor: pointer; }
.gs-correct input { position: absolute; opacity: 0; width: 0; height: 0; }
.gs-correct span {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--input-bdr);
  display: inline-block; transition: background .15s ease, border-color .15s ease;
}
.gs-correct input:checked + span { border-color: var(--sage-deep); background: var(--sage-deep); box-shadow: inset 0 0 0 3px var(--card); }
.gs-board-facts { display: flex; flex-wrap: wrap; gap: 28px; }
.gs-guest-pick { max-height: 260px; overflow-y: auto; }

/* ── couple ── */
.gs-qpager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.gs-qpager-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.gs-qpager-select { max-width: 340px; min-width: 0; }
.gs-qpager-count { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.gs-qpager-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gs-qcard { padding: 20px; }
.gs-qchoices { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.gs-qaddrow { display: flex; justify-content: flex-end; }

/* ── couple: publish checklist ─────────────────────────────────────────── */
.gm-check { display: block; margin: 8px 0 0; padding-left: 20px; font-size: .88rem; list-style: disc; }
.gm-check li { display: list-item; }

.gs-num {
  flex: 0 0 auto; min-width: 30px; text-align: center; font-size: .72rem; font-weight: 600;
  padding: 3px 6px; border-radius: 999px; background: var(--panel); color: var(--muted);
}
.gs-mini-in { max-width: 84px; }
.gm-check-block li { color: var(--red); }
.gm-check-warn li { color: var(--amber); }
.gm-check-ok { color: var(--green); font-size: .9rem; }
.gs-publish-row { justify-content: flex-end; }

/* ── couple: preview ───────────────────────────────────────────────────── */
.gs-preview { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; }
.gs-phone {
  border: 10px solid var(--sage-ink); border-radius: 28px; background: var(--cream);
  padding: 14px 12px; min-height: 380px; box-shadow: var(--shadow);
}
.gs-phone-screen { font-size: .9rem; }
.gs-phone-title { font-family: var(--font-display); font-size: 1.2rem; text-align: center; margin-bottom: 14px; color: var(--sage-deep); }
.gs-winner-demo { text-align: center; padding: 20px 0; }
.gs-winner-name { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold-ink); }
@media (max-width: 768px) { .gs-preview { grid-template-columns: 1fr; } }

/* ── Game surfaces: spacing scale ── */
:root {
  --gg-gap: 10px; --gg-gap-lg: 14px; --gg-pad: 14px; --gg-tap: 48px;
}
@media (min-width: 700px) {
  :root { --gg-gap: 12px; --gg-gap-lg: 18px; --gg-pad: 18px; --gg-tap: 52px; }
}

/* ── question / answer card, used by the preview and the real guest page ── */
.gq-question {
  background: var(--card); border-radius: var(--radius-lg);
  padding: var(--gg-pad); margin-bottom: var(--gg-gap-lg); box-shadow: var(--shadow-sm);
}
.gq-prompt { font-weight: 600; margin-bottom: var(--gg-gap); line-height: 1.4; }
.gq-choice {
  display: flex; align-items: center; width: 100%; text-align: left;
  margin-top: var(--gg-gap); padding: 12px 14px; min-height: var(--gg-tap);
  border: 1px solid var(--input-bdr); border-radius: var(--radius); background: var(--input-bg);
  font: inherit; color: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.gq-choice:hover { border-color: var(--gg-btn, var(--sage)); }
.gq-choice.selected {
  border-color: var(--gg-btn, var(--sage-deep));
  background: rgba(var(--sage-rgb), .18);
  background: color-mix(in srgb, var(--gg-btn, var(--sage-deep)) 16%, transparent);
}
.gq-choice.correct { border-color: var(--green); background: rgba(var(--green-rgb), .14); }
.gq-choice.wrong { border-color: var(--red); background: rgba(var(--red-rgb), .12); }
.gq-yn { display: flex; gap: var(--gg-gap); }
.gq-yn .gq-choice { justify-content: center; text-align: center; }

/* ── bingo board ───────────────────────────────────────────────────────── */
.gb-board { display: grid; grid-template-columns: repeat(var(--gb-size, 4), 1fr); gap: 8px; }
.gb-cell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 6px; font-size: .68rem; line-height: 1.15; border-radius: var(--radius);
  border: 1px solid var(--input-bdr); background: var(--input-bg);
  cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease;
  overflow: hidden; overflow-wrap: anywhere;
}
.gb-cell:hover { transform: scale(1.015); }
.gb-cell.marked {
  background: var(--gg-btn, var(--sage-deep)); border-color: var(--gg-btn, var(--sage-deep));
  color: var(--gg-btn-ink, var(--white));
}
.gb-free { background: var(--champagne); border-color: var(--champagne-deep); cursor: default; }
.gb-free:hover { transform: none; }

/* ── guest: game list on the personalized page ─────────────────────────── */
.gg-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: var(--gg-pad); min-height: var(--gg-tap);
  border: 1px solid var(--gg-line, var(--border)); border-radius: var(--radius-lg);
  background: var(--card); margin-top: var(--gg-gap); text-align: left;
}
.gg-item-name { font-weight: 600; }
.gg-item-sub { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.gg-back {
  background: none; border: none; color: var(--gg-ink, var(--muted));
  font: inherit; cursor: pointer; padding: 8px 0; min-height: var(--gg-tap);
}
.gg-progress { font-size: .8rem; color: var(--muted); margin-bottom: var(--gg-gap); }
.gg-done { text-align: center; padding: 22px 6px; }
.gg-done-score { font-family: var(--font-display); font-size: 2.2rem; color: var(--gg-btn, var(--sage-deep)); }
.gg-actions { display: flex; flex-direction: column; gap: var(--gg-gap); margin-top: var(--gg-gap-lg); }
.gg-actions .btn { width: 100%; min-height: var(--gg-tap); }
@media (min-width: 700px) {
  .gg-actions { flex-direction: row; flex-wrap: wrap; }
  .gg-actions .btn { flex: 1 1 auto; width: auto; }
}
.gb-cell { min-height: var(--gg-tap); }

/* ── landing designer: the Games block's own game list ─────────────────── */
.lp-game-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  border-bottom: 1px solid var(--border); font-size: .82rem;
}
.lp-game-row:last-child { border-bottom: none; }
.lp-game-off .grow { color: var(--muted); text-decoration: line-through; }

/* ── guest: Snap Quest upload ──────────────────────────────────────────── */
.gg-upload { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--gg-gap); min-height: var(--gg-tap); cursor: pointer; }
.gg-upstate { font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* ── wedding day: live dashboard ───────────────────────────────────────── */
.lg-photo { max-width: 220px; max-height: 160px; border-radius: var(--radius); margin-top: 10px; display: block; object-fit: cover; }
.lg-strip { display: flex; flex-wrap: wrap; gap: 22px; }
.lg-updated { font-size: .78rem; color: var(--muted); }
.lg-claim { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px; margin-top: 10px; }
.lg-claim-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lg-claim-items { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.lg-claim-items span { font-size: .74rem; padding: 3px 8px; border-radius: 999px; background: var(--panel); }
.lg-draw-stage { text-align: center; padding: 26px 10px; }
.lg-draw-name { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold-ink); min-height: 1.2em; }
.lg-draw-name.rolling { opacity: .55; }
.lg-rank { width: 2.2rem; color: var(--muted); }

/* ── design: download history ──────────────────────────────────────────── */
.dm-dl {
  appearance: none; border: none; cursor: pointer;
  font-family: inherit; line-height: inherit; color: inherit;
}
.dm-dl .icon { width: 1em; height: 1em; vertical-align: -.15em; margin-right: 4px; }
.dm-dl:hover, .dm-dl:focus-visible { filter: brightness(.94); }
.dm-dl:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }
.dm-hist {
  appearance: none; border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; display: inline-flex; align-items: center; gap: 6px;
}
.dm-hist:hover { filter: brightness(.94); }
.dm-hist:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; border-radius: 20px; }
.dl-log { display: flex; flex-direction: column; }
.dl-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .84rem;
}
.dl-row:last-child { border-bottom: none; }
.dl-row.is-off .dl-meta { color: var(--red); font-weight: 600; }
.dl-who { font-weight: 600; flex: 1 1 auto; min-width: 90px; }
.dl-meta { color: var(--muted); font-size: .78rem; }
.dl-when { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.dl-empty { color: var(--muted); font-size: .84rem; padding: 10px 0; }

/* ── Details table ── */
.dm-details { width: 100%; border-collapse: collapse; font-size: .84rem; }
.dm-details th, .dm-details td { padding: 8px 0; border-bottom: 1px solid var(--border); text-align: left; }
.dm-details tr:last-child th, .dm-details tr:last-child td { border-bottom: none; }
.dm-details th {
  width: 42%; font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); vertical-align: middle;
}
.dm-details td { color: var(--ink); }
.dm-details td .badge { vertical-align: middle; }

/* ── wedding day: registration desk ────────────────────────────────────── */
.reg-scanbar {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; margin: 4px 0 18px;
}
.reg-cam {
  position: relative; margin: 0 auto 16px; border-radius: var(--radius-lg);
  overflow: hidden; background: #000; max-width: 520px;
}
.reg-cam video { display: block; width: 100%; max-height: 58vh; object-fit: cover; }
.reg-reticle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(62%, 240px); aspect-ratio: 1; border-radius: var(--radius-lg);
  border: 2px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35);
}
.reg-cam-stop {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(0, 0, 0, .45); color: var(--white);
}
.reg-cam-stop:hover, .reg-cam-stop:focus-visible { background: rgba(0, 0, 0, .65); color: var(--white); }
.reg-msg { font-size: .84rem; color: var(--muted); }
.reg-msg:empty { display: none; }
.reg-msg.is-err { color: var(--red); }

.reg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.reg-stat {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.reg-ring { position: relative; flex: 0 0 auto; width: 58px; height: 58px; }
.reg-ring svg { width: 100%; height: 100%; display: block; }
.reg-ring-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 700; color: var(--sage-ink); font-variant-numeric: tabular-nums;
}
.reg-ring-pct.is-over { color: var(--gold-ink); }
.reg-stat-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.reg-stat-txt b { font-size: 1.15rem; color: var(--sage-ink); font-variant-numeric: tabular-nums; }
.reg-stat-txt span { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

.filter-bar input.reg-search { flex: 1 1 280px; min-width: 240px; max-width: 460px; }

.reg-tbl th, .reg-tbl td { vertical-align: middle; }
.reg-tbl .reg-c-tick { width: 34px; padding-right: 0; }
.reg-tbl .reg-c-name { width: 34%; }
.reg-tbl .reg-c-seat { white-space: nowrap; }
.reg-tbl .reg-c-qty { width: 74px; }
.reg-tbl .reg-c-go { width: 30px; color: var(--muted); }
.reg-tbl tr.is-done .reg-c-name b { color: var(--muted); }
.reg-tick {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--input-bdr);
  display: inline-flex; align-items: center; justify-content: center;
}
.reg-tbl tr.is-done .reg-tick { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--white); }
.reg-tick .icon { width: 13px; height: 13px; }
.reg-tbl .reg-seat-nos { margin-left: 8px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.reg-tbl .reg-seat-nos::before { content: '· '; }

.reg-facts { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.reg-fact { display: flex; flex-direction: column; gap: 1px; }
.reg-fact b { font-size: 1.5rem; color: var(--sage-ink); line-height: 1.1; }
.reg-fact span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.reg-seat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .86rem; }
.reg-seat-nos { color: var(--muted); font-size: .82rem; }
.reg-map:not(:empty) {
  margin-top: 12px; padding: 10px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--panel);
}
.reg-actual { margin-top: 18px; }
.reg-stepper { display: flex; align-items: center; gap: 8px; }
.reg-stepper .icon-btn {
  width: 42px; height: 42px; flex: 0 0 auto; font-size: 1.2rem;
  border: 1px solid var(--input-bdr); border-radius: var(--radius);
}
.reg-stepper input {
  width: 110px; text-align: center; font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.reg-stepper input::-webkit-outer-spin-button,
.reg-stepper input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.reg-stepper input { -moz-appearance: textfield; }

@media (max-width: 768px) {
  .reg-tbl .reg-c-side, .reg-tbl .reg-c-rel { display: none; }
  .reg-tbl .reg-c-name { width: auto; }
}
@media (max-width: 640px) {
  .reg-facts { gap: 18px; }
  .reg-scanbar { margin: 0 0 14px; }
  .reg-scanbar .btn { width: 100%; }
  .reg-stats {
    grid-template-columns: repeat(3, 1fr); gap: 0;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  }
  .reg-stat { gap: 6px; padding: 7px 6px; border: none; border-radius: 0; background: none; }
  .reg-stat + .reg-stat { border-left: 1px solid var(--border); }
  .reg-ring { width: 26px; height: 26px; }
  .reg-ring-pct { display: none; }
  .reg-stat-txt { gap: 0; }
  .reg-stat-txt b { font-size: .78rem; line-height: 1.2; }
  .reg-stat-txt span { font-size: .5rem; letter-spacing: .02em; line-height: 1.2; white-space: nowrap; }
  .filter-bar input.reg-search { flex: 1 1 100%; max-width: none; }
}

/* ── wedding-day photo slideshow ───────────────────────────────────────── */
.bv-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.bv-thumb { width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius); }

.bv-stage {
  position: fixed; inset: 0; z-index: 600; display: none;
  flex-direction: column; background: #0d0f0d;
}
.bv-stage.open { display: flex; }
.bv-brand {
  flex: 0 0 auto; text-align: center; padding: 2.2vh 0 1.4vh;
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.6vh, 2rem);
  letter-spacing: .22em; color: var(--champagne);
}
.bv-foot {
  flex: 0 0 auto; text-align: center; padding: 1.4vh 0 2.2vh;
  font-family: var(--font-foot); font-size: clamp(.7rem, 1.6vh, 1rem);
  letter-spacing: .16em; color: rgba(var(--champagne-rgb), .65);
}
.bv-frame { position: relative; flex: 1; overflow: hidden; }
.bv-slide {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.1s ease;
}
.bv-slide.bv-on { opacity: 1; }
.bv-caption {
  position: absolute; left: 0; right: 0; bottom: 0; text-align: center;
  padding: 2.4vh 4vw; color: rgba(255, 255, 255, .92);
  font-size: clamp(.8rem, 2vh, 1.3rem);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
}
.bv-close { position: absolute; top: 14px; right: 16px; z-index: 2; }

@keyframes kbInTl   { from { transform: scale(1)    translate(0, 0); }        to { transform: scale(1.16) translate(-2.5%, -2%); } }
@keyframes kbInBr   { from { transform: scale(1)    translate(0, 0); }        to { transform: scale(1.16) translate(2.5%, 2%); } }
@keyframes kbOutTr  { from { transform: scale(1.16) translate(2%, -2%); }     to { transform: scale(1)    translate(0, 0); } }
@keyframes kbOutBl  { from { transform: scale(1.16) translate(-2%, 2%); }     to { transform: scale(1)    translate(0, 0); } }
@keyframes kbPanL   { from { transform: scale(1.12) translate(3%, 0); }       to { transform: scale(1.12) translate(-3%, 0); } }
@keyframes kbPanR   { from { transform: scale(1.12) translate(-3%, 0); }      to { transform: scale(1.12) translate(3%, 0); } }
.kb-in-tl  { animation: kbInTl  7.4s ease-out forwards; }
.kb-in-br  { animation: kbInBr  7.4s ease-out forwards; }
.kb-out-tr { animation: kbOutTr 7.4s ease-out forwards; }
.kb-out-bl { animation: kbOutBl 7.4s ease-out forwards; }
.kb-pan-l  { animation: kbPanL  7.4s linear   forwards; }
.kb-pan-r  { animation: kbPanR  7.4s linear   forwards; }
@media (prefers-reduced-motion: reduce) {
  .bv-slide { animation: none !important; }
}

/* ── presentation mode ─────────────────────────────────────────────────── */
.pm-back { position: fixed; inset: 0; z-index: 500; background: var(--cream); display: none; flex-direction: column; }
.pm-back.open { display: flex; }
.pm-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 28px; }
.pm-title { font-family: var(--font-display); font-size: 2rem; color: var(--sage-deep); }
.pm-body { flex: 1; overflow: hidden; padding: 0 4vw 4vh; display: flex; flex-direction: column; justify-content: center; }
.pm-row {
  display: flex; align-items: baseline; gap: 22px; padding: 1.1vh 0;
  font-size: clamp(1.4rem, 3.4vh, 3rem); border-bottom: 1px solid var(--border);
  transition: transform .3s ease, opacity .3s ease;
}
.pm-row-rank { width: 2.2em; color: var(--muted); }
.pm-row-name { flex: 1; font-family: var(--font-head); }
.pm-row-points { font-variant-numeric: tabular-nums; color: var(--gold-ink); }
.pm-empty { text-align: center; color: var(--muted); font-size: 1.4rem; }

/* ══ UTILITIES ═══════════════════════════════════════════════════════════ */
.row { display: flex; gap: 10px; align-items: center; }
.row-between { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.hidden { display: none !important; }

.gg-scan { width: 100%; max-height: 260px; border-radius: var(--radius-lg); margin-top: 10px; background: #000; }

.gs-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em;
  font-size: .82rem; padding: 3px 8px; border-radius: var(--radius);
  background: var(--panel); color: var(--sage-ink); }

/* ── games: small screens ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .gs-editor, .modal-wide {
    max-width: none; width: 100%; min-height: 100vh;
    border-radius: 0; padding: 16px 14px 28px;
  }
  .gs-editor-back, .modal-back:has(.modal-wide) { padding: 0; }
  .gs-preview { grid-template-columns: 1fr; }
  .gs-phone { border-width: 6px; min-height: 0; }
  .gs-board-facts { gap: 16px; }
  .gs-row-head { flex-wrap: wrap; }
  .gs-row-head > input[type=text] { flex: 1 1 100%; order: 3; }
  .gs-row-foot { gap: 8px; }
  .gs-mini, .gs-narrow { max-width: none; flex: 1 1 120px; }
  .gs-choices { margin-left: 0; }
  .gs-qpager { flex-direction: column; align-items: stretch; }
  .gs-qpager-select { max-width: none; flex: 1 1 100%; }
  .gs-qpager-actions { justify-content: flex-end; }
  .lg-strip, .gs-stats { gap: 12px; }
  .pm-row { gap: 12px; }
}
@media (max-width: 480px) {
  .gs-actions .btn, .gs-publish-row .btn { flex: 1 1 auto; }
  .gs-tpl-blurb { display: none; }
  .bv-thumb { width: 60px; height: 60px; }
}
.gs-editor .tbl-wrap { max-width: 100%; overflow-x: auto; }

/* ── guest game shell ────────────────────────────────────────────────────── */
.gg-brand {
  text-align: center; font-family: var(--gg-font, var(--font-display)); letter-spacing: .2em;
  font-size: .78rem; color: var(--gg-ink, var(--sage-deep)); opacity: .85;
  padding: 2px 0 8px; border-bottom: 1px solid var(--gg-line, var(--border)); margin-bottom: 10px;
}
.gg-title { font-family: var(--gg-font, var(--font-head)); font-weight: 600; font-size: 1rem; margin: 6px 0 10px; }
.gg-foot {
  text-align: center; font-family: var(--gg-font, var(--font-foot)); font-size: .68rem;
  letter-spacing: .14em; color: var(--gg-ink, var(--muted)); opacity: .8;
  padding-top: 14px; margin-top: 16px; border-top: 1px solid var(--gg-line, var(--border));
}
.gg-back { min-height: 40px; display: inline-flex; align-items: center; }
.gg-brand { position: relative; }
.gg-menu {
  position: absolute; right: 0; top: -4px; width: 36px; height: 36px;
  border: 0; background: none; cursor: pointer; color: var(--gg-ink, var(--sage-deep));
  font-size: 1rem; line-height: 1; border-radius: var(--radius);
  transition: background .15s ease;
}
.gg-menu:hover { background: rgba(var(--sage-rgb),.16); }
.gg-menu:hover { background: color-mix(in srgb, var(--gg-btn, var(--sage)) 16%, transparent); }
.gg-drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.gg-drawer.open { display: block; }
.gg-drawer-back { position: absolute; inset: 0; background: rgba(0,0,0,.28); }
.gg-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(300px, 84vw);
  background: var(--card); border-left: 1px solid var(--border);
  box-shadow: var(--shadow); padding: 14px; overflow-y: auto; overflow-x: clip;
  animation: ggDrawerIn .16s ease-out;
}
@keyframes ggDrawerIn { from { transform: translateX(14px); opacity: .6; } to { transform: none; opacity: 1; } }
.gg-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--sage-ink);
  padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
}
.gg-drawer-x { border: 0; background: none; cursor: pointer; font-size: .9rem; color: var(--muted); padding: 6px; }
.gg-drawer-item {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: 10px; min-height: var(--gg-tap); padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: none; cursor: pointer; text-align: left; font-size: .85rem;
  color: inherit; font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.gg-drawer-item:hover { background: rgba(var(--sage-rgb),.16); }
.gg-drawer-item:hover { background: color-mix(in srgb, var(--gg-btn, var(--sage)) 16%, transparent); }
.gg-drawer-item.current {
  border-color: var(--gg-btn, var(--sage)); font-weight: 600;
  background: rgba(var(--sage-rgb),.16);
  background: color-mix(in srgb, var(--gg-btn, var(--sage)) 16%, transparent);
}
.gg-drawer-home { margin-top: 8px; border-top: 1px solid var(--border); border-radius: 0; color: var(--muted); }

/* ── FULL-SCREEN EDITOR CHROME ─────────────────────────────────────────── */

html.editor-page, body.editor-page { height: 100%; }
body.editor-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.editor-page [hidden] { display: none !important; }

.fe-bar {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  height: var(--nav-h); padding: 0 20px 0 0;
  background: var(--panel); z-index: 40;
}
input.fe-name {
  font-family: var(--font-head); font-size: .86rem; line-height: 1.5; color: var(--sage-ink);
  background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 8px;
  padding: 4px 10px; min-width: 10ch; max-width: 22ch;
}
input.fe-name:focus { border-color: var(--sage); outline: none; }
.fe-state { font-size: .74rem; color: var(--muted); min-width: 7ch; }
.fe-state.err { color: var(--red); }
.fe-spacer { flex: 1 1 auto; }
/* ── Section rule ── */
.fe-sep, .lp-sep { height: 1px; background: var(--border); margin: 20px 0 16px; }
.fe-setup .fe-sep:first-child { display: none; }
/* ── Editor Setup dialog ── */
.fe-setup { max-width: 520px; }
.fe-setup .fe-field { margin-bottom: 20px; }
.fe-setup .fe-field:last-child { margin-bottom: 0; }
.fe-setup .fe-field:has([data-es-body]:empty) .fe-field-h { margin-bottom: 0; }
.fe-setup .fe-grid2, .fe-setup .fe-grid3 { margin-bottom: 20px; }
.fe-setup .fe-grid2 .fe-field, .fe-setup .fe-grid3 .fe-field { margin-bottom: 0; }
.fe-setup .fe-field-h, .fe-setup .lp-sub-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.fe-setup .fe-field-n {
  font-size: .7rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--muted); white-space: nowrap;
}
.fe-setup .fe-field-n:empty { display: none; }
.fe-setup .ce-note { font-size: .76rem; color: var(--muted); margin: 0; }
.fe-setup-badge { margin-left: auto; margin-right: 12px; flex: none; }
.fe-setup-what {
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.fe-setup-what:empty { display: none; }
.fe-setup-what::before { content: '\00b7'; margin: 0 6px 0 4px; color: var(--muted); opacity: .6; }
.fe-setup-body {
  max-height: min(78dvh, 820px); overflow-y: auto; overflow-x: clip;
  overscroll-behavior: contain; margin-inline: -4px; padding: 2px 4px;
}
.fe-fold > summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.fe-fold > summary::-webkit-details-marker { display: none; }
.fe-fold > summary::after {
  content: ''; margin-left: auto; width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  opacity: .6; transition: transform .14s ease;
}
.fe-fold[open] > summary::after { transform: rotate(90deg); }
.fe-fold > summary + * { margin-top: 12px; }
.fe-sub-title, .lp-sub-title {
  font-family: var(--font-head); color: var(--sage-ink); font-size: .95rem; font-weight: 700;
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}
.fe-back { display: inline-flex; align-items: center; gap: 5px; }
.fe-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.fe-body-grid { overflow: clip; }

.fe-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.fe-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px 20px; }
.fe-field select { width: 100%; }
.fe-field > label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.fe-field .seg-pair { width: 100%; }
.fe-field .seg-pair button { flex: 1 1 0; }
@media (max-width: 640px) { .fe-grid3 { grid-template-columns: 1fr; } }

.fe-brand { flex: 0 0 auto; margin-right: 4px; }
.fe-title {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-body); font-size: .8rem; font-weight: 600;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fe-title-dot { color: var(--muted); opacity: .55; margin: 0 2px; }
.fe-title-stage {
  font-family: var(--font-body); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold);
}
.fe-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
@media (max-width: 1180px) { .fe-brand { display: none; } }
@media (max-width: 760px) {
  .fe-back span { display: none; }
  .fe-title { font-size: .85rem; }
}
.fe-toolrow { display: contents; }
/* ── EDITOR SHELL ── */
:root { --ed-rail: 262px; --ed-props: 300px; --ed-dock: 44px; }
@media (min-width: 1700px) { :root { --ed-rail: 284px; --ed-props: 318px; } }
/* A laptop keeps the side panel — it narrows instead of falling to the bottom. */
@media (max-width: 1280px) { :root { --ed-rail: 236px; --ed-props: 268px; } }
@media (max-width: 1120px) { :root { --ed-rail: 214px; --ed-props: 244px; } }
@media (max-width: 1000px) { :root { --ed-rail: 200px; --ed-props: 224px; } }

.fe-tools {
  display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.fe-tools::-webkit-scrollbar { display: none; }
.fe-tools > * { flex: 0 0 auto; }
.fe-tools select { font-size: .78rem; padding: 4px 28px 4px 10px; max-width: 200px; }
.fe-tools .ce-tog, .fe-tools .ce-pin { font-size: .74rem; white-space: nowrap; }
.fe-tools .ce-count { margin-left: 0; }
@media (max-width: 1100px) {
  .fe-title { display: none; }
}
/* ── Editor bar: narrow screens ── */
@media (max-width: 860px) {
  .fe-bar {
    height: auto; min-height: var(--nav-h); flex-wrap: wrap; row-gap: 4px;
    column-gap: 6px; padding: 4px 8px 4px 0;
  }
  .fe-back { order: 1; flex: 0 0 auto; padding-inline: 8px; }
  input.fe-name { order: 2; flex: 0 1 auto; width: auto; min-width: 0; max-width: 28vw; font-size: .8rem; }
  .fe-state {
    order: 3; flex: 1 1 0; min-width: 0; font-size: .68rem; text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .fe-actions { order: 4; flex: 0 0 auto; gap: 6px; margin-left: auto; }
  .fe-actions .btn-label { display: none; }
  .fe-bar .nav-ham { order: 5; padding: 8px 4px; }
  .fe-toolrow { display: none; }
  .fe-toolrow:has(.fe-tools:not(:empty)) {
    order: 6; display: flex; align-items: center; gap: 8px;
    flex: 1 1 100%; min-width: 0; padding-left: 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .fe-toolrow::-webkit-scrollbar { display: none; }
  .fe-toolrow .fe-spacer { display: none; }
  .fe-toolrow .fe-tools { flex: 0 1 auto; overflow: visible; }
  .fe-tools select { width: auto; min-width: 160px; max-width: 58vw; }
}

/* ── Live now ── */
.badge-live {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(var(--sage-rgb), .18); color: var(--sage-ink);
}
.badge-live i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--sage-deep);
  animation: beaLivePulse 1.8s ease-in-out infinite;
}
@keyframes beaLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--sage-rgb), .6); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px rgba(var(--sage-rgb), 0); opacity: .6; }
}
@media (prefers-reduced-motion: reduce) { .badge-live i { animation: none; } }

/* ── Context menu ── */
.bea-ctx {
  position: fixed; z-index: 960; min-width: 208px; padding: 6px;
  display: none; flex-direction: column; gap: 1px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 11px; box-shadow: var(--shadow);
}
.bea-ctx.open { display: flex; }
.bea-ctx-b {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border: none; border-radius: 7px; cursor: pointer;
  background: none; font: inherit; font-size: .8rem; color: var(--ink); text-align: left;
}
.bea-ctx-b .icon { flex: 0 0 16px; width: 16px; height: 16px; color: var(--muted); }
.bea-ctx-gap { flex: 0 0 16px; }
.bea-ctx-b > span { flex: 1 1 auto; }
.bea-ctx-b > em { font-style: normal; font-size: .7rem; color: var(--muted); letter-spacing: .02em; }
.bea-ctx-b:hover:not(:disabled) { background: var(--input-bg); color: var(--sage-ink); }
.bea-ctx-b:hover:not(:disabled) .icon { color: var(--sage-ink); }
.bea-ctx-b:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: -2px; }
.bea-ctx-b:disabled { opacity: .38; cursor: default; }
.bea-ctx-b.danger:hover:not(:disabled) { color: var(--danger, #B3261E); }
.bea-ctx-b.danger:hover:not(:disabled) .icon { color: var(--danger, #B3261E); }
.bea-ctx-sep { height: 1px; margin: 5px 4px; background: var(--input-bdr); }

/* ── Sprite icon picker ── */
.icon-pop {
  position: fixed; z-index: 985; width: 244px; padding: 8px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow);
}
.icon-pop-find {
  width: 100%; font: inherit; font-size: .78rem; padding: 6px 8px; margin-bottom: 8px;
  background: var(--input-bg); border: 1px solid var(--input-bdr); border-radius: 8px; color: var(--ink);
}
.icon-pop-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  max-height: 220px; overflow-y: auto; overflow-x: clip;
}
.icon-pop-grid button {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  border: 1px solid transparent; border-radius: 7px; background: none;
  color: var(--sage-ink); cursor: pointer; padding: 0;
}
.icon-pop-grid button:hover { background: rgba(var(--sage-rgb),.16); border-color: var(--sage); }
.icon-pop-grid .icon { width: 16px; height: 16px; }