/* ═══════════════════════════════════════════════════════════════
   FC26 FEEL — SPATIAL CONSOLE
   Soft-silicone surface: every control is a moulded rubber part
   (raised, pressed-in or lit). Values are the design handoff's
   (design_handoff_console/README.md) — change them there first.
   ═══════════════════════════════════════════════════════════════ */

@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ── Tokens ─────────────────────────────────────────────────── */
[data-theme=light] {
  --bg:#E9E5DD; --surf:#ECE8E1; --track:#DDD8CF; --thumb:#F2EEE8; --ink:#2C3343; --mute:#4E576A;
  --hi:255,252,246; --lo:178,168,152; --focus:#8A4B12; --pos:#8A5212; --lit-ink:#3A2406; --lit-mute:#5A3A12;
  --tint:#F6E6C0; --tint-h:#F2E9D6; --ac:240,170,64; --rad:#E0922A;
  --t0a:#D2CBBE; --t0b:#B5AC9B; --t1a:#FFF6E2; --t1b:#FBEACB; --t2a:#FFF8E8; --t2b:#FCEDD0; --t3a:#FFFAF0; --t3b:#FDF1D8;
  --lit-a:#FFFEF9; --lit-b:#FFF6E0; --lit-c:#FFEBC2; --on-mute:var(--mute);
  color-scheme: light;
}
[data-theme=dark] {
  --bg:#24272B; --surf:#2E3238; --track:#24272C; --thumb:#3A3F46; --ink:#E6EAEF; --mute:#A3ABB6;
  --hi:88,95,104; --lo:11,12,15; --focus:#FFD28A; --pos:#F2C57A; --lit-ink:#2E1B05; --lit-mute:#4A2E0C;
  --tint:#55452C; --tint-h:#4A3E2B; --ac:245,185,90; --rad:#F2B84F;
  --t0a:#5A554C; --t0b:#48443D; --t1a:#FFF1D6; --t1b:#F6E2BC; --t2a:#FFF4DE; --t2b:#F8E7C8; --t3a:#FFF8EA; --t3b:#FBEFD6;
  --lit-a:#FFFAEC; --lit-b:#FFF0CC; --lit-c:#FADFA6; --on-mute:#CBD2DB;
  color-scheme: dark;
}
[data-theme] {
  --dome: radial-gradient(120% 120% at 26% 20%, rgba(var(--hi),.42) 0%, rgba(var(--hi),0) 52%), radial-gradient(120% 120% at 80% 88%, rgba(var(--lo),.2) 0%, rgba(var(--lo),0) 58%);
  --soft: cubic-bezier(0.25,1,0.35,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --db-sm: inset 5px 5px 12px rgba(var(--lo),.5), inset -5px -5px 12px rgba(var(--hi),.85), -3px -3px 8px rgba(var(--lo),.13), 3px 3px 8px rgba(var(--hi),.4);
  --db-md: inset 8px 8px 18px rgba(var(--lo),.48), inset -8px -8px 18px rgba(var(--hi),.85), -4px -4px 10px rgba(var(--lo),.14), 4px 4px 10px rgba(var(--hi),.4);
  --db-lg: inset 14px 14px 32px rgba(var(--lo),.48), inset -14px -14px 32px rgba(var(--hi),.85), -4px -4px 10px rgba(var(--lo),.14), 4px 4px 10px rgba(var(--hi),.4);
  --db-warm: inset 5px 5px 12px rgba(130,76,10,.3), inset -5px -5px 12px rgba(255,255,255,.55);
  --ex-sm: -4px -4px 9px rgba(var(--hi),.9), 4px 4px 11px rgba(var(--lo),.5), inset 4px 4px 9px -2px rgba(var(--hi),.7), inset -4px -4px 9px -2px rgba(var(--lo),.3);
  --ts-ink: 0 1px 0 rgba(var(--hi),.85), 0 -1px 1px rgba(var(--lo),.45);
  --glow: 0 0 14px 1px rgba(var(--ac),.24);
  --groove: 1px solid rgba(var(--lo),.3);
}

/* ── Base ───────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; overflow: hidden; }
html { background: var(--bg); }
*, *::before, *::after { box-sizing: border-box; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--focus); }
h1, h2, h3, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; }
::selection { background: #F6DFA8; color: #3A2406; }
input[type=number] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input::placeholder { color: var(--mute); opacity: 1; }
select { appearance: none; -webkit-appearance: none; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Silicone parts: face · lit · cast · sheen · ex · db ────── */
button { -webkit-user-select: none; user-select: none; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: not-allowed; }
/* :where() keeps this reset at zero specificity so each part's own class sets its padding. */
:where(button[data-m]) { border: 0; background: transparent; padding: 0; -webkit-tap-highlight-color: transparent; }
[data-m] { position: relative; isolation: isolate; transition: transform .3s var(--soft); }
[data-m]:is(:hover,:focus-visible) { will-change: transform; }
[data-m]:hover > [data-l]:not([data-l=face]) { will-change: opacity; }
[data-m] > [data-l] { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
[data-l=face] { z-index: -2; background: var(--surf); transition: background-color .45s var(--soft); }
[data-l=lit] { z-index: -2; opacity: 0; box-shadow: 0 0 20px rgba(var(--ac),.25); background: radial-gradient(125% 115% at 50% 40%, var(--lit-a) 0%, var(--lit-b) 58%, var(--lit-c) 100%); transition: opacity .45s var(--soft); }
[data-l=cast], [data-l=sheen], [data-l=ex] { z-index: -1; transition: opacity .32s var(--soft); }
[data-l=ex] { background: var(--dome); }
[data-l=db] { z-index: -1; opacity: 0; transition: opacity .32s var(--soft); }
[data-m=sm] > [data-l=cast] { box-shadow: 4px 4px 11px rgba(var(--lo),.5); }
[data-m=sm] > [data-l=sheen] { box-shadow: -4px -4px 9px rgba(var(--hi),.9); }
[data-m=sm] > [data-l=ex] { box-shadow: inset 4px 4px 9px -2px rgba(var(--hi),.7), inset -4px -4px 9px -2px rgba(var(--lo),.3); }
[data-m=sm] > [data-l=db] { box-shadow: var(--db-sm); }
[data-m=md] > [data-l=cast] { box-shadow: 9px 9px 22px rgba(var(--lo),.5); }
[data-m=md] > [data-l=sheen] { box-shadow: -9px -9px 20px rgba(var(--hi),.9); }
[data-m=md] > [data-l=ex] { box-shadow: inset 6px 6px 14px -3px rgba(var(--hi),.7), inset -6px -6px 14px -3px rgba(var(--lo),.32); }
[data-m=md] > [data-l=db] { box-shadow: var(--db-md); }
[data-m]:active:not(:disabled) { transform: scale(.965); }
[data-m]:active:not(:disabled) > :is([data-l=cast],[data-l=sheen],[data-l=ex]),
[data-m][data-on=true] > :is([data-l=cast],[data-l=sheen],[data-l=ex]) { opacity: 0; }
[data-m]:active:not(:disabled) > [data-l=db], [data-m][data-on=true] > [data-l=db] { opacity: 1; }
[data-m][data-on=true] > [data-l=face] { background-color: var(--tint); }
[data-m][data-hov]:hover:not([data-on=true]) > [data-l=face] { background-color: var(--tint-h); }
[data-m][data-lit=true] > [data-l=lit] { opacity: 1; }
[data-m][data-lit=true] > [data-l=db] { box-shadow: var(--db-warm); }
[data-lit=true] { color: var(--lit-ink); }
.mute { color: var(--mute); }
[data-lit=true] .mute { color: var(--lit-mute); }
[data-on=true] .mute { color: var(--on-mute); }
[data-m]:disabled { opacity: .55; }

/* Pressed-in (data-deb) and raised (data-ext) surfaces */
[data-deb], [data-ext] { position: relative; isolation: isolate; }
[data-deb]::before, [data-ext]::before, [data-deb]::after, [data-ext]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; }
[data-ext]::after { opacity: 0; box-shadow: var(--db-sm); }
[data-deb]::after { opacity: 0; box-shadow: var(--ex-sm); }
[data-deb=sm]::before { box-shadow: var(--db-sm); }
[data-deb=md]::before { box-shadow: var(--db-md); }
[data-deb=lg]::before { box-shadow: var(--db-lg); }
[data-ext]::before { background: var(--dome); box-shadow: var(--ex-sm); }
[data-ext=md]::before { box-shadow: -7px -7px 16px rgba(var(--hi),.9), 7px 7px 18px rgba(var(--lo),.5), inset 6px 6px 14px -3px rgba(var(--hi),.7), inset -6px -6px 14px -3px rgba(var(--lo),.32); }

/* Playstyle icons */
.key-icon { opacity: .82; filter: drop-shadow(0 1px 0 rgba(255,252,246,.7)); }
[data-theme=dark] .key-icon { filter: invert(.9) drop-shadow(0 -1px 0 rgba(0,0,0,.6)); }
[data-theme] [data-lit=true] .key-icon { filter: grayscale(1) brightness(.3); opacity: .85; }

/* ── Intro "rise" choreography (parts fade up staggered) ────── */
@keyframes fIn { from { opacity: 0; transform: translate3d(0,10px,0); } }
@keyframes mIn { from { opacity: 0; } }
@keyframes mDipIn { 0% { opacity: 0; } 42% { opacity: 0; } 74% { opacity: .5; } 100% { opacity: 0; } }
@keyframes mFaceIn { from { background-color: var(--surf); } }
[data-mech] [data-cur] [data-m], [data-mech] [data-cur] [data-m] > [data-l] { transition: none; }
[data-mech=flat] [data-cur] [data-fx] { opacity: 0 !important; }
[data-mech=flat] [data-cur] [data-m] > [data-l]:not([data-l=face]) { opacity: 0 !important; }
[data-mech=flat] [data-cur] [data-m] > [data-l=face] { background-color: var(--surf) !important; }
[data-mech=flat] [data-cur] :is([data-ext],[data-deb])::before, [data-mech=flat] [data-cur] :is([data-ext],[data-deb])::after { opacity: 0 !important; }
[data-mech=rise] [data-cur] [data-fx] { animation: mIn .9s var(--soft) calc(var(--d,0ms) + 200ms) backwards; }
[data-mech=rise] [data-cur] [data-m] > :is([data-l=cast],[data-l=sheen],[data-l=ex],[data-l=lit]) { animation: mIn .9s var(--soft) calc(var(--d,0ms) + 200ms) backwards; }
[data-mech=rise] [data-cur] [data-m]:not([data-on=true]) > [data-l=db] { animation: mDipIn 1.1s ease-in-out calc(var(--d,0ms) + 200ms) backwards; }
[data-mech=rise] [data-cur] [data-m][data-on=true] > [data-l=db] { animation: mIn .9s var(--soft) calc(var(--d,0ms) + 200ms) backwards; }
[data-mech=rise] [data-cur] [data-m] > [data-l=face] { animation: mFaceIn .9s var(--soft) calc(var(--d,0ms) + 200ms) backwards; }
[data-mech=rise] [data-cur] :is([data-ext],[data-deb])::before { animation: mIn .9s var(--soft) calc(var(--d,0ms) + 200ms) backwards; }
[data-mech=rise] [data-cur] :is([data-ext],[data-deb])::after { animation: mDipIn 1.1s ease-in-out calc(var(--d,0ms) + 200ms) backwards; }

/* View Transitions (theme reveal, player morph, narrow Feel layout) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 9999; }
::view-transition-group(*) { animation-duration: .7s; animation-timing-function: cubic-bezier(0.25,1,0.35,1); }

/* ── Frame: rail · stage · readout ──────────────────────────── */
.app {
  position: fixed; inset: 0; overflow: hidden; display: grid; gap: 18px; padding: 18px;
  grid-template-columns: 96px minmax(0,1fr) 288px; grid-template-rows: minmax(0,1fr);
}
.rail { order: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; min-height: 0; min-width: 0; }
.rail-top { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rail-site { display: none; }
a.rail-site { position: absolute; top: 3px; left: 18px; display: block; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--mute); text-decoration: none; white-space: nowrap; }
a.rail-site:hover { color: var(--focus); }
.brand { width: 52px; height: 52px; border-radius: 18px; background: var(--surf); display: grid; place-items: center; flex: 0 0 auto; }
.brand-dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 38% 34%, var(--t3a), var(--t3b)); box-shadow: 0 0 12px 1px rgba(var(--ac),.45), inset -1px -2px 3px rgba(var(--ac),.25); }
.puck { display: none; width: 60px; height: 60px; border-radius: 50%; place-items: center; flex: 0 0 auto; }
.puck-ring { position: absolute; inset: 5px; border-radius: 50%; pointer-events: none; --sweep: 0deg; transition: --sweep 1.6s var(--soft);
  background: conic-gradient(from -135deg, var(--t1a) 0deg, var(--t3b) var(--sweep), var(--track) var(--sweep) 270deg, transparent 270deg 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 74%); mask: radial-gradient(closest-side, transparent 72%, #000 74%); }
.puck-ovr { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.tabs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tab { width: 72px; height: 66px; border-radius: 24px; display: grid; justify-items: center; align-content: center; gap: 4px; flex: 0 0 auto; }
.tab-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; }

/* Pill switch (theme 64×36, filters 50×28) */
.sw { position: relative; width: 50px; height: 28px; border: 0; border-radius: 99px; background: var(--surf); padding: 0; flex: 0 0 auto; }
.sw-glow { position: absolute; inset: 1px; border-radius: 99px; background: linear-gradient(180deg, var(--t2a), var(--t2b)); box-shadow: inset 0 0 10px rgba(var(--ac),.38); opacity: 0; transition: opacity .5s var(--soft); }
.sw-thumb { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--thumb); background-image: var(--dome); display: grid; place-items: center; color: var(--mute); transition: transform .55s var(--spring); }
.sw[aria-checked=true] .sw-glow { opacity: .9; }
.sw[aria-checked=true] .sw-thumb { transform: translate3d(22px,0,0); }
.sw--theme { width: 64px; height: 36px; }
.sw--theme .sw-glow { inset: 2px; }
.sw--theme .sw-thumb { top: 4px; left: 4px; width: 28px; height: 28px; transition-duration: .6s; }
.sw--theme[aria-checked=true] .sw-thumb { transform: translate3d(28px,0,0); }

.stage { order: 1; position: relative; min-width: 0; min-height: 0; border-radius: 34px; overflow: hidden; perspective: 1800px; background: var(--surf); }
.camera { position: absolute; inset: 0; }
.plane { position: absolute; left: 0; top: 0; width: 300%; height: 200%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); will-change: transform; }
.stage-inset { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 8px 8px 20px -2px rgba(var(--lo),.32), inset -8px -8px 20px -2px rgba(var(--hi),.55); }

