/* Barlow, Barlow Condensed, JetBrains Mono: SIL Open Font License 1.1 (OFL-*.txt). Made by fonts/fetch_fonts.py. */
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHpv4kjgoGqM7E_A8s52Hs.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHpv4kjgoGqM7E_Ass52Hs.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHpv4kjgoGqM7E_DMs5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHqv4kjgoGqM7E3_-gs6FospT4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHqv4kjgoGqM7E3_-gs6VospT4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHqv4kjgoGqM7E3_-gs51os.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHqv4kjgoGqM7E30-8s6FospT4.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHqv4kjgoGqM7E30-8s6VospT4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlow-v13-7cHqv4kjgoGqM7E30-8s51os.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlowcondensed-v13-HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3nWuZEC.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlowcondensed-v13-HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3jWuZEC.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/barlowcondensed-v13-HTxwL3I-JCGChYJ8VI-L6OO_au7B4873z3bWuQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlowcondensed-v13-HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3nWuZEC.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlowcondensed-v13-HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3jWuZEC.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/barlowcondensed-v13-HTxwL3I-JCGChYJ8VI-L6OO_au7B46r2z3bWuQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwhsk.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwhsk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwhsk.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwhsk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrainsmono-v24-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Trophora — shared styles. "Floodlit" (dark, default) and "Daylight" (light) themes on one token set.
   Type scale 11.5 / 13 / 15 / 17 / 21 / 28; spacing 4 / 8 / 12 / 16 / 24 / 32; radius 6 / 10 / 14.
   Modules style their own components with these tokens (TL.css), so a theme only has to redefine :root. */
:root,:root[data-theme="dark"]{
  --bg:#0b141d; --panel:#122030; --panel2:#18293a; --panel3:#1f3347; --line:#26405a; --line-soft:#1c3146;
  --fg:#e9eff3; --muted:#9db0c1; --accent:#f2b134; --accent-ink:#1d1400;
  --good:#4cc38a; --bad:#ef6461; --draw:#9fb0bf;
  --good-ink:#c3f1da; --bad-ink:#ffc9c7; --warn-ink:#ffe2a6; --info-ink:#bcd9ff; --violet-ink:#e7d0ff;
  --zebra:rgba(255,255,255,.022); --hover:rgba(255,255,255,.05);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px -18px rgba(0,0,0,.7);
  --shadow-pop:0 22px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);
  --glow:color-mix(in srgb,var(--accent) 7%,transparent);
  color-scheme:dark;
}
:root{
  --f-display:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
  --f-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --fs-xs:11.5px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:21px; --fs-xl:28px;
  --r-sm:6px; --r:10px; --r-lg:14px;
  --td-y:7px; --td-x:10px; --td-fs:14px;
}
/* Daylight: same layout, printed-programme contrast. Every pairing below is WCAG AA (4.5:1+) for body text. */
:root[data-theme="light"]{
  --bg:#e8edf1; --panel:#ffffff; --panel2:#f2f5f8; --panel3:#e6ecf1; --line:#cdd8e1; --line-soft:#e1e8ee;
  --fg:#0f1d2a; --muted:#4f6274; --accent:#9a5c00; --accent-ink:#ffffff;
  --good:#16794a; --bad:#c0302d; --draw:#5f7080;
  --good-ink:#0f5c37; --bad-ink:#9b1f1c; --warn-ink:#734600; --info-ink:#1d4c82; --violet-ink:#5a3889;
  --zebra:rgba(15,29,42,.028); --hover:rgba(15,29,42,.05);
  --shadow:0 1px 2px rgba(15,29,42,.06),0 8px 24px -16px rgba(15,29,42,.25);
  --shadow-pop:0 22px 60px rgba(15,29,42,.22),0 0 0 1px rgba(15,29,42,.04);
  --glow:transparent;
  color-scheme:light;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#e8edf1; --panel:#ffffff; --panel2:#f2f5f8; --panel3:#e6ecf1; --line:#cdd8e1; --line-soft:#e1e8ee;
    --fg:#0f1d2a; --muted:#4f6274; --accent:#9a5c00; --accent-ink:#ffffff;
    --good:#16794a; --bad:#c0302d; --draw:#5f7080;
    --good-ink:#0f5c37; --bad-ink:#9b1f1c; --warn-ink:#734600; --info-ink:#1d4c82; --violet-ink:#5a3889;
    --zebra:rgba(15,29,42,.028); --hover:rgba(15,29,42,.05);
    --shadow:0 1px 2px rgba(15,29,42,.06),0 8px 24px -16px rgba(15,29,42,.25);
    --shadow-pop:0 22px 60px rgba(15,29,42,.22),0 0 0 1px rgba(15,29,42,.04);
    --glow:transparent;
    color-scheme:light;
  }
}
:root[data-density="compact"]{ --td-y:3px; --td-x:8px; --td-fs:13px; }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{min-height:100%}
body{margin:0;color:var(--fg);font:var(--fs-base)/1.45 var(--f-body);overflow-x:hidden;
  background:radial-gradient(1100px 460px at 50% -220px,var(--glow),transparent 70%) no-repeat,var(--bg)}
[hidden]{display:none!important}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button:focus:not(:focus-visible){outline:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* full width: content stretches to 1920px, side gutter grows from 16px (phones) to 40px */
.wrap{max-width:1920px;margin:0 auto;padding-top:16px;padding-bottom:calc(48px + env(safe-area-inset-bottom,0px));
  padding-left:max(clamp(16px,2.5vw,40px),env(safe-area-inset-left,0px));padding-right:max(clamp(16px,2.5vw,40px),env(safe-area-inset-right,0px))}
/* reading text keeps a comfortable line length however wide the page gets */
main p,.hero p{max-width:78ch}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:.01em;margin:0;text-wrap:balance;line-height:1.15}
h2{font-size:var(--fs-lg);text-transform:uppercase;letter-spacing:.02em}
h3{font-size:16px;text-transform:uppercase;color:var(--muted);letter-spacing:.06em}
h4{margin:0}
.sub-h{font:600 var(--fs-xs) var(--f-body);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:0 0 6px}
.num,td.n,th.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
td.n,th.n{text-align:right}
.muted{color:var(--muted)}
.sm{font-size:var(--fs-sm)}
.good{color:var(--good)} .bad{color:var(--bad)}
.warn{color:var(--bad);font-weight:600}
.err{color:var(--bad);font-weight:600;font-size:14px}
.between{justify-content:space-between}

