/* ══ GATE OPS · a.css — paste FIRST into every artboard's <helmet><style> (verbatim) ══ */
@property --a  { syntax: '<angle>';  inherits: false; initial-value: 0deg; }
@property --bl { syntax: '<length>'; inherits: false; initial-value: 10px; }
@property --bc { syntax: '<color>';  inherits: false; initial-value: #3A4750; }
body { margin: 0; background: #06080A; }

/* ── 1. Tokens (root element of every artboard carries class="g-root") ── */
.g-root {
  color-scheme: dark;
  --void: #06080A; --deck: #0D1114; --plate: #141A1E; --rail: #1C2429;
  --wire: #27313A; --wire-hi: #3A4750; --wire-input: #5C6B65;
  --ink: #E9EFEA; --ink-2: #AAB6B0; --ink-3: #85928C;
  --volt: #CBFF3A; --volt-chip: #243310; --volt-deep: #A9DB12;
  --loot: #FFD166; --loot-chip: #2B2310;
  --warn: #FF8A34; --warn-chip: #2E1A0B;
  --bad: #FF5268;  --bad-chip: #2A1116;
  --frost: #9FC2D4; --frost-chip: #132028; --frost-deep: #5E7784;
  --paid: #56626A;
  --f-display: 'Science Gothic', 'Arial Narrow', sans-serif;
  --f-text: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  --ease-hud: cubic-bezier(.2, .8, .1, 1);
  --ease-money: cubic-bezier(.16, 1, .3, 1);
  --spring: linear(0, .18 4%, .5 10%, .8 17%, .96 24%, 1.03 31%, 1.04 37%, 1.02 46%, 1 60%, 1);
  --glow-volt: 0 0 0 1px rgba(203,255,58,.55), 0 0 24px -4px rgba(203,255,58,.45);
  /* kit remap: FP kit modules read these */
  --fp-bg: #06080A; --fp-bg2: #0D1114; --fp-ink: #E9EFEA; --fp-ink2: #AAB6B0; --fp-ink3: #85928C;
  --fp-lime: #CBFF3A; --fp-violet: #9FC2D4; --fp-violet-ink: #9FC2D4; --fp-cyan: #9FC2D4;
  --fp-gold: #FFD166; --fp-danger: #FF5268;
  --fp-display: 'Science Gothic', 'Arial Narrow', sans-serif;
  --fp-text: 'Onest', system-ui, sans-serif; --fp-mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  --fp-ease-out: cubic-bezier(.16, 1, .3, 1); --fp-ease-spring: cubic-bezier(.16, 1, .3, 1);
  position: relative; overflow: hidden; box-sizing: border-box;
  background: var(--void); color: var(--ink);
  font: 400 16px/1.6 var(--f-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.g-root *, .g-root *::before, .g-root *::after { box-sizing: border-box; }
.g-root.is-day {            /* «Денний режим» — cabinet boards only (CabPayouts tweak) */
  color-scheme: light;
  --void: #EEF2EE; --deck: #FFFFFF; --plate: #F6F8F5; --rail: #E6ECE7;
  --wire: #D5DCD7; --wire-hi: #B9C3BD; --wire-input: #6E7C75;
  --ink: #0D1114; --ink-2: #3B4843; --ink-3: #55635C;
  --volt-chip: #E6F5C4; --loot: #7A5200; --loot-chip: #FBF0D2;
  --warn: #A34700; --warn-chip: #FCE9DC; --bad: #B42318; --bad-chip: #FBE3E1;
  --frost: #2C5A70; --frost-chip: #E1EEF4; --paid: #8A969C;
}
.g-root.is-day .g-t-volt { color: #3E5C00; }
/* substrate: visible 48px grid + one accent haze (landing + cabinet; admin = .g-flat) */
.g-grid {
  background:
    radial-gradient(60% 50% at 72% -10%, rgba(203,255,58,.07), transparent 70%),
    linear-gradient(rgba(233,239,234,.03) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(233,239,234,.03) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--void);
}
.g-root.is-day.g-grid { background: linear-gradient(rgba(13,17,20,.035) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(13,17,20,.035) 1px, transparent 1px) 0 0 / 48px 48px, var(--void); }
.g-flat { background: var(--void); }
.g-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.g-root :focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }
:where(.g-root) a { color: inherit; }
.g-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--wire-input); text-underline-offset: 3px; }
.g-link:hover { text-decoration-color: var(--volt); }

/* ── 2. Type ── */
.g-h1 { margin: 0; font: 800 96px/.92 var(--f-display); font-stretch: 62%; text-transform: uppercase; letter-spacing: -.005em; text-wrap: balance; }
.g-h1--m { font-size: 40px; line-height: .95; }
.g-h2 { margin: 0; font: 700 56px/.96 var(--f-display); font-stretch: 75%; text-transform: uppercase; text-wrap: balance; }
.g-h2--m { font-size: 32px; line-height: 1; }
.g-stmt { margin: 0; font: 700 40px/1 var(--f-display); font-stretch: 90%; text-wrap: balance; }
.g-stmt--m { font-size: 28px; line-height: 1.05; }
.g-title { margin: 0; font: 700 32px/1 var(--f-display); font-stretch: 75%; text-transform: uppercase; }
.g-title--m { font-size: 26px; }
.g-h3 { margin: 0; font: 700 22px/28px var(--f-text); letter-spacing: -.005em; }
.g-h3--m { font-size: 20px; line-height: 26px; }
.g-h4 { margin: 0; font: 700 17px/24px var(--f-text); }
.g-lede { margin: 0; font: 400 20px/30px var(--f-text); color: var(--ink-2); text-wrap: pretty; }
.g-lede--m { font-size: 17px; line-height: 26px; }
.g-body { margin: 0; font: 400 16px/26px var(--f-text); text-wrap: pretty; }
.g-small { margin: 0; font: 400 14px/21px var(--f-text); }
.g-cap { margin: 0; font: 400 13px/19px var(--f-text); color: var(--ink-3); }
.g-label { font: 600 12px/1.2 var(--f-mono); font-stretch: 87.5%; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.g-label--ix { font-size: 11px; color: var(--ink-3); }
.g-mono { font-family: var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
.g-num-xl { font: 500 56px/1 var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; text-shadow: 0 0 18px rgba(203,255,58,.18); }
.g-num-xl--m { font-size: 40px; }
.g-num-l { font: 500 32px/1 var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
.g-num-l--m { font-size: 26px; }
.g-num-m { font: 500 20px/1.1 var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-num { font: 400 14px/20px var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.g-cur { font-size: .55em; color: var(--ink-2); letter-spacing: 0; }
.g-trim { text-box: trim-both cap alphabetic; }
.g-t-ink { color: var(--ink); } .g-t-2 { color: var(--ink-2); } .g-t-3 { color: var(--ink-3); }
.g-t-volt { color: var(--volt); } .g-t-loot { color: var(--loot); } .g-t-warn { color: var(--warn); }
.g-t-bad { color: var(--bad); } .g-t-frost { color: var(--frost); }
.g-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink);
  font: 800 19px/1 var(--f-display); font-stretch: 112%; letter-spacing: .01em; white-space: nowrap; }
.g-wordmark b { font-weight: 800; color: var(--volt); }

/* ── 3. HUD plate (bevel TL+BR, brackets TR+BL) ── */
.g-plate {
  --cut: 20px; --edge: var(--wire-hi); --fill: var(--deck);
  position: relative; box-sizing: border-box; border: 1px solid transparent;
  background:
    linear-gradient(135deg, transparent 50%, var(--edge) 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)) 0 0 / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px) 50%, transparent 50%) 100% 100% / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(var(--fill), var(--fill)) padding-box,
    linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.g-plate::before {
  content: ''; position: absolute; inset: -1px; pointer-events: none; z-index: 2;
  --bl: 10px; --bc: #3A4750;
  background:
    linear-gradient(var(--bc) 0 0) 100% 0 / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc) 0 0) 100% 0 / 2px var(--bl) no-repeat,
    linear-gradient(var(--bc) 0 0) 0 100% / var(--bl) 2px no-repeat,
    linear-gradient(var(--bc) 0 0) 0 100% / 2px var(--bl) no-repeat;
  transition: --bl .16s var(--ease-hud), --bc .16s linear;
}
.g-plate:is(:hover, :focus-within)::before { --bl: 14px; --bc: #CBFF3A; }
.g-plate--sm { --cut: 12px; } .g-plate--xs { --cut: 6px; }
.g-plate--raised { --fill: var(--plate); }
.g-plate--hot { --edge: var(--wire-input); cursor: pointer; text-decoration: none; color: inherit; display: block; }
.g-plate--hot:hover { --fill: var(--rail); }
.g-plate--volt { --edge: var(--volt); }
.g-plate--loot { --edge: var(--loot); }
.g-plate--warn { --edge: var(--warn); --fill: var(--warn-chip); }
.g-plate--bad { --edge: var(--bad); --fill: var(--bad-chip); }
.g-plate--frost { --edge: var(--frost); }
.g-plate--internal { --edge: var(--warn); }
.g-plate--quiet::before, .g-flat .g-plate::before { display: none; }
.g-plate:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--void), inset 0 0 0 4px var(--volt); }
.g-root.is-day .g-plate::before { --bc: #B9C3BD; }
.g-plate-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.g-scan { position: relative; isolation: isolate; }
.g-scan::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(233,239,234,.028) 0 1px, transparent 1px 3px); }
.g-brackets {           /* scanner corners for stages/overlays (4 corners, no crosshair) */
  --c: rgba(203,255,58,.9); --l: 16px; --t: 1.5px;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c) 0 0) 0 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / var(--l) var(--t) no-repeat, linear-gradient(var(--c) 0 0) 100% 0 / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 0 100% / var(--l) var(--t) no-repeat, linear-gradient(var(--c) 0 0) 0 100% / var(--t) var(--l) no-repeat,
    linear-gradient(var(--c) 0 0) 100% 100% / var(--l) var(--t) no-repeat, linear-gradient(var(--c) 0 0) 100% 100% / var(--t) var(--l) no-repeat;
}
.g-grain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .05; mix-blend-mode: overlay; z-index: 1; }