.readout { order: 2; min-height: 0; min-width: 0; overflow: auto; display: flex; flex-direction: column; gap: 22px; padding: 8px 6px 8px 2px; }

@media (min-width: 760px) and (max-width: 1179.98px) {
  .app { grid-template-columns: 96px minmax(0,1fr); }
  .readout { display: none; }
  .puck { display: grid; }
}
@media (max-width: 759.98px) {
  .app { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr) auto; }
  .readout { display: none; }
  .rail { order: 3; flex-direction: row; }
  .rail-top { flex-direction: row; }
  .tabs { flex-direction: row; }
  .tab { width: 52px; height: 52px; }
  a.rail-site { display: none; }
}
@media (max-height: 719.98px) {
  .tabs { gap: 8px; }
  .tab { height: 52px; }
}
@media (max-height: 719.98px) and (min-width: 760px) {
  .brand { display: none; }
}
/* Phones: six 52px tabs + brand + switch outgrow the row — let tabs share it, icons only. */
@media (max-width: 559.98px) {
  .rail-top { display: none; }
  .tabs { flex: 1 1 auto; justify-content: space-between; gap: 6px; }
  .tab { width: auto; flex: 1 1 0; max-width: 52px; min-width: 40px; }
  .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ── Panels ─────────────────────────────────────────────────── */
.panel { position: relative; min-width: 0; min-height: 0; overflow: auto; padding: clamp(22px,3vw,40px); scrollbar-width: thin; scrollbar-color: rgba(var(--lo),.6) transparent; }
#p-build   { grid-column: 1; grid-row: 1; }
#p-styles  { grid-column: 2; grid-row: 1; }
#p-chem    { grid-column: 3; grid-row: 1; }
#p-feel    { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; }
#p-compare { grid-column: 2; grid-row: 2; }
#p-squad   { grid-column: 1; grid-row: 2; }
.seam { position: absolute; border-radius: 6px; }
.seam--r { right: -3px; top: 10%; bottom: 10%; width: 6px; }
.seam--b { bottom: -3px; left: 10%; right: 10%; height: 6px; }

.ph { margin-bottom: 18px; }
.ph--build { margin-bottom: 28px; }
.ph--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px; margin-bottom: 24px; }
#p-squad .ph--row { margin-bottom: 22px; }
.eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.title { font-size: clamp(26px,2.6vw,36px); line-height: 1.05; font-weight: 800; letter-spacing: -.025em; }
.helper { margin-top: 8px; font-size: 13px; font-weight: 600; }
.caps { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Segmented control */
.seg { position: relative; display: flex; padding: 4px; border-radius: 99px; background: var(--surf); }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--n)); border-radius: 99px; background: var(--surf); background-image: var(--dome); transition: transform .6s var(--spring); }
.seg-opt { position: relative; flex: 1 1 0; border: 0; background: transparent; padding: 9px 2px; border-radius: 99px; font-size: 12px; white-space: nowrap; color: var(--mute); font-weight: 600; transition: color .4s var(--soft); }
.seg-opt[aria-checked=true] { color: var(--ink); font-weight: 800; }