/* buttons + controls: one height (40 / 32 small), one radius per size */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 16px;font-weight:600;line-height:1.2;min-height:40px;letter-spacing:.01em;color:var(--fg);text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{border-color:color-mix(in srgb,var(--muted) 60%,var(--line));background:var(--panel3)}
.btn:active{box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--fg));border-color:color-mix(in srgb,var(--accent) 88%,var(--fg))}
.btn.small{padding:4px 11px;font-size:var(--fs-sm);min-height:32px}
.btn.danger{border-color:color-mix(in srgb,var(--bad) 55%,var(--line));color:var(--bad-ink)}
.btn.danger:hover{background:color-mix(in srgb,var(--bad) 14%,var(--panel2))}
.btn:disabled{opacity:.42;cursor:not-allowed}
.linkbtn{background:none;border:0;padding:4px 0;color:var(--accent);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:color-mix(in srgb,var(--bg) 55%,var(--panel));border:1px solid var(--line);border-radius:var(--r);max-width:100%}
.seg button{background:transparent;border:0;border-radius:7px;padding:6px 13px;font-weight:600;color:var(--muted);min-height:32px;transition:background-color .15s ease,color .15s ease}
.seg button:hover{color:var(--fg);background:var(--hover)}
.seg button.on{background:var(--accent);color:var(--accent-ink);box-shadow:0 1px 4px color-mix(in srgb,var(--accent) 30%,transparent)}
.seg button:focus-visible{outline-offset:-3px}
input[type=text],input[type=number],input[type=search],input[type=email],input[type=password],select,textarea{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 10px;min-height:38px;min-width:0;max-width:100%;color:var(--fg)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 85%,transparent)}
select{-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:hover,input[type=text]:hover,input[type=number]:hover,input[type=search]:hover,textarea:hover{border-color:color-mix(in srgb,var(--muted) 50%,var(--line))}
input[type=color]{width:52px;height:38px;padding:2px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-sm)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.chk{width:18px;height:18px;accent-color:var(--accent);margin:0}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld>span{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.fld.inline{flex-direction:row;align-items:center;gap:8px}
.ed-grid{display:grid;gap:12px 14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.ed-grid .span2{grid-column:span 2}
@media (max-width:420px){.ed-grid .span2{grid-column:1/-1}}
.colors{display:flex;gap:8px;align-items:center}

/* layout */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));align-items:start}
.lg{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
@media (max-width:900px){.lg{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;min-width:0;box-shadow:var(--shadow)}
.card>h3:first-child,.card>.row:first-child>h3:first-child{color:var(--fg)}
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;min-width:0}
.card-head{padding-bottom:12px;margin-bottom:2px;border-bottom:1px solid var(--line-soft);gap:10px 16px}
.mini-kpis{display:flex;gap:18px;margin:0}
.mini-kpis div{display:flex;flex-direction:column;align-items:flex-end}
.mini-kpis dt{font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.mini-kpis dd{margin:0;font:700 16px var(--f-mono)}
.empty{padding:20px 16px;border:1px dashed var(--line);border-radius:var(--r);color:var(--muted);text-align:center;font-size:14px;line-height:1.5;background:color-mix(in srgb,var(--panel2) 40%,transparent);white-space:normal}

/* folders: collapsible sections (details/summary) for long screens */
details.fold>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;min-height:28px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"";width:8px;height:8px;margin-left:auto;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s ease;flex:none}
details.fold[open]>summary::after{transform:rotate(-135deg)}
details.fold>summary:hover::after{border-color:var(--fg)}
details.fold[open]>summary{margin-bottom:12px}
details.fold>summary h3{color:var(--fg)}
.fold-n{font:700 var(--fs-xs)/18px var(--f-mono);min-width:22px;padding:0 6px;border-radius:9px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);text-align:center}
.fold-n:empty{display:none}

/* toolbars: grouped filters above lists and tables */
.toolbar{display:flex;flex-direction:column;gap:12px;padding:12px;background:color-mix(in srgb,var(--panel2) 55%,transparent);border:1px solid var(--line-soft);border-radius:var(--r)}
.tb-row{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end;min-width:0}
.tb-search{flex:1 1 240px}
.tb-search input{width:100%}
.tb-filters .fld{flex:1 1 160px}
.tb-filters select,.tb-country select{width:100%}
.tb-country{flex:0 1 220px}
.tb-check{gap:8px;min-height:38px;font-weight:600;font-size:14px}
main>.stack>.toolbar,main>.toolbar{background:var(--panel);border-color:var(--line)}

