/* Otium Fanta · design system 1.20 — three designs the user can choose in Impostazioni → Aspetto.
 *   Essenziale (initial): Cielo (light) · Notte allo stadio
 *   Retrò:                Televideo · Tabellone
 *   Diretta TV:           Blu notte e corallo · Notte e ambra
 * Loaded last. Every design maps onto the app's existing tokens (--bg, --panel, --accent…),
 * then adds its own type and shapes. --accent is the readable accent for text and lines;
 * --accent-fill / --on-accent are for filled buttons and chips. The newspaper canvases
 * (.press-*) keep their own print look. */

@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url("manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url("manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:800;font-display:swap;src:url("manrope-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"VT323";font-weight:400;font-display:swap;src:url("vt323-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Anton";font-weight:400;font-display:swap;src:url("anton-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url("barlow-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url("barlow-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-display:swap;src:url("barlow-latin-700-normal.woff2") format("woff2")}

/* ---------- Tokens per design ---------- */
html[data-design]{--accent-fill:var(--accent);--on-accent:#fff;--hi:color-mix(in srgb,var(--accent) 14%,transparent);--hi-line:var(--accent);--cut:none;--display-tt:none;--display-ls:0;--page-bg:var(--bg);--glow:none;--dot:#ff4d4f}

html[data-design="essenziale"]{--f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--f-display:"Manrope",system-ui,sans-serif;--display-w:800;--display-ls:-.01em;--radius:14px;--pro-r:12px;--pro-r-sm:10px}
html[data-design="essenziale"][data-variant="cielo"]{
  --bg:#F7FBFD;--sidebar:#FFFFFF;--panel:#FFFFFF;--panel2:#F1F7FB;--line:#DCE9F0;--text:#14263B;--muted:#5D6F82;
  --accent:#1E7DBF;--accent-fill:#8ED0F4;--on-accent:#0E2A45;--good:#12936A;--bad:#D2453B;--warn:#B98A00;
  --club-gold:#B98A00;--club-gold-line:#EFD36A;--hi:#FFF5C9;--hi-line:#EFD36A;--dot:#F2C230;
  --page-bg:linear-gradient(180deg,#EAF8F4 0,#F7FBFD 260px,#F7FBFD 70%,#EEF6FC 100%);
  --pro-field:#fff;--pro-border:#D3E2EA;--pro-border-strong:#B7CCD8;--pro-soft:#F1F7FB;--pro-soft-hover:#E6F1F8;--pro-th:#F1F7FB;--pro-sticky:#fff;
  --shadow:0 10px 30px rgba(20,60,90,.08)}
html[data-design="essenziale"][data-variant="notte"]{
  --bg:#0b1824;--sidebar:#0d1b28;--panel:#111f2c;--panel2:#172a3a;--line:#24384a;--text:#eef2f5;--muted:#9fb0bf;
  --accent:#d7b56d;--accent-fill:#d7b56d;--on-accent:#0a1520;--good:#3ecf8e;--bad:#ff6b6b;--warn:#ffc95f;
  --club-gold:#d7b56d;--club-gold-line:#786343;--hi:#d7b56d22;--hi-line:#d7b56d;--dot:#d7b56d;
  --page-bg:radial-gradient(120% 60% at 50% 0%,#18324a 0%,#0f1e2b 55%,#0b1824 100%);
  --pro-field:#0a1520;--pro-th:#0e1a26;--pro-sticky:#0f1c29}

html[data-design="retro"]{--f-body:"VT323",ui-monospace,"Courier New",monospace;--f-display:"VT323",ui-monospace,monospace;--display-w:400;--display-tt:uppercase;--display-ls:.02em;--radius:0px;--pro-r:0px;--pro-r-sm:0px;font-size-adjust:ex-height .5}
html[data-design="retro"][data-variant="televideo"]{
  --bg:#000;--sidebar:#000;--panel:#000;--panel2:#0000FF;--line:#0000FF;--text:#FFFFFF;--muted:#00FFFF;
  --accent:#FFFF00;--accent-fill:#FFFF00;--on-accent:#000;--good:#00FF00;--bad:#FF0000;--warn:#FFFF00;
  --club-gold:#FFFF00;--club-gold-line:#0000FF;--hi:#0000FF;--hi-line:#FFFF00;--dot:#FF0000;
  --page-bg:#000;--pro-field:#000;--pro-border:#0000FF;--pro-border-strong:#3c3cff;--pro-soft:#0000FF;--pro-soft-hover:#0000FF;--pro-th:#0000FF;--pro-sticky:#000;--shadow:none}
html[data-design="retro"][data-variant="tabellone"]{
  --bg:#070604;--sidebar:#070604;--panel:#0e0b06;--panel2:#17120a;--line:#3a2b10;--text:#ffd585;--muted:#c49a4f;
  --accent:#ffb21a;--accent-fill:#ffb21a;--on-accent:#070604;--good:#ffd585;--bad:#ff5a3c;--warn:#ffb21a;
  --club-gold:#ffb21a;--club-gold-line:#5a4416;--hi:#ffb21a1c;--hi-line:#ffb21a;--dot:#ff5a3c;
  --page-bg:radial-gradient(#ffffff0c 1px,transparent 1.5px) 0 0/6px 6px,#070604;--glow:0 0 6px #ffb21a55;
  --pro-field:#070604;--pro-border:#3a2b10;--pro-border-strong:#5a4416;--pro-soft:#17120a;--pro-soft-hover:#211a0e;--pro-th:#17120a;--pro-sticky:#0e0b06;--shadow:none}

html[data-design="tv"]{--f-body:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--f-display:"Anton","Arial Narrow",Impact,sans-serif;--display-w:400;--display-tt:uppercase;--display-ls:.01em;--radius:4px;--pro-r:4px;--pro-r-sm:4px;--cut:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%)}
html[data-design="tv"][data-variant="corallo"]{
  --bg:#0D1330;--sidebar:#0A1028;--panel:#141D47;--panel2:#1C2860;--line:#2E3A70;--text:#FFFFFF;--muted:#B9C3E6;
  --accent:#FF5A5F;--accent-fill:#FF5A5F;--on-accent:#0D1330;--good:#3FD18A;--bad:#FF5A5F;--warn:#FFC24B;
  --club-gold:#FF8A8D;--club-gold-line:#5A2E4A;--hi:#FF5A5F26;--hi-line:#FF5A5F;--dot:#FF5A5F;
  --page-bg:repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 22px,transparent 22px 64px),linear-gradient(160deg,#0D1330 0%,#1B2A6B 62%,#080C20 100%) fixed;
  --pro-field:#0A1028;--pro-border:#2E3A70;--pro-border-strong:#45528A;--pro-soft:rgba(255,255,255,.05);--pro-soft-hover:rgba(255,255,255,.09);--pro-th:#1C2860;--pro-sticky:#141D47}
html[data-design="tv"][data-variant="ambra"]{
  --bg:#0E141B;--sidebar:#0A0F15;--panel:#151E28;--panel2:#1C2733;--line:#2C3946;--text:#FFFFFF;--muted:#B5C0CB;
  --accent:#FFB020;--accent-fill:#FFB020;--on-accent:#0E141B;--good:#3FD18A;--bad:#FF5A4F;--warn:#FFB020;
  --club-gold:#FFB020;--club-gold-line:#5A4416;--hi:#FFB0201f;--hi-line:#FFB020;--dot:#FFB020;
  --page-bg:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 22px,transparent 22px 64px),linear-gradient(160deg,#0E141B 0%,#1C2733 62%,#080B0F 100%) fixed;
  --pro-field:#0A0F15;--pro-border:#2C3946;--pro-border-strong:#43525F;--pro-soft:rgba(255,255,255,.04);--pro-soft-hover:rgba(255,255,255,.08);--pro-th:#1C2733;--pro-sticky:#151E28}

/* Feature panels (Rosa, Mercato, Dati e squadra) */
html[data-variant="cielo"]{--hero-bg:linear-gradient(135deg,#D9EFFC 0%,#E2F6F1 100%);--hero-fg:#14263B;--hero-muted:#4C6A80;--hero-acc:#1E7DBF;--hero-line:#8ED0F4}
html[data-variant="notte"]{--hero-bg:linear-gradient(145deg,#1f4568,#13263a);--hero-fg:#eef2f5;--hero-muted:#a9bccb;--hero-acc:#d7b56d;--hero-line:#d7b56d}
html[data-variant="televideo"]{--hero-bg:#0000FF;--hero-fg:#FFFFFF;--hero-muted:#00FFFF;--hero-acc:#FFFF00;--hero-line:#FFFF00}
html[data-variant="tabellone"]{--hero-bg:#17120a;--hero-fg:#ffd585;--hero-muted:#c49a4f;--hero-acc:#ffb21a;--hero-line:#ffb21a}
html[data-variant="corallo"]{--hero-bg:#FFFFFF;--hero-fg:#0D1330;--hero-muted:#4A5578;--hero-acc:#D63A40;--hero-line:#FF5A5F}
html[data-variant="ambra"]{--hero-bg:#FFFFFF;--hero-fg:#0E141B;--hero-muted:#4C5763;--hero-acc:#A86C00;--hero-line:#FFB020}

/* ---------- Type ---------- */
html[data-design]{--pro-sans:var(--f-body)}
html[data-design] body{font-family:var(--f-body);background:var(--page-bg);color:var(--text)}
html[data-design] :is(h1,h2,h3,h4,.section-cover h2,.squad-count b,.market-intent h3,.league-index,.fixture-ticket>strong,.club-places .club-place-number,.club-places .club-place strong,.league-club-title strong,.identity-preview h2,.identity-fields h2,.squad-locker h3,.market-ledger h2,.setting-card h3,.work-person h3,.section-stats .work-person strong,.section-rules .rule b,.team-badge.monogram,.hq-monogram,.onb h1,.kpi strong,.hq-identity h2,.dock-number,.scene-dock strong,.live-goals strong,.live-goal b,.press-modes b,.section-club .club-hero h2,.section-fantalega .section-body>.card:first-child h2,.section-staff .work-person h3,.section-academy .work-person h3):not(.press-page *,.press-newspaper *,.press-club *,.press-story *){font-family:var(--f-display)!important;font-weight:var(--display-w)!important;letter-spacing:var(--display-ls)}
html[data-design] :is(.section-cover h2,.topbar-title h1,#view>h1,#view>h2,.market-intent h3,.section-fantalega .section-body>.card:first-child h2,.tactics-section-heading h2,.onb h1){text-transform:var(--display-tt)}
html[data-design] :is(input,select,textarea,button){font-family:inherit}
html[data-design="retro"] body *{text-shadow:var(--glow)}
html[data-design="tv"] .section-cover h2{line-height:1.02}

/* ---------- Backgrounds: the club photo only on Home, fading into the design ---------- */
html[data-design] body::before{opacity:0!important}
html[data-design="essenziale"] body[data-route="hq"]::before,html[data-design="tv"] body[data-route="hq"]::before{opacity:1!important}
html[data-design] .sidebar{background:var(--sidebar)}
html[data-design] body:not([data-route="hq"]) .topbar{background:color-mix(in srgb,var(--bg) 88%,transparent)!important;border-bottom:1px solid var(--line)}


/* Panels that were drawn dark on purpose now follow the design */
html[data-design] :is(.squad-locker,.market-intent,.section-fantalega .section-body>.card:first-child){background:var(--hero-bg)!important;color:var(--hero-fg)!important;border-top-color:var(--hero-line)!important}
html[data-design] :is(.squad-locker>.eyebrow,.market-intent>.eyebrow,.market-intent button small,.squad-locker .eyebrow){color:var(--hero-acc)!important}
html[data-design] :is(.market-intent p,.section-fantalega .section-body>.card:first-child .muted,.squad-locker .muted){color:var(--hero-muted)!important}
html[data-design] :is(.market-intent button,.squad-locker nav button){color:var(--hero-fg)!important;border-top-color:color-mix(in srgb,var(--hero-fg) 15%,transparent)!important}
html[data-design] :is(.squad-locker nav button.active,.squad-locker nav button:hover,.market-intent button:hover){color:var(--hero-acc)!important}
html[data-design] :is(.squad-locker,.market-intent,.section-fantalega .section-body>.card:first-child) :is(h2,h3,b,strong){color:inherit!important}
html[data-design="tv"] :is(.squad-locker,.market-intent,.section-fantalega .section-body>.card:first-child){clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);border-top-width:4px!important}
html[data-design="retro"] .career-card{background:var(--panel);border-color:var(--line)}
html[data-design] :is(.toolbar input,.toolbar select,.field input,.field select,.mk-tools input[type=search],.mk-tools select,.mk-field select,.mk-stepper input,.cm-compose textarea){background:var(--pro-field);color:var(--text)}
html[data-design] .logo-upload{background:var(--panel2)}
html[data-design] body:not([data-route="hq"]) .budget-chip{background:var(--panel2);color:var(--text);border-color:var(--line)}
html[data-design="retro"] body[data-route="hq"] .topbar{background:var(--bg)!important}

html[data-design] :is(.section-fantalega .section-body>.card:first-child,.squad-locker) button:not(.primary):not(nav *){color:var(--hero-fg)!important;background:color-mix(in srgb,var(--hero-fg) 6%,transparent)!important;border:1px solid color-mix(in srgb,var(--hero-fg) 24%,transparent)!important}

/* ---------- Filled accents: readable text on every fill ---------- */
html[data-design] :is(.onb button.primary,.onb-tabs button.on,.pr-sign.on,.mk-chip.on,#view button.primary,.modal button.primary,.btn.primary,.tab.active,.director-button,.brand-mark,button.primary){background:var(--accent-fill)!important;border-color:transparent!important;color:var(--on-accent)!important;box-shadow:none}
html[data-design] :is(.dl-section h2 em,.mk-tabs .tab em){background:var(--dot);color:var(--on-accent)}
html[data-design] :is(#view input[type=checkbox]:checked,.modal input[type=checkbox]:checked){background:var(--accent-fill);border-color:var(--accent-fill)}
html[data-design] .of-dot{background:var(--dot);box-shadow:0 0 0 2px var(--bg)}
html[data-design] button.section-link.active{background:var(--hi);color:var(--text);border-color:var(--hi-line)}
html[data-design] #standingsTable tr.is-mine td{background:var(--hi)!important}
html[data-design] a{color:var(--accent)}
html[data-design] ::selection{background:var(--accent-fill);color:var(--on-accent)}

/* Diretta TV: slanted fills, like on-screen sports graphics */
html[data-design="tv"] :is(#view button.primary,.modal button.primary,.btn.primary,button.primary,.onb button.primary,.mk-chip.on,.tab.active,button.section-link.active){clip-path:var(--cut);border-radius:0!important;padding-inline:20px}
html[data-design="tv"] button.section-link.active{background:var(--accent-fill);color:var(--on-accent);border-color:transparent;font-weight:700}
html[data-design="tv"] :is(#view .card,.setting-card,.modal .modal-card){border-radius:4px}
html[data-design="tv"] .kpi strong{font-size:1.6em}

/* Retrò: square everything, pages drawn like teletext / scoreboard */
html[data-design="retro"] *:not(.of-dot):not(input[type=radio]){border-radius:0!important}
html[data-design="retro"] button.section-link.active{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}

html[data-design="retro"][data-variant="tabellone"] :is(#view .card,.setting-card){border:1px dashed var(--line)}


/* ---------- Retrò without photos: flat colour blocks instead ---------- */
html[data-design="retro"]{--clubhouse-image:none!important}
html[data-design="retro"] :is(.identity-preview,.section-club .club-hero,.club-place,.scene-dock,.scene-ledger,button.hq-identity){background:var(--panel)!important;backdrop-filter:none!important;box-shadow:none!important}
html[data-design="retro"] :is(.identity-preview,.section-club .club-hero){border:2px solid var(--line)!important}
html[data-design="retro"] :is(.team-badge.monogram,.hq-monogram,[class*="monogram"]){background:var(--crest-bg)!important;color:var(--crest-fg)!important;border:0!important;box-shadow:none!important;text-shadow:none!important}
html[data-variant="televideo"]{--crest-bg:#0000FF;--crest-fg:#FFFF00}
html[data-variant="tabellone"]{--crest-bg:#070604;--crest-fg:#ffb21a}
html[data-variant="tabellone"] :is(.team-badge.monogram,.hq-monogram,[class*="monogram"]){outline:2px solid #ffb21a;outline-offset:-2px}
html[data-design="retro"] img.team-badge{image-rendering:pixelated}

/* ---------- Televideo: the Italian teletext page ----------
   Only the eight teletext colours: black, blue, red, green, yellow, cyan, magenta, white.
   Header row with the page number, blue bands for sections, yellow headlines, cyan subtitles, white text. */
html[data-variant="televideo"] body *{text-shadow:none!important}
html[data-variant="televideo"] .topbar{background:#000!important;background-image:none!important;backdrop-filter:none!important;box-shadow:none!important;border-bottom:0!important}
html[data-variant="televideo"] .topbar-title h1{color:#FFFFFF!important;font-size:20px!important;letter-spacing:.04em}
html[data-variant="televideo"] .topbar-title h1::before{content:var(--page,"P100");color:#FFFFFF;margin-right:.7em}
html[data-variant="televideo"] .topbar-title small{color:#00FFFF!important}
html[data-variant="televideo"] .topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:#0000FF}
html[data-variant="televideo"] .topbar{position:relative}
html[data-variant="televideo"] .budget-chip{background:#0000FF!important;color:#FFFFFF!important;border:0!important}
html[data-variant="televideo"] .mobile-menu{background:#0000FF!important;color:#FFFFFF!important;border:0!important}
html[data-variant="televideo"] .eyebrow{display:block;background:#0000FF;color:#FFFFFF!important;padding:3px 8px;letter-spacing:.12em}
html[data-variant="televideo"] :is(.section-cover h2,#view>h1,#view>h2,.tactics-section-heading h2){color:#FFFF00!important;font-size:2.4em!important;line-height:1!important}
html[data-variant="televideo"] :is(.section-cover p,.section-cover .muted){color:#00FFFF!important}
html[data-variant="televideo"] :is(#view .card,.setting-card){background:#000;border:0;border-top:6px solid #0000FF;padding-top:12px}
html[data-variant="televideo"] :is(#view .card h2,#view .card h3,.setting-card h3,#view h3){color:#00FFFF}
html[data-variant="televideo"] :is(.kpi strong,.squad-count b,#view .card strong){color:#FFFF00}
html[data-variant="televideo"] #view button:not(.primary):not(.section-link):not(.tab):not(.mk-chip):not(.ds-pick):not(.ds-var),html[data-variant="televideo"] .modal button:not(.primary){background:#0000FF!important;color:#FFFFFF!important;border:0!important}
html[data-variant="televideo"] :is(input,select,textarea){background:#000!important;color:#FFFFFF!important;border:2px solid #0000FF!important}
html[data-variant="televideo"] input[type=file]::file-selector-button{background:#0000FF!important;color:#FFFFFF!important;border:0!important}
html[data-variant="televideo"] button.section-link:not(.active){color:#00FFFF}
html[data-variant="televideo"] :is(table th){background:#0000FF!important;color:#FFFFFF!important}
html[data-variant="televideo"] :is(table td){border-color:#0000FF!important}
html[data-variant="televideo"] .director-button{background:#FFFF00!important;color:#000!important}
html[data-variant="televideo"] .of-dot{background:#FF0000}
body[data-route="hq"]{--page:"P100"}body[data-route="roster"]{--page:"P200"}body[data-route="tactics"]{--page:"P210"}body[data-route="match"]{--page:"P211"}body[data-route="academy"]{--page:"P220"}
body[data-route="market"]{--page:"P300"}body[data-route="fantalega"]{--page:"P400"}body[data-route="league"]{--page:"P410"}body[data-route="standings"]{--page:"P420"}body[data-route="calendar"]{--page:"P430"}body[data-route="predictions"]{--page:"P440"}body[data-route="community"]{--page:"P450"}body[data-route="transfers"]{--page:"P460"}body[data-route="rules"]{--page:"P470"}
body[data-route="club"]{--page:"P500"}body[data-route="identity"]{--page:"P510"}body[data-route="staff"]{--page:"P520"}body[data-route="sport"]{--page:"P530"}body[data-route="stats"]{--page:"P600"}body[data-route="intel"]{--page:"P610"}body[data-route="settings"]{--page:"P700"}

/* Essenziale: calm, rounded, light shadows */
html[data-design="essenziale"] :is(#view .card,.setting-card){box-shadow:var(--shadow)}
html[data-design="essenziale"] :is(#view button.primary,.modal button.primary,button.primary){border-radius:999px!important}
html[data-design="essenziale"][data-variant="cielo"] .director-button{box-shadow:0 8px 22px rgba(30,125,191,.25)}

/* ---------- Bottom tab bar (phones) ---------- */
.tab-bar{display:none}
@media(max-width:760px){
  .tab-bar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:55;padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px));background:var(--sidebar);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(0,0,0,.12)}
  .tab-bar button{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-height:50px;padding:4px 2px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:600 11px/1.1 var(--f-body,inherit)}
  .tab-bar button .nav-icon{width:23px;height:23px}
  .tab-bar button.active{color:var(--accent);font-weight:800}
  .tab-bar button.active::before{content:"";position:absolute;top:-6px;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
  .tab-bar button:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
  .tab-bar .of-dot{top:2px;right:calc(50% - 18px)}
  html[data-design="retro"] .tab-bar button{font-size:15px}
  /* Televideo: the bottom bar becomes the Fastext row (red, green, yellow, cyan, magenta) */
  html[data-variant="televideo"] .tab-bar{border-top:4px solid #0000FF;background:#000;box-shadow:none;gap:3px;padding-inline:3px}
  html[data-variant="televideo"] .tab-bar button{border-radius:0;font-size:16px;color:var(--fx)}
  html[data-variant="televideo"] .tab-bar button:nth-child(1){--fx:#FF0000}html[data-variant="televideo"] .tab-bar button:nth-child(2){--fx:#00FF00}html[data-variant="televideo"] .tab-bar button:nth-child(3){--fx:#FFFF00}html[data-variant="televideo"] .tab-bar button:nth-child(4){--fx:#00FFFF}html[data-variant="televideo"] .tab-bar button:nth-child(5){--fx:#FF00FF}
  html[data-variant="televideo"] .tab-bar button.active{background:var(--fx);color:#000;font-weight:400}
  html[data-variant="televideo"] .tab-bar button.active::before{display:none}
  html[data-variant="televideo"] .tab-bar .of-dot{background:#FFFFFF;box-shadow:0 0 0 2px #000}
  html[data-design="tv"] .tab-bar button.active::before{clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);border-radius:0}
  html[data-design="essenziale"][data-variant="cielo"] .tab-bar button.active{color:#14263B}
  html[data-design="essenziale"][data-variant="cielo"] .tab-bar button.active::before{background:#8ED0F4;height:4px}
  .view{padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))!important}
  .director-button,button.director-button{bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;right:14px!important}
  body.live-open .tab-bar,body.onb-open .tab-bar{display:none}
}

/* ---------- Page entrance, one per design ---------- */
html[data-design][data-motion="on"] #view>*{animation:ds-enter .38s cubic-bezier(.2,.8,.2,1) both}
html[data-design][data-motion="on"] #view>*:nth-child(2){animation-delay:.05s}
html[data-design][data-motion="on"] #view>*:nth-child(3){animation-delay:.1s}
html[data-design][data-motion="on"] #view>*:nth-child(n+4){animation-delay:.14s}
html[data-design="retro"][data-motion="on"] #view>*{animation:ds-ttx .32s steps(4) both}
html[data-design="tv"][data-motion="on"] #view>*{animation:ds-wipe .42s cubic-bezier(.7,0,.2,1) both}
@keyframes ds-enter{from{opacity:0;transform:translateY(8px)}}
@keyframes ds-ttx{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ds-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){html[data-design] #view>*{animation:none!important}}

/* ---------- Design picker (Impostazioni → Aspetto) ---------- */
.ds-picker{display:grid;gap:10px;margin:4px 0 18px}
.ds-card{display:grid;gap:8px;padding:10px;border:1px solid var(--line);border-radius:var(--pro-r,12px);background:var(--panel)}
.ds-card.on{border-color:var(--hi-line);box-shadow:0 0 0 1px var(--hi-line)}
.ds-pick{display:grid!important;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;text-align:left;width:100%;min-height:64px;padding:0!important;border:0!important;background:transparent!important;color:var(--text)!important;box-shadow:none!important}
.ds-pick b{display:block;font-size:1.05em}
.ds-pick small{display:block;color:var(--muted);font-weight:400;line-height:1.3}
.ds-prev{display:grid;place-items:center;width:72px;height:56px;border-radius:10px;overflow:hidden;position:relative;font-size:24px;line-height:1}
.ds-prev i{position:absolute;left:10px;right:10px;bottom:8px;height:6px;border-radius:3px}
.ds-variants{display:flex;flex-wrap:wrap;gap:6px}
.ds-var{display:inline-flex!important;align-items:center;gap:8px;min-height:40px!important;padding:6px 12px!important;border:1px solid var(--line)!important;border-radius:999px!important;background:transparent!important;color:var(--text)!important;font-size:.92em}
.ds-var[aria-pressed="true"]{border-color:var(--hi-line)!important;background:var(--hi)!important;font-weight:700}
.ds-sw{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}

/* ---------- Ritaglio foto (crop.js) ---------- */
.crop-root{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(0,0,0,.72)}
.crop-dialog{width:min(100%,620px);max-height:100%;overflow:auto;display:grid;gap:10px;padding:14px;border-radius:var(--pro-r,14px);background:var(--panel,#111e2b);color:var(--text,#fff);border:1px solid var(--line,#2a3d51)}
.crop-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.crop-head h2{margin:0;font-size:20px}
.crop-head button{width:40px;height:40px;border-radius:10px;font-size:20px}
.crop-aspects{display:flex;flex-wrap:wrap;gap:6px}
.crop-aspects button{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text);font-weight:600}
.crop-aspects button[aria-pressed="true"]{background:var(--accent-fill,var(--accent));color:var(--on-accent,#fff);border-color:transparent}
.crop-stage{position:relative;width:100%;height:min(55vh,460px);background:#0b0f14 repeating-conic-gradient(#1a2028 0 25%,#0b0f14 0 50%) 0 0/20px 20px;border-radius:10px;overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.crop-stage:active{cursor:grabbing}
.crop-stage canvas{position:absolute;inset:0;display:block}
.crop-frame{position:absolute;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px);background-size:33.33% 33.33%;background-position:-1px -1px}
.crop-frame.round{border-radius:50%}
.crop-hint{margin:0;font-size:13px;color:var(--muted)}
.crop-zoom{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;font-weight:600}
.crop-zoom input{width:100%}
.crop-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.crop-actions button{min-height:44px;padding:0 16px}
body.crop-open{overflow:hidden}

/* ---------- 1.26 · one menu per device, sticky sub-sections, Home "Da fare" ---------- */
.profile-btn{display:none}
@media(max-width:760px){
  .mobile-menu,#mobileMenu{display:none!important}
  .sidebar{display:none!important}
  .profile-btn{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:8px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:var(--text);padding:0}
  body[data-route="settings"] .profile-btn{background:var(--accent-fill);color:var(--on-accent);border-color:transparent}
  .top-actions{display:flex;align-items:center}
}
.section-nav{position:sticky;top:var(--topbar-h,0px);z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
html[data-motion="on"] #view[data-swipe="left"]>*{animation:ds-from-right .28s cubic-bezier(.2,.8,.2,1) both}
html[data-motion="on"] #view[data-swipe="right"]>*{animation:ds-from-left .28s cubic-bezier(.2,.8,.2,1) both}
@keyframes ds-from-right{from{opacity:.2;transform:translateX(36px)}}
@keyframes ds-from-left{from{opacity:.2;transform:translateX(-36px)}}

.hq-todo:empty{display:none}
.hq-todo{display:grid;gap:8px;margin-bottom:14px}
.hq-todo-list{display:grid;gap:6px}
.hq-todo-list button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;min-height:56px;padding:10px 14px!important;border-radius:var(--pro-r,12px)!important;border:1px solid var(--line)!important;background:var(--panel)!important;color:var(--text)!important}
.hq-todo-list b{display:block;font-size:15px}.hq-todo-list small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.hq-todo-list button>span:last-child{font-size:22px;color:var(--accent)}
.scene-ledger>div,.scene-ledger>button{background:transparent;border:0;border-radius:0;padding:10px 0 14px;text-align:left;display:flex;flex-direction:column;align-items:flex-start}
.scene-ledger>div+div,.scene-ledger>button+div{border-top:1px solid #d5b78030}
.hq-identity{cursor:default}

/* ---------- Light designs: readable everywhere (no light text on light ground) ---------- */
html[data-theme="light"][data-design] body:not([data-route="hq"]) .topbar-title h1{color:var(--text)!important}
html[data-theme="light"][data-design] body:not([data-route="hq"]) .topbar-title small{color:var(--muted)!important}
html[data-theme="light"][data-design] body:not([data-route="hq"]) .mobile-menu{color:var(--text)}
/* Home in Cielo: the club photo only behind the crest card; the rest sits on the light page */
html[data-theme="light"][data-design] body[data-route="hq"]::before{opacity:0!important}
html[data-theme="light"][data-design] body[data-route="hq"] .topbar{background:color-mix(in srgb,var(--bg) 88%,transparent)!important;border-bottom:1px solid var(--line)}
html[data-theme="light"][data-design] body[data-route="hq"] .topbar-title h1{color:var(--text)!important}
html[data-theme="light"][data-design] body[data-route="hq"] .topbar-title small{color:var(--muted)!important}
html[data-theme="light"][data-design] .hq-welcome .hq-identity{background:linear-gradient(180deg,#0b182499,#0b1824e6),var(--clubhouse-image) center/cover;border-radius:18px;padding:26px 18px;box-shadow:var(--shadow)}
html[data-theme="light"][data-design] .hq-welcome .hq-identity :is(h2,.hq-motto){color:#fff!important}
html[data-theme="light"][data-design] .hq-welcome .hq-identity .club-wordmark{color:#FFE9A8!important}
html[data-theme="light"][data-design] body[data-route="hq"] :is(.scene-caption,.scene-caption span,.scene-label,.scene-results,.scene-results span,.scene-open,.scene-economy summary span){color:var(--muted)!important;text-shadow:none!important}
html[data-theme="light"][data-design] body[data-route="hq"] :is(.scene-ledger,.scene-fixture,.scene-objective,.scene-economy){background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:var(--pro-r,12px);backdrop-filter:none!important;box-shadow:var(--shadow);text-shadow:none!important}
html[data-theme="light"][data-design] body[data-route="hq"] :is(.scene-ledger,.scene-fixture,.scene-objective,.scene-economy) :is(b,strong,em,h3,summary){color:var(--text)!important;text-shadow:none!important}
html[data-theme="light"][data-design] body[data-route="hq"] :is(.scene-ledger,.scene-fixture,.scene-objective,.scene-economy) :is(small,span:not(.scene-label)){color:var(--muted)!important;text-shadow:none!important}
html[data-theme="light"][data-design] body[data-route="hq"] .scene-fixture button,html[data-theme="light"][data-design] body[data-route="hq"] .scene-fixture>div{color:var(--text)!important;text-shadow:none!important}
html[data-theme="light"][data-design] body[data-route="hq"] .scene-ledger{padding:6px 16px!important}
html[data-theme="light"][data-design] body[data-route="hq"] .scene-ledger>*+*{border-top-color:var(--line)!important}
/* Tactics and match boards: dark chips keep light text in every design */
html[data-design] :is(.mc-player,.pitch-player) :is(b,strong){color:#fff!important}
html[data-design] :is(.mc-player,.pitch-player) small{color:#c9d4cf!important}
html[data-theme="light"][data-design] .hq-immersive{min-height:0!important;grid-template-rows:auto auto auto!important}
html[data-theme="light"][data-design] .hq-welcome{min-height:0!important;padding:0!important}
html[data-theme="light"][data-design] .hq-welcome .hq-identity{width:100%}
.scene-fixture>button,.scene-fixture>div{min-width:0;text-align:left;white-space:normal}
/* 1.27 · Home compatta sul telefono in tutti i design: niente spazio vuoto tra stemma e "Da fare". */
@media(max-width:760px){html[data-design] .hq-immersive{min-height:0!important;grid-template-rows:auto auto auto auto!important;padding-bottom:6px!important}html[data-design] .hq-welcome{min-height:0!important;padding:4px 0!important}}
/* 1.27 · Mercato: piano di mercato */
.mk-plan-sec{margin-top:15px}
.mk-objs{display:grid;gap:8px}
.mk-obj{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.mk-obj>div{display:grid;gap:2px;min-width:0}.mk-obj small{color:var(--muted)}
.mk-st{flex:none;font-size:.82em;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--text)}
.mk-st.good{color:#0f7a3d;border-color:#0f7a3d55;background:#16a34a1f}.mk-st.warn{color:#9a6200;border-color:#d9770655;background:#f59e0b24}.mk-st.bad{color:#b42318;border-color:#dc262655;background:#ef444420}
html[data-theme="dark"] .mk-st.good{color:#6ee7a0}html[data-theme="dark"] .mk-st.warn{color:#fcd34d}html[data-theme="dark"] .mk-st.bad{color:#fca5a5}
.mk-in{font-size:.85em;color:var(--muted);white-space:nowrap}
.mk-newtrade{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.mk-newtrade>summary{cursor:pointer;font-weight:700;padding:8px 0;color:var(--accent)}
.mk-newtrade>.card{box-shadow:none;border:0;padding:6px 0 0;background:transparent}
.mk-trade-op .mk-main small{white-space:normal}
/* 1.27 · Montepremi */
.pz-pot{font-size:1.4em}
.pz-list{margin:6px 0}
.pz-extra span::before{content:"★ ";color:var(--accent)}
.pz-balance{margin:8px 0 0;font-size:.92em}.pz-balance.good{color:#15803d}.pz-balance.warn{color:#b45309}.pz-balance.bad{color:#b91c1c}
html[data-theme="dark"] .pz-balance.good{color:#6ee7a0}html[data-theme="dark"] .pz-balance.warn{color:#fcd34d}html[data-theme="dark"] .pz-balance.bad{color:#fca5a5}
.pz-note{margin:8px 0 0;padding:8px 10px;border-left:3px solid var(--accent);background:var(--panel2);border-radius:6px}
.pz-src{margin-top:6px;font-size:.85em}
.pz-summary{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}.pz-summary .btn{margin-top:6px}
.pz-form{display:grid;gap:10px}.pz-form h3{margin:8px 0 0}
.pz-row{display:grid;grid-template-columns:44px minmax(0,1fr) 36px;gap:8px;align-items:center;margin-bottom:6px}
.pz-row-extra{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) 36px}
.pz-row span{font-weight:700;text-align:right}
.pz-live{margin:0;font-size:.95em}.pz-quick{flex-wrap:wrap}
.pz-cell{white-space:nowrap;font-weight:700;color:var(--accent)}
.mk-plan-sec .mk-main small{white-space:normal;overflow:visible;text-overflow:clip}
/* Cielo: carta della carriera chiara e leggibile */
html[data-theme="light"][data-design] .career-card{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow)}
html[data-theme="light"][data-design] .career-card :is(h3,b,strong){color:var(--text)!important}
html[data-theme="light"][data-design] .career-card :is(p,small,.muted){color:var(--muted)!important}
/* 1.0 · Benvenuto (primo avvio) coerente con il design scelto: fondo del tema, testi leggibili in Cielo. */
html[data-design] .onb{background:var(--page-bg,var(--bg))!important;color:var(--text)}
html[data-design] .onb h1{font-family:var(--f-display);font-weight:800;color:var(--text)}
html[data-design] .onb-steps li{border-top-color:var(--line)}
html[data-design] .onb button.primary,html[data-design] .onb-tabs button.on{background:var(--accent-fill,var(--accent));color:var(--on-accent,#fff)}
html[data-design] .onb .onb-brand span{color:var(--text)}
.onb-invite{margin:10px 0 4px;padding:12px 14px;border:1px solid var(--accent);border-radius:14px;background:color-mix(in srgb,var(--accent) 8%,var(--panel))}
.onb-invite .onb-label{margin:0 0 6px;color:var(--text)}
.onb-inv-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.onb-inv-row input{margin-top:0!important;text-transform:uppercase;letter-spacing:.12em;font-weight:700!important}
.onb .onb-inv-row button.primary{width:auto}
.onb-or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin:16px 0 0}.onb-or::before,.onb-or::after{content:"";flex:1;border-top:1px solid var(--line)}
/* Inviti nella Bacheca */
.cm-inv-box{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel2)}
.cm-inv-box .cm-code{display:block;font-size:1.8em;letter-spacing:.18em;margin:4px 0}
.cm-inv-box textarea{width:100%;margin-top:8px;font-size:13px}
.web-hint{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:60;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--panel);color:var(--text);border:1px solid var(--accent);box-shadow:0 10px 30px #0004}
.web-hint b{grid-column:1}.web-hint span{grid-column:1;font-size:13.5px;color:var(--muted)}.web-hint i{font-style:normal;font-weight:700;color:var(--accent)}
.web-hint button{grid-column:2;grid-row:1/span 2;min-height:40px;padding:0 14px;border-radius:10px;border:0;background:var(--accent-fill,var(--accent));color:var(--on-accent,#fff);font-weight:700}
html[data-theme="light"][data-design] .budget-chip{background:var(--panel2)!important;color:var(--text)!important;border-color:var(--line)!important}
html.is-web .onb .onb-leghe{display:none}
.onb-webnote{margin-top:14px;font-size:14px}