/* Select in a pressed-in pill */
.select { position: relative; display: block; }
.select-well { display: block; border-radius: 99px; background: var(--surf); }
.select-field { height: 46px; border: 0; border-radius: 99px; padding: 0 42px 0 18px; background: transparent; font-weight: 700; font-size: 13px; color: var(--ink); display: block; cursor: pointer; }
.select-field:disabled { cursor: not-allowed; opacity: .6; }
.chev { position: absolute; right: 17px; top: 17px; color: var(--mute); pointer-events: none; }

/* Raised pill button */
.pill { padding: 12px 20px; border-radius: 99px; font-size: 13px; font-weight: 700; flex: 0 0 auto; }
.pill--sm { padding: 10px 15px; font-size: 12px; }
.pill--tog { padding: 8px 12px; font-size: 12px; display: inline-flex; gap: 5px; }
.lit-btn { padding: 14px 26px; border-radius: 99px; font-size: 14px; font-weight: 800; }

/* Shelf row (Styles, Chem) */
.shelf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 22px; padding: 14px 0; border-top: var(--groove); box-shadow: inset 0 1px 0 rgba(var(--hi),.7); }
.shelf-rail { flex: 0 0 92px; display: grid; gap: 4px; padding-top: 14px; }
.shelf-title { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.shelf-rail--chem { padding-top: 20px; }
.shelf-count { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.shelf-grid { flex: 1 1 320px; min-width: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill,minmax(146px,1fr)); }
.shelf-grid--pads { grid-template-columns: repeat(auto-fill,minmax(112px,1fr)); }

/* ── 01 Build ───────────────────────────────────────────────── */
.plates { display: flex; flex-wrap: wrap; gap: 26px; }
.plate { border-radius: 30px; background: var(--surf); padding: 18px 18px 22px; display: grid; gap: 16px; align-content: start; flex: 1 1 calc(33% - 16px); min-width: min(100%,250px); }
.plate--body { flex: 1 1 100%; min-width: 0; }
.plate--def { flex: 1 1 calc(43% - 11px); min-width: min(100%,310px); }
.plate--shoot { flex: 1 1 calc(55% - 15px); min-width: min(100%,380px); }
.plate-title { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.groove { width: 26px; height: 6px; border-radius: 9px; }
.plate-body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 28px; }
.wells { flex: 1 1 100%; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(72px,1fr)); gap: 14px 12px; }
.plate--body .wells { flex: 3 1 222px; }
.well { display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 6px; min-width: 0; }
.well-label { align-self: end; font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; text-wrap: balance; }
.well-box { position: relative; display: block; }
.well-field { display: block; border-radius: 24px; background: var(--surf); width: 100%; }
.well-input { width: 100%; height: 48px; border: 0; border-radius: 24px; background: transparent; text-align: center; font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; padding: 0 4px 4px; color: var(--ink); cursor: ew-resize; touch-action: pan-y; display: block; }
.well-glow { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 3px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--t2a), var(--t3b)); box-shadow: 0 0 10px 1px rgba(var(--ac),.4); transition: transform .5s var(--soft); pointer-events: none; }
.seg-block { min-width: 0; display: grid; gap: 8px; }
.seg-block--build { flex: 5 1 340px; }
.seg-block--accel { flex: 3 1 210px; }
.seg-block .seg-opt { padding: 11px 2px; }

/* ── 02 Styles ──────────────────────────────────────────────── */
.ps-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 64px; padding: 0 10px 0 26px; border-radius: 32px; background: var(--surf); margin-bottom: 6px; }
.ps-hint { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.key { min-height: 50px; border-radius: 25px; padding: 6px 12px 6px 9px; display: flex; align-items: center; gap: 10px; text-align: left; }
.key-icon { flex: 0 0 30px; width: 30px; height: 30px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.key-name { font-size: 13px; font-weight: 800; line-height: 1.2; }

/* ── 03 Chem ────────────────────────────────────────────────── */
.pad { height: 56px; border-radius: 26px; padding: 6px 8px; font-size: 13px; font-weight: 800; display: grid; place-items: center; text-align: center; }
.chem-map { margin-top: 20px; border-radius: 30px; background: var(--surf); padding: 20px 24px 22px; display: grid; gap: 16px; }
.chem-map-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.chem-map-title { font-size: 16px; font-weight: 800; }
.chem-map-sub { font-size: 13px; font-weight: 600; }
.cells { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 8px 28px; }
.cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid rgba(var(--lo),.28); }
.cell-v { display: flex; align-items: center; gap: 8px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mute); }
.cell-v.is-pos { color: var(--pos); }
.cell-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(180deg, var(--t2a), var(--t2b)); box-shadow: 0 0 9px 1px rgba(var(--ac),.42); opacity: 0; transform: scale(.4); transition: opacity .45s var(--soft), transform .5s var(--spring); }