/* ── 4. Keys (buttons / link-buttons) ── */
.g-key {
  --cut: 12px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border: 0; margin: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 16px/1 var(--f-text); letter-spacing: .01em; color: #06080A;
  background: linear-gradient(180deg, #DEFF7A, #CBFF3A 48%, #A9DB12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(6,8,10,.25);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: translate .09s linear, box-shadow .09s linear, background .16s linear;
}
.g-key:hover { background: linear-gradient(180deg, #E8FF9C, #D6FF5E 48%, #B4E620); }
.g-key:active { translate: 0 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(6,8,10,.25); transition: translate .09s linear, box-shadow .09s linear; }
.g-key:focus-visible { outline: none; box-shadow: inset 0 0 0 2px #06080A, inset 0 0 0 4px #CBFF3A; }
.g-key svg { width: 18px; height: 18px; flex: none; }
.g-key--l { --cut: 14px; min-height: 56px; padding: 0 28px; font-size: 17px; }
.g-key--s { --cut: 8px; min-height: 44px; padding: 0 16px; font-size: 14px; }
.g-key--block { display: flex; width: 100%; }
.g-key--ghost { color: var(--ink); background: var(--plate); box-shadow: inset 0 0 0 1px var(--wire-input); }
.g-key--ghost:hover { background: var(--rail); }
.g-key--ghost:active { box-shadow: inset 0 0 0 1px var(--wire-input); }
.g-key--quiet { color: var(--ink-2); background: transparent; box-shadow: none; padding: 0 12px; text-decoration: underline; text-decoration-color: var(--wire-input); text-underline-offset: 4px; }
.g-key--quiet:hover { color: var(--ink); background: transparent; }
.g-key--danger { color: var(--bad); background: var(--bad-chip); box-shadow: inset 0 0 0 1px var(--bad); }
.g-key--danger:hover { background: #3A151C; }
.g-key--frost { color: #06080A; background: linear-gradient(180deg, #C4DCE7, #9FC2D4 48%, #7FA6BA); }
.g-key--frost:hover { background: linear-gradient(180deg, #D3E6EE, #AECDDC 48%, #8DB2C5); }
.g-key:disabled, .g-key[aria-disabled=true] { cursor: not-allowed; color: var(--ink-3); background: var(--rail); box-shadow: inset 0 0 0 1px var(--wire); translate: none; }
.g-root.is-day .g-key:not(.g-key--ghost):not(.g-key--quiet):not(.g-key--danger) { box-shadow: inset 0 0 0 1px #0D1114, inset 0 -3px 0 rgba(6,8,10,.2); }
.g-key--rim { border: 2px solid transparent;
  background: linear-gradient(180deg, #DEFF7A, #CBFF3A 48%, #A9DB12) padding-box,
              conic-gradient(from var(--a), transparent 0 68%, #CBFF3A 80%, #FFFFFF 85%, #CBFF3A 90%, transparent 100%) border-box;
  animation: g-rim 2.8s linear infinite; }
.g-key--rim-loot { border: 2px solid transparent;
  background: linear-gradient(180deg, #DEFF7A, #CBFF3A 48%, #A9DB12) padding-box,
              conic-gradient(from var(--a), transparent 0 68%, #FFD166 80%, #FFFFFF 85%, #FFD166 90%, transparent 100%) border-box;
  animation: g-rim 2.8s linear infinite; }
.g-glow { display: inline-flex; filter: drop-shadow(0 0 14px rgba(203,255,58,.30)); transition: filter .16s var(--ease-hud); }
.g-glow:hover { filter: drop-shadow(0 0 22px rgba(203,255,58,.5)); }
.g-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer;
  color: var(--ink-2); background: transparent; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.g-iconbtn:hover { color: var(--ink); background: var(--rail); }
.g-iconbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--volt); }
.g-iconbtn svg { width: 20px; height: 20px; }

/* ── 5. Chips (status: 24px, never interactive) · pills (interactive: 44px) ── */
.g-chip { --cut: 6px; display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 8px; white-space: nowrap;
  font: 600 12px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--rail);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.g-chip svg { width: 14px; height: 14px; flex: none; }
.g-chip--ok { color: var(--volt); background: var(--volt-chip); }
.g-chip--bad { color: var(--bad); background: var(--bad-chip); }
.g-chip--warn { color: var(--warn); background: var(--warn-chip); }
.g-chip--loot { color: var(--loot); background: var(--loot-chip); }
.g-chip--held { color: var(--frost); background: repeating-linear-gradient(135deg, var(--frost-chip) 0 4px, #182A34 4px 8px); }
.g-chip--ph { color: var(--ink-2); background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(233,239,234,.06) 5px 7px);
  box-shadow: inset 0 0 0 1px var(--wire-input); outline: 1px dashed var(--wire-input); outline-offset: -1px; }
.g-chip--case { text-transform: none; letter-spacing: .02em; }
.g-root.is-day .g-chip--ok { color: #3E5C00; }
.g-root.is-day .g-chip--held { background: var(--frost-chip); }
.g-pill { --cut: 6px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; margin: 0; cursor: pointer; white-space: nowrap;
  font: 600 14px/1 var(--f-text); color: var(--ink); background: var(--plate); box-shadow: inset 0 0 0 1px var(--wire-input);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.g-pill:hover { background: var(--rail); }
.g-pill[aria-pressed=true] { color: var(--volt); background: var(--volt-chip); box-shadow: inset 0 0 0 1px var(--volt); }
.g-pill:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--volt); }
.g-pill svg { width: 16px; height: 16px; }

/* ── 6. Tabs ── */
.g-tabs { --cut: 10px; display: inline-flex; gap: 4px; padding: 4px; background: var(--plate); box-shadow: inset 0 0 0 1px var(--wire-input);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.g-tab { --cut: 6px; min-height: 44px; padding: 0 16px; border: 0; margin: 0; cursor: pointer; white-space: nowrap;
  font: 600 14px/1 var(--f-text); color: var(--ink-2); background: transparent;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.g-tab:hover { color: var(--ink); background: var(--rail); }
.g-tab[aria-selected=true] { color: var(--volt); background: var(--volt-chip); box-shadow: inset 0 -2px 0 var(--volt); }
.g-tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--volt); }
.g-root.is-day .g-tab[aria-selected=true] { color: #3E5C00; }

/* ── 7. Fields ── */
.g-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g-lbl { font: 600 14px/20px var(--f-text); color: var(--ink); }
.g-lbl .g-opt { margin-left: 8px; font: 500 12px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.g-hint { margin: 0; font: 400 13px/19px var(--f-text); color: var(--ink-3); }
.g-err { margin: 0; display: flex; gap: 6px; align-items: flex-start; font: 500 13px/19px var(--f-text); color: var(--bad); }
.g-err svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.g-input {
  --cut: 6px; --edge: var(--wire-input);
  width: 100%; min-height: 48px; padding: 0 14px; margin: 0; border: 1px solid transparent; outline: none; border-radius: 0;
  font: 500 16px/1 var(--f-text); color: var(--ink); appearance: none;
  background:
    linear-gradient(135deg, transparent 50%, var(--edge) 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)) 0 0 / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px) 50%, transparent 50%) 100% 100% / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(var(--plate), var(--plate)) padding-box,
    linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.g-input::placeholder { color: var(--ink-3); opacity: 1; }
.g-input:hover { --edge: #74857D; }
.g-input:focus, .g-input:focus-visible { --edge: var(--volt); outline: none; box-shadow: inset 0 0 0 3px rgba(203,255,58,.18); }
.g-input[aria-invalid=true] { --edge: var(--bad); }
.g-input--mono { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 15px; }
textarea.g-input { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: none; }
select.g-input { padding-right: 40px; cursor: pointer; }
.g-selwrap { position: relative; display: block; }
.g-selwrap > svg { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; color: var(--ink-2); }
.g-phone { --cut: 6px; --edge: var(--wire-input); display: flex; align-items: stretch; min-height: 56px; border: 1px solid transparent;
  background:
    linear-gradient(135deg, transparent 50%, var(--edge) 50% calc(50% + 1.2px), transparent calc(50% + 1.2px)) 0 0 / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(135deg, transparent calc(50% - 1.2px), var(--edge) calc(50% - 1.2px) 50%, transparent 50%) 100% 100% / var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(var(--plate), var(--plate)) padding-box, linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.g-phone:focus-within { --edge: var(--volt); box-shadow: inset 0 0 0 3px rgba(203,255,58,.18); }
.g-phone__pre { display: flex; align-items: center; padding: 0 12px 0 16px; font: 500 17px/1 var(--f-mono); font-stretch: 87.5%; color: var(--ink-2); border-right: 1px solid var(--wire); }
.g-phone input { flex: 1; min-width: 0; padding: 0 14px; border: 0; outline: none; background: transparent; color: var(--ink); font: 500 17px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .02em; }
.g-phone input::placeholder { color: var(--ink-3); }
.g-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font: 400 14px/21px var(--f-text); color: var(--ink-2); min-height: 44px; padding-top: 10px; }
.g-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.g-check__box { flex: none; width: 22px; height: 22px; margin-top: -1px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--plate); box-shadow: inset 0 0 0 1px var(--wire-input); color: transparent;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.g-check__box svg { width: 16px; height: 16px; }
.g-check input:checked + .g-check__box { background: var(--volt); color: #06080A; box-shadow: none; }
.g-check input:focus-visible + .g-check__box { box-shadow: inset 0 0 0 2px var(--volt); }
.g-switch { position: relative; flex: none; width: 52px; height: 44px; padding: 0; border: 0; margin: 0; cursor: pointer; background: transparent; }
.g-switch::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 24px; background: var(--rail); box-shadow: inset 0 0 0 1px var(--wire-input);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.g-switch::after { content: ''; position: absolute; left: 4px; top: 14px; width: 16px; height: 16px; background: var(--ink-3); transition: translate .16s var(--ease-hud); }
.g-switch[aria-checked=true]::before { background: var(--frost-chip); box-shadow: inset 0 0 0 1px var(--frost); }
.g-switch[aria-checked=true]::after { translate: 28px 0; background: var(--frost); }
.g-switch:focus-visible { outline: 2px solid var(--volt); outline-offset: 0; }
.g-range { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.g-range::-webkit-slider-runnable-track { height: 12px; background:
  linear-gradient(var(--wire-input), var(--wire-input)) 0 5px / 100% 2px no-repeat,
  repeating-linear-gradient(90deg, var(--wire-input) 0 1px, transparent 1px 10%) 0 0 / 100% 12px no-repeat; }
.g-range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 24px; margin-top: -6px; background: var(--volt); border: 0;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.g-range::-moz-range-track { height: 2px; background: var(--wire-input); }
.g-range::-moz-range-thumb { width: 20px; height: 24px; border: 0; border-radius: 0; background: var(--volt); }
.g-range:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* ── 8. OTP (one real input over 6 decorative cells) ── */
.g-otp { position: relative; width: 352px; height: 64px; }
.g-otp__cells { position: absolute; inset: 0; display: flex; gap: 8px; pointer-events: none; }
.g-otp__cell { --edge: var(--wire-input); flex: 1; height: 64px; border: 1px solid transparent;
  background: linear-gradient(var(--plate), var(--plate)) padding-box, linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: --edge .12s linear; }
.g-otp__cell.is-on { --edge: var(--volt); background: linear-gradient(var(--volt-chip), var(--volt-chip)) padding-box, linear-gradient(var(--volt), var(--volt)) border-box; }
.g-otp__cell.is-next { --edge: var(--ink-2); }
.g-otp__cell.is-bad { --edge: var(--bad); background: linear-gradient(var(--bad-chip), var(--bad-chip)) padding-box, linear-gradient(var(--bad), var(--bad)) border-box; }
.g-otp input { position: absolute; inset: 0; width: 100%; height: 64px; margin: 0; border: 0; outline: none; background: transparent; color: var(--ink); caret-color: var(--volt);
  font: 500 30px/64px var(--f-mono); font-stretch: 100%; letter-spacing: calc(60px - 1ch); padding: 0 0 0 calc((52px - 1ch) / 2); }
.g-otp.is-shake { animation: g-shake .36s linear 1; }

/* ── 9. Tables ── */
.g-tablewrap { position: relative; overflow: auto; }
.g-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 400 14px/20px var(--f-text); color: var(--ink); }
.g-table th { position: sticky; top: 0; z-index: 1; height: 40px; padding: 0 16px; background: var(--plate); border-bottom: 1px solid var(--wire-hi);
  text-align: left; white-space: nowrap; font: 600 12px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.g-table td { height: 40px; padding: 0 16px; border-bottom: 1px solid var(--wire); white-space: nowrap; vertical-align: middle; }
.g-table .n { text-align: right; font: 400 14px/20px var(--f-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; }
.g-table th.n { font: 600 12px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .08em; }
.g-table tbody tr:hover td { background: var(--rail); }
.g-table tr.is-hot td { height: 44px; }
.g-table tfoot td { background: var(--plate); font-weight: 600; border-bottom: 0; border-top: 1px solid var(--wire-hi); }
.g-table--dense td { height: 36px; padding: 0 12px; font-size: 13px; }
.g-table--dense th { height: 36px; padding: 0 12px; }
.g-table--dense .n { font-size: 13px; }
.g-table .g-sortbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; margin: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.g-table .g-sortbtn svg { width: 12px; height: 12px; }
.g-table .sticky1 { position: sticky; left: 0; z-index: 2; background: var(--deck); }
.g-table th.sticky1 { z-index: 3; background: var(--plate); }

/* ── 10. KPI / bars / quests ── */
.g-kpi { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 18px; }
.g-bar { display: flex; gap: 3px; height: 10px; }
.g-bar > i { flex: 1; background: var(--rail); clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px); }
.g-bar > i.is-on { background: var(--volt); }
.g-bar > i.is-loot { background: var(--loot); }
.g-bar > i.is-held { background: repeating-linear-gradient(135deg, #9FC2D4 0 3px, #5E7784 3px 6px); }
.g-bar--wire > i { background: transparent; box-shadow: inset 0 0 0 1px var(--wire-input); outline: 1px dashed var(--wire-input); outline-offset: -1px; }
.g-glyph { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-3);
  background: var(--plate); box-shadow: inset 0 0 0 1px var(--wire-hi); clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.g-glyph svg { width: 16px; height: 16px; }
.g-glyph.is-done { color: var(--volt); background: var(--volt-chip); box-shadow: none; }
.g-glyph.is-active { color: var(--volt); box-shadow: inset 0 0 0 1.5px var(--volt); animation: g-pulse-ring 1.6s var(--ease-hud) infinite; }
.g-glyph.is-locked { color: var(--ink-3); background: transparent; box-shadow: inset 0 0 0 1px var(--wire); }

/* ── 11. Shell: landing header · cabinet side rail · topbar · dock ── */
.g-glass { background: rgba(13,17,20,.72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--wire-hi); }
.g-side { position: absolute; left: 0; top: 0; bottom: 0; width: 232px; display: flex; flex-direction: column; background: var(--deck); border-right: 1px solid var(--wire); }
.g-nav { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 16px 0 22px; text-decoration: none;
  font: 600 15px/1 var(--f-text); color: var(--ink-2); }
.g-nav svg { width: 20px; height: 20px; flex: none; }
.g-nav:hover { color: var(--ink); background: var(--plate); }
.g-nav[aria-current=page] { color: var(--ink); background: var(--rail); }
.g-nav[aria-current=page]::before { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 22px; margin-top: -11px; background: var(--volt);
  clip-path: polygon(0 0, 100% 4px, 100% calc(100% - 4px), 0 100%); }
.g-nav[aria-current=page] svg { color: var(--volt); }
.g-nav:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--volt); }
.g-admin .g-nav[aria-current=page]::before { background: var(--frost); }
.g-admin .g-nav[aria-current=page] svg { color: var(--frost); }
.g-navgroup { padding: 18px 22px 8px; }
.g-top { position: absolute; left: 232px; right: 0; top: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 40px; border-bottom: 1px solid var(--wire); background: var(--void); }
.g-hudbar { --cut: 8px; display: inline-flex; align-items: stretch; background: var(--deck); box-shadow: inset 0 0 0 1px var(--wire-hi);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.g-hudbar > * { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; text-decoration: none; color: var(--ink); white-space: nowrap; font: 500 14px/1 var(--f-text); }
.g-hudbar > * + * { border-left: 1px solid var(--wire); }
.g-hudbar > a:hover { background: var(--rail); }
.g-hudbar > a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--volt); }
.g-dock { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 64px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); z-index: 30;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.g-dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-decoration: none; color: var(--ink-2); font: 600 12px/1 var(--f-text); }
.g-dock a svg { width: 22px; height: 22px; }
.g-dock a[aria-current=page] { color: var(--volt); }
.g-dock a:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--volt); }

/* ── 12. Overlays: toast · scrim · modal · tooltip ── */
.g-toast { --cut: 12px; --edge: var(--volt); position: absolute; right: 24px; bottom: 24px; z-index: 40; display: flex; gap: 12px; align-items: flex-start;
  width: 380px; padding: 14px 16px; border: 1px solid transparent;
  background: linear-gradient(var(--plate), var(--plate)) padding-box, linear-gradient(var(--edge), var(--edge)) border-box;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  animation: g-toast-in .42s var(--spring) both; }
.g-toast--loot { --edge: var(--loot); } .g-toast--bad { --edge: var(--bad); } .g-toast--frost { --edge: var(--frost); }
.g-scrim { position: absolute; inset: 0; z-index: 50; background: rgba(6,8,10,.78); display: flex; align-items: center; justify-content: center; animation: g-fade .2s linear both; }
.g-modal { width: 480px; padding: 28px; display: flex; flex-direction: column; gap: 20px; animation: g-rise .24s var(--ease-hud) both; }
.g-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 60; width: 440px; padding: 28px; display: flex; flex-direction: column; gap: 20px;
  background: var(--deck); border-left: 1px solid var(--wire-hi); animation: g-drawer-in .24s var(--ease-hud) both; }
.g-tipwrap { position: relative; display: inline-flex; }
.g-tip { position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 45; width: 260px; margin-left: -130px; padding: 10px 12px;
  font: 400 13px/19px var(--f-text); color: var(--ink); background: var(--rail); box-shadow: inset 0 0 0 1px var(--wire-hi);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity .16s linear, translate .16s var(--ease-hud); }
.g-tipwrap:hover .g-tip, .g-tipwrap:focus-within .g-tip { opacity: 1; translate: 0 0; }
.g-live { display: inline-flex; align-items: center; gap: 8px; }
.g-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--volt); animation: g-ping 1.6s ease-out infinite; }
.g-ph { display: inline-block; padding: 0 6px; font-family: var(--f-mono); font-stretch: 87.5%; font-size: .92em; color: var(--ink-2); white-space: nowrap;
  background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(233,239,234,.07) 5px 7px); outline: 1px dashed var(--wire-input); outline-offset: -1px; }
.g-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; outline: 1px dashed var(--wire-input); outline-offset: -1px;
  background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(233,239,234,.025) 7px 9px); }
.g-divider { height: 1px; background: var(--wire); border: 0; margin: 0; }

/* ── 13. Motion library ── */
@keyframes g-rim { to { --a: 360deg; } }
@keyframes g-boot { from { clip-path: polygon(0 0, 0 0, 0 0, 0 0); } to { clip-path: polygon(0 0, 200% 0, 0 200%, 0 0); } }
@keyframes g-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes g-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes g-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes g-toast-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes g-drawer-in { from { translate: 40px 0; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes g-ping { 0% { box-shadow: 0 0 0 0 rgba(203,255,58,.6); } 100% { box-shadow: 0 0 0 10px rgba(203,255,58,0); } }
@keyframes g-pulse-ring { 0%, 100% { box-shadow: inset 0 0 0 1.5px #CBFF3A; } 50% { box-shadow: inset 0 0 0 1.5px #CBFF3A, 0 0 0 3px rgba(203,255,58,.25); } }
@keyframes g-shake { 0%, 100% { translate: 0 0; } 17%, 50%, 83% { translate: -4px 0; } 33%, 67% { translate: 4px 0; } }
@keyframes g-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes g-flash { 0% { opacity: 0; } 20% { opacity: .55; } 100% { opacity: 0; } }
@keyframes g-sweep { from { translate: 0 -100%; } to { translate: 0 100%; } }
@keyframes g-draw { from { stroke-dashoffset: var(--len, 100); } to { stroke-dashoffset: 0; } }
@keyframes g-spin { to { rotate: 360deg; } }
@keyframes g-marquee { to { translate: -50% 0; } }
@keyframes g-flip-in { from { transform: rotateY(-90deg); } to { transform: rotateY(0); } }
@keyframes g-chase { 0%, 70%, 100% { opacity: .25; } 80% { opacity: 1; } }
@keyframes g-shine { 0%, 80% { translate: -120% 0; } 100% { translate: 220% 0; } }
@keyframes g-ghost { 0% { opacity: 0; } 8% { opacity: .9; } 14% { opacity: .3; } 22%, 100% { opacity: 1; } }
@keyframes g-collapse { from { opacity: 1; transform: scaleX(1); } to { opacity: 0; transform: scaleX(0); } }
.g-in { animation: g-rise .24s var(--ease-hud) both; }            /* safe on plates */
.g-boot { animation: g-boot .24s var(--ease-hud) both; }          /* WRAPPERS ONLY — never on an element that already has a bevel clip-path */
.g-in-1 { animation-delay: .05s; } .g-in-2 { animation-delay: .1s; } .g-in-3 { animation-delay: .15s; } .g-in-4 { animation-delay: .2s; } .g-in-5 { animation-delay: .25s; } .g-in-6 { animation-delay: .3s; }
.g-rise { animation: g-rise .42s var(--ease-hud) both; }

@media (prefers-reduced-motion: reduce) {
  .g-root *, .g-root *::before, .g-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  .g-in, .g-rise { animation: g-fade .12s linear both !important; }
}
@media (prefers-contrast: more) {
  .g-root { --ink-3: #AAB6B0; --wire-hi: #6B7A73; }
  .g-scan::after, .g-grain { display: none; }
  .g-glow, .g-glow:hover { filter: none; }
  .g-num-xl { text-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) { .g-glass { background: #0D1114; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── 14. Kinetic H1 word (no reflow: final width reserved) ── */
.g-kin { position: relative; display: inline-block; white-space: nowrap; }
.g-kin__res { visibility: hidden; font-stretch: 150%; }
.g-kin__word { position: absolute; left: 0; top: 0; font-stretch: 150%; color: var(--volt); animation: g-stretch .9s var(--ease-hud) 1.05s both; }
.g-kin__ghost { position: absolute; left: 0; top: 0; color: var(--ink-3); font-stretch: 62%; transform-origin: left center; pointer-events: none;
  animation: g-ghost .6s steps(1, end) both, g-collapse .2s var(--ease-hud) .9s both; }
.g-kin__ghost i { position: absolute; left: -2%; right: -2%; top: 46%; height: .09em; background: var(--volt); transform-origin: left center; animation: g-strike .3s var(--ease-hud) .6s both; }
@keyframes g-stretch { 0% { opacity: 0; font-stretch: 62%; color: var(--ink); } 12% { opacity: 1; } 100% { opacity: 1; font-stretch: 150%; color: var(--volt); } }
@media (prefers-reduced-motion: reduce) { .g-kin__ghost { display: none; } .g-kin__word { animation: none !important; } }

/* ── 15. Extras: gate fallback · octagon clip · reticle · tilt/foil · odometer override · print ── */
.g-oct { clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.g-gate-fallback { position: absolute; background: conic-gradient(from 0deg, #3A4750, #CBFF3A 10%, #3A4750 22%, #1C2429 50%, #3A4750 72%, #CBFF3A 90%, #3A4750);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.g-gate-fallback::after { content: ''; position: absolute; inset: 7%; background: radial-gradient(circle, rgba(203,255,58,.10), #06080A 70%);
  clip-path: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%); }
.g-stagefade { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; background: linear-gradient(180deg, rgba(6,8,10,0), #06080A); }
.g-reticle { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; z-index: 6;
  transform: translate(var(--rx, -200px), var(--ry, -200px)); transition: transform .12s linear, width .16s var(--ease-hud), height .16s var(--ease-hud); }
.g-reticle.is-lock { --c: #CBFF3A; }
.g-tilt { --px: .5; --py: .5; --rx: 0deg; --ry: 0deg; --o: 0; --dur: .8s; --dist: 0; position: relative; perspective: 1000px; touch-action: pan-y; }
.g-tilt__card { position: relative; height: 100%; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform var(--dur) var(--ease-money); will-change: transform; }
.g-foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: calc(.28 + var(--o) * .5);
  background: linear-gradient(115deg, transparent calc(var(--px) * 60% - 12%), rgba(203,255,58,.32) calc(var(--px) * 60% + 4%), rgba(159,194,212,.38) calc(var(--px) * 60% + 14%), rgba(255,255,255,.42) calc(var(--px) * 60% + 21%), transparent calc(var(--px) * 60% + 34%)); }
.g-face-in { animation: g-flip-in .35s var(--ease-hud) both; transform-origin: center; }
.g-crest-shine { animation: g-crest-shine 2.4s cubic-bezier(.5, 0, .2, 1) infinite; }
@keyframes g-crest-shine { 0%, 55% { transform: translateX(-70px); } 100% { transform: translateX(170px); } }
.g-root .fp-odo { font-family: var(--f-mono); font-weight: 500; font-stretch: 87.5%; }
.g-root .fp-odo__reel { transition: transform .42s var(--ease-money); }
.g-root .fp-odo__cur { font-size: .55em; color: var(--ink-2); margin-left: .18em; }
.g-flashwash { position: absolute; inset: 0; pointer-events: none; z-index: 7; background: rgba(203,255,58,.35);
  -webkit-mask-image: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 4px); mask-image: repeating-linear-gradient(0deg, #000 0 2px, transparent 2px 4px);
  animation: g-flash .24s linear both; }
.g-spin-oct { width: 20px; height: 20px; animation: g-spin .7s linear infinite; }
.g-mbar { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.g-mbar > i { flex: 1; min-width: 2px; background: var(--wire-hi); }
.g-mbar > i.is-on { background: var(--volt); }
.g-mbar--frost > i.is-on { background: var(--frost); }
.g-mbar--ink > i.is-on { background: var(--ink-2); }
@media print { .g-side, .g-top, .g-dock, .g-grain, .g-scan::after { display: none !important; } .g-root { background: #fff !important; color: #000 !important; } }

/* ══ FinPartners site layer (foundation) — everything below is NOT from a.css ══
   Prefix p- = shared page/shell classes. Page files use l- / au- / ca- / cb-.   */
html { background: #06080A; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.p-root { margin: 0; min-height: 100vh; min-height: 100dvh; overflow: visible; overflow-x: clip; display: flex; flex-direction: column; }
.p-root img, .p-root svg { max-width: 100%; }
.p-root h1, .p-root h2, .p-root h3, .p-root p { overflow-wrap: break-word; }
.p-skip { position: absolute; left: 16px; top: -64px; z-index: 100; }
.p-skip:focus { top: 16px; }
.p-wrap { width: min(100% - 2 * var(--p-gut), 1280px); margin-inline: auto; }
.p-root { --p-gut: clamp(16px, 5.6vw, 80px); }
.p-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.p-ico { display: inline-flex; flex: none; }
.p-ico svg { display: block; }

/* ── public header: glass pill, fixed; pages start below it ── */
.p-head { position: fixed; left: 24px; right: 24px; top: 16px; height: 64px; z-index: 20; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 0 12px 0 20px; }
.p-head__nav { display: flex; gap: 4px; }
.p-head__act { display: flex; gap: 8px; align-items: center; }
.p-main { flex: 1 0 auto; padding-top: 96px; display: flex; flex-direction: column; }
.p-root--overlay .p-main { padding-top: 0; }
@media (max-width: 1099px) { .p-head__nav { display: none; } }
@media (max-width: 720px) {
  .p-head { left: 8px; right: 8px; top: 8px; height: 56px; padding: 0 6px 0 14px; }
  .p-head .g-wordmark { font-size: 17px; }
  .p-head .g-wordmark svg { width: 22px; height: 22px; }
  .p-head__cta { display: none; }
  .p-main { padding-top: 72px; }
}

/* ── public footer (SPEC §8.5) ── */
.p-foot { border-top: 1px solid var(--wire); padding: 40px 0; margin-top: auto; }
.p-foot__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 20px; align-items: start; }
.p-foot__brand { grid-column: span 5; display: flex; flex-direction: column; gap: 12px; }
.p-foot__op { grid-column: span 4; display: flex; flex-direction: column; gap: 6px; }
.p-foot__docs { grid-column: span 3; display: flex; flex-wrap: wrap; column-gap: 16px; }
.p-foot__docs a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 900px) {
  .p-foot { padding: 32px 0; }
  .p-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .p-foot__brand, .p-foot__op, .p-foot__docs { grid-column: 1 / -1; }
}

/* ── cabinet shell (SPEC §8.2): rail + top bar ≥721px; top bar + dock ≤720px ── */
body.p-cab { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto 1fr; }
.p-cab .g-side { position: sticky; top: 0; bottom: auto; height: 100vh; height: 100dvh; grid-column: 1; grid-row: 1 / span 2; overflow-y: auto; }
.p-cab .g-top { position: sticky; top: 0; left: auto; z-index: 20; grid-column: 2; grid-row: 1; min-height: 72px; height: auto; }
.p-side__brand { height: 72px; flex: none; display: flex; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--wire); }
.p-side__nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 0; }
.p-side__foot { margin-top: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.p-side__mgr { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.p-side__out { margin: 0; }
button.g-nav { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
.p-side__out .g-nav { padding-left: 6px; }
.p-top__who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.p-top__id { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }
.p-top__copy { min-height: 28px; padding: 0 8px; }
.p-top__act { display: flex; align-items: center; gap: 12px; }
.p-top__data { font-size: 12px; }
.p-top__sum { font-weight: 500; }
.p-cab__main { grid-column: 2; grid-row: 2; min-width: 0; padding: 32px 40px 48px; display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; align-content: start; }
.p-cab__head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; min-height: 48px; flex-wrap: wrap; }
.p-cab__titles { display: flex; flex-direction: column; gap: 8px; }
.p-s2 { grid-column: span 2; } .p-s3 { grid-column: span 3; } .p-s4 { grid-column: span 4; } .p-s5 { grid-column: span 5; }
.p-s6 { grid-column: span 6; } .p-s7 { grid-column: span 7; } .p-s8 { grid-column: span 8; } .p-s9 { grid-column: span 9; }
.p-s12 { grid-column: 1 / -1; }
.p-mtop, .p-dock { display: none; }

/* 721–1099: icon rail (labels hidden), spans collapse to halves / full rows */
@media (max-width: 1099px) and (min-width: 721px) {
  body.p-cab { grid-template-columns: 76px minmax(0, 1fr); }
  .p-cab .g-side { width: 76px; }
  .p-side__brand { padding: 0; justify-content: center; }
  .p-side__brand .p-wm__t, .p-nav__t, .p-side__mgr { display: none; }
  .p-cab .g-nav { padding: 0; justify-content: center; }
  .p-side__foot { padding: 16px 0; }
  .p-cab .g-top { padding: 0 24px; }
  .p-cab__main { padding: 24px 24px 40px; column-gap: 20px; row-gap: 20px; }
  .p-s2, .p-s3, .p-s4, .p-s5 { grid-column: span 6; }
  .p-s6, .p-s7, .p-s8, .p-s9 { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  body.p-cab { display: flex; flex-direction: column; }
  .p-cab .g-side, .p-cab .g-top { display: none; }
  .p-mtop { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    height: 56px; padding: 0 8px 0 16px; background: var(--void); border-bottom: 1px solid var(--wire); }
  .p-mtop .g-wordmark { font-size: 17px; }
  .p-mtop .g-wordmark svg { width: 22px; height: 22px; }
  .p-mtop__out { margin: 0; }
  .p-mtop__btn { min-width: 44px; min-height: 44px; padding: 0 12px; }
  .p-cab__main { display: flex; flex-direction: column; gap: 16px; padding: 16px 16px 104px; }
  .p-cab__head { min-height: 0; }
  .p-dock { display: grid; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .p-dock > a, .p-more > summary { min-height: 44px; }
}
.p-more { position: relative; display: flex; }
.p-more > summary { list-style: none; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; color: var(--ink-2); font: 600 12px/1 var(--f-text); }
.p-more > summary::-webkit-details-marker { display: none; }
.p-more > summary svg { width: 22px; height: 22px; }
.p-more.is-on > summary { color: var(--volt); }
.p-more > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--volt); }
.p-more__menu { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 200px; padding: 6px 0;
  display: flex; flex-direction: column; background: var(--deck); box-shadow: inset 0 0 0 1px var(--wire-hi), 0 12px 32px rgba(0,0,0,.5); }
.p-more__menu .g-nav { padding-left: 18px; }
/* the glass + bevel live on ::before so the «Ще» menu is not clipped by the dock's clip-path */
.p-dock.g-glass { isolation: isolate; clip-path: none; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.p-dock::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(13,17,20,.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--wire-hi);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
@media (prefers-reduced-transparency: reduce) { .p-dock::before { background: #0D1114; -webkit-backdrop-filter: none; backdrop-filter: none; } }
.p-404 { padding: 96px 0; display: flex; flex-direction: column; gap: 16px; }

/* ── background: metric "rain" (js/rain.js) replaces the static 48px grid ── */
html:has(> body.p-root.g-grid) { background: radial-gradient(60% 900px at 72% -10%, rgba(203,255,58,.07), transparent 70%) no-repeat, #06080A; }
.p-root.g-grid { background: transparent; } /* the page ground lives on <html> so the rain canvas (z-index -1) shows through */
.p-rain { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
@media print { .p-rain { display: none; } }

/* ── owner logo (ui.ts logoSvg): wordmark only (icon dropped 25.09) ── */
.g-wordmark--logo { gap: 0; line-height: 0; }
.g-wordmark--logo svg.g-logo, .p-head .g-wordmark--logo svg.g-logo, .p-mtop .g-wordmark--logo svg.g-logo { display: block; width: auto; height: 21px; }
.p-side .g-wordmark--logo svg.g-logo { height: 18px; }
.p-foot .g-wordmark--logo svg.g-logo { height: 22px; }
@media (max-width: 720px) {
  .p-head .g-wordmark--logo svg.g-logo, .p-mtop .g-wordmark--logo svg.g-logo { width: auto; height: 17px; }
}

/* ── «Ваш менеджер» (094): rail plate, «Огляд» card, ban screen ── */
.fp-ava { position: relative; flex: none; display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%;
  background: var(--frost-chip); color: var(--frost); border: 1px solid var(--wire-hi); font: 600 14px/1 var(--f-mono); }
.fp-ava--s { width: 40px; height: 40px; }
.fp-ava--m { width: 64px; height: 64px; font-size: 20px; }
.fp-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp-mgr { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fp-mgr__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fp-mgr__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-mgr__id .g-cap { overflow-wrap: anywhere; }
.fp-mgr__name { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.fp-mgr__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-mgr__key { gap: 8px; }
.fp-mgr--side .fp-mgr__acts { flex-direction: column; }
.fp-mgr--side .fp-mgr__key { width: 100%; justify-content: center; padding: 0 10px; font-size: 13px; }
.fp-mgr--side .fp-mgr__name { font-size: 14px; }
.fp-mgr--side .fp-mgr__id .g-cap { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.fp-mgr--card { padding: 20px; }
.fp-mgr--card .fp-mgr__name { font-size: 18px; }
.fp-mgr--ban { padding: 20px; max-width: 520px; }
@media (max-width: 720px) { .fp-mgr__acts .fp-mgr__key { flex: 1 1 100%; justify-content: center; } }

/* Contacts stay in navigation when the overview manager card is removed. */
@media (min-width: 721px) and (max-width: 1099px) {
  .p-side__mgr.fp-mgr { display: flex; padding: 8px 4px; gap: 10px; }
  .fp-mgr--side .fp-mgr__who { justify-content: center; gap: 0; }
  .fp-mgr--side > .g-label,
  .fp-mgr--side .fp-mgr__id,
  .fp-mgr--side .fp-mgr__key span { position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; }
  .fp-mgr--side .fp-mgr__key { padding: 0; min-height: 44px; justify-content: center; }
}
@media (max-width: 720px) {
  .p-more__menu { width: min(280px, calc(100vw - 32px)); max-height: calc(100dvh - 112px); overflow-y: auto; }
  .p-more__manager { padding: 8px; border-block: 1px solid var(--wire); }
  .p-more__manager .p-side__mgr { margin: 0; padding: 12px; }
  .p-more__manager .fp-mgr__key { min-height: 44px; flex-direction: row; }
  .p-more__manager .g-key { color: #06080A; }
  .p-more__manager .g-key--ghost { color: var(--ink); }
}

/* A small utility menu, separate from the main cabinet sections. */
.p-settings { display: flex; align-items: center; }
.p-settings__link[aria-current=page] { color: var(--volt); box-shadow: inset 0 0 0 1px var(--volt); }
.p-top__act { flex-wrap: wrap; justify-content: flex-end; }
.p-mtop__act { display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .p-mtop { gap: 8px; }
  .p-mtop .p-settings__link { padding: 0 8px; gap: 6px; font-size: 13px; }
}
@media (max-width: 390px) {
  .p-mtop .g-wordmark--logo svg.g-logo { height: 14px; }
}

/* Still artwork in the cabinet/auth pages; landing motion remains unchanged. */
.p-static, .p-static *, .p-static *::before, .p-static *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.p-static :is(.g-in, .g-rise, .g-face-in) { opacity: 1; }
.p-static .g-kin__ghost { display: none; }
.p-static .cb-holo__foil { transform: translateX(24%); }
.p-static .g-key:active { translate: none; }

/* A quieter currency texture only behind the authenticated cabinet. */
.p-cab .p-rain { opacity: .45; }