/* header: identity, scoreboard KPIs, menu */
.top{display:flex;gap:14px 18px;align-items:center;flex-wrap:wrap;padding-block:4px 16px}
.top>.crest{order:0}
.top-id{min-width:0;flex:1 1 220px;order:1}
.top h1{font-size:var(--fs-xl);text-transform:uppercase;line-height:1;overflow-wrap:anywhere;letter-spacing:.02em}
.top .meta{color:var(--muted);font-size:14px;margin-top:5px}
.top .meta b{color:var(--fg);font-family:var(--f-mono);font-weight:500}
.top-kpis{order:2;display:flex;gap:0;margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.top-kpis>div{display:flex;flex-direction:column;justify-content:center;padding:8px 16px;min-width:0}
.top-kpis>div+div{border-left:1px solid var(--line-soft)}
.top-kpis dt{font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.top-kpis dd{margin:0;font:700 18px var(--f-mono);white-space:nowrap}
.top-kpis dd.neg{color:var(--bad)}
.top>.menu{order:3}
.top>.acc-pill{order:4}
/* menu (header dropdown): every screen by section + display + save */
details.menu{position:relative}
details.menu>summary{list-style:none;user-select:none}
details.menu>summary::-webkit-details-marker{display:none}
.menu-btn{gap:8px;min-height:44px;padding-inline:14px}
.menu-btn svg{width:20px;height:20px}
details.menu[open]>.menu-btn{background:var(--panel3);border-color:var(--accent)}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:45;width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);padding:16px;animation:pop-in .14s ease-out}
@keyframes pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px 14px}
.menu-grp{display:flex;flex-direction:column;gap:1px;min-width:0}
.menu-h{display:flex;align-items:center;gap:7px;margin:0 0 6px;font:700 13px var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.menu-h svg{width:16px;height:16px;flex:none}
.menu-it{position:relative;display:flex;align-items:center;width:100%;min-height:34px;text-align:left;background:none;border:0;border-radius:var(--r-sm);padding:6px 10px;color:var(--fg);font-weight:500}
.menu-it:hover{background:var(--hover)}
.menu-it.on{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--fg);box-shadow:inset 3px 0 0 var(--accent);font-weight:600}
.menu-it .sb-dot{position:static;margin-left:8px;width:7px;height:7px;border-radius:50%;background:var(--bad)}
.menu-foot{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft)}
.menu-set{display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-set .seg button{padding:5px 11px;font-size:var(--fs-sm);min-height:30px}

/* main navigation: 6 sections + sub-page tabs (phone: bottom tab bar) */
.mainnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:2px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.mainnav .mn{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 10px;background:transparent;border:0;border-radius:var(--r);color:var(--muted);
  font:600 15px var(--f-display);text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;transition:background-color .15s ease,color .15s ease}
.mainnav .mn svg{width:20px;height:20px;flex:none}
.mainnav .mn:hover{color:var(--fg);background:var(--hover)}
.mainnav .mn.on{color:var(--fg);background:color-mix(in srgb,var(--accent) 13%,var(--panel2))}
.mainnav .mn.on svg{color:var(--accent)}
.mainnav .mn.on::after{content:"";position:absolute;left:18%;right:18%;bottom:3px;height:3px;border-radius:3px;background:var(--accent)}
.mainnav .mn:focus-visible{outline-offset:2px}
.mainnav .nb{position:absolute;top:5px;right:8px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font:700 11px/18px var(--f-mono);letter-spacing:0}
.subnav{display:flex;gap:2px;margin-top:6px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.subnav::-webkit-scrollbar{display:none}
.subnav button{position:relative;flex:none;background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:11px 15px 10px;min-height:44px;color:var(--muted);font:600 14.5px var(--f-body);white-space:nowrap;transition:color .15s ease,border-color .15s ease}
.subnav button:hover{color:var(--fg);border-bottom-color:color-mix(in srgb,var(--muted) 50%,transparent)}
.subnav button.on{color:var(--fg);border-bottom-color:var(--accent)}
.subnav button:focus-visible{outline-offset:-3px}
.subnav .sb-dot{position:absolute;top:9px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--bad)}
.subnav-title{margin-top:6px;padding:12px 2px 10px;border-bottom:1px solid var(--line)}.subnav-title h2{font-size:var(--fs-md);letter-spacing:.06em;color:var(--fg)}
@media (max-width:980px){ .mainnav .mn{font-size:13px;gap:6px;padding:8px 6px} .mainnav .mn svg{width:18px;height:18px} }
@media (max-width:720px){
  .top{gap:10px 12px;padding-bottom:12px}
  .top-id{flex:1 1 0}
  .top>.menu{order:2}
  .top-kpis{order:5;flex:1 1 100%;overflow-x:auto;scrollbar-width:none}
  .top-kpis::-webkit-scrollbar{display:none}
  .top-kpis>div{flex:1 0 auto;padding:7px 12px}
  .menu-btn{min-height:42px;min-width:42px;padding:0}
  .menu-lbl{display:none}
  .menu-pop{position:fixed;left:12px;right:12px;top:96px;width:auto;max-height:calc(100dvh - 190px)}
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mainnav{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;border-radius:16px 16px 0 0;border-width:1px 0 0;gap:0;
    padding:6px max(8px,env(safe-area-inset-left,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));
    background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 -6px 24px rgba(0,0,0,.28)}
  .mainnav .mn{flex-direction:column;gap:3px;min-height:52px;padding:6px 2px;font:600 10.5px var(--f-body);letter-spacing:.02em;text-transform:none}
  .mainnav .mn svg{width:22px;height:22px}
  .mainnav .mn.on{background:transparent;color:var(--accent)}
  .mainnav .mn.on::after{top:0;bottom:auto;left:28%;right:28%;border-radius:0 0 3px 3px}
  .mainnav .nb{top:3px;right:calc(50% - 22px)}
  .wrap{padding-bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
  .subnav{margin-top:0;mask-image:linear-gradient(90deg,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .subnav button{padding:10px 12px}
  /* long option rows (countries, sub-sections) scroll sideways instead of stacking */
  .seg{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .seg::-webkit-scrollbar{display:none}
  .seg button{flex:none;white-space:nowrap}
  .menu .seg{display:inline-flex}
  /* floating radio + toasts sit above the tab bar */
  body .tl-radio{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}
}
@media (prefers-reduced-motion:reduce){ .mainnav .mn,.subnav button,.btn,.seg button{transition:none} .menu-pop{animation:none} }
.tabs{position:relative;display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;border-bottom:1px solid var(--line);scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tabs button{flex:none;background:none;border:0;border-bottom:2px solid transparent;padding:9px 11px;font:600 15px var(--f-display);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--fg);border-bottom-color:var(--accent)}
.tabs button:focus-visible{outline-offset:-3px}
main{padding-top:20px;outline:none}

/* office: next match spans the top, the rest flows in balanced columns */
.office-grid{columns:4 340px;column-gap:16px}
.office-grid>.card,.office-grid>#widgets>.card{break-inside:avoid;margin:0 0 16px;width:100%}
.office-grid>#widgets>.card:empty{display:none}
.office-hero{column-span:all}
.nm-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:14px 28px;align-items:start}
.nm-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.nm-side{padding-left:24px;border-left:1px solid var(--line-soft)}
@media (max-width:860px){ .nm-grid{grid-template-columns:minmax(0,1fr)} .nm-side{padding-left:0;border-left:0;padding-top:12px;border-top:1px solid var(--line-soft)} }

/* crest, dots, chips */
.crest{width:46px;height:54px;flex:none;clip-path:polygon(0 0,100% 0,100% 64%,50% 100%,0 64%);display:grid;place-items:start center;padding-top:12px;font:700 14px var(--f-display);letter-spacing:.04em}
.dot{display:inline-block;width:12px;height:12px;border-radius:2px;flex:none;border:1px solid rgba(255,255,255,.25);vertical-align:middle}
.clubcell{display:inline-flex;align-items:center;gap:8px;min-width:0}
.chip-tag{display:inline-block;padding:1px 6px;border-radius:4px;font:700 10.5px/16px var(--f-mono);text-transform:uppercase;letter-spacing:.04em;background:var(--panel2);border:1px solid var(--line);color:var(--muted);white-space:nowrap;vertical-align:middle}
.chip-tag.bad{background:color-mix(in srgb,var(--bad) 20%,transparent);border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad-ink)}
.chip-tag.good{background:color-mix(in srgb,var(--good) 18%,transparent);border-color:color-mix(in srgb,var(--good) 50%,transparent);color:var(--good-ink)}
.chip-tag.warn{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--warn-ink)}
.tag-result{color:var(--warn-ink);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.tag-transfer{color:var(--info-ink);border-color:color-mix(in srgb,#4f8fd6 60%,transparent)}
.tag-squad{color:var(--good-ink);border-color:color-mix(in srgb,var(--good) 55%,transparent)}
.tag-league{color:var(--violet-ink);border-color:color-mix(in srgb,#8a64b8 60%,transparent)}
.pos{display:inline-block;width:30px;text-align:center;border-radius:3px;font:700 11px/18px var(--f-mono)}
.pos-GK{background:#e8c25a;color:#231a00}.pos-DF{background:#4f8fd6;color:#04121f}.pos-MF{background:#4cc38a;color:#03170d}.pos-FW{background:#ef6461;color:#200404}
.ovr{font:700 14px var(--f-mono)}
.fit{display:inline-block;width:46px;height:6px;background:var(--panel2);border-radius:3px;vertical-align:middle;overflow:hidden}
.fit i{display:block;height:100%}
.form{display:flex;gap:3px;flex-wrap:wrap}
.form span{width:18px;height:18px;border-radius:4px;font:700 11px/18px var(--f-mono);text-align:center;color:#0c1520}
:root[data-theme="light"] .form span{color:#fff}
.form em{font-size:12px;font-style:normal}
.f-W{background:var(--good)}.f-D{background:var(--draw)}.f-L{background:var(--bad)}
.meter{display:block;height:6px;background:var(--panel2);border-radius:3px;overflow:hidden;width:100%;max-width:140px}
.meter i{display:block;height:100%;background:var(--accent)}
.kpi{font:700 52px/1 var(--f-display);font-variant-numeric:tabular-nums}
.kpi small{font-size:.4em;color:var(--muted);font-family:var(--f-body);font-weight:600;margin-left:6px}
.stars{color:var(--accent);letter-spacing:2px;font-size:12px}
.star{background:none;border:0;padding:2px 4px;font-size:16px;line-height:1;color:var(--muted)}
.star[aria-pressed=true]{color:var(--accent)}

/* tables */
.tbl{position:relative;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
/* long tables: own scroll box, header row stays put */
.tbl.tall{max-height:min(74vh,780px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line-soft);border-radius:var(--r)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--td-fs)}
th{position:sticky;top:0;z-index:1;background:var(--panel);font:600 var(--fs-xs) var(--f-body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:calc(var(--td-y) + 1px) var(--td-x);border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:bottom}
td{padding:var(--td-y) var(--td-x);border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle}
tbody tr:last-child>td{border-bottom:0}
.tbl tbody tr:nth-child(even){background:var(--zebra)}
.tbl tbody tr:hover{background:var(--hover)}
.modal th,.card .card th{background:transparent;position:static}
.tbl td .plink,.tbl td .natcell .plink{text-decoration-color:transparent}
.tbl td .plink:hover{text-decoration-color:currentColor}
.tbl td .empty{margin:6px 0}
tr.me td{background:color-mix(in srgb,var(--accent) 14%,transparent)}
tr.me td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.out td{opacity:.62}
tr.champ td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.zone-top td:first-child{box-shadow:inset 3px 0 0 var(--good)}
tr.zone-bot td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
td .row{flex-wrap:nowrap;gap:4px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* office */
.fixture{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;text-align:center;padding:4px 0 6px}
.fixture .side{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.fixture .nm{font:700 20px var(--f-display);text-transform:uppercase;line-height:1.05;overflow-wrap:anywhere}
.fixture .vs{font:700 13px/1.4 var(--f-mono);color:var(--muted)}
.news{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.news li{border-left:2px solid var(--line);padding-left:10px}
.news .wk{font-family:var(--f-mono);color:var(--muted);font-size:12px;margin-right:6px}
.offer{border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px}
.plist{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:14px}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0;font-size:14px}
.kv dt{color:var(--muted)} .kv dd{margin:0;overflow-wrap:anywhere}
.ftscore{font:700 34px var(--f-display);text-transform:uppercase;text-align:center;line-height:1.1}
.ftscore .num{color:var(--accent)}
.res-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:14px}
.res-cols h4{margin:0 0 4px;font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.res-cols ul,.mini-list{list-style:none;margin:0;padding:0}

/* tactics board */
.board{position:relative;width:100%;max-width:520px;aspect-ratio:68/80;background:repeating-linear-gradient(180deg,#2a6c41 0 10%,#2f7748 10% 20%);border:2px solid rgba(255,255,255,.75);border-radius:4px;margin-inline:auto;overflow:hidden}
.board:before{content:"";position:absolute;left:22%;right:22%;top:-2px;height:17%;border:2px solid rgba(255,255,255,.6);border-top:0}
.board:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:0;border-top:2px dashed rgba(255,255,255,.35)}
.chip{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;width:84px;text-align:center}
.chip .c{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 12px var(--f-mono);border:2px solid}
.chip .l{font:600 12px/1.1 var(--f-body);background:rgba(8,16,24,.78);padding:1px 5px;border-radius:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip .l.off{color:#ffb3ad}
@media (max-width:480px){.chip{width:64px}.chip .l{font-size:11px}.chip .c{width:26px;height:26px;font-size:11px}}

/* fixtures + cup */
.rounds{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
.rd{border:1px solid var(--line-soft);border-radius:var(--r);padding:10px 12px;min-width:0;background:color-mix(in srgb,var(--panel2) 35%,transparent)}
.rd.cur{border-color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.rd-h{font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.rd.cur .rd-h{color:var(--accent)}
.fx{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;font-size:13px;padding:2px 0}
.fx>span:first-child{text-align:right}
.fx>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx.me{color:var(--accent);font-weight:600}
.fx .w{font-weight:700;color:var(--fg)}
.fx.me .w{color:var(--accent)}
.fx .lose{color:var(--muted)}
.fx-sub{font-size:11.5px;color:var(--muted);text-align:center;margin:-1px 0 3px}

/* club picker */
.hero{padding-block:28px 18px}
.hero h1{font-size:clamp(40px,11vw,72px);text-transform:uppercase;line-height:.95}
.hero h1 span{color:var(--accent)}
.hero p{max-width:60ch;color:var(--muted);margin:12px 0 0}
.pick{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pick button{display:flex;gap:12px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-width:0;box-shadow:var(--shadow);transition:border-color .15s ease,background-color .15s ease}
.pick button:hover{border-color:var(--accent);background:var(--panel2)}
.pick-txt{display:flex;flex-direction:column;min-width:0}
.pick .nm{font:700 18px var(--f-display);text-transform:uppercase;line-height:1.1;overflow-wrap:anywhere}
.pick-sec{margin-top:18px}
.pe-row{display:grid;grid-template-columns:auto minmax(0,1fr) 80px auto;gap:10px;align-items:end;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
@media (max-width:560px){.pe-row{grid-template-columns:auto minmax(0,1fr) 72px}.pe-row .colors{grid-column:2/-1}}

/* ---------- nationality, player links, toggles, roles ---------- */
.nat{display:inline-block;font:700 10px/15px var(--f-mono);padding:0 4px;border-radius:3px;background:var(--panel2);border:1px solid var(--line);color:var(--fg);letter-spacing:.03em;vertical-align:middle;white-space:nowrap}
.natcell{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.plink{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:3px;text-decoration-thickness:1px}
.plink:hover{color:var(--accent);text-decoration-color:currentColor}
.switch{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:4px 0;font-weight:600;min-height:32px}
.switch span{position:relative;flex:none;width:38px;height:22px;border-radius:11px;background:var(--panel2);border:1px solid var(--line)}
.switch span:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:left .15s}
.switch[aria-checked=true] span{background:var(--accent);border-color:var(--accent)}
.switch[aria-checked=true] span:after{left:19px;background:var(--accent-ink)}
.tog-row{display:flex;flex-direction:column}
.roles{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.roles li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.roles select{margin-left:auto;min-height:32px;padding:4px 8px;font-size:13px}
.chip .r{font:600 9.5px/1.3 var(--f-body);background:rgba(8,16,24,.7);padding:0 4px;border-radius:3px;color:#ffe2a6;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- playing cards ---------- */
.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cardcell{display:flex;flex-direction:column;gap:6px;min-width:0}
.cc-act{gap:6px;justify-content:space-between}
.tcard{--tc1:#2b3e52;--tc2:#d9e2ea;position:relative;display:flex;flex-direction:column;gap:5px;width:100%;min-width:0;margin-inline:auto;
  padding:12px 10px 8px;border-radius:12px 12px 16px 16px;border:2px solid var(--t-edge);color:var(--ink);
  background:linear-gradient(160deg,var(--t-a),var(--t-b) 46%,var(--t-c));box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.28);overflow:hidden;text-align:left}
.tcard:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.26) 46%,transparent 60%);pointer-events:none}
.tcard:after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--tc1) 0 62%,var(--tc2) 62%)}
.tcard>*{position:relative}
.tc-bronze{--t-a:#b87a48;--t-b:#ecc095;--t-c:#a56d3e;--t-edge:#6e4422;--ink:#1f1206}
.tc-silver{--t-a:#9aa4ad;--t-b:#f0f3f6;--t-c:#8a959e;--t-edge:#5f6971;--ink:#121820}
.tc-gold{--t-a:#c39a35;--t-b:#f8e08f;--t-c:#b58a26;--t-edge:#7a5408;--ink:#1d1400}
.tc-elite{--t-a:#1b0f38;--t-b:#40287a;--t-c:#0d2a4a;--t-edge:var(--accent);--ink:#f7f1e3}
.tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:6px}
.tc-rate{display:flex;flex-direction:column;line-height:1;min-width:0}
.tc-rate b.num{font:700 36px/.9 var(--f-display);font-variant-numeric:tabular-nums}
.tc-lbl{font:700 12px/1.2 var(--f-display);letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere}
.tc-badges{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.tcard .nat{background:rgba(0,0,0,.72);color:#fff;border-color:transparent}
.tc-crest{width:24px;height:28px;clip-path:polygon(0 0,100% 0,100% 64%,50% 100%,0 64%);display:grid;place-items:start center;padding-top:6px;font:700 8px var(--f-display);letter-spacing:.02em}
.tc-art{height:58px;display:grid;place-items:end center;margin-top:-6px}
.tc-sil{position:relative;width:58px;height:56px}
.tc-sil:before{content:"";position:absolute;left:50%;top:2px;width:24px;height:26px;margin-left:-12px;border-radius:50% 50% 46% 46%;background:rgba(0,0,0,.34)}
.tc-sil:after{content:"";position:absolute;left:3px;right:3px;bottom:0;height:24px;border-radius:26px 26px 4px 4px;background:var(--tc1);border-top:4px solid var(--tc2);box-shadow:inset 0 -6px 10px rgba(0,0,0,.2)}
.tc-mono{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--tc1);border:3px solid var(--tc2);font:700 22px var(--f-display);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7)}
.tc-name{margin:0;padding:4px 0;font:700 16px/1.1 var(--f-display);text-transform:uppercase;text-align:center;letter-spacing:.02em;border-block:1px solid rgba(0,0,0,.28);overflow-wrap:anywhere}
.tc-elite .tc-name{border-color:rgba(255,255,255,.25)}
.tc-namebtn{background:none;border:0;padding:0;margin:0;width:100%;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;text-align:center;cursor:pointer}
.tc-namebtn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.tc-brand{text-align:center;font-size:11.5px;font-weight:600;margin-top:-2px}
.tc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0}
.tc-stats div{display:flex;flex-direction:column;align-items:center;padding:2px 0 3px;border-radius:4px;background:rgba(255,255,255,.4)}
.tc-elite .tc-stats div{background:rgba(255,255,255,.1)}
.tc-stats dt{font:700 9.5px/1.2 var(--f-body);letter-spacing:.05em}
.tc-stats dd{margin:0;font:700 15px/1.1 var(--f-mono)}
.tc-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.tc-tags li{font:700 9.5px/15px var(--f-mono);text-transform:uppercase;padding:0 5px;border-radius:3px;background:rgba(0,0,0,.66);color:#fff}
.tc-tags li.bad{background:#a3221f}.tc-tags li.good{background:#14653d}
.tc-foot{margin:auto 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:11px;font-weight:600;line-height:1.25}
.tc-tier{font:700 9.5px var(--f-mono);text-transform:uppercase;letter-spacing:.06em;flex:none}
.tc-s{max-width:210px}
.tc-m{max-width:240px}
.tc-m .tc-rate b.num{font-size:40px}.tc-m .tc-name{font-size:18px}
.tc-l{max-width:280px;padding:14px 12px 10px}
.tc-l .tc-rate b.num{font-size:48px}.tc-l .tc-lbl{font-size:14px}.tc-l .tc-name{font-size:21px}.tc-l .tc-art{height:72px}
.tc-l .tc-sil{transform:scale(1.2);transform-origin:bottom center}.tc-l .tc-stats dd{font-size:17px}.tc-l .tc-stats dt{font-size:10.5px}
.tc-click{cursor:pointer;transition:transform .15s ease}
.tc-click:hover{transform:translateY(-2px)}
.tc-click:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.profile{display:grid;grid-template-columns:minmax(0,250px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:560px){.profile{grid-template-columns:minmax(0,1fr)}.profile .tcard{max-width:240px}}

/* ---------- conditions, dates, card collection, QR ---------- */
.cond{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--fg);background:var(--panel2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:7px 12px}
.wx{flex:none;color:var(--info-ink)}
.wx-clear,.wx-heat{color:var(--accent)}.wx-heat{color:#ff9a3c}
.wx-rain,.wx-heavyrain{color:var(--info-ink)}.wx-snow{color:var(--fg)}.wx-fog,.wx-wind,.wx-cloudy{color:var(--muted)}
.rd-d{float:right;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted)}
.kpis{display:flex;flex-wrap:wrap;gap:12px 22px}
.kpis>div{display:flex;flex-direction:column}
.kpi-s{font:700 26px/1.1 var(--f-display)}
.tier-bronze{color:#f0c79c;border-color:#a56d3e}.tier-silver{color:#e6ebef;border-color:#8a959e}.tier-gold{color:#f8e08f;border-color:#b58a26}.tier-elite{color:#d9c8ff;border-color:var(--accent)}
.cards.one{grid-template-columns:minmax(0,220px);justify-content:center}
.codebox{width:100%;font:12px/1.4 var(--f-mono);word-break:break-all;resize:vertical}
.qr{display:flex;justify-content:center}
.qr svg{display:block;width:100%;max-width:260px;height:auto;background:#fff;border-radius:6px}
.filebtn{display:inline-flex;align-items:center;cursor:pointer}
.filebtn:focus-within{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- v5: world picker, competitions, tactics boards ---------- */
.wrapseg{flex-wrap:wrap}
.pick-txt .sm{line-height:1.3}
tr.zone-cl td:first-child{box-shadow:inset 3px 0 0 #5aa9e6}
tr.zone-el td:first-child{box-shadow:inset 3px 0 0 #2fb3a6}
.grp-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
table.gt caption{text-align:left;font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:4px 0}
table.gt td,table.gt th{padding:4px 6px}
details>summary{cursor:pointer;font-weight:600;padding:4px 0}
details>summary:hover{color:var(--accent)}
details.fold>summary:hover,details.menu>summary:hover{color:inherit}
details.tac-g{border-top:1px solid var(--line-soft);padding-top:10px}
details.tac-g>summary{font:700 16px var(--f-display);text-transform:uppercase;letter-spacing:.05em;color:var(--fg);list-style-position:inside}
details.tac-g[open]>summary{margin-bottom:8px}
.tac-item{display:flex;flex-direction:column;gap:4px;min-width:0}
.tac-l{font-size:13px;font-weight:600}
.tac-item .seg button{padding:6px 10px;font-size:13px;min-height:32px}
.boards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.bd{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.bd figcaption,.viz figcaption{font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.boards .chip{width:66px}.boards .chip .c{width:24px;height:24px;font-size:10.5px}.boards .chip .l{font-size:10.5px}
.viz{margin:0;display:flex;flex-direction:column;gap:8px;align-items:center}
.viz svg{width:100%;max-width:380px;height:auto;display:block}
.vz-t{font:600 4px var(--f-body);fill:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.03em}
.vz-tab{width:auto;font-size:13px}.vz-tab th{text-transform:none;letter-spacing:0;font-size:13px;color:var(--fg)}
.roles-t select{min-height:32px;padding:4px 6px;font-size:13px;max-width:170px}

/* ---------- v6: manager career ---------- */
.rep-meter{display:inline-block;vertical-align:middle;width:140px;margin-left:8px}
.jobs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.job{border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:6px;min-width:0}
.job.row{flex-direction:row;align-items:center}
.offer-job{border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
.iv-head{display:flex;gap:12px;align-items:center}
.iv-head h2{font-size:22px}
.iv-q{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.iv-q legend{font:700 18px/1.25 var(--f-display);margin-bottom:8px;padding:0}
.iv-opt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel2);cursor:pointer}
.iv-opt:hover{border-color:var(--muted)}
.iv-opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel2))}
.iv-opt input{margin-top:3px;accent-color:var(--accent)}

/* modal + toast */
.modal{position:fixed;inset:0;background:rgba(4,9,14,.66);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;z-index:50;padding:16px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.modal .box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-pop);animation:pop-in .16s ease-out;max-width:460px;width:100%;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.modal .box:has(.wide){max-width:640px}
.modal .box h2{font-size:24px}
.modal .box>.row:last-child{position:sticky;bottom:-20px;background:var(--panel);padding-block:8px 0}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel2);border:1px solid var(--accent);border-radius:var(--r);padding:10px 16px;box-shadow:var(--shadow-pop);z-index:60;font-weight:600;max-width:calc(100% - 32px);animation:toast-in .2s ease-out}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

@media (max-width:640px){
  .top h1{font-size:22px}
  .top-kpis dd{font-size:16px}
  .tabs button{padding:8px 9px;font-size:14px}
  .fixture .nm{font-size:16px}
  .kpi{font-size:42px}
  .card{padding:14px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* sortable table headers */
th .thsort{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;border-radius:5px;padding:2px 4px;margin:-2px -4px}
th .thsort:hover{color:var(--fg)}
th .thsort:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
th[aria-sort=ascending] .thsort,th[aria-sort=descending] .thsort{color:var(--accent)}
th .tharr{font-size:9px;min-width:9px}
th.n .thsort{flex-direction:row-reverse}

/* new-game ladder toggle */
.ladder-tog{gap:8px;align-items:flex-start;font-size:14px;line-height:1.4}
.ladder-tog input{margin-top:2px;flex:none}

/* ---------- Road to Pro (pro.js) ---------- */
.pro-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){ .pro-grid{grid-template-columns:minmax(0,1fr)} }
.pro-h{font:600 13px var(--f-body);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0}
.pro-plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.pro-slot{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel2) 45%,transparent)}
.pro-slot .ps-h{font:600 12px var(--f-body);text-transform:uppercase;letter-spacing:.05em;color:var(--fg)}
.pro-slot .ps-h em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.pro-slot select{width:100%;min-height:34px;font-size:13px}
.pro-slot .ps-fixed{font-size:13px;color:var(--accent)}
.pro-dark{font-style:normal;font-size:10px;padding:1px 5px;border-radius:5px;background:#000;color:#cfd6df;margin-left:4px;text-transform:none;letter-spacing:0}
.pro-wx{display:inline-block;width:16px;text-align:center}
.pro-need{display:grid;grid-template-columns:96px 1fr 30px;gap:8px;align-items:center;font-size:13px}
.pro-need .meter{height:8px}
.pro-person{display:flex;flex-direction:column;gap:4px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.pro-person:last-child{border-bottom:0}
.pro-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.pro-dec{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent) inset}
.pro-dec h3{margin:0}
.pro-score{font-size:15px}
.pro-res{font-weight:600;padding:8px 12px;border-radius:10px}
.pro-res.ok{background:color-mix(in srgb,var(--good) 18%,transparent);color:var(--good)}
.pro-res.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.pro-mq{font-size:17px;line-height:1.4}
.pro-opts{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.pro-opt{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.pro-opt:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.pro-opt em{grid-column:2;font-style:normal;font-size:12px;color:var(--muted)}
.pro-map{width:100%;height:auto;display:block;border-radius:14px}
.pro-pin{cursor:pointer}
.pro-pin .pp-bg{fill:var(--panel);stroke:var(--line);stroke-width:1.5}
.pro-pin .pp-ic{fill:none;stroke:var(--fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pro-pin text{font:600 9.5px var(--f-body);fill:#e9edf2;paint-order:stroke;stroke:#0b1118;stroke-width:3px}
.pro-pin:hover .pp-bg,.pro-pin:focus .pp-bg{stroke:var(--accent)}
.pro-pin.on .pp-bg{fill:var(--accent);stroke:var(--accent)}
.pro-pin.on .pp-ic{stroke:var(--accent-ink)}
.pro-pin:focus{outline:none}
.pro-pin:focus-visible .pp-bg{stroke-width:3}
.pro-av{display:block;border-radius:22px;flex:none}
.pro-hd-av .pro-av{border-radius:14px}
.pro-me-mini .row{gap:12px;align-items:center}
.pro-create{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
@media (max-width:620px){ .pro-create{grid-template-columns:1fr} }
.pro-spark{width:100%;height:60px}
.pro-spark polyline{stroke:var(--accent);stroke-width:2}
.pro-spark circle{fill:var(--accent)}
.pro-spark .ps-7{stroke:var(--muted);stroke-dasharray:3 4}
.pro-trial{padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);gap:10px}
.pro-diary p{margin:0;padding:6px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.pro-diary .pd-big{font-weight:600}
.pro-diary .pd-bad{color:color-mix(in srgb,var(--bad) 75%,var(--fg))}
.sm-meter{display:inline-block;width:70px;height:6px;vertical-align:middle}
.row.wrap{flex-wrap:wrap}
.pro-msgs{display:flex;flex-direction:column;gap:8px}
.pro-msg{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 40%,transparent)}
.pro-msg p{margin:4px 0}
.pro-msg.unread{border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.pro-msg.unread b::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}
.pro-cal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pro-cal li{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 50%,transparent);align-items:baseline}
.pro-cal .pc-trial b{color:var(--accent)}
.pro-cal .pc-meet b{color:var(--good)}
@media (max-width:520px){ .pro-cal li{grid-template-columns:1fr} }
.seg .nb{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;line-height:18px;text-align:center;margin-left:4px}
/* automatic links in text */
.alink{display:inline;text-decoration-style:dotted;text-decoration-thickness:1px}
.alink:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:3px}
.pro-odds{list-style:none;margin:6px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.pro-odds li{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:10px}
/* new-game mode switch */
.mode-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:560px;margin:10px 0}
.mode-seg button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;text-align:left;min-height:56px}
.mode-seg button b{font:700 15px var(--f-display);letter-spacing:.02em;text-transform:uppercase}
.mode-seg button span{font-size:12px;opacity:.85;font-weight:500}
@media (max-width:720px){ .mode-seg{display:grid!important;overflow:visible!important} .mode-seg button{white-space:normal!important} }
.pro-fans{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fan{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;background:var(--panel2)}
.fan-awesome,.fan-excellent{background:color-mix(in srgb,var(--good) 22%,transparent);color:var(--good)}
.fan-poor,.fan-stupid{background:color-mix(in srgb,var(--bad) 16%,transparent);color:color-mix(in srgb,var(--bad) 80%,var(--fg))}
.fan-clown{background:#e53935;color:#fff}
.pro-map{max-width:820px;margin:0 auto}
.scn-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.scn{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 40%,transparent)}
.scn p{margin:0;flex:1}
.scn .btn{align-self:flex-start}
.rp-cv{width:100%;height:auto;border-radius:10px;display:block;background:#2f6b3a}

/* ---------- v10 layout polish (ui session, 2026-10-17) ---------- */
.plink{text-transform:inherit;letter-spacing:inherit}
.tbl td .btn.small{min-height:28px;padding:2px 10px}
.tbl td .star{padding:0 4px}
.tbl td .tlf{vertical-align:middle}
h3 .plink,h2 .plink{text-decoration:none}
@media (max-width:640px){
  .card{padding:14px;border-radius:12px}
  .toolbar{padding:10px;gap:10px}
  .tb-filters .fld{flex:1 1 130px}
  .card-head{padding-bottom:10px}
  .mini-kpis{gap:12px}
}
/* "row wrap" (a wrapping row, used by several modules) must not pick up the page container's padding */
.row.wrap{padding:0!important;margin:0;max-width:none}
.fld.inline>select,.fld.inline>input{flex:1 1 auto;min-width:0}
.fld{max-width:100%}
/* small tables inside office cards: long club names wrap instead of pushing columns out */
.office-grid .tbl td .clubcell{white-space:normal}
.office-grid .tbl td .clubcell .plink{white-space:normal;text-align:left}
td .form{flex-wrap:nowrap}
/* first visit: one big "Play your first match" button (ui.js renderOnboard) */
.onb{min-height:min(78vh,640px);display:flex;flex-direction:column;justify-content:center;gap:6px}
.onb-go-wrap{margin:22px 0 6px}
.onb-go{min-height:64px;width:min(100%,420px);font-size:22px;padding:14px 28px;font-family:var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.onb-club{display:flex;align-items:center;gap:12px;margin-top:12px;max-width:60ch}
.onb .row{gap:18px;flex-wrap:wrap;margin-top:14px}
/* ---------- launch polish (2026-10-18): starter goals, daily challenge, match-view setting, new cosmetics ---------- */
.prog-ch.st-goals li{grid-template-columns:22px 1fr auto}
.prog-ch.st-goals li .btn{min-height:30px}
.dly{margin:0 0 16px}
.dly-go{gap:8px;flex-wrap:wrap}
.dly-score{font-size:18px}
.dly-score b{font:700 22px/1 var(--f-display);margin:0 6px}
.menu-note{margin:6px 0 0;max-width:34ch}
.prog-fr.fr-sw-chalk{border-color:#e8efe6;border-style:dashed;background:linear-gradient(160deg,#24443a,#17302a)}
.prog-fr.fr-sw-sunrise{border-color:#ffb347;box-shadow:0 0 8px #ff7e5f}
.fr-chalk .tcard{box-shadow:0 0 0 2px #e8efe6,0 0 0 4px #24443a}
.fr-sunrise .tcard{box-shadow:0 0 0 2px #ffb347,0 0 14px #ff7e5f99}
.office-grid>.card.st-top{column-span:all}
.online-entry{margin:4px 0 10px;max-width:560px}.online-entry p{margin:4px 0 0}

:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}