/* ── 04 Feel ────────────────────────────────────────────────── */
.heat-scale { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.heat-scale li { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.heat-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); }
.feel-grid { flex: 1 0 auto; display: grid; gap: 18px; align-items: stretch; transition: grid-template-columns .8s var(--soft); }
.feel-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.layer-btn { border-radius: 28px; padding: 14px 15px 14px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; text-align: left; }
.layer-btn-text { display: grid; gap: 2px; }
.layer-title { font-size: 15px; font-weight: 800; }
.layer-sub { font-size: 11px; font-weight: 700; }
.layer-avg { font-size: 30px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: var(--ts-ink); }
.bars { display: flex; justify-content: space-around; gap: 6px; height: clamp(150px,24vh,210px); }
.bar { flex: 1 1 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; justify-items: center; gap: 8px; }
.bar-v { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bar-track { position: relative; width: 14px; border-radius: 99px; background: var(--surf); }
.bar-glowclip { position: absolute; inset: 2px; clip-path: inset(-18px -18px 0 -18px); pointer-events: none; }
.bar-fillclip { position: absolute; inset: 2px; border-radius: 99px; overflow: hidden; }
.bar-glowclip > i, .bar-fillclip > i { position: absolute; inset: 0; border-radius: 99px; transform: translate3d(0,100%,0); transition: transform 1.1s var(--soft); }
.bar-short { font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.det { display: grid; gap: 12px; min-height: 0; transition: opacity .28s var(--soft); animation: fIn .7s var(--soft) .22s backwards; }
.det[data-closing] { opacity: 0; }
.verdict { font-size: 15px; line-height: 1.55; font-weight: 600; text-wrap: pretty; }
.det-card { border-radius: 28px; background: var(--surf); padding: 16px 18px; display: grid; gap: 9px; }
.det-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding-bottom: 8px; border-bottom: var(--groove); }
.det-label { font-size: 13px; font-weight: 600; }
.det-row--base .det-label { font-weight: 800; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.chip { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--mute); }
.chip--base { color: var(--ink); }
.chip--pos { color: var(--pos); }
.slip { display: grid; gap: 6px; margin-top: 6px; }
.slip-h { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.slip-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.slip-row b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── 05 Compare ─────────────────────────────────────────────── */
.ph-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.ph-controls .select-field { max-width: 250px; }
.seg--chart { width: 190px; }
.seg--chart .seg-opt { padding: 9px 4px; font-size: 13px; }
.split { display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start; }
.legend { flex: 0 1 230px; display: grid; gap: 10px; }
.legend li { display: flex; align-items: center; gap: 10px; }
.legend-line { flex: 0 0 34px; overflow: visible; }
.legend-name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 700; }
.legend-hint { font-size: 12px; font-weight: 600; }
.round-btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
.chart { flex: 1 1 420px; min-width: 0; }
.radar-wrap { position: relative; width: min(100%,56vh,560px); aspect-ratio: 1; margin: 0 auto; }
.radar-disc { position: absolute; inset: 11%; border-radius: 50%; background: var(--surf); }
.radar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar-ring { fill: none; stroke: rgba(var(--lo),.55); stroke-width: 1; }
.radar-axis { stroke: rgba(var(--lo),.4); stroke-width: 1; }
.radar-label { fill: var(--mute); font-size: 13px; font-weight: 700; }
.btables { display: grid; gap: 22px; }
.btable { display: grid; gap: 8px; }
.btable-rows { display: grid; gap: 7px; }
.brow { display: grid; align-items: center; gap: 10px; }
.brow-h { font-size: 12px; font-weight: 700; }
.bcell { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 6px; }
.bcell-v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.bcell-track { position: relative; height: 6px; border-radius: 9px; background: var(--surf); overflow: hidden; }
.bcell-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--mute); border-radius: 9px; transition: transform .8s var(--soft); }
.bcell.is-best .bcell-v { font-weight: 800; }
.bcell.is-best .bcell-fill { background: linear-gradient(180deg, var(--t2a), var(--t3b)); box-shadow: inset 0 0 7px rgba(var(--ac),.5); }

