/* COTA90 app skin (2026-09-23): the app in the landing's language. Loaded last, after every other stylesheet.
   The landing: Manrope; near-black greens (#0a0d0c / #0f1412) with ivory text; gold for accents; red primaries
   with a soft red shadow; glass cards with a hairline border and 16px corners; 14px-cornered controls 44-50px
   tall; small labels in sentence case, no tracking. Green stays the colour of gains and red of losses. Shapes
   and type apply to both themes; colours are set per theme. Remove the <link> in index.html to go back. */

/* ---- type ---- */
html body,html button,html input,html select,html textarea,html .nav{font-family:'Manrope','Manrope Fallback',Inter,-apple-system,system-ui,sans-serif}
html .tabs,html .tabs button{font-family:Inter,-apple-system,system-ui,sans-serif}
html h1{font-weight:700;letter-spacing:-.02em}
html h2,html h3{letter-spacing:-.01em}
/* small labels: sentence case, no tracking, a size up */
html .ph h2,html .card h4,html .panel.watch h2,html .watch h2,html table th,html .lgshare .lbl,html .aseason{font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
html .panel.up .ph h2,html .panel.dn .ph h2{color:var(--mu)}

/* ---- dark theme: the landing's blacks, ivory and lines ---- */
html.dark{--bg:#0a0d0c;--p1:#0f1412;--p2:#161c19;--p3:#1e2621;--ln:rgba(244,241,233,.10);--ln2:rgba(244,241,233,.18);--tx:#f4f1e9;--mu:rgba(244,241,233,.64);--dm:rgba(244,241,233,.42)}
html.dark .nav{background:rgba(10,13,12,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--ln);box-shadow:none}

/* ---- cards: glass, 16px, hairline ---- */
html .card,html .panel,html .emptycard{border-radius:16px}
html.dark .card,html.dark .panel,html.dark .emptycard{background:rgba(15,20,18,.78);border:1px solid var(--ln);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 28px rgba(0,0,0,.22)}
html.dark .ph{background:none;border-bottom:1px solid var(--ln)}

/* ---- primary actions: the landing's red button ---- */
html .ghostbtn,html .lgrow .ghostbtn,html .lgrow2 .ghostbtn{background:#c8102e;color:#fff;border:0;border-radius:14px;min-height:46px;padding:0 18px;font-weight:700;font-size:14.5px;box-shadow:0 12px 30px rgba(200,16,46,.28);transition:background .2s,transform .12s}
html .ghostbtn:hover{background:#e0163a;transform:none}
html .play{border-radius:14px;min-height:44px}
html .play:not(.alt){background:#c8102e;box-shadow:0 12px 30px rgba(200,16,46,.28)}

/* ---- secondary actions: the landing's glass button ---- */
html .rndbtn{border-radius:14px;min-height:48px;padding:0 20px;font-weight:700;font-size:14px;color:#f4f1e9;background:rgba(10,13,12,.72);border:1px solid rgba(244,241,233,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
html .wlmenu button,html .wlcreate button,html .wlnewbtn,html .showmore,html .pact .ghost,html .lgrow2 .ghost{border-radius:14px;font-weight:700}
html .wlnewbtn{min-height:44px;padding:0 16px;font-size:13px}
html.dark .wlnewbtn,html.dark .showmore,html.dark .pact .ghost,html.dark .lgrow2 .ghost,html.dark .wlmenu button,html.dark .wlcreate button{background:rgba(244,241,233,.06);border:1px solid rgba(244,241,233,.22);color:#f4f1e9}
html.dark .wlnewbtn:hover,html.dark .showmore:hover,html.dark .pact .ghost:hover,html.dark .lgrow2 .ghost:hover{background:rgba(244,241,233,.12);border-color:#f4f1e9}

/* ---- filters, selects, inputs, segments ---- */
html .bar button,html .bar select,html .seg button{border-radius:14px}
html.dark .bar select{background:var(--p2);border:1px solid var(--ln);color:var(--tx)}
html.dark .bar button{background:var(--p2);color:var(--mu)}
html.dark .bar button.on{background:rgba(244,241,233,.14);color:#f4f1e9}
html .ranges button{letter-spacing:0;border-radius:10px}
html.dark .ranges button.on{color:#f1bf00;background:rgba(241,191,0,.12)}
html .mqi,html input#lgName,html input#lgCode,html .nsearch input{border-radius:14px}
html.dark .mqi,html.dark input#lgName,html.dark input#lgCode{background:rgba(244,241,233,.05);border:1px solid var(--ln2);color:#f4f1e9;box-shadow:none}
html.dark .mqi:focus,html.dark input#lgName:focus,html.dark input#lgCode:focus{border-color:rgba(241,191,0,.6);box-shadow:none}
html .fxteam.pill2{border-radius:12px}
html .chip{border-radius:10px}

/* ---- navigation: a quiet active state on the desktop nav; the phone tab bar stays as it is (the user's call) ---- */
html .links button{border-radius:12px;font-weight:600}
html.dark .links button.on{background:rgba(244,241,233,.1);color:#f4f1e9}
html .lang{border-radius:999px}

/* ---- community: gold-tinted glass instead of the green block ---- */
html.dark .lghero{background:linear-gradient(135deg,rgba(241,191,0,.16),rgba(15,20,18,.86) 62%);border:1px solid var(--ln);box-shadow:0 14px 40px rgba(0,0,0,.3)}
html:not(.dark) .lghero{background:linear-gradient(135deg,rgba(241,191,0,.24),#FBF7EE 62%);border:1px solid var(--ln);color:#171310;box-shadow:0 14px 40px rgba(23,19,16,.10)}
html:not(.dark) .lghero h1{color:#171310}
html:not(.dark) .lghero .sub{color:#6B6560}
html .lghero-ic{background:rgba(241,191,0,.16)}
html .lghero-ic svg{stroke:#f1bf00}
html .lgf-ic{background:rgba(241,191,0,.16);color:#f1bf00;border-radius:12px}
html .lgf-ic.key{background:var(--p3);color:var(--tx)}

/* ---- the random-portfolio pill over the chart, and the chart's range buttons ---- */
html #rndGo,html.dark #rndGo,html .pcompact #rndGo,html.dark .pcompact #rndGo{border-radius:14px;padding:0 18px;min-height:44px;font-size:13px;font-weight:700;color:#f4f1e9;background:rgba(10,13,12,.78);border:1px solid rgba(244,241,233,.24);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 34px rgba(0,0,0,.35)}
html #rndGo:hover,html.dark .pcompact #rndGo:hover{background:rgba(244,241,233,.12);color:#f4f1e9}
html:not(.dark) #rndGo,html:not(.dark) .pcompact #rndGo{color:#171310;background:rgba(255,255,255,.86);border:1px solid rgba(23,19,16,.18);box-shadow:0 10px 24px rgba(23,19,16,.10)}
html #rndGo:focus-visible{outline:2px solid #f1bf00}
html .pranges button{letter-spacing:0;border-radius:10px;font-weight:600}
html.dark .pranges button.on{color:#f1bf00;background:rgba(241,191,0,.12)}
html:not(.dark) .pranges button.on{color:#171310;background:rgba(23,19,16,.08)}

/* ---- the confirmation moment (the user's call, 2026-09-23): once a trade goes through, the whole screen blurs and
   tints, green for a purchase, red for a sale, with the transaction summary in the middle. app-skin.js shows it
   right after the ticket closes on a confirmed order and clears it on a tap or after a moment. ---- */
html .tradefx{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);transition:opacity .3s ease}
html .tradefx[hidden]{display:none}
html .tradefx.on{opacity:1;pointer-events:auto}
html .tradefx.buy{background:rgba(14,124,63,.5)}
html .tradefx.sell{background:rgba(200,16,46,.48)}
html .tradefx-card{width:min(420px,100%);text-align:center;padding:30px 26px 26px;border-radius:20px;background:rgba(10,13,12,.86);border:1px solid rgba(244,241,233,.16);box-shadow:0 30px 80px rgba(0,0,0,.5);color:#f4f1e9;transform:translateY(10px) scale(.97);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
html .tradefx.on .tradefx-card{transform:none}
html .tradefx-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;color:#fff}
html .tradefx.buy .tradefx-ic{background:#1fa15a;box-shadow:0 0 0 10px rgba(31,161,90,.22)}
html .tradefx.sell .tradefx-ic{background:#c8102e;box-shadow:0 0 0 10px rgba(200,16,46,.22)}
html .tradefx-ic svg{width:32px;height:32px}
html .tradefx-ic path{stroke-dasharray:26;stroke-dashoffset:26}
html .tradefx.on .tradefx-ic path{animation:tradefx-tick .5s .18s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes tradefx-tick{to{stroke-dashoffset:0}}
html .tradefx h2{margin:0 0 6px;font:700 22px/1.2 'Manrope','Manrope Fallback',Inter,sans-serif;letter-spacing:-.01em;text-transform:none}
html .tradefx-line{margin:0;font:600 15px/1.4 'Manrope','Manrope Fallback',Inter,sans-serif}
html .tradefx-sub{margin:8px 0 0;font:500 13px/1.4 'Manrope','Manrope Fallback',Inter,sans-serif;color:rgba(244,241,233,.66)}
html:not(.dark) .tradefx-card{background:rgba(255,255,255,.92);color:#171310;border-color:rgba(23,19,16,.12);box-shadow:0 30px 80px rgba(23,19,16,.25)}
html:not(.dark) .tradefx-sub{color:#6B6560}
@media(prefers-reduced-motion:reduce){html .tradefx,html .tradefx-card{transition:none}html .tradefx-ic path{stroke-dashoffset:0;animation:none}}

/* ---- keyboard focus in the landing's gold ---- */
html button:focus-visible,html a:focus-visible,html summary:focus-visible,html .nav #mobile-search-button:focus-visible,html .nav #tour-launch:focus-visible,html .nav #thm:focus-visible,html .nav #lang:focus-visible,html .nav #uchip:focus-visible{outline:2px solid #f1bf00;outline-offset:3px}

/* --- 2026-09-23: the toast ("Bienvenido, …") is inverted so it reads over any screen: ivory card on the dark theme,
   near-black card on the light theme, a gold edge and a real shadow. --- */
html.dark .toast,html .toast{background:#f4f1e9;color:#0a0d0c;border:1px solid rgba(10,13,12,.14);border-left:4px solid #f1bf00;border-radius:14px;padding:13px 18px;font-weight:600;letter-spacing:-.01em;box-shadow:0 18px 50px rgba(0,0,0,.55)}
html:not(.dark) .toast{background:#0f1412;color:#f4f1e9;border-color:rgba(244,241,233,.14);border-left-color:#f1bf00;box-shadow:0 18px 50px rgba(0,0,0,.35)}
/* --- 2026-10-05 (owner): the toast in the middle of the screen, no gold edge ("the yellow on the left of this small popup makes it look like a blur").
   Centred on the viewport on phone and desktop and large enough to be seen (owner: "the toast should be larger so users actually see it");
   it only shows a line of text, so it never takes a tap from what is under it. --- */
html.dark .toast,html .toast{border-left:1px solid rgba(10,13,12,.14)}
html:not(.dark) .toast{border-left-color:rgba(244,241,233,.14)}
html body .toast.toast{left:50%;right:auto;top:50%;bottom:auto;width:max-content;min-width:min(300px,calc(100vw - 48px));max-width:min(440px,calc(100vw - 40px));text-align:center;pointer-events:none;font-size:18px;line-height:1.35;font-weight:700;padding:20px 26px;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
@media (min-width:721px){html body .toast.toast{font-size:20px;padding:24px 36px;min-width:380px;max-width:560px;border-radius:20px}}   /* desktop: its own, proportionate size */
html body .toast.toast.on{transform:translate(-50%,-50%);pointer-events:none}
html body .toast.toast:not(.on){transform:translate(-50%,calc(-50% + 14px)) scale(.96)}

/* --- 2026-09-23: official highlights on played fixtures. The YouTube mark under the score: red with a white
   triangle when the LALIGA highlight exists, grey when it does not (yet). --- */
html .fxhl{display:inline-flex;margin-top:4px;padding:0;border:0;background:none;line-height:0}
html .fxhl svg{width:26px;height:18px;display:block}
html .fxhl .yt-bg{fill:#ff0033}
html .fxhl .yt-tri{fill:#fff}
html .fxhl:hover .yt-bg{fill:#e6002e}
html .fxhl.off{cursor:default}
html .fxhl.off .yt-bg{fill:rgba(244,241,233,.16)}
html .fxhl.off .yt-tri{fill:rgba(244,241,233,.45)}
html:not(.dark) .fxhl.off .yt-bg{fill:rgba(20,22,20,.14)}
html:not(.dark) .fxhl.off .yt-tri{fill:rgba(255,255,255,.9)}
html .fxrow.done .fxhl:not(.off){opacity:1}

/* --- 2026-09-23: Matches page, round navigator and club drop-down --- */
html .fxnav{display:flex;align-items:center;justify-content:center;gap:14px;margin:6px 0 2px}
html .fxnav h2{margin:0;font-size:18px;min-width:120px;text-align:center}
html .fxr.fxr{min-width:40px;width:40px;height:40px;padding:0;border-radius:99px;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
html .fxr:disabled{opacity:.3}
html .fxcnt{text-align:center;font-size:12px;margin:0 0 12px}
html .fxsel{display:block;width:100%;min-height:46px;margin-top:10px;padding:0 40px 0 14px;border-radius:12px;border:1px solid var(--ln2);background:var(--p1);color:var(--tx);font:inherit;font-size:14px;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 14px center;background-size:16px}

/* --- 2026-09-23: match details on tap. Goals and cards in small type, home left, away right. --- */
html .fxrow.done:has(.fxev){cursor:pointer}
html .fxev[hidden]{display:none}
html .fxev{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;padding:8px 4px 2px;border-top:1px dashed var(--ln);margin-top:4px}
html .evcol{display:flex;flex-direction:column;gap:5px;min-width:0}
html .evcol.a{text-align:right}
html .ev{display:flex;align-items:center;gap:6px;font-size:11px;line-height:1.3;color:var(--tx);min-width:0}
html .evcol.a .ev{flex-direction:row-reverse}
html .evm{font-variant-numeric:tabular-nums;color:var(--mu);min-width:22px}
html .evcol.a .evm{text-align:right}
html .evn{display:flex;flex-direction:column;min-width:0}
html .evn small,html .evn .eva{font-size:10px;color:var(--mu);font-weight:400}
html .evn .eva::before{content:"↳ "}
html .evg{width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,#111 19% 100%);flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
html .evg.og{background:radial-gradient(circle at 35% 35%,#fff 0 18%,#c8102e 19% 100%)}
html .evc{width:8px;height:11px;border-radius:2px;flex:none}
html .evc.y{background:#f1bf00}
html .evc.r{background:#e8384f}
html .ev.mu{color:var(--mu);font-size:11px}

/* --- 2026-09-23 (2): two drop-downs, round and team; details without icons --- */
html .fxctl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}
html .fxctl .fxsel{margin-top:0}
html .fxnav,html .evg{display:none}
html .evn b{font-weight:700}
@media(max-width:480px){html .fxctl{grid-template-columns:1fr}}

html .fxpsel{margin:0 0 14px}

/* --- 2026-09-23 (3): Matches controls, compact --- */
html .fxctl{grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 14px}
@media(max-width:480px){html .fxctl{grid-template-columns:1fr 1fr}}
html .fxctl .fxsel{min-height:42px;font-size:13px;padding:0 30px 0 12px;border-radius:10px;background-position:right 10px center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .fxhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 12px}
html .fxhead-l{display:flex;flex-direction:column;gap:2px;min-width:0}
html .fxhead h2{margin:0;font-size:17px;display:flex;align-items:center;gap:8px}
html .fxhead .mu{font-size:12px}
html .fxpsel{flex:none;max-width:46%;height:32px;padding:0 26px 0 12px;border-radius:99px;border:1px solid var(--ln2);background:var(--p1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 9px center/14px;color:var(--tx);font:inherit;font-size:12px;font-weight:700;appearance:none;-webkit-appearance:none;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- 2026-09-23 (4): proper drop-downs: label above, chevron, clear border --- */
html .fxfield{display:flex;flex-direction:column;gap:5px;min-width:0}
html .fxfield>span{font-size:11px;font-weight:700;color:var(--mu);letter-spacing:.01em;padding-left:2px}
html .fxctl .fxsel,html .fxsel{background-color:var(--p1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c4b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;border:1px solid rgba(244,241,233,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
html:not(.dark) .fxsel{border-color:rgba(20,22,20,.22);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")}
html .fxsel:focus-visible{outline:2px solid #f1bf00;outline-offset:2px}
html .fxpsel{display:none}

/* --- 2026-09-23 (5): real drop-downs on the Matches page --- */
html .fxfield,html .fxsel{display:none}
html .dd{position:relative;display:flex;flex-direction:column;gap:5px;min-width:0}
html .dd-label{font-size:11px;font-weight:700;color:var(--mu);padding-left:2px}
html .dd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:42px;padding:0 12px;border-radius:10px;border:1px solid rgba(244,241,233,.22);background:var(--p1);color:var(--tx);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer}
html .dd-btn>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html .dd-btn>i{flex:none;width:8px;height:8px;border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);transform:rotate(45deg) translateY(-2px);transition:transform .15s}
html .dd.open .dd-btn>i{transform:rotate(-135deg) translateY(-2px)}
html .dd.open .dd-btn{border-color:#f1bf00}
html .dd-list{position:absolute;top:100%;left:0;right:0;margin-top:6px;z-index:40;max-height:300px;overflow:auto;background:var(--p1);border:1px solid rgba(244,241,233,.22);border-radius:12px;box-shadow:0 18px 50px rgba(0,0,0,.55);padding:6px;overscroll-behavior:contain}
html .dd-list[hidden]{display:none}
html .dd-item{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:8px;background:none;color:var(--tx);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html .dd-item:hover{background:rgba(244,241,233,.06)}
html .dd-item.on{color:#f1bf00;font-weight:700}
html:not(.dark) .dd-btn,html:not(.dark) .dd-list{border-color:rgba(20,22,20,.22)}
html:not(.dark) .dd-list{box-shadow:0 18px 50px rgba(0,0,0,.25)}
html:not(.dark) .dd-item:hover{background:rgba(20,22,20,.06)}
html:not(.dark) .dd-item.on,html:not(.dark) .dd.open .dd-btn{color:#8a6a00;border-color:#c99a00}
html .dd:first-child .dd-list{right:auto;width:calc(200% + 8px)}

/* --- 2026-09-24: highlight lightbox --- */
html #ytbox{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .2s}
html #ytbox.on{opacity:1}
html #ytbox[hidden]{display:none}
html .ytwrap{position:relative;width:min(100%,960px)}
html .ytframe{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7)}
html .ytframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
html .ytclose{position:absolute;right:0;top:-46px;width:40px;height:40px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background:rgba(20,20,20,.7);color:#fff;font-size:24px;line-height:1;cursor:pointer}

/* --- 2026-09-24: in the guided tour the walk veil (z 10000, blurred) sat over the confirmation moment; the
   overlay now stands above the veil but under the guide's own card --- */
html .walk-active .tradefx{z-index:10002}

/* --- 2026-09-24: History is a quiet link, and its rows are the transaction ledger --- */
html .pact-quiet{margin-top:14px;justify-content:center}
html .hlink{flex:none;background:none;border:0;padding:4px 2px;font:inherit;font-size:13px;font-weight:700;color:var(--mu);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:pointer}
html .hlink:hover{color:var(--tx)}
html .hlink:focus-visible{outline:2px solid #f1bf00;outline-offset:3px;border-radius:4px}
html .txrow{cursor:default}
html .txrow .txk{font-weight:700}
html .txrow .txk.b{color:var(--up,#6fe0a8)}
html .txrow .txk.s{color:var(--dn,#ff7a6e)}
html .txrow .amv b{font-variant-numeric:tabular-nums}

/* --- 2026-09-24: "Build me a random portfolio" stays centred over the chart, where it has always been. It
   responded unpredictably because .pcompact was never positioned, so the centring resolved against some
   distant ancestor; giving the container position:relative settles it over the chart and the button keeps a
   full tap target above it. --- */
html .pcompact{position:relative}
html #rndGo,html.dark #rndGo,html:not(.dark) #rndGo,
html .pcompact #rndGo,html.dark .pcompact #rndGo,html:not(.dark) .pcompact #rndGo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  margin:0;width:auto;max-width:calc(100% - 28px);
  min-height:46px;padding:0 20px;border-radius:14px;
  font:700 14px/1 var(--font,inherit);white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;touch-action:manipulation;animation:none;
  background:rgba(10,13,12,.78);color:#f4f1e9;border:1px solid rgba(244,241,233,.26);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.35);transition:background .15s,border-color .15s,transform .08s}
html:not(.dark) #rndGo,html:not(.dark) .pcompact #rndGo{
  background:rgba(255,255,255,.88);color:#171310;border-color:rgba(23,19,16,.18);box-shadow:0 10px 24px rgba(23,19,16,.12)}
html .portfolio-empty-actions #rndGo,html.dark .portfolio-empty-actions #rndGo{position:static;transform:none;max-width:100%}
@media(hover:hover){html #rndGo:hover,html .pcompact #rndGo:hover{border-color:#f1bf00;background:rgba(241,191,0,.16)}}
html #rndGo:active,html .pcompact #rndGo:active{transform:translate(-50%,-50%) scale(.97)}
html .portfolio-empty-actions #rndGo:active{transform:scale(.97)}
html #rndGo:focus-visible{outline:2px solid #f1bf00;outline-offset:3px}

/* --- 2026-09-25: how to read the price, on a pressable i in front of the price --- */
html .hero .pn-row{position:relative;display:flex;align-items:center;gap:8px}
html .hero .pn-row #hv{margin:0}
html .pn-i{flex:0 0 auto;width:17px;height:17px;padding:0;border:1.25px solid currentColor;border-radius:50%;
  background:none;color:inherit;opacity:.42;font:italic 700 10px/1 var(--font,inherit);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;
  transition:opacity .15s,background-color .15s}
html .pn-i:hover,html .pn-i[aria-expanded=true]{opacity:1}
html .pn-i[aria-expanded=true]{background:rgba(140,140,140,.24)}
html .pn-i:focus-visible{outline:2px solid #f1bf00;outline-offset:2px;opacity:1}
html .pricenote{position:absolute;left:0;top:calc(100% + 10px);z-index:40;width:min(352px,86vw);
  background:#efe7da;color:#20201c;border-radius:18px;padding:14px 16px 16px;
  box-shadow:0 0 0 1px rgba(32,32,28,.1),0 20px 44px rgba(0,0,0,.34);opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .2s}
html .pricenote::before{content:'';position:absolute;left:5px;top:-6px;width:14px;height:14px;
  background:#efe7da;border-radius:3px;transform:rotate(45deg)}
html .pricenote.on{opacity:1;transform:none}
html .pricenote .pn-top{display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:800;letter-spacing:.16em;color:#6c655b;margin-bottom:9px}
html .pricenote .pn-x{border:0;background:none;padding:2px 4px;margin:0;font-size:15px;line-height:1;color:#6c655b;cursor:pointer}
html .pricenote h3{margin:0 0 8px;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:#20201c}
html .pricenote p{margin:0 0 9px;font-size:13.5px;line-height:1.58;color:#3b382f}
html .pricenote p:last-of-type{margin-bottom:0}
html .pricenote .pn-ok{margin-top:13px;min-height:38px;padding:0 16px;border:0;border-radius:10px;
  background:#20201c;color:#f4f1e9;font:700 13.5px/1 var(--font,inherit);cursor:pointer;touch-action:manipulation}
html .pricenote .pn-ok:hover{background:#3b382f}
@media(prefers-reduced-motion:reduce){html .pricenote{transition:none}}

/* --- 2026-09-25: signing out hands over to the landing without a flash --- */
/* the navigation to the landing is asynchronous, so for those few frames the page must show neither the
   registration gate nor the portfolio that has just been signed out of. The body keeps its background. */
html.signing-out body > *{visibility:hidden!important}
html.signing-out #toast,html.signing-out .toast{display:none!important}


/* --- 2026-09-26: every player in a match (edit_match_team_day.py, sleek pass edit_sleek_ui.py) --- */
html .fxplw{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;margin-top:4px}
html .fxplbtn{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:99px;border:0;background:none;color:var(--mu);font-weight:600;font-size:12px;line-height:1;font-family:inherit;cursor:pointer}
@media(hover:hover){html .fxplbtn:hover{color:var(--tx);background:var(--p2)}}
html .fxplbtn.on{color:var(--tx)}
html .fxplbtn i{width:5px;height:5px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
html .fxplbtn.on i{transform:translateY(1px) rotate(-135deg)}
html .fxpl[hidden]{display:none}
html .fxpl{width:100%;margin-top:2px}
html .fxpgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}
html .fxpcol{display:flex;flex-direction:column;min-width:0}
html .fxph{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--mu);padding:4px 4px 5px;border-bottom:1px solid var(--ln)}
html .fxph .crest{width:13px;height:13px}
html .fxp{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:31px;padding:4px;border:0;border-bottom:1px solid var(--ln);border-radius:0;background:none;text-align:left;color:var(--tx);cursor:pointer}
html .fxp:last-child{border-bottom:0}
@media(hover:hover){html .fxp:hover{background:var(--p2)}}
html .fxp-n{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px;min-width:0}
html .fxp-n b{font-size:12.5px;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
html .fxp-n small{font-size:10.5px;color:var(--mu);font-variant-numeric:tabular-nums;white-space:nowrap}
html .fxp-own{width:6px;height:6px;border-radius:50%;background:#f1bf00;align-self:center}
html .fxp-m{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
html .fxp-none{padding:6px 4px;font-size:12px}
html .fxpl-note{font-size:10px;color:var(--mu);opacity:.8;margin:8px 4px 0;text-align:center;line-height:1.4}
@media(max-width:560px){html .fxpgrid{grid-template-columns:1fr;gap:10px}}
html .fxhead .tmlink{flex:none;font-size:12px}

/* --- 2026-09-26: team pages, sleek --- */
html .clublink{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:var(--ln2);text-underline-offset:3px}
@media(hover:hover){html .clublink:hover{text-decoration-color:currentColor}}
html .tmpage>.backbtn{margin-bottom:10px}
html .tmhead{display:flex;align-items:center;gap:12px;margin:0 0 14px}
html .tmhead>.crest{width:44px;height:44px;flex:none;object-fit:contain}
html .tmhead h1{margin:0;font-size:22px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
html .tmsub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;color:var(--mu);margin-top:3px;font-variant-numeric:tabular-nums}
html .tmsub b{color:var(--tx);font-weight:600}
html .tmform{display:flex;gap:3px;margin-top:6px}
html .tmf{width:16px;height:16px;border-radius:4px;display:inline-grid;place-items:center;font-style:normal;font-weight:700;font-size:9.5px;line-height:1;font-family:inherit;color:#fff}
html .tmf.W{background:#1f9d5c}html .tmf.D{background:#7d8580}html .tmf.L{background:#c8102e}
html .tmstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);margin:0 0 16px}
html .tmstats>div{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:10px 14px;min-width:0}
html .tmstats>div:first-child{padding-left:2px}
html .tmstats>div+div{border-left:1px solid var(--ln)}
html .tmstats span{font-size:11px;font-weight:500;color:var(--mu)}
html .tmstats b{font-size:15px;font-weight:700;line-height:1.3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html .tmstats .tmopp{display:flex;align-items:center;gap:5px}
html .tmstats .tmopp .crest{width:15px;height:15px}
html .tmstats small{font-size:11px;color:var(--mu)}
html .tmlink{margin-top:2px;background:none;border:0;padding:0;color:var(--tx);font-weight:600;font-size:11px;line-height:1.4;font-family:inherit;text-decoration:underline;text-decoration-color:var(--ln2);text-underline-offset:2px;cursor:pointer}
@media(max-width:560px){html .tmstats{grid-template-columns:1fr 1fr}html .tmstats>div{padding:8px}html .tmstats b{font-size:13.5px}html .tmstats>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--ln);flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-left:2px}html .tmstats>div:nth-child(3)>span{width:100%}html .tmstats>div:nth-child(3) .tmlink{margin:0 0 0 auto}html .tmhead h1{font-size:20px}html .tmhead>.crest{width:40px;height:40px}}
html .tmctl{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;align-items:center;margin:0 0 8px}
html .tmgrp{display:flex;align-items:center;gap:2px;padding:2px;border-radius:99px;background:var(--p2);max-width:100%;overflow-x:auto;scrollbar-width:none}
html .tmgrp::-webkit-scrollbar{display:none}
html .tmchip{flex:none;min-height:26px;padding:0 10px;border-radius:99px;border:0;background:transparent;color:var(--mu);font-weight:600;font-size:11.5px;line-height:1;font-family:inherit;cursor:pointer;white-space:nowrap}
@media(hover:hover){html .tmchip:not(.on):hover{color:var(--tx)}}
html .tmchip.on{background:var(--p1);color:var(--tx);box-shadow:0 1px 2px rgba(0,0,0,.22)}
html .tmhdr,html .tmrow{display:grid;grid-template-columns:18px minmax(0,1fr) 72px 96px;align-items:center;gap:10px}
html .tmhdr{font-size:10.5px;font-weight:500;color:var(--mu);padding:0 8px 5px;border-bottom:1px solid var(--ln)}
html .tmhdr span:nth-child(n+3){text-align:right}
html .tmrow{padding:7px 8px;border-bottom:1px solid var(--ln);cursor:pointer}
@media(hover:hover){html .tmrow:hover{background:var(--p2)}}
html .tmrow:last-of-type{border-bottom:0}
html .tmrk{font-size:11px;color:var(--mu);font-variant-numeric:tabular-nums}
html .tmwho{display:flex;flex-direction:column;min-width:0}
html .tmwho b{font-size:13px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
html .tmwho small{font-size:10.5px;color:var(--mu);font-variant-numeric:tabular-nums}
html .tmwho .pill{font-size:9.5px;padding:1px 5px;margin-left:5px;vertical-align:1px}
html .tmlast{font-size:12px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
html .tmpx{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;line-height:1.3}
html .tmpx b{font-size:13px;font-weight:600}
html .tmpx span{font-size:11px;font-weight:600}
html .tmown{display:inline-block;width:6px;height:6px;border-radius:50%;background:#f1bf00;margin-left:6px;vertical-align:middle}
@media(max-width:560px){html .tmhdr,html .tmrow{grid-template-columns:14px minmax(0,1fr) 56px 84px;gap:8px}html .tmrow{padding:7px 2px}html .tmhdr{padding:0 2px 5px}}

/* --- 2026-09-28: the day strip, five days (edit_daystrip.py). Owner: "the central box is larger and the ones to the left and right are progressively smaller" --- */
html body.live .daystrip{--dssl:40px;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:0;padding:2px max(12px,calc(50% - 180px)) 3px}
html body.live .daystrip .dsreset,html body.live .daystrip .dsskip{position:static;transform:none;left:auto;right:auto;margin:0;display:inline-flex}
html body.live .daystrip .dsico.dsico{display:inline-grid;place-items:center;min-width:34px;min-height:34px;width:34px;height:34px;padding:0;border-radius:50%;border:0;background:var(--p2);color:var(--tx);transform:none;transition:background-color .15s,color .15s}
html body.live .daystrip .dsico.dsico svg{width:14.4px;height:14.4px}
@media(hover:hover){html body.live .daystrip .dsico.dsico:not(:disabled):hover{background:var(--p3,var(--p2))}}
html body.live .daystrip .dsico.dsico:disabled{opacity:.25}
html body.live .daystrip .dsmid{min-width:0;display:flex;flex-direction:column;align-items:center;gap:0}
html body.live .daystrip .dsmon.dsmon{position:relative;z-index:1;display:inline-flex;align-items:center;gap:4px;min-width:0;min-height:0;height:11px;padding:1px 8px 2px;border:0;border-radius:6px;background:none;color:var(--mu);font-size:7.5px;font-weight:600;line-height:1;letter-spacing:.03em;white-space:nowrap;cursor:pointer}
html body.live .daystrip .dsmon .dsq{position:static;transform:none;margin:0;font:italic 700 7px/1 Georgia,serif;color:var(--mu);border:1px solid var(--ln2);border-radius:99px;width:10px;height:10px;display:inline-flex;align-items:center;justify-content:center;opacity:.85}
html body.live .daystrip .dsrow{display:flex;justify-content:center;align-items:center;gap:4px;width:100%;min-width:0}
html body.live #daystrip #dsBack,html body.live #daystrip #dsNext{display:inline-grid;place-items:center;flex:0 0 24px;min-width:24px;width:24px;min-height:31px;height:31px;padding:0;border:0;border-radius:6px;background:none;color:var(--tx);font-size:0}
html body.live #daystrip #dsBack svg,html body.live #daystrip #dsNext svg{width:13px;height:13px}
html body.live #daystrip #dsBack:disabled,html body.live #daystrip #dsNext:disabled{opacity:.25}
html body.live .daystrip .dsrail{position:relative;flex:0 1 calc(var(--dssl)*4.6);min-width:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-block:4px;margin-block:-4px}
html body.live .daystrip .dsrail::-webkit-scrollbar{display:none}
html.walk-active body.live .daystrip .dsrail,html.journey-active body.live .daystrip .dsrail{overflow-x:hidden}
html body.live .daystrip .dssp{flex:0 0 calc(50% - var(--dssl)/2)}
html body.live .daystrip .dsday.dsday{flex:0 0 var(--dssl);min-width:var(--dssl);width:var(--dssl);min-height:31px;height:31px;padding:0;border:0;border-radius:0;background:none;display:grid;place-items:center;scroll-snap-align:center;cursor:pointer;color:var(--tx);font-size:inherit;line-height:1}
html body.live .daystrip .dssq{width:36px;height:31px;border-radius:7px;border:1px solid var(--ln2);background:var(--p1);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transform:scale(.6);transform-origin:50% 50%;will-change:transform}
html body.live .daystrip .dswd{font-size:7px;font-weight:700;line-height:1;letter-spacing:.05em;color:var(--mu)}
html body.live .daystrip .dsdn{font-size:11px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:var(--tx)}
html body.live .daystrip .dsday.today .dswd{color:#e0ac00}
html body.live .daystrip .dsday.nog .dssq{background:repeating-linear-gradient(135deg,var(--p2) 0 5px,transparent 5px 10px);border-color:transparent}
html body.live .daystrip .dsday.fut .dssq{background:var(--p2);border-color:transparent}
html body.live .daystrip .dsday.nog .dswd,html body.live .daystrip .dsday.nog .dsdn,html body.live .daystrip .dsday.fut .dswd,html body.live .daystrip .dsday.fut .dsdn{color:var(--dm)}
html body.live .daystrip .dsday[aria-current="date"] .dssq{background:#e0ac00;border-color:#e0ac00}
html body.live .daystrip .dsday[aria-current="date"] .dswd,html body.live .daystrip .dsday[aria-current="date"] .dsdn{color:#141004}
html body.live .daystrip .dsday.nog[aria-current="date"] .dssq{background:repeating-linear-gradient(135deg,rgba(0,0,0,.10) 0 5px,transparent 5px 10px),#e0ac00}
html body.live .daystrip .dsday.fut[aria-current="date"] .dssq{background:var(--p2);border:2px solid #e0ac00}
html body.live .daystrip .dsday.fut[aria-current="date"] .dswd,html body.live .daystrip .dsday.fut[aria-current="date"] .dsdn{color:var(--dm)}
html body.live .daystrip .dsday:focus-visible{outline:0}
html body.live .daystrip .dsday:focus-visible .dssq{outline:2px solid #e0ac00;outline-offset:2px}
/* desktop: the same strip at desktop size (the phone sizes above were set for the phone app) */
@media(min-width:721px){
html body.live .daystrip{--dssl:52px;grid-template-columns:38px minmax(0,1fr) 38px;padding:4px max(16px,calc(50% - 230px)) 5px}
html body.live .daystrip .dsico.dsico{min-width:38px;min-height:38px;width:38px;height:38px}
html body.live .daystrip .dsico.dsico svg{width:16px;height:16px}
html body.live .daystrip .dsreset,html body.live .daystrip .dsskip{align-self:end;margin-bottom:1px}
html body.live .daystrip .dsmid{gap:2px}
html body.live .daystrip .dsmon.dsmon{height:16px;gap:5px;font-size:11px}
html body.live .daystrip .dsmon .dsq{width:13px;height:13px;font-size:9px}
html body.live .daystrip .dsrow{gap:6px}
html body.live #daystrip #dsBack,html body.live #daystrip #dsNext{flex-basis:32px;min-width:32px;width:32px;min-height:40px;height:40px;border-radius:8px}
html body.live #daystrip #dsBack svg,html body.live #daystrip #dsNext svg{width:16px;height:16px}
html body.live .daystrip .dsday.dsday{min-height:40px;height:40px}
html body.live .daystrip .dssq{width:47px;height:40px;border-radius:9px;gap:2px}
html body.live .daystrip .dswd{font-size:9px}
html body.live .daystrip .dsdn{font-size:14.5px}
}
@media(min-width:961px){html body.live .rail{top:calc(var(--nav) + 92px)}}   /* the sticky sidebar keeps its 24px gap under the 68px desktop strip */
@media(min-width:721px) and (hover:hover){html body.live #daystrip #dsBack:not(:disabled):hover,html body.live #daystrip #dsNext:not(:disabled):hover{background:var(--p2)}}
html .dssheet{position:fixed;left:50%;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));z-index:75;background:var(--p1);color:var(--tx);border:1px solid var(--ln2);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28);padding:12px;max-height:calc(100dvh - 140px);overflow:auto}
html .dssheet[data-mode="reset"],html .dssheet[data-mode="skip"]{transform:none;width:min(280px,calc(100vw - 24px));padding:6px}
html .dssheet[hidden]{display:none}
html .dssheet.open{animation:dsIn .22s cubic-bezier(.22,1,.36,1)}
@keyframes dsIn{from{opacity:0;margin-top:-4px}}
html .dsh-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
html .dsh-top b{font-size:13px;font-weight:700}
html .dsh-x{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;border:0;background:none;color:var(--mu);cursor:pointer}
@media(hover:hover){html .dsh-x:hover{background:var(--p2);color:var(--tx)}}
html .dsh-p{font-size:11.5px;line-height:1.45;color:var(--mu);margin:2px 0 10px}
html .dsh-rounds{display:flex;flex-wrap:wrap;gap:5px}
html .dsh-r{position:relative;min-width:40px;height:28px;padding:0 10px;border-radius:99px;border:1px solid var(--ln2);background:none;color:var(--tx);font-weight:600;font-size:12px;line-height:1;font-family:inherit;cursor:pointer}
@media(hover:hover){html .dsh-r:hover{background:var(--p2)}}
html .dsh-r.done::after{content:"";position:absolute;top:3px;right:4px;width:5px;height:5px;border-radius:50%;background:#4cc38a}
html .dsh-r.here{border-color:#e0ac00;box-shadow:inset 0 0 0 1px #e0ac00;font-weight:700}
html .dsh-go{display:block;margin:10px 0 0;padding:0;border:0;background:none;color:var(--tx);font-weight:600;font-size:12px;line-height:1.4;font-family:inherit;text-decoration:underline;text-decoration-color:var(--ln2);text-underline-offset:3px;cursor:pointer}
html .dsm-h{font-size:11px;font-weight:600;color:var(--mu);padding:6px 8px 4px}
html .dsm-i{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;padding:8px;border:0;border-radius:8px;background:none;color:var(--tx);text-align:left;cursor:pointer;font-family:inherit}
@media(hover:hover){html .dsm-i:not(:disabled):hover{background:var(--p2)}}
html .dsm-i:disabled{opacity:.4;cursor:default}
html .dsm-i b{font-size:13px;font-weight:600}
html .dsm-i small{font-size:11px;color:var(--mu)}
html .dsm-i.warn b{color:var(--dn)}
html .dsm-i.warn.armed{background:rgba(200,16,46,.1)}
html .dsm-i.warn.armed small{color:var(--dn);font-weight:600}
@media (prefers-reduced-motion:reduce){html .dssheet.open{animation:none}html .fxplbtn i{transition:none}}

/* --- 2026-09-26 (c): sort in the squad headers, one row of tabs, one-line details (edit_team_polish.py) --- */
html .tmsort{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;white-space:nowrap}
@media(hover:hover){html .tmsort:hover{color:var(--tx)}}
html .tmsort.on{color:var(--tx);font-weight:700}
html .tmsort.on::after{content:" ↓"}
html .tmhdr span:nth-child(n+3){white-space:nowrap}
@media(max-width:560px){html .tmpos{display:none}}

html .tmsm{display:none}
@media(max-width:560px){html .tmlg{display:none}html .tmsm{display:inline}}

/* --- 2026-09-27: last lineup under an upcoming match (edit_last_lineup.py) --- */
html .fxrow.lu{cursor:pointer}
html .fxlu-in{grid-column:1/-1}
html .fxsec{font-size:10.5px;font-weight:500;color:var(--mu);padding:6px 4px 3px}
html .fxsec b{color:var(--tx);font-weight:600}
html .fxp-px{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;line-height:1.25}
html .fxp-px b{font-size:12px;font-weight:600}
html .fxp-px span{font-size:10.5px;font-weight:600}
html .fxp.off{cursor:default}
html .fxp.off b{color:var(--mu);font-weight:500}
@media(hover:hover){html .fxp.off:hover{background:none}}
html .fxp-n .pill{font-size:9.5px;padding:1px 5px}

/* --- 2026-09-27: team page header line and stats bar (edit_team_bar.py) --- */
html .tmsub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:4px}
html .tmsub>span:first-child{font-size:12.5px;color:var(--mu)}
html .tmsub .tmform{display:inline-flex;gap:3px;margin:0}
html .tmstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 14px;background:var(--p1);border:1px solid var(--ln);border-radius:16px;overflow:hidden}
html .tmstats>div,html .tmstats>div:first-child{display:flex;flex-direction:column;align-items:stretch;gap:2px;padding:12px 16px;min-width:0;border:0}
html .tmstats>div+div{border-left:1px solid var(--ln)}
html .tmstats span,html .tmstats .tmlbl{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11.5px;font-weight:500;color:var(--mu)}
html .tmstats b{font-size:16px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
html .tmstats small{font-size:11.5px;color:var(--mu)}
html .tmstats .tmlink{margin:0;font-size:11.5px;font-weight:600;flex:none}
@media(max-width:560px){
 html .tmstats{grid-template-columns:1fr 1fr}
 html .tmstats>div,html .tmstats>div:first-child{padding:10px 12px}
 html .tmstats>div:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--ln);flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:2px;padding:10px 12px}
 html .tmstats>div:nth-child(3)>span{width:auto}
 html .tmstats b{font-size:14.5px}
}

/* --- 2026-09-27 (b): the squad card's contents share the title's inset; the tab bar fills the card (edit_team_bar.py) --- */
html .tmsquad .tmctl{padding:10px 18px 6px;margin:0}
html .tmsquad .tmgrp{display:flex;width:100%}
html .tmsquad .tmchip{flex:1 1 auto;text-align:center;padding:0 8px}
html .tmsquad .tmhdr{padding:6px 18px 5px}
html .tmsquad .tmrow{padding:8px 18px}
html .tmsquad>.empty{padding:14px 18px}
@media(max-width:720px){html .tmsquad .tmctl{padding:10px 14px 6px}html .tmsquad .tmhdr{padding:6px 14px 5px}html .tmsquad .tmrow{padding:8px 14px}html .tmsquad>.empty{padding:14px}}

/* --- 2026-09-27: the bottom bar stands off the page (edit_tabbar_surface.py). Surface only: buttons untouched. --- */
@media(max-width:720px){
 :root{--tabbg:rgba(240,236,228,.94);--tabln:rgba(23,19,16,.16);--tabsh:0 12px 32px rgba(23,19,16,.22),0 2px 6px rgba(23,19,16,.1),inset 0 1px 0 rgba(255,255,255,.7)}
 html.dark{--tabbg:rgba(3,5,4,.84);--tabln:rgba(255,255,255,.17);--tabsh:0 16px 40px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.09)}
 html body .tabs{-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3)}
 /* the page fades out just above the bar */
 html body.has-tabbar::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(96px + env(safe-area-inset-bottom));z-index:59;pointer-events:none;
  background:linear-gradient(to bottom,transparent,var(--bg) 78%)}
 html body.has-tabbar:has(.scrim.on)::after{display:none}
}

/* --- 2026-09-27: a club opens its page only from its crest and name; the rest of the row opens the match (edit_fx_tap.py) --- */
html .fxteams .fxteam{width:auto;max-width:100%;min-height:36px;padding-top:4px;padding-bottom:4px}
html .fxteams .fxteam:first-child{justify-self:end}
html .fxteams .fxteam:last-child{justify-self:start}

/* --- 2026-09-27: lineup rows show the season so far; the price column is labelled (edit_lineup_ytd.py) --- */
html .fxsec{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
html .fxsec-r{flex:none;white-space:nowrap}

/* --- 2026-09-27: About rows keep a gap after the label; the injury row is two right-aligned lines (edit_injury_row.py) --- */
html .kv{gap:16px}
html .kv>span.mu:first-child{flex:none}
html .kv>b{text-align:right;min-width:0}
html .kv.kvinj{align-items:flex-start}
html .kvv{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;min-width:0}
html .kvv b{color:var(--dn);font-weight:600}
html .kvv small{font-size:11.5px;line-height:1.35;color:var(--mu)}

/* --- 2026-09-27: one clean bar: no stacked blurs (Safari drew them as boxes), solid surface (edit_tabbar_clean.py) --- */
@media(max-width:720px){
 html body .tabs,html body .tabs button{-webkit-backdrop-filter:none;backdrop-filter:none}
 :root{--tabbg:rgb(239,235,227)}
 html.dark{--tabbg:rgb(6,8,7)}
}

/* --- 2026-09-27: no outer shadow on the bar: Safari cut it off at the page bottom into a tinted box (edit_tabbar_noshadow.py) --- */
@media(max-width:720px){
 :root{--tabsh:inset 0 1px 0 rgba(255,255,255,.7);--tabln:rgba(23,19,16,.18)}
 html.dark{--tabsh:inset 0 1px 0 rgba(255,255,255,.07);--tabln:rgba(255,255,255,.2)}
}

/* ===== 2026-09-27: full-app audit polish (edit_audit_polish.py) ===== */
/* dim text readable in both themes (was 2.8:1 light, 3.7:1 dark) */
:root{--dm:#736C64}
html.dark{--dm:rgba(244,241,233,.52)}
/* the page no longer reserves bar room the footer already reserves */
@media(max-width:720px){html body main .page{padding-bottom:36px}}
/* player status: a red word on line two */
html .injw{color:var(--dn);font-weight:650}
/* held by you: one green dot everywhere */
html .tmown,html .fxp-own,html .owndot{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--up);margin-left:6px;vertical-align:middle}
/* player rows: the name ends in ... instead of wrapping over the club */
html .prow .who b{display:flex;align-items:center;min-width:0;white-space:nowrap}
html .prow .who b .pnm{min-width:0;overflow:hidden;text-overflow:ellipsis}
html .prow .who b .pill,html .prow .who b img{flex:none}
@media(max-width:720px){
 html .prow{grid-template-columns:18px minmax(0,1fr) auto 92px}
 html .prow .tbcell:empty{width:0}
}
html .tmwho b,html .fxp-n b{display:flex;align-items:center;min-width:0;white-space:nowrap}
html .tmwho b .pnm{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* "show more" sits inside its card */
html .panel>.showmore{width:calc(100% - 36px);margin:10px 18px 14px}
@media(max-width:720px){html .panel>.showmore{width:calc(100% - 28px);margin:10px 14px 12px}}
/* one switch style: track + raised selection */
html .seg{background:var(--p2);border-radius:12px;padding:3px;gap:2px}
html .seg button{border-radius:9px;color:var(--mu)}
html .seg button.on,html.dark .seg button.on{background:var(--p1);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.14)}
/* player stats: values line up across a row */
html .grid>div{display:flex;flex-direction:column;justify-content:space-between;gap:6px}
/* injury note: tinted panel */
html .tnote.i,html.dark .tnote.i{background:color-mix(in srgb,var(--dn) 12%,transparent);color:var(--tx);border:1px solid color-mix(in srgb,var(--dn) 35%,transparent)}
html .tnote.i b{color:var(--dn)}
html .tnote.i .tni-d{color:var(--tx);font-weight:600}
/* watchlist: rows and header fit a phone */
html .pxc.wlx{display:grid;grid-template-columns:auto auto;column-gap:10px;justify-items:end;align-items:center;text-align:right}
html .pxc.wlx>b{grid-column:1;grid-row:1}
html .pxc.wlx>.since{grid-column:1;grid-row:2;white-space:nowrap;font-size:12px}
html .pxc.wlx>.mu:not(.since){grid-column:1;grid-row:3;white-space:nowrap;font-size:12px}
html .pxc.wlx>.wrm{grid-column:2;grid-row:1/span 3;align-self:center}
@media(max-width:720px){html .panel.watch>.ph>.cnt{display:none}html .panel.watch>.ph h2{white-space:nowrap}html .wlnewbtn{white-space:nowrap}}
/* matches: a numbered circle beside the match (held: green, left; followed: outlined, right) */
html .fxteams{position:relative}
html .fxdot{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;line-height:1;pointer-events:none;font-variant-numeric:tabular-nums}
html .fxdot.h{left:-4px;background:var(--up);color:#fff}
html.dark .fxdot.h{color:#0a0d0c}
html:not(.dark) .fxdot.h{background:#177a45}
html .fxpl-note{opacity:1}
html .fxdot.w{right:-4px;background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1.5px var(--mu)}
/* room for the circles: measured on every fixture, >= 9px clear of the crest from 375px phones up */
@media(max-width:720px){html .fxteams{grid-template-columns:minmax(0,1fr) 66px minmax(0,1fr)}html .fxteams .fxteam{padding-left:3px;padding-right:3px;gap:6px}}
@media(max-width:389px){html .fxteams .fxteam{font-size:12px;gap:5px}html .fxteams .fxteam img{width:16px;height:16px}}
@media(max-width:360px){html .fxrow:not(.dated) .fxdot{top:-9px;transform:none}}
html .fxrow.done.open{opacity:1}
html .card .kv.rw b img.crest{margin-right:7px}
/* team page */
html .tmstats small.up{color:var(--up)}
html .tmstats small.dn{color:var(--dn)}
html .tmf.W{background:#177a45}
html .tmf.D{background:#646c67}
html .tmsort,html .tmlink,html .pn-i{position:relative}
html .tmsort::before,html .tmlink::before,html .pn-i::before{content:"";position:absolute;inset:-12px -6px}
@media(max-width:720px){html .tmchip{min-height:30px}}
/* community */
html .lgstripw>.lgc:only-child{flex:1 1 auto}
html .lgr .n b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html .lgr.static{grid-template-columns:minmax(0,1fr) auto}
html .lgr.static>.r:empty{display:none}
html:not(.dark) .lgf-ic{background:rgba(160,120,0,.12);color:#8a6a00}
html:not(.dark) .lgstrip .big.dn{color:#ff8a8a}
html:not(.dark) .lgstrip .big.up{color:#63d69d}
/* account buttons stay on one line each */
html .prow2 .bb{flex:1 1 auto;white-space:nowrap;min-height:48px}
/* (the phone two-line holdings layout was removed at the owner's request: edit_holdings_table_back.py) */

/* --- 2026-09-27: no fade above the bar (it ended in a hard band across white cards); solid dark top bar (edit_tabbar_nofade.py) --- */
@media(max-width:720px){
 html body.has-tabbar::after{content:none;display:none}
 html.dark .nav{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
 html.dark body.live .daystrip{background:var(--bg)}
}

/* --- 2026-09-27: player header reads name first, then price (edit_player_header.py) --- */
html .hero .phead{display:flex;align-items:center;gap:12px}
html .hero .pcrest{flex:none;display:block;background:none;border:0;padding:0;margin:0;cursor:pointer;line-height:0;border-radius:10px}
html .hero .pcrest img.crest{width:44px;height:44px;margin:0;vertical-align:top}
html .hero .phead-t{min-width:0}
html .hero .phead h1{margin:0;line-height:1.1;overflow-wrap:anywhere}
html .hero .psub{display:flex;flex-wrap:wrap;align-items:center;column-gap:6px;row-gap:4px;margin-top:5px;font-size:13.5px;line-height:1.3;color:var(--mu);font-weight:500}
html .hero .psub .clublink{gap:0;color:var(--tx);font-weight:600;text-decoration:underline;text-decoration-color:var(--ln2);text-decoration-thickness:1px;text-underline-offset:3px}
html .hero .psub .pill{margin-left:2px}
html .hero .pn-row{margin-top:16px}
html .hero .pn-row .pn-i{align-self:center}
@media(max-width:720px){html .hero .pcrest img.crest{width:40px;height:40px}}