/* ── 06 Squad ───────────────────────────────────────────────── */
.seg--roles { width: min(100%,430px); }
.sq-left { flex: 1.7 1 420px; min-width: 0; display: grid; gap: 16px; }
.sq-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sq-filters .select-field { height: 44px; padding: 0 42px 0 16px; }
.sq-filters .chev { right: 16px; top: 16px; }
.sw-row { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.cards { padding: 8px; display: grid; grid-template-columns: repeat(auto-fill,minmax(196px,1fr)); gap: 14px; max-height: calc(100vh - 290px); overflow: auto; }
.cards > li { position: relative; }
.card { width: 100%; min-height: 94px; border-radius: 28px; padding: 13px 52px 13px 16px; display: grid; gap: 3px; text-align: left; align-content: center; }
.card-name { font-size: 14px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-ovr-row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.card-ovr { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card-heat { font-size: 11px; font-weight: 700; }
.card-cmp { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 17px; display: grid; place-items: center; }
.sq-count { font-size: 12px; font-weight: 600; }
.save-form { flex: 1 1 270px; max-width: 360px; display: grid; gap: 14px; }
.save-title { font-size: 18px; font-weight: 800; }
.field { display: grid; gap: 6px; }
.field-well { display: block; border-radius: 21px; background: var(--surf); }
.text-field { width: 100%; height: 46px; border: 0; border-radius: 21px; padding: 0 16px; background: transparent; font-weight: 700; font-size: 14px; color: var(--ink); display: block; }
.save-form .select-well { border-radius: 21px; width: 100%; }
.save-form .select-field { width: 100%; border-radius: 21px; padding: 0 40px 0 16px; font-size: 14px; }
.save-form .chev { right: 16px; }
.toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.legend-caps { margin-bottom: 8px; }
.arch-groups { display: grid; gap: 8px; }
.rank { font-size: 10px; }
.save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.status { font-size: 13px; font-weight: 700; color: var(--pos); }
.io-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(var(--lo),.32); box-shadow: inset 0 1px 0 rgba(var(--hi),.7); }
@media (max-width: 759.98px) { .cards { max-height: none; } }

/* ── Readout ────────────────────────────────────────────────── */
.ro-head { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 6px; }
.ring { position: relative; width: 176px; aspect-ratio: 1; }
.ring > * { position: absolute; border-radius: 50%; }
.ring-cast { inset: 0; box-shadow: 12px 12px 28px rgba(var(--lo),.55); }
.ring-sheen { inset: 0; box-shadow: -12px -12px 26px rgba(var(--hi),.9); }
.ring-glow, .ring-arc { --sweep: 0deg; transition: --sweep 1.8s var(--soft); }
.ring-glow { inset: -3px; background: conic-gradient(from -135deg, rgba(var(--ac),.95) 0deg var(--sweep), transparent var(--sweep) 360deg); filter: blur(11px); opacity: .5; }
.ring-arc { inset: 0; background: conic-gradient(from -135deg, var(--t1a) 0deg, var(--t3b) var(--sweep), var(--track) var(--sweep) 270deg, var(--surf) 270deg 360deg); filter: blur(2px); }
.ring-disc { inset: 16%; background: var(--surf); display: grid; place-content: center; gap: 2px; }
.ring-label { font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.ring-ovr { font-size: 46px; line-height: 1; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; text-shadow: var(--ts-ink); }
.ro-name { font-size: 18px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ro-heat { font-size: 12px; font-weight: 700; margin-top: -6px; }
.ro-sec { display: grid; gap: 10px; }
.ro-links { display: grid; gap: 8px; }
.gauge { border-radius: 24px; padding: 11px 16px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 6px 10px; text-align: left; }
.gauge-title { font-size: 13px; font-weight: 800; }
.gauge-avg { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gauge-track { grid-column: 1 / -1; position: relative; height: 6px; border-radius: 9px; background: var(--surf); }
.gauge-glowclip { position: absolute; inset: 1px; clip-path: inset(-14px -14px -14px 0); pointer-events: none; }
.gauge-fillclip { position: absolute; inset: 1px; border-radius: 9px; overflow: hidden; }
.gauge-glowclip > i, .gauge-fillclip > i { position: absolute; inset: 0; border-radius: 9px; transform: translate3d(-100%,0,0); transition: transform 1s var(--soft); }
.ro-link { border-radius: 22px; padding: 10px 16px; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; text-align: left; }
.ro-save { margin-top: auto; padding: 14px 20px; }
.ro-foot { font-size: 11px; font-weight: 600; text-align: center; }

/* ── Reduced motion: animation/transition durations → ~0 ────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}