:root{
/* A nav valódi magassága; a nav.js méri és írja felül futásidőben. */
--nav-h:94px;
--bg:#07111d;--bg2:#0c1b2e;--bg3:#111e33;--bg4:#182740;
--amber:#f0a500;--amber2:#ffc840;--red:#e63946;--green:#27ae60;
--teal:#2ec4b6;--gray:#8899aa;--light:#dde8f4;--white:#fff;
--border:rgba(255,255,255,.08);--card:rgba(255,255,255,.04);
/* One type scale instead of fourteen ad-hoc sizes. New markup uses these;
existing rules keep their literal values until they are touched. */
--fs-xs:.68rem; --fs-sm:.75rem; --fs-md:.82rem; --fs-lg:.95rem; --fs-xl:1.15rem;
/* 4px rhythm */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
--radius:8px; --radius-sm:6px;
--shadow:0 12px 32px rgba(0,0,0,.5);
/* The interface font. Arial was the single biggest thing making a genuinely
serious analysis tool look like a school project. */
--font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--light);font-family:var(--font);font-size:14px;min-height:100vh;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* Figures line up in columns instead of drifting, which is most of what makes
a stats table read as trustworthy. */
table,.stat,.v,.bp,.mini-stats,.jsy,.win-chip,.loss-chip,.mp-date,.pct,.num{
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* Nothing here is load-bearing motion, so honour the OS setting outright. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* A visible focus ring everywhere, for keyboard users and for screen readers
that follow it. */
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* ── scrollbars ──
The platform default is a light grey slab that sits on a near-black page
looking like a rendering fault. Themed once, globally, so every panel that
scrolls — filter column, scene list, match picker, modals — matches.
Firefox takes the two-colour form; WebKit and Chromium take the parts. */
/* Drawn icons (see icon() in ui-kit.js). They sit on the text baseline and
take the colour of whatever they are inside, so every existing hover and
active rule keeps applying to them without a second set of colour rules. */
.ic{display:inline-block;vertical-align:-0.15em;flex-shrink:0}
button .ic,label .ic{pointer-events:none}
*{scrollbar-width:thin;scrollbar-color:rgba(240,165,0,.4) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(255,255,255,.03);border-radius:99px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px;
border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(240,165,0,.55);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}
/* Set while a modal or overlay is open. */
body.scroll-locked{overflow:hidden}
/* Set while the selected team's match files are still downloading: the old
team's numbers stay visible but are visibly not current, instead of sitting
there fully legible under the new team's name. */
body.data-loading .section.active{opacity:.42;pointer-events:none;filter:saturate(.5);
transition:opacity .15s ease}
/* ── NAV ── */
nav{position:sticky;top:0;z-index:200;background:rgba(7,17,29,.97);
backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-row{display:flex;align-items:center;padding:0 20px;flex-wrap:wrap;gap:10px}
.nav-row-top{border-bottom:1px solid rgba(255,255,255,.05);min-height:44px;justify-content:space-between}
.nav-row-main{min-height:50px;justify-content:space-between}
.logo-block{display:flex;align-items:baseline;gap:8px;padding:10px 0;white-space:nowrap}
.logo{font-size:1rem;font-weight:900;color:var(--amber);letter-spacing:2px}
.logo-sub{font-size:.66rem;color:var(--gray);letter-spacing:.12em;font-weight:600}
.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
scrollbar-width:thin}
.tabs::-webkit-scrollbar{height:3px}
.tabs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.tab{padding:13px 14px;font-size:.73rem;font-weight:700;letter-spacing:.05em;cursor:pointer;
border:none;background:none;color:var(--gray);transition:.2s;position:relative;white-space:nowrap;flex-shrink:0}
.tab:hover{color:var(--light)}
.tab.active{color:var(--amber)}
.tab.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--amber)}
.nav-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.win-chip{background:rgba(39,174,96,.2);color:#4ade80;padding:1px 7px;border-radius:3px;
font-size:.72rem;font-weight:700;font-family:monospace}
.loss-chip{background:rgba(230,57,70,.2);color:#ff6b7a;padding:1px 7px;border-radius:3px;
font-size:.72rem;font-weight:700;font-family:monospace}
/* ── TEAM SELECTOR (top right) ── */
.team-picker{display:flex;align-items:center;gap:8px;padding:8px 0;white-space:nowrap}
.team-picker-label{font-size:.64rem;letter-spacing:.12em;color:var(--gray);font-weight:700}
#team-select,#league-select{background:var(--bg3);border:1px solid var(--border);color:var(--white);
font-size:.82rem;font-weight:700;padding:7px 30px 7px 12px;border-radius:6px;cursor:pointer;
appearance:none;-webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 9px center;background-size:13px;
min-width:140px;max-width:200px}
#team-select:hover,#league-select:hover{border-color:var(--amber)}
#league-select{min-width:120px;max-width:180px}
#team-select:focus{outline:none;border-color:var(--amber)}
/* ── LOGIN SCREEN ──
A belépőkártya középen áll. Mögötte nagyon lassan mozgó fényfoltok adják a
mélységet, a kártya körül pedig egy rotációs gyűrű forog: hat pont lép
körbe, mindig egy világít erősebben — ez a röplabda saját köre, pályarajz
nélkül. Minden CSS, kép nélkül; csökkentett mozgásnál minden megáll. */
.login-screen{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;
justify-content:center;background:var(--bg);padding:24px;overflow:hidden;box-sizing:border-box}
.login-glow{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.login-glow i{position:absolute;display:block;border-radius:50%;filter:blur(80px);opacity:.95}
.login-glow .g1{width:56vmax;height:56vmax;left:-16vmax;top:-20vmax;
background:radial-gradient(circle,rgba(240,165,0,.55),transparent 60%);animation:lg-drift 34s ease-in-out infinite}
.login-glow .g2{width:48vmax;height:48vmax;right:-14vmax;bottom:-16vmax;
background:radial-gradient(circle,rgba(46,196,182,.48),transparent 60%);animation:lg-drift2 41s ease-in-out infinite}
.login-glow .g3{width:34vmax;height:34vmax;right:12vmax;top:-10vmax;
background:radial-gradient(circle,rgba(63,127,214,.40),transparent 62%);animation:lg-drift 47s ease-in-out infinite reverse}
@keyframes lg-drift{0%,100%{transform:translate3d(0,0,0) scale(1)}
50%{transform:translate3d(6vmax,4vmax,0) scale(1.12)}}
@keyframes lg-drift2{0%,100%{transform:translate3d(0,0,0) scale(1.05)}
50%{transform:translate3d(-5vmax,-6vmax,0) scale(.92)}}
.login-center{position:relative;z-index:1;margin:auto}
.login-ringwrap{position:relative;display:flex;align-items:center;justify-content:center;
padding:60px;--ring-r:340px}
.login-ring{position:absolute;inset:0;pointer-events:none;
animation:lr-spin 36s linear infinite}
/* A hat pont a gyűrű mentén. A kártya elfedi a belsejét, így a pontok a
széleken keringenek. */
.lr-dot{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px;border-radius:50%;
background:var(--amber);opacity:.45;box-shadow:0 0 10px 1px rgba(240,165,0,.35);
animation:lr-flash 18s linear infinite}
.lr-dot.d1{transform:rotate(0deg) translate(0,calc(-1 * var(--ring-r)))}
.lr-dot.d2{transform:rotate(60deg) translate(0,calc(-1 * var(--ring-r)));animation-delay:-15s}
.lr-dot.d3{transform:rotate(120deg) translate(0,calc(-1 * var(--ring-r)));animation-delay:-12s}
.lr-dot.d4{transform:rotate(180deg) translate(0,calc(-1 * var(--ring-r)));animation-delay:-9s}
.lr-dot.d5{transform:rotate(240deg) translate(0,calc(-1 * var(--ring-r)));animation-delay:-6s}
.lr-dot.d6{transform:rotate(300deg) translate(0,calc(-1 * var(--ring-r)));animation-delay:-3s}
@keyframes lr-flash{
0%{opacity:1;transform-origin:center;box-shadow:0 0 22px 7px rgba(240,165,0,.75)}
16%{opacity:.45;box-shadow:0 0 10px 1px rgba(240,165,0,.35)}
100%{opacity:.45;box-shadow:0 0 10px 1px rgba(240,165,0,.35)}}
@keyframes lr-spin{to{transform:rotate(360deg)}}
/* Lélegző gyűrűk a kártya mögött. */
/* Körbeforgó világító ív a gyűrűn: ez adja a mozgás fő látványát. */
.lr-arc{position:absolute;left:50%;top:50%;width:calc(var(--ring-r) * 2);height:calc(var(--ring-r) * 2);
margin-left:calc(-1 * var(--ring-r));margin-top:calc(-1 * var(--ring-r));overflow:visible;
animation:lr-spin 12s linear infinite}
.lr-track{fill:none;stroke:rgba(255,255,255,.07);stroke-width:1.2}
.lr-sweep{fill:none;stroke:url(#lrg);stroke-width:2.6;stroke-linecap:round;
stroke-dasharray:150 453;filter:drop-shadow(0 0 6px rgba(240,165,0,.5))}
.lr-pulse{position:absolute;left:50%;top:50%;width:calc(var(--ring-r) * 2);height:calc(var(--ring-r) * 2);
margin-left:calc(-1 * var(--ring-r));margin-top:calc(-1 * var(--ring-r));border-radius:50%;
border:1px solid rgba(240,165,0,.18);animation:lr-breathe 9s ease-out infinite}
.lr-pulse.lr-p2{animation-delay:4.5s;border-color:rgba(46,196,182,.16)}
@keyframes lr-breathe{0%{transform:scale(.86);opacity:0}
35%{opacity:.85}100%{transform:scale(1.18);opacity:0}}
.login-box{position:relative;z-index:2;background:var(--bg2);border:1px solid var(--border);
border-radius:16px;padding:32px 30px;width:100%;max-width:380px;
box-shadow:0 30px 80px rgba(0,0,0,.6);box-sizing:border-box}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:6px;text-align:center}
.login-logo .logo{font-size:1.3rem;font-weight:900;color:var(--amber);letter-spacing:2px}
.login-logo .logo-sub{font-size:.72rem;color:var(--gray);letter-spacing:.14em;font-weight:600}
.login-claim{text-align:center;color:var(--light);font-size:.84rem;margin:0 0 22px;line-height:1.5}
.login-input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--white);
font-size:1rem;padding:12px 14px;border-radius:8px;margin-bottom:12px}
.login-input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(240,165,0,.18)}
.login-input::placeholder{color:var(--gray)}
.login-btn{width:100%;background:var(--amber);color:var(--bg);border:none;font-weight:700;
font-size:.9rem;padding:12px;border-radius:8px;cursor:pointer;margin-top:4px}
.login-btn:hover{background:var(--amber2)}
.login-btn:focus-visible{outline:2px solid var(--amber2);outline-offset:2px}
.login-btn:disabled{opacity:.6;cursor:default}
.login-error{margin-top:12px;padding:10px 12px;background:rgba(230,57,70,.12);
border:1px solid rgba(230,57,70,.35);color:#ff8a95;font-size:.8rem;border-radius:6px;text-align:center}
/* Gépelés közben, háttérbe került fülön és belépés után minden megáll. */
.login-still .login-glow i,
.login-still .lr-dot,
.login-still .lr-pulse,
.login-still .login-ring,
.login-still .lr-arc{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
.login-glow i,.lr-dot,.lr-pulse,.login-ring,.lr-arc{animation:none}
.lr-pulse{opacity:.5;transform:scale(1)}
}
@media (max-width:900px){
.login-ringwrap{--ring-r:270px}
}
@media (max-width:560px){
.login-screen{padding:16px}
.login-ringwrap{padding:34px;--ring-r:200px}
.login-glow i{filter:blur(70px)}
}
/* ── USER / LOGOUT (top right of nav) ── */
.user-picker{display:flex;align-items:center;gap:12px;padding:8px 0;white-space:nowrap;
margin-left:auto;justify-content:flex-end}
.user-email{font-size:.78rem;color:var(--light);font-weight:600;max-width:none;
overflow:hidden;text-overflow:ellipsis;padding:5px 11px;border-radius:6px;
background:rgba(255,255,255,.05);border:1px solid var(--border)}
.logout-btn{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--light);
font-size:.74rem;font-weight:700;padding:7px 12px;border-radius:6px;cursor:pointer;white-space:nowrap}
.logout-btn:hover{border-color:rgba(230,57,70,.5);color:#ff8a95}
/* ── MATCH PICKER (top right, next to team picker) ── */
.match-picker{position:relative;display:flex;align-items:center;gap:10px;padding:10px 0;white-space:nowrap}
.match-picker-btn{background:var(--bg3);border:1px solid var(--border);color:var(--white);
font-size:.83rem;font-weight:700;padding:8px 14px;border-radius:6px;cursor:pointer;white-space:nowrap}
.match-picker-btn:hover{border-color:var(--amber)}
.match-picker-btn.filtered{border-color:var(--amber);color:var(--amber)}
.match-picker-panel{position:absolute;top:100%;right:0;margin-top:6px;background:var(--bg2);
border:1px solid var(--border);border-radius:8px;min-width:290px;max-width:360px;
max-height:min(70vh,520px);z-index:300;box-shadow:0 12px 32px rgba(0,0,0,.5);
display:flex;flex-direction:column;overflow:hidden}
/* Only the match list scrolls. Everything the coach acts on — search, presets,
and above all Alkalmaz — stays on screen however long the list is. */
.match-picker-panel .mp-search,
.match-picker-panel .mp-actions{flex:0 0 auto}
.match-picker-panel .mp-actions{margin:0 12px 10px;padding-bottom:10px}
.match-picker-panel .mp-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 12px 8px;
overscroll-behavior:contain}
.match-picker-panel .mp-foot,
.match-picker-panel .mp-note{flex:0 0 auto}
.match-picker-panel .mp-foot{background:var(--bg2);box-shadow:0 -6px 14px rgba(0,0,0,.35)}
.mp-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.mp-preset{background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.3);color:var(--amber);
font-size:.7rem;font-weight:700;padding:5px 10px;border-radius:5px;cursor:pointer;white-space:nowrap}
.mp-preset:hover{background:rgba(240,165,0,.2)}
.mp-list{display:flex;flex-direction:column;gap:2px}
.mp-item{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--light);cursor:pointer;
padding:6px 4px;border-radius:4px}
.mp-item:hover{background:rgba(255,255,255,.04);color:var(--white)}
.mp-item input{accent-color:#f0a500;cursor:pointer;flex-shrink:0}
/* A fixed-width slot whether or not there is a video, so the dates stay in a
column instead of jittering left and right down the list. */
.mp-vid{width:15px;flex-shrink:0;color:var(--gray);display:flex;align-items:center;justify-content:center}
/* Amber = central video: this match can be shown on a shared match sheet.
Grey = a file on this machine only. */
.mp-vid.central{color:var(--amber)}
.mp-vid.off{color:transparent}
.mp-vid.off svg{display:none}
.mp-item .mp-date{color:var(--gray);font-family:monospace;font-size:.72rem;min-width:76px}
/* ── SECTIONS ── */
.section{display:none;padding:24px 20px;max-width:1300px;margin:0 auto}
.section.active{display:block}
/* ── HERO ── */
.hero{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--border);
border-radius:12px;padding:24px 28px;margin-bottom:22px;position:relative;overflow:hidden}
.hero::after{content:'';position:absolute;right:-80px;top:-80px;width:260px;height:260px;
background:radial-gradient(circle,rgba(240,165,0,.12) 0%,transparent 70%);pointer-events:none}
.hero-tag{font-size:.68rem;letter-spacing:.2em;color:var(--amber);font-weight:700;margin-bottom:6px;text-transform:uppercase}
.hero h1{font-size:2rem;font-weight:900;color:var(--white);line-height:1.1;margin-bottom:10px}
.hero h1 span{color:var(--amber)}
.hero-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:10px}
.meta-m .l{font-size:.65rem;letter-spacing:.1em;color:var(--gray);text-transform:uppercase}
.meta-m .v{font-size:.9rem;font-weight:700;color:var(--white);margin-top:1px}
/* ── UPLOAD TAB ── */
.upload-title{font-size:.85rem;font-weight:700;letter-spacing:.1em;color:#5ec8e6;
text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.upload-title::after{content:'';flex:1;height:1px;background:var(--border)}
.dropzone{border:2px dashed rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.02);
padding:44px 20px;text-align:center;cursor:pointer;transition:.2s;margin-bottom:32px}
.dropzone:hover, .dropzone.drag-over{border-color:var(--amber);background:rgba(240,165,0,.05)}
.dropzone-title{font-size:1.05rem;font-weight:700;color:var(--white);letter-spacing:.03em;margin-bottom:8px}
.dropzone-sub{font-size:.8rem;color:var(--gray)}
.match-list{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.match-row{display:grid;
grid-template-columns:22px 104px minmax(0,1.25fr) minmax(150px,1.55fr) minmax(0,.95fr) minmax(0,190px) 28px;
gap:8px;align-items:center;
padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
.match-row:last-child{border-bottom:none}
.match-row:hover{background:rgba(255,255,255,.02)}
.mr-date{font-size:.82rem;color:var(--gray);font-family:monospace}
.mr-match{font-size:.87rem;color:var(--light)}
.mr-result{font-size:.85rem;color:var(--white);font-weight:700}
.mr-sets{font-weight:400;color:var(--gray);font-size:.78rem;font-family:monospace}
.mr-comp{font-size:.78rem;color:var(--gray)}
.mr-del{background:rgba(230,57,70,.1);border:1px solid rgba(230,57,70,.25);color:#ff6b7a;
width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:1rem;line-height:1;
display:flex;align-items:center;justify-content:center;transition:.2s}
.mr-del:hover{background:rgba(230,57,70,.25)}
#storage-warning{display:none;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:8px;
margin-bottom:16px;background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.3)}
/* ── TABLE ── */
.mt table, .ov-table, .recv-table{width:100%;border-collapse:collapse;font-size:.82rem}
.mt th, .ov-table th, .recv-table th{padding:8px 11px;text-align:left;font-size:.69rem;font-weight:700;
letter-spacing:.08em;text-transform:uppercase;color:var(--gray);border-bottom:1px solid var(--border)}
.mt td, .ov-table td, .recv-table td{padding:8px 11px;border-bottom:1px solid rgba(255,255,255,.04)}
.mt tr:hover td, .ov-table tr:hover td, .recv-table tr:hover td{background:rgba(255,255,255,.025)}
.mt{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow-x:auto}
.profile-grid{display:grid;grid-template-columns:320px 1fr;gap:20px;align-items:center}
.mt table{margin:0}
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:18px}
/* ── ST TITLE ── */
.st{font-size:1.1rem;font-weight:700;color:var(--white);letter-spacing:.04em;
margin:22px 0 14px;display:flex;align-items:center;gap:8px}
.st::after{content:'';flex:1;height:1px;background:var(--border)}
/* ── PLAYER GRID ── */
.player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-bottom:18px}
.player-card{background:var(--card);border:1px solid var(--border);border-radius:9px;
padding:12px 14px;display:flex;gap:10px;align-items:center;transition:.2s}
.player-card:hover{border-color:var(--amber);background:rgba(240,165,0,.06)}
.player-card .num{font-size:1.7rem;font-weight:900;color:var(--amber);min-width:32px;text-align:center}
.player-card .info .name{font-weight:700;font-size:.85rem;color:var(--white)}
.player-card .info .role{font-size:.7rem;margin-top:2px}
.player-card .info .mini-stats{font-size:.7rem;color:var(--gray);margin-top:4px;font-family:monospace}
.rb{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.68rem;font-weight:700}
.rF{background:rgba(240,165,0,.2);color:var(--amber)}
.rL{background:rgba(46,196,182,.2);color:var(--teal)}
.rC{background:rgba(99,102,241,.2);color:#818cf8}
.rS{background:rgba(34,197,94,.2);color:#4ade80}
.rA{background:rgba(251,146,60,.2);color:#fb923c}
/* ── ALERT ── */
.al{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:8px;margin-bottom:12px}
.alr{background:rgba(230,57,70,.1);border:1px solid rgba(230,57,70,.3)}
.ala{background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.3)}
.alg{background:rgba(39,174,96,.1);border:1px solid rgba(39,174,96,.3)}
.alt{background:rgba(46,196,182,.1);border:1px solid rgba(46,196,182,.3)}
.alr .at{color:var(--red)}.ala .at{color:var(--amber)}.alg .at{color:var(--green)}.alt .at{color:var(--teal)}
.at{font-weight:700;font-size:.88rem;margin-bottom:2px}.ad{font-size:.79rem;color:var(--gray);line-height:1.5}
.ai{font-size:1.3rem;flex-shrink:0}
/* ── ATTACK TAB ── */
.atk-selector{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.atk-selector-label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--gray);margin-bottom:7px}
.pos-btn{padding:5px 10px;border-radius:5px;border:1px solid var(--border);background:var(--card);
color:var(--gray);font-size:.7rem;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}
.pos-btn:hover{border-color:var(--amber);color:var(--light)}
.pos-btn.active{background:var(--amber);color:var(--bg);border-color:var(--amber)}
.grade-filter-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:18px;
padding:10px 12px;background:var(--card);border:1px solid var(--border);border-radius:8px}
.grade-filter-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);
color:var(--gray);font-size:.74rem;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}
.grade-filter-btn:hover{border-color:var(--amber);color:var(--light)}
.grade-filter-btn.active{background:var(--amber);color:var(--bg);border-color:var(--amber)}
.atk-btn{display:flex;align-items:center;gap:9px;padding:8px 13px 8px 9px;border-radius:8px;
border:1px solid var(--border);background:var(--card);text-align:left;
color:var(--gray);font-size:.78rem;font-weight:700;cursor:pointer;transition:.2s;white-space:nowrap}
.atk-btn:hover{border-color:var(--amber);color:var(--light)}
.atk-btn.active{background:rgba(240,165,0,.14);border-color:var(--amber);
box-shadow:0 0 0 1px var(--amber) inset}
.atk-btn-jsy{flex:0 0 auto;width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.07);
color:var(--gray);display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:.82rem;font-family:monospace}
.atk-btn.active .atk-btn-jsy{background:var(--amber);color:#12100a}
.atk-btn-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.atk-btn-name{font-size:.82rem;font-weight:700;color:var(--light);white-space:nowrap}
.atk-btn.active .atk-btn-name{color:var(--white)}
.atk-btn-sub{font-size:.66rem;color:var(--gray);white-space:nowrap}
.atk-panel.active{display:block}
@media(max-width:780px){.atk-panel.active{grid-template-columns:1fr}}
/* ── STAT BOX ── */
.sb{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:10px 14px;text-align:center}
.sv{font-size:1.6rem;font-weight:900;color:var(--amber)}
.sl{font-size:.67rem;letter-spacing:.08em;color:var(--gray);text-transform:uppercase}
/* ── BAR ── */
.bw{display:flex;flex-direction:column;gap:5px}
.br{display:flex;align-items:center;gap:8px}
.bl{font-size:.77rem;color:var(--gray);min-width:170px}
.bt{flex:1;height:7px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.bf{height:100%;border-radius:3px;transition:width .6s ease}
.bp{font-family:monospace;font-size:.75rem;color:var(--white);min-width:34px;text-align:right}
/* ── CARD HEADER ── */
.ch{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.ch h3{font-size:.9rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--white)}
/* ── ROTATION GRID ── */
.rg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.rc{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}
.rc .rn{font-size:1.5rem;font-weight:900;color:var(--amber)}
.rc .rs{font-size:.68rem;color:var(--gray);margin-bottom:6px}
.rpr{display:flex;align-items:center;gap:4px;margin-bottom:2px}
.rpd{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.rpn{font-size:.69rem;color:var(--light);flex:1;text-align:left}
.rpp{font-size:.69rem;color:var(--white);font-weight:700;min-width:26px;font-family:monospace}
/* ── SERVE COURT ── */
.serve-court{background:var(--card);border:1px solid var(--border);border-radius:10px;
padding:18px;display:grid;grid-template-columns:280px 1fr;gap:18px;align-items:start;margin-bottom:20px}
@media(max-width:680px){.serve-court{grid-template-columns:1fr}}
/* ── JERSEY / TAG ── */
.jsy{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
background:var(--bg3);border-radius:4px;font-family:monospace;font-size:.77rem;font-weight:700;color:var(--amber)}
.tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:.68rem;font-weight:700;margin-left:4px}
.td{background:var(--red);color:white}.tw{background:var(--amber);color:var(--bg)}
/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:60px 20px;color:var(--gray)}
.empty-title{font-size:1rem;font-weight:700;color:var(--white);margin-bottom:6px}
.empty-desc{font-size:.84rem;max-width:420px;margin:0 auto;line-height:1.5}
/* ── GRADE LEGEND ── */
.gl{color:var(--gray)}
/* ── ANIM ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.section.active .card,.section.active .atk-btn,.section.active .rc,.section.active .player-card{
animation:fadeInUp .3s ease forwards}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE / MOBILE
══════════════════════════════════════════════════════════════ */
/* Tablet and below */
@media(max-width:900px){
.profile-grid{grid-template-columns:1fr}
.rg{grid-template-columns:repeat(2,1fr)}
.mr-modal{max-width:96vw}
}
/* Phones */
@media(max-width:680px){
body{font-size:13px}
.section{padding:16px 12px}
.hero{padding:18px 18px}
.hero h1{font-size:1.5rem}
.hero-meta{gap:14px}
.st{font-size:.95rem;margin:18px 0 12px}
/* Nav: stack rows, shrink logo, let tabs/pickers wrap sanely */
.nav-row{padding:0 10px;gap:6px}
.logo{font-size:.85rem;letter-spacing:1px}
nav .logo-sub{display:none} /* a belépőn megmarad */
.nav-row-main{flex-direction:column;align-items:stretch;gap:6px;padding-top:6px;padding-bottom:6px}
.tabs{width:100%}
.tab{padding:10px 11px;font-size:.68rem}
.nav-filters{width:100%;justify-content:space-between}
.team-picker,.match-picker{flex:1;min-width:0}
#team-select{min-width:0;width:100%}
.match-picker-btn{width:100%}
.team-picker-label{display:none}
.user-email{max-width:150px;font-size:.7rem;padding:4px 8px}
.logout-btn{padding:6px 9px;font-size:.68rem}
/* Grids collapse to 1 column */
.player-grid{grid-template-columns:1fr 1fr}
.rg{grid-template-columns:1fr}
.atk-panel.active{grid-template-columns:1fr}
.serve-court{grid-template-columns:1fr}
.mr-bottom-grid{grid-template-columns:1fr}
.mr-info-grid{grid-template-columns:1fr}
.mr-info-cell{grid-row:auto!important;grid-column:auto!important}
.mr-header{grid-template-columns:1fr;text-align:center}
.mr-logo{margin:0 auto}
.mr-score-box{justify-self:center;width:100%;max-width:260px}
/* Any table becomes horizontally scrollable in place, no wrapper needed */
table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.mr-doc{padding:14px 12px;font-size:9.5px}
.mr-modal-toolbar{padding:8px 10px}
.mr-print-btn,.mr-close-btn{padding:7px 12px;font-size:.75rem}
.sb{padding:6px 10px}
.sv{font-size:1.3rem}
.atk-selector,.pos-selector,.grade-filter-bar{gap:5px}
.pos-btn,.grade-filter-btn{padding:5px 9px;font-size:.68rem}
.atk-btn{padding:6px 10px 6px 7px;gap:7px}
.atk-btn-jsy{width:24px;height:24px;font-size:.74rem}
.atk-btn-name{font-size:.76rem}
.atk-btn-sub{font-size:.61rem}
.login-box{padding:28px 22px}
.match-picker-panel{left:0;right:0;min-width:0;max-width:none}
.match-row{grid-template-columns:22px 1fr auto 32px;
grid-template-areas:"check match match del" "check date result comp" "check yt yt yt";
gap:4px 10px;padding:11px 14px}
.mr-check{grid-area:check;align-self:start;margin-top:2px}
.mr-date{grid-area:date}.mr-match{grid-area:match}.mr-del{grid-area:del}
.mr-result{grid-area:result;text-align:left}.mr-comp{grid-area:comp;text-align:right}
.mr-vid{grid-area:yt;width:100%}
}
@media(max-width:400px){
.player-grid{grid-template-columns:1fr}
}
/* ── MATCH REPORT BUTTON (in overview match table) ── */
.mr-btn{background:rgba(240,165,0,.12);border:1px solid rgba(240,165,0,.35);color:var(--amber);
font-size:.72rem;font-weight:700;padding:5px 11px;border-radius:5px;cursor:pointer;white-space:nowrap}
.mr-btn:hover{background:rgba(240,165,0,.22)}
/* ── MATCH REPORT MODAL/OVERLAY ── */
.mr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;
display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto}
.mr-modal{background:#fff;color:#111;max-width:1000px;width:100%;border-radius:8px;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.5)}
.mr-modal-toolbar{position:sticky;top:0;z-index:5;background:#1a2f55;padding:10px 16px;
display:flex;gap:10px;justify-content:flex-end}
.mr-print-btn,.mr-close-btn{border:none;padding:8px 16px;border-radius:5px;font-weight:700;
font-size:.82rem;cursor:pointer}
.mr-print-btn{background:#f0a500;color:#0a1628}
.mr-close-btn{background:rgba(255,255,255,.15);color:#fff}
/* ── REPORT DOCUMENT (matches DataVolley print layout) ── */
.mr-doc{padding:24px 28px;font-family:Arial,Helvetica,sans-serif;color:#111;font-size:11px}
.mr-header{display:grid;grid-template-columns:70px 1fr 200px;gap:16px;align-items:start;
border-bottom:2px solid #1a2f55;padding-bottom:12px;margin-bottom:12px}
.mr-logo{width:60px;height:60px;border-radius:50%;background:#1a5fb4;display:flex;align-items:center;
justify-content:center;color:#fff;font-size:22px}
.mr-title h1{font-size:17px;font-weight:700;color:#1a2f55;margin-bottom:2px}
.mr-title .sub{font-size:11px;color:#555}
.mr-title .mreport{font-size:11px;font-weight:700;color:#1a2f55;margin-top:6px;
border-top:1px solid #ccc;padding-top:4px;display:inline-block}
.mr-score-box{border:1.5px solid #1a2f55;border-radius:4px;overflow:hidden}
.mr-score-row{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;
font-weight:700;font-size:13px}
.mr-score-row:first-child{border-bottom:1px solid #ccc}
.mr-score-row .val{font-size:16px;color:#1a2f55}
.mr-info-grid{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:0;border:1px solid #ccc;
border-radius:4px;margin-bottom:10px;font-size:10.5px}
.mr-info-cell{padding:6px 10px;border-right:1px solid #eee;border-bottom:1px solid #eee}
.mr-info-cell:last-child{border-right:none}
.mr-info-cell .lbl{color:#888;font-size:9px;text-transform:uppercase;letter-spacing:.03em}
.mr-info-cell .v{font-weight:600;color:#111}
.mr-sets-table{width:100%;border-collapse:collapse;font-size:10px;margin-bottom:14px}
.mr-sets-table th{background:#f0f0f0;border:1px solid #ccc;padding:4px 8px;font-weight:700;color:#333}
.mr-sets-table td{border:1px solid #ddd;padding:4px 8px;text-align:center}
.mr-team-block{margin-bottom:16px}
.mr-team-name{background:#1a2f55;color:#fff;font-weight:700;font-size:12px;padding:5px 10px}
.mr-player-table{width:100%;border-collapse:collapse;font-size:9.3px}
.mr-player-table th{background:#eef1f7;border:1px solid #ccc;padding:3px 4px;font-weight:700;
color:#333;white-space:nowrap;text-align:center}
.mr-player-table td{border:1px solid #e2e2e2;padding:3px 4px;text-align:center;white-space:nowrap}
.mr-player-table td.mr-name{text-align:left;font-weight:600}
.mr-set-box{display:inline-block;width:14px;height:14px;line-height:14px;border:1px solid #999;
border-radius:2px;font-size:8.5px;margin:0 1px}
.mr-set-empty{color:#ccc}
.mr-totals-row td{font-weight:700;background:#f7f7f7;border-top:2px solid #999}
.mr-pointswon-row td{font-size:8.8px;color:#555;text-align:center;border:1px solid #eee}
.mr-coach-row{font-size:10px;padding:5px 10px;background:#fafafa;display:flex;gap:24px}
.mr-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.mr-bottom-box{border:1px solid #ccc;border-radius:4px;padding:10px}
.mr-bottom-box h4{font-size:10.5px;font-weight:700;color:#1a2f55;margin-bottom:8px;
text-transform:uppercase;letter-spacing:.03em}
.mr-bottom-stat{display:flex;justify-content:space-between;font-size:10px;padding:3px 0;
border-bottom:1px dotted #ddd}
.mr-bottom-stat .lbl{color:#666}
.mr-bottom-stat .v{font-weight:700}
.mr-kill-section{margin-top:16px;border:1px solid #ccc;border-radius:4px;padding:12px}
.mr-kill-section h4{font-size:11px;font-weight:700;color:#1a2f55;margin-bottom:10px}
.mr-kill-row{margin-bottom:10px}
.mr-kill-row .kr-title{font-size:9.5px;font-weight:700;color:#444;margin-bottom:4px}
.mr-kill-table{width:100%;border-collapse:collapse;font-size:9.5px}
.mr-kill-table th{background:#f5f5f5;border:1px solid #ddd;padding:3px 6px;font-weight:700}
.mr-kill-table td{border:1px solid #eee;padding:3px 6px;text-align:center}
.mr-legend{margin-top:14px;padding-top:8px;border-top:1px solid #ccc;font-size:8.5px;color:#666;
display:flex;flex-wrap:wrap;gap:14px}
.mr-footer{margin-top:10px;font-size:8.5px;color:#999;text-align:left}
/* The full match report prints by hiding everything else on the page. That rule
used to be unscoped, so it also blanked the match sheet, the only other thing
in the app anybody prints: correct page breaks, no visible content. It now
only applies while printMatchReport() has flagged the body. */
@media print{
body.printing-report *{visibility:hidden}
body.printing-report .mr-overlay, body.printing-report .mr-overlay *{visibility:visible}
body.printing-report .mr-overlay{position:absolute;inset:0;background:#fff;padding:0;display:block !important}
.mr-modal{box-shadow:none;max-width:100%}
body:not(.printing-report) .mr-overlay{display:none !important}
.no-print{display:none!important}
}
/* ── ATTACK MAP: summary table + zoom overlay ── */
@media(max-width:680px){.atk-zoom-box{padding:12px}}
/* ── ATTACK MAP: small-multiple grid (one court per attack code) ── */
@media(min-width:900px){
.atk-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:680px){
.atk-grid,.atk-grid-zoom{grid-template-columns:repeat(2,1fr);gap:6px}
}
/* Firebase connection dot in the nav */
.fb-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:8px;
background:#8899aa;vertical-align:middle;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.fb-dot.ok{background:#27ae60;box-shadow:0 0 6px rgba(39,174,96,.8)}
.fb-dot.warn{background:#f0a500;box-shadow:0 0 6px rgba(240,165,0,.7)}
.fb-dot.bad{background:#e63946;box-shadow:0 0 6px rgba(230,57,70,.7)}
/* ── MATCH-DAY ONE-PAGER ── */
.md-doc{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px 22px;max-width:760px}
.md-public{max-width:760px;margin:0 auto;padding:16px}
.md-head{display:flex;justify-content:space-between;align-items:flex-start;
border-bottom:2px solid var(--amber);padding-bottom:12px;margin-bottom:16px}
.md-kicker{font-size:.64rem;letter-spacing:.2em;color:var(--amber);font-weight:700}
.md-head h2{font-size:1.5rem;color:var(--white);margin:2px 0}
.md-meta{font-size:.74rem;color:var(--gray)}
.md-sec{margin-bottom:18px}
.md-sec h3{font-size:.9rem;color:var(--white);margin-bottom:4px}
.md-sub{font-size:.74rem;color:var(--gray);margin-bottom:8px}
.md-list{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.md-row{display:flex;gap:10px;align-items:flex-start;background:var(--card);
border:1px solid var(--border);border-radius:8px;padding:8px 10px}
.md-hot{border-color:rgba(230,57,70,.5);background:rgba(230,57,70,.08)}
.md-subrow{opacity:.75}
.md-num{font-weight:900;color:var(--amber);min-width:34px;font-size:.95rem}
.md-body{flex:1;font-size:.84rem;color:var(--light)}
.md-role{font-size:.7rem;color:var(--gray)}
.md-note{font-size:.76rem;color:var(--gray);margin-top:2px;line-height:1.45}
.md-tag{font-size:.62rem;font-weight:700;background:var(--red);color:#fff;padding:2px 7px;border-radius:4px;white-space:nowrap}
.md-keys{background:rgba(240,165,0,.07);border:1px solid rgba(240,165,0,.3);border-radius:10px;padding:12px 14px}
.md-keylist{margin:8px 0 0 18px;font-size:.85rem;color:var(--light);line-height:1.6}
.md-keylist li{margin-bottom:5px}
.md-key-edit{outline:none;border-bottom:1px dashed rgba(240,165,0,.45);display:inline-block;min-width:60%;vertical-align:top}
.md-key-edit:focus{border-bottom-color:var(--amber);background:rgba(240,165,0,.08)}
/* Six fixed columns meant 65px cells inside the 430px preview box, which is
where a coach actually looks at this block. auto-fit wraps to two rows of
three instead of shrinking the numbers to nothing. */
.md-rotgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:6px}
.md-rot{background:var(--card);border:1px solid var(--border);border-radius:7px;padding:7px 4px;text-align:center}
.md-rot-n{font-size:.95rem;font-weight:900;color:var(--amber)}
.md-rot-top{font-size:.66rem;color:var(--light);margin-top:2px;line-height:1.25}
.md-rot-pct{font-size:.82rem;font-weight:700;color:var(--white)}
.md-rot-e{font-size:.6rem;color:var(--gray);margin-top:2px}
.md-foot{font-size:.66rem;color:var(--gray);text-align:right;margin-top:14px;
border-top:1px solid var(--border);padding-top:8px}
@media(max-width:680px){
.md-doc{padding:14px}
}
/* ── MATCH-DAY EDITOR ── */
.md-comment{font-size:.76rem;color:var(--light);margin-top:4px;padding:3px 6px;border-radius:5px;
background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.14);min-height:18px;line-height:1.45}
.md-comment:focus{outline:none;border-color:var(--amber);background:rgba(240,165,0,.08)}
.md-comment:empty:before{content:'Írj ide megjegyzést…';color:var(--gray)}
.md-servewrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:8px}
.md-servemain{display:flex;flex-direction:column;gap:6px}
.md-pool{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px;max-height:260px;overflow-y:auto}
.md-pool-h{font-size:.64rem;color:var(--gray);letter-spacing:.06em;margin-bottom:6px;text-transform:uppercase}
.md-poolitem{display:flex;justify-content:space-between;gap:6px;font-size:.76rem;color:var(--light);
background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:6px;padding:5px 7px;margin-bottom:4px;cursor:grab}
.md-poolitem:hover{border-color:var(--amber)}
.md-poolitem span{color:var(--gray)}
.md-row[draggable="true"]{cursor:grab}
.md-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:8px 0}
.md-jersey{width:64px;background:var(--bg3);border:1px solid var(--border);color:var(--white);
padding:5px 8px;border-radius:5px;font-size:.8rem}
.md-hint{font-size:.7rem;color:var(--gray)}
.md-courts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:8px}
.md-courtbox{display:flex;flex-direction:column;gap:6px;align-items:center}
.md-courtbtns{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
@media(max-width:680px){.md-servewrap{grid-template-columns:1fr}}
/* The pool is a sidebar when there is room and a full-width list when there is
not; it must never be the wider of the two. */
.md-servewrap>.md-pool{max-width:100%}
/* drawing tools */
.md-colors{display:inline-flex;gap:4px;margin:0 4px}
.md-colbtn{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.25);cursor:pointer;padding:0}
.md-colbtn.active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.md-courtname{font-size:.78rem;font-weight:700;color:var(--light);text-align:center;min-height:18px;
padding:2px 6px;border-radius:5px;width:100%}
.md-courtname[contenteditable]{border:1px dashed rgba(255,255,255,.16);background:rgba(255,255,255,.03)}
.md-courtname[contenteditable]:focus{outline:none;border-color:var(--amber)}
.md-courtname[contenteditable]:empty:before{content:'Rajz neve…';color:var(--gray);font-weight:400}
.md-courts{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
/* ── ATTACK VISUALISATION (flow + zones) ── */
.atk-head{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.atk-name{display:flex;align-items:center;gap:10px;font-size:1.05rem;color:var(--white)}
.atk-role{font-size:.72rem;color:var(--gray);font-weight:400}
.atk-sentence{margin-top:8px;font-size:.95rem;color:var(--light);line-height:1.55}
.atk-pred{display:inline-block;margin-left:6px;font-size:.72rem;font-weight:700;
border:1px solid;border-radius:20px;padding:1px 9px;white-space:nowrap}
.segbox{display:inline-flex;background:var(--bg3);border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg{border:none;background:none;color:var(--gray);font-size:.78rem;font-weight:700;padding:7px 14px;cursor:pointer}
.seg:hover{color:var(--light)}
.seg.active{background:var(--amber);color:var(--bg)}
.segbox.small .seg{font-size:.72rem;padding:6px 11px}
.chip{border:1px solid var(--border);background:var(--card);color:var(--gray);border-radius:20px;
padding:5px 12px;font-size:.73rem;font-weight:700;cursor:pointer}
.chip:hover{border-color:var(--amber);color:var(--light)}
.chip.active{background:var(--amber);color:var(--bg);border-color:var(--amber)}
.atk-check{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--gray);cursor:pointer}
.atk-check input{accent-color:#f0a500}
.atk-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.atk-courtwrap{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px}
.atk-court{width:100%;display:block}
.atk-zone{transition:stroke .15s}
.atk-zone:hover{stroke:#ffffff88;stroke-width:1.6}
.atk-legend{font-size:.68rem;color:var(--gray);text-align:center;margin-top:8px;line-height:1.4}
.atk-side{display:flex;flex-direction:column;gap:10px;
/* Match the court's height and scroll inside, instead of letting the trend
legend stretch the column and leave a long empty gap under the court. */
max-height:var(--atk-court-h,none);overflow-y:auto;overflow-x:hidden;padding-right:2px}
.atk-side::-webkit-scrollbar{width:6px}
.atk-side::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.atk-side::-webkit-scrollbar-track{background:transparent}
.atk-detail{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.atk-detail-h{font-size:.85rem;font-weight:700;color:var(--amber);margin-bottom:8px}
.atk-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:.78rem}
.atk-detail-grid>div{display:flex;justify-content:space-between;gap:8px;
border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:3px}
.atk-detail-grid span{color:var(--gray)}
.atk-detail-empty{color:var(--gray);font-size:.8rem;text-align:center;padding:20px 12px}
@media(max-width:900px){
.atk-main{grid-template-columns:1fr}
.atk-side{max-height:none;overflow:visible}
.atk-head{grid-template-columns:1fr}
}
/* ── LIGA BENCHMARK TAB ── */
.origin-bar{display:flex;height:26px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.04);
border:1px solid var(--border)}
.origin-seg{height:100%;transition:width .4s ease}
.origin-legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;font-size:.76rem;color:var(--light)}
.origin-item{display:flex;align-items:center;gap:6px}
.origin-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
@media(max-width:780px){
.bm-origin-grid{grid-template-columns:1fr!important}
}
/* ── attack filter chip group labels + data-coverage note ───────────── */
.chip b{font-weight:700;opacity:.65;font-size:.72em;margin-left:3px}
.atk-cover{margin-top:8px;font-size:.72rem;line-height:1.5;color:var(--gray);
background:rgba(255,255,255,.04);border-left:2px solid var(--border);padding:7px 10px;border-radius:4px}
.atk-cover.warn{border-left-color:#f0a500;background:rgba(240,165,0,.08);color:var(--light)}
.atk-cover b{color:var(--light)}
/* ── filter-aware stat cards (Ütési taktika) ────────────────────────── */
.asc{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin:12px 0 16px}
.asc-c{background:var(--bg3);border:1px solid var(--border);border-radius:7px;padding:9px 6px;text-align:center}
.asc-v{font-size:1.15rem;font-weight:800;color:var(--light);line-height:1.15}
.asc-l{font-size:.63rem;letter-spacing:.05em;text-transform:uppercase;color:var(--gray);margin-top:3px}
.asc-s{font-size:.66rem;color:var(--gray);opacity:.75;margin-top:1px}
@media (max-width:900px){.asc{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.asc{grid-template-columns:repeat(2,1fr)}}
/* ── grouped filter panel ───────────────────────────────────────────── */
.fpanel{background:var(--bg2);border:1px solid var(--border);border-radius:9px;
padding:0 0 4px;margin:14px 0 4px;overflow:hidden}
.fp-head{display:flex;align-items:center;gap:10px;padding:8px 14px;
background:rgba(255,255,255,.035);border-bottom:1px solid var(--border)}
.fp-title{font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--amber)}
.fp-active{flex:1;font-size:.71rem;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-clear{background:transparent;border:1px solid var(--border);color:var(--gray);
border-radius:5px;padding:3px 10px;font-size:.68rem;cursor:pointer;font-family:inherit}
.fp-clear:hover{color:var(--light);border-color:var(--gray)}
.fp-row{display:flex;align-items:flex-start;gap:10px;padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.04)}
.fp-row:last-child{border-bottom:none}
.fp-lbl{flex:0 0 92px;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;
color:var(--gray);padding-top:6px}
.fp-ctl{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
@media (max-width:640px){
.fp-row{flex-direction:column;gap:4px}
.fp-lbl{flex:none;padding-top:0}
}
/* seven stat cards now that "Pont" and "Kill%" are merged */
.asc.asc-7{grid-template-columns:repeat(7,1fr)}
@media (max-width:900px){.asc.asc-7{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.asc.asc-7{grid-template-columns:repeat(2,1fr)}}
/* discreet attribution, pinned to the bottom-right of the login screen */
.login-credit{position:absolute;right:16px;bottom:12px;font-size:.68rem;
color:var(--gray);opacity:.28;letter-spacing:.03em;pointer-events:none;user-select:none}
@media (max-width:520px){.login-credit{right:12px;bottom:8px;font-size:.62rem}}
/* ── upload: progress, bulk selection, manual date ──────────────────── */
#upload-progress{margin:10px 0 4px}
.up-bar{height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.up-fill{height:100%;background:var(--amber);border-radius:3px;transition:width .12s linear}
.up-txt{font-size:.72rem;color:var(--gray);margin-top:5px}
.list-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 8px;min-height:30px}
.sel-all{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--gray);cursor:pointer}
.sel-all input{cursor:pointer}
.bulk-bar{display:flex;align-items:center;gap:10px;font-size:.76rem;color:var(--light);flex-wrap:wrap}
.bulk-lg{display:flex;align-items:center;gap:6px;color:var(--gray)}
.bulk-lg select{background:var(--bg3);border:1px solid var(--border);color:var(--light);
font-family:inherit;font-size:.74rem;padding:5px 8px;border-radius:5px;max-width:200px}
.bulk-lg select:hover{border-color:var(--amber)}
.bulk-del{background:rgba(230,57,70,.14);border:1px solid rgba(230,57,70,.45);color:#ff8b95;
border-radius:5px;padding:4px 12px;font-size:.74rem;cursor:pointer;font-family:inherit;font-weight:600}
.bulk-del:hover{background:rgba(230,57,70,.24);color:#fff}
.mr-check{margin-right:2px;cursor:pointer;flex:0 0 auto}
.match-row.no-date{background:rgba(240,165,0,.05)}
.mr-date-in{width:100%;max-width:118px;background:var(--bg3);border:1px solid rgba(240,165,0,.5);
color:var(--light);border-radius:4px;padding:3px 6px;font-size:.74rem;font-family:inherit}
.mr-date-in::placeholder{color:var(--gray);opacity:.6}
.mr-date-in:focus{outline:none;border-color:var(--amber)}
.mr-date-manual{display:flex;align-items:center;gap:4px;color:var(--amber)}
.mr-date-clear{background:none;border:none;color:var(--gray);cursor:pointer;font-size:.9rem;
line-height:1;padding:0 2px;font-family:inherit}
.mr-date-clear:hover{color:var(--red)}
/* upload row: keep every column on its own baseline so nothing drifts */
.mr-match{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mr-result{font-size:.8rem;color:var(--light);min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Set scores such as "25-19 · 23-25 · 25-21 · 25-18" are the widest thing in
the row and were the first to be clipped. A narrower figure and tighter
tracking buy back roughly a fifth of the width at the same point size. */
.mr-sets{color:var(--gray);font-size:.7rem;font-family:var(--font-mono);
letter-spacing:-.02em;white-space:nowrap}
.mr-comp{font-size:.74rem;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.mr-del{justify-self:end}
/* ── full-screen zoom overlay ───────────────────────────────────────── */
.zoom-overlay{position:fixed;inset:0;z-index:400;background:rgba(6,10,16,.88);
display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px)}
.zoom-box{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:14px;
padding:22px 24px 18px;max-width:min(680px,94vw);max-height:92vh;overflow:auto;text-align:center}
.zoom-title{font-size:1.1rem;font-weight:800;color:var(--white)}
.zoom-sub{font-size:.76rem;color:var(--gray);margin-bottom:14px}
.zoom-svg svg{width:100%;height:auto;max-height:70vh}
.zoom-close{position:absolute;top:8px;right:12px;background:none;border:none;color:var(--gray);
font-size:1.5rem;line-height:1;cursor:pointer;font-family:inherit}
.zoom-close:hover{color:var(--light)}
.svz-card{position:relative}
.svz-zoom{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.06);border:1px solid var(--border);
color:var(--gray);border-radius:5px;width:24px;height:24px;font-size:.82rem;line-height:1;
cursor:pointer;font-family:inherit;padding:0}
.svz-zoom:hover{color:var(--amber);border-color:var(--amber)}
/* ── attack tab: right-hand cards ───────────────────────────────────── */
.tdl{display:flex;flex-direction:column;gap:5px}
.tdr{display:grid;grid-template-columns:50px 1fr 74px 44px;gap:7px;align-items:center;
padding:4px 5px;border-radius:5px;cursor:pointer;font-size:.72rem}
.tdr:hover{background:rgba(255,255,255,.04)}
.tdr.on{background:rgba(240,165,0,.12);outline:1px solid rgba(240,165,0,.35)}
.tdr-n{font-weight:700;color:var(--light);font-family:monospace}
.tdr-bar{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.tdr-bar>div{height:100%;border-radius:3px}
.tdr-v{color:var(--gray);white-space:nowrap;font-size:.68rem}
.tdr-e{font-weight:700;text-align:right}
.pcr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:5px 0;
border-bottom:1px solid rgba(255,255,255,.05)}
.pcr:last-of-type{border-bottom:none}
.pcr-l{font-size:.7rem;font-weight:700;grid-column:1}
.pcr-e{font-size:.8rem;font-weight:800;grid-column:2;grid-row:1/3;align-self:center}
.pcr-m{font-size:.72rem;color:var(--light);grid-column:1}
.pcr-x{font-size:.7rem;color:var(--gray);grid-column:1}
.pcv{margin-top:7px;font-size:.7rem;padding:5px 8px;border-radius:4px;line-height:1.4}
.pcv.warn{background:rgba(240,165,0,.12);color:#ffd27a}
.pcv.ok{background:rgba(74,222,128,.1);color:#8ee8ae}
.trl{display:flex;gap:5px;align-items:flex-end;height:96px}
.trb{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.trb-col{width:100%;height:60px;display:flex;align-items:flex-end;background:rgba(255,255,255,.05);border-radius:3px;overflow:hidden}
.trb-col>div{width:100%;border-radius:3px 3px 0 0;min-height:2px}
.trb-v{font-size:.64rem;font-weight:700;color:var(--light)}
.trb-d{font-size:.58rem;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* ── match sheet: sheet tabs, block grid, editing chrome ─────────────── */
/* A mentés és a megosztás a sáv jobb szélén ül. Egy hosszú lapon lefelé görgetve
eltűnt, és a szerkesztés közben pont ez a két gomb az, amit az ember keres —
a lap tetejére visszagörögni érte fölösleges lépés. Odatapad a nav alá. */
.md-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
margin-bottom:12px;padding:10px 0;border-bottom:1px solid var(--border);
position:sticky;top:var(--nav-h);z-index:3;background:var(--bg);
box-shadow:0 6px 14px -10px rgba(0,0,0,.9)}
.md-sheets{display:flex;gap:4px;flex-wrap:wrap}
.md-sheet{background:var(--bg3);border:1px solid var(--border);color:var(--gray);
border-radius:7px 7px 0 0;padding:7px 14px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:inherit}
.md-sheet.active{background:var(--bg2);color:var(--amber);border-color:var(--amber);border-bottom-color:var(--bg2)}
.md-sheet span{outline:none}
.md-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.md-add{background:var(--bg3);border:1px solid var(--border);color:var(--light);border-radius:6px;
padding:6px 10px;font-size:.76rem;font-family:inherit;cursor:pointer}
.md-saved{color:var(--green);font-size:.76rem}
.md-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
.md-blk{position:relative;min-width:0}
.md-blk.full{grid-column:1/-1}
.md-blk.half{grid-column:span 1}
.md-blkbar{display:flex;align-items:center;gap:3px;margin-bottom:4px;opacity:.45;transition:opacity .15s}
.md-blk:hover .md-blkbar{opacity:1}
.md-blkname{flex:1;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--gray)}
.md-blkbar button{background:var(--bg3);border:1px solid var(--border);color:var(--gray);border-radius:4px;
width:22px;height:22px;font-size:.74rem;line-height:1;cursor:pointer;font-family:inherit;padding:0}
.md-blkbar button:hover{color:var(--light);border-color:var(--gray)}
.md-blkbar .md-blkdel:hover{color:var(--red);border-color:var(--red)}
.md-empty{font-size:.74rem;color:var(--gray);padding:14px;border:1px dashed var(--border);border-radius:8px}
.md-free{min-height:44px;font-size:.85rem;line-height:1.55;color:var(--light);outline:none}
.md-headblk{font-size:1.05rem;font-weight:800;color:var(--white);padding:10px 0 2px;
border-bottom:2px solid var(--amber);margin-bottom:4px}
.md-pick{background:var(--bg3);border:1px solid var(--border);color:var(--light);border-radius:5px;
padding:4px 8px;font-size:.76rem;font-family:inherit;margin-bottom:6px}
.md-zonegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.md-zonecard{background:rgba(255,255,255,.03);border-radius:7px;padding:8px}
.md-zonename{font-size:.72rem;font-weight:700;color:var(--light);margin-bottom:4px}
@media (max-width:820px){
.md-grid{grid-template-columns:1fr}
.md-blk.half,.md-blk.full{grid-column:1/-1}
.md-bar{flex-direction:column;align-items:stretch;position:static;box-shadow:none}
.md-actions{justify-content:flex-start}
.md-blkbar{opacity:1}
}
@media print{
.md-bar,.md-blkbar,.md-add,.md-pick{display:none!important}
.md-grid{grid-template-columns:repeat(2,1fr)}
}
/* trend verdict badge */
.trv{display:flex;align-items:baseline;gap:7px;padding:7px 10px;border-radius:6px;
border:1px solid;margin-bottom:9px;flex-wrap:wrap}
.trv-a{font-size:.85rem}
.trv-t{font-size:.86rem;font-weight:800;letter-spacing:.06em}
.trv-d{font-size:.68rem;color:var(--gray);margin-left:auto;white-space:nowrap}
.md-key-empty:empty::before{content:attr(data-ph);color:var(--gray);opacity:.6;font-style:italic}
/* upload row: no column may push into its neighbour */
.match-row>*{min-width:0}
.mr-date{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* match sheet: clickable tabs (no inline editor swallowing the click) */
.md-sheet{white-space:nowrap;user-select:none}
.md-sheet:hover{color:var(--light);border-color:var(--gray)}
.md-save.dirty{border-color:var(--amber);color:var(--amber);font-weight:700}
.atk-courtwrap{position:relative}
.atk-zoombtn{z-index:2}
.zoom-box.wide{max-width:min(900px,96vw)}
/* ── match sheet toolbar: state is readable at a glance ──────────────── */
.md-save{border-radius:6px;padding:7px 16px;font-size:.78rem;font-weight:700;
cursor:pointer;font-family:inherit;border:1px solid;transition:background .15s}
.md-save.dirty{background:rgba(230,57,70,.18);border-color:#e63946;color:#ff8b95}
.md-save.dirty:hover{background:rgba(230,57,70,.3);color:#fff}
.md-save.clean{background:rgba(74,222,128,.14);border-color:#4ade80;color:#8ee8ae;cursor:default}
.md-share{background:var(--amber);border:1px solid var(--amber);color:#12100a;border-radius:6px;
padding:7px 18px;font-size:.78rem;font-weight:800;cursor:pointer;font-family:inherit}
.md-share:hover{filter:brightness(1.1)}
.pub-ok{background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.4);
border-radius:8px;padding:10px 14px;margin-top:4px}
.pub-h{font-size:.82rem;font-weight:700;color:#8ee8ae;margin-bottom:4px}
.pub-url{font-size:.78rem;color:var(--light);word-break:break-all;font-family:monospace}
.pub-note{font-size:.7rem;color:var(--gray);margin-top:5px}
/* shared read-only page */
.pub-tabs{display:flex;gap:4px;flex-wrap:wrap;padding:12px 14px 0;max-width:1100px;margin:0 auto}
.pub-tab{flex:1 1 auto;min-width:110px;background:var(--bg3);border:1px solid var(--border);
color:var(--gray);border-radius:8px 8px 0 0;padding:11px 12px;font-size:.82rem;font-weight:700;
cursor:pointer;font-family:inherit}
.pub-tab.active{background:var(--bg2);color:var(--amber);border-color:var(--amber);border-bottom-color:var(--bg2)}
/* auto-fit, not a viewport breakpoint. The "mobile view" here is the 430px
preview box on a 1600px monitor, so a @media rule never fired and the chart
was squeezed into a 240px column next to a 190px list. auto-fit measures the
container, so it stacks correctly in the preview, in a half-width block and
on a real phone alike — chart on top, numbers underneath. */
.md-radar{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:14px;align-items:center}
.md-radar>:first-child{display:flex;justify-content:center}
.md-radar svg{max-width:300px}
.md-jersey{background:var(--bg3);border:1px solid var(--border);color:var(--light);
border-radius:5px;padding:5px 8px;font-size:.8rem;font-family:inherit;min-width:64px}
/* ── upload: per-match league override ──────────────────────────────── */
.mr-league{width:100%;max-width:170px;background:var(--bg3);border:1px solid var(--border);
color:var(--gray);border-radius:5px;padding:4px 6px;font-size:.73rem;font-family:inherit;cursor:pointer}
.mr-league.manual{border-color:rgba(240,165,0,.55);color:var(--amber)}
.mr-league:focus{outline:none;border-color:var(--amber)}
.match-row.no-league{background:rgba(230,57,70,.06)}
.match-row.no-league .mr-league{border-color:rgba(230,57,70,.5);color:#ff8b95}
/* ── users tab ──────────────────────────────────────────────────────── */
.nu-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.nu-form .login-input{flex:1 1 240px;min-width:200px}
.nu-lgs{display:flex;gap:12px;flex-wrap:wrap}
.nu-lg{display:flex;align-items:center;gap:5px;font-size:.78rem;color:var(--light);cursor:pointer;white-space:nowrap}
.nu-lg input{cursor:pointer}
/* ── match sheet: sheet management + share feedback ──────────────────── */
.md-sheet-add{padding:7px 12px;color:var(--amber);font-size:.9rem;line-height:1}
.md-share.busy{background:rgba(240,165,0,.25);color:var(--amber);cursor:wait}
.md-share.done{background:#4ade80;border-color:#4ade80;color:#0b2417}
.md-share.failed{background:rgba(230,57,70,.2);border-color:#e63946;color:#ff8b95}
.load-chip{font-size:.7rem;color:var(--amber);background:rgba(240,165,0,.12);
border:1px solid rgba(240,165,0,.35);border-radius:6px;padding:4px 10px;white-space:nowrap}
/* ── per-set breakdown + data coverage ──────────────────────────────── */
.setbrk td:first-child,.setbrk th:first-child{text-align:left}
.setbrk-vol td{border-top:1px solid var(--border);padding-top:8px}
.cov-row{display:grid;grid-template-columns:minmax(0,1fr) 2fr 46px 74px;gap:10px;
align-items:center;margin-bottom:9px;font-size:.78rem}
.cov-row:last-child{margin-bottom:0}
.cov-l{color:var(--light);min-width:0}
.cov-bar{height:7px;background:rgba(255,255,255,.07);border-radius:4px;overflow:hidden}
.cov-bar>div{height:100%;border-radius:4px}
.cov-v{font-weight:700;text-align:right}
.cov-n{color:var(--gray);font-size:.7rem;text-align:right}
.cov-warn{margin-top:12px;padding:8px 11px;border-radius:5px;font-size:.75rem;line-height:1.5;
background:rgba(230,57,70,.1);border-left:2px solid #e63946;color:var(--light)}
@media (max-width:600px){.cov-row{grid-template-columns:minmax(0,1fr) 44px 66px;gap:6px}.cov-bar{display:none}}
/* ── sub-zone quadrant grid ─────────────────────────────────────────── */
.sz-wrap{margin-top:8px}
.sz-net{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);
text-align:center;border-bottom:2px solid rgba(240,165,0,.5);padding-bottom:2px;margin-bottom:3px}
.sz-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.sz-c{display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:8px 4px;border-radius:3px;border:1px solid var(--border)}
.sz-k{font-size:.6rem;color:var(--gray);letter-spacing:.08em}
.sz-v{font-size:.82rem;font-weight:800;color:var(--light)}
.sz-note{font-size:.66rem;color:var(--gray);margin-top:5px;line-height:1.4}
/* ── offline / update banners ───────────────────────────────────────── */
.load-chip.offline{color:#ff8b95;background:rgba(230,57,70,.14);border-color:rgba(230,57,70,.4)}
.sw-update{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:500;
display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--amber);
border-radius:10px;padding:10px 16px;font-size:.8rem;color:var(--light);
box-shadow:0 6px 24px rgba(0,0,0,.45)}
.sw-update button{background:var(--amber);border:none;color:#12100a;border-radius:6px;
padding:6px 14px;font-size:.78rem;font-weight:800;cursor:pointer;font-family:inherit}
.pub-offline{max-width:1100px;margin:12px auto 0;padding:8px 14px;border-radius:8px;
background:rgba(240,165,0,.12);border:1px solid rgba(240,165,0,.4);
color:var(--amber);font-size:.78rem;text-align:center}
/* ── admin dropdown in the tab bar ──────────────────────────────────── */
.tab-menu{position:relative;display:inline-block}
.tab-parent .caret{font-size:.9em;opacity:.85;margin-left:5px;line-height:1}
.tab-drop{position:fixed;z-index:400;min-width:170px;
background:var(--bg2);border:1px solid var(--amber);border-radius:0 8px 8px 8px;
box-shadow:0 10px 28px rgba(0,0,0,.55);padding:5px;display:none}
.tab-drop.open{display:block}
.tab-drop button{display:block;width:100%;text-align:left;background:none;border:none;
color:var(--light);font-family:inherit;font-size:.82rem;padding:9px 12px;border-radius:5px;cursor:pointer}
.tab-drop button:hover{background:rgba(240,165,0,.14);color:var(--amber)}
/* ── league chooser shown right after login ─────────────────────────── */
.league-gate{position:fixed;inset:0;z-index:450;display:flex;align-items:center;justify-content:center;
padding:20px;background:radial-gradient(circle at 30% 20%,rgba(240,165,0,.07) 0%,transparent 55%),rgba(6,10,16,.96)}
.lg-box{width:100%;max-width:440px;background:var(--bg2);border:1px solid var(--border);
border-radius:14px;padding:26px 24px}
.lg-title{font-size:1.15rem;font-weight:800;color:var(--white);margin-bottom:4px}
.lg-sub{font-size:.78rem;color:var(--gray);margin-bottom:18px}
.lg-list{display:flex;flex-direction:column;gap:8px}
.lg-item{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
background:var(--bg3);border:1px solid var(--border);border-radius:9px;padding:13px 16px;
cursor:pointer;font-family:inherit;text-align:left;transition:border-color .15s,background .15s}
.lg-item:hover{border-color:var(--amber);background:rgba(240,165,0,.08)}
.lg-item.empty{opacity:.5}
.lg-name{font-size:.92rem;font-weight:700;color:var(--light)}
.lg-meta{font-size:.72rem;color:var(--gray)}
/* ── team gate ──
Same box as the league gate, one step further in. Sits just under it in the
stack so the two can never fight if both ever appear at once. */
.team-gate{position:fixed;inset:0;z-index:449;display:flex;align-items:center;justify-content:center;
padding:20px;background:radial-gradient(circle at 30% 20%,rgba(240,165,0,.07) 0%,transparent 55%),rgba(6,10,16,.96)}
.tg-search{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--light);
border-radius:7px;padding:9px 12px;font-size:.85rem;font-family:inherit;margin-bottom:12px;
box-sizing:border-box}
.tg-search:focus{outline:none;border-color:var(--amber)}
/* A league can be twenty clubs, and a modal that grows past the viewport puts
the last few out of reach on a phone. */
.tg-list{max-height:min(52vh,420px);overflow-y:auto}
.tg-skip{display:block;width:100%;margin-top:14px;background:none;border:none;color:var(--gray);
font-size:.76rem;font-family:inherit;cursor:pointer;padding:6px}
.tg-skip:hover{color:var(--light)}
/* open on hover for mouse users; the click handler stays for touch devices */
@media (hover:hover) and (pointer:fine){
.tab-menu:hover .tab-parent{color:var(--amber)}
}
/* ── search bars (match picker + upload list) ───────────────────────── */
.mp-search{position:relative;padding:8px 10px 4px}
.mp-search input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--light);
border-radius:6px;padding:7px 28px 7px 10px;font-size:.8rem;font-family:inherit;box-sizing:border-box}
.mp-search input:focus{outline:none;border-color:var(--amber)}
.mp-clear{position:absolute;right:16px;top:12px;background:none;border:none;color:var(--gray);
font-size:1.1rem;line-height:1;cursor:pointer;font-family:inherit;padding:0 4px}
.mp-clear:hover{color:var(--light)}
.mp-empty{padding:18px 12px;text-align:center;color:var(--gray);font-size:.78rem}
.upload-filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0 10px}
.up-search{flex:1 1 260px;min-width:180px;background:var(--bg3);border:1px solid var(--border);
color:var(--light);border-radius:6px;padding:7px 11px;font-size:.8rem;font-family:inherit}
.up-search:focus{outline:none;border-color:var(--amber)}
.up-lgfilter{background:var(--bg3);border:1px solid var(--border);color:var(--light);
border-radius:6px;padding:7px 10px;font-size:.78rem;font-family:inherit;cursor:pointer}
.up-count{font-size:.72rem;color:var(--gray);white-space:nowrap}
/* ── keyboard help ──────────────────────────────────────────────────── */
.kbd-help{position:fixed;inset:0;z-index:520;display:flex;align-items:center;justify-content:center;
background:rgba(6,10,16,.85);padding:20px}
.kbd-box{position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:12px;
padding:22px 26px;min-width:290px}
.kbd-title{font-size:1rem;font-weight:800;color:var(--white);margin-bottom:14px}
.kbd-row{display:flex;align-items:center;gap:14px;margin-bottom:9px;font-size:.82rem;color:var(--light)}
.kbd-row kbd{display:inline-block;min-width:56px;text-align:center;background:var(--bg3);
border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:3px 8px;
font-family:monospace;font-size:.78rem;color:var(--amber)}
/* Court gets the space now that the right column is fixed; the SVG was
capped at a size that left the card half empty on a wide screen. */
.atk-courtwrap svg{width:100%;height:auto;max-width:440px;margin:0 auto;display:block}
.atk-side .card{width:100%;box-sizing:border-box}
/* trend: numbered columns + a legend, so opponent names stay readable */
.trleg{margin-top:8px;display:flex;flex-direction:column;gap:3px}
.trg{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:.7rem}
.trg-n{width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.07);
color:var(--gray);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.62rem}
.trg-o{color:var(--light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trg-v{font-weight:700}
.trb-d{font-size:.64rem;color:var(--gray)}
/* ── match sheet: fixture header, preview mode, export ───────────────── */
.md-fixture{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:3px 0 2px}
.md-fx{font-size:.82rem;color:var(--amber);font-weight:600;outline:none;
border-bottom:1px dashed transparent;min-width:60px}
.md-fx[contenteditable="true"]:hover,.md-fx[contenteditable="true"]:focus{border-bottom-color:rgba(240,165,0,.5)}
.md-fx-sep{color:var(--gray);font-size:.8rem}
.md-prevnote{background:rgba(240,165,0,.12);border:1px solid rgba(240,165,0,.4);color:var(--amber);
border-radius:8px;padding:8px 14px;font-size:.78rem;margin-bottom:12px;text-align:center}
/* The way into editing, and the only control on the bar that changes what the
whole page is for — so it is the one that looks like a button rather than
another item in a row of grey pills. */
.md-editbtn{display:inline-flex;align-items:center;gap:6px;background:var(--amber);
border:1px solid var(--amber);color:#12100a;font-family:inherit;font-size:.78rem;
font-weight:800;padding:8px 14px;min-height:36px;border-radius:var(--radius-sm);
cursor:pointer;white-space:nowrap}
.md-editbtn:hover{background:var(--amber2)}
/* The green "done" state is gone: this button switches view, it does not
confirm anything, and green next to a save button read as "saved". */
@media print{ .md-editbtn{display:none !important} }
.md-editnote{background:rgba(240,165,0,.12);border:1px solid rgba(240,165,0,.4);color:var(--amber);
border-radius:8px;padding:8px 14px;font-size:.78rem;margin-bottom:12px;text-align:center}
#md-preview.previewing{max-width:430px;margin:0 auto;border:1px solid var(--border);
border-radius:14px;padding:10px;background:rgba(255,255,255,.02)}
#md-preview.previewing .md-grid{grid-template-columns:1fr}
#md-preview.previewing .md-blk.half,#md-preview.previewing .md-blk.full{grid-column:1/-1}
/* html2canvas snapshots the live DOM, so anything interactive is hidden first */
.md-doc.exporting .md-blkbar,.md-doc.exporting .md-pick,
.md-doc.exporting .md-tools,.md-doc.exporting .md-courtbtns{display:none!important}
/* ── shared page: fixture header + expiry notice ─────────────────────── */
.pub-head{max-width:1100px;margin:0 auto;padding:16px 14px 4px}
.pub-head-t{font-size:1.05rem;font-weight:800;color:var(--white)}
.pub-head-d{font-size:.8rem;color:var(--amber);margin-top:2px}
.pub-expired{max-width:420px;margin:18vh auto;text-align:center;padding:0 20px}
.pub-expired-t{font-size:1.1rem;font-weight:800;color:var(--light);margin-bottom:8px}
.pub-expired-d{font-size:.85rem;color:var(--gray);line-height:1.6}
/* ── login: visible labels, reset link, readable footer ─────────────── */
.login-label{display:block;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;
color:var(--gray);margin:0 0 5px;text-align:left}
.login-input+.login-label{margin-top:14px}
.login-link{background:none;border:none;color:var(--amber);font-family:inherit;font-size:.78rem;
cursor:pointer;padding:10px 4px 0;text-decoration:underline;width:100%}
.login-link:hover{color:#ffd27a}
.login-help{margin-top:14px;font-size:.74rem;color:var(--gray);line-height:1.55;text-align:left;
border-top:1px solid var(--border);padding-top:12px}
.login-error.ok{color:#8ee8ae;background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.4)}
/* was 28% opacity — legible now while still staying out of the way */
.login-credit{opacity:.55;color:var(--light)}
/* save button states */
.md-save.saving{background:rgba(240,165,0,.16);border-color:var(--amber);color:var(--amber);cursor:wait}
.md-save.failed{background:rgba(230,57,70,.2);border-color:#e63946;color:#ff8b95}
.md-blkbar button:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
/* ── mobile navigation: panels instead of hidden horizontal scroll ───── */
.nav-burger,.filter-toggle{display:none}
@media (max-width:900px){
.nav-row-main{flex-wrap:wrap;gap:8px;align-items:center;position:relative}
.nav-burger{display:flex;align-items:center;gap:8px;background:var(--bg3);
border:1px solid var(--border);color:var(--light);border-radius:8px;
padding:9px 13px;font-family:inherit;cursor:pointer;flex:1 1 auto;min-width:0}
.nav-burger span{display:block;width:15px;height:2px;background:var(--amber);border-radius:1px;
box-shadow:0 5px 0 var(--amber),0 -5px 0 var(--amber);margin-right:4px}
.nav-burger span+span,.nav-burger span+span+span{display:none}
.nav-burger b{font-size:.74rem;font-weight:800;letter-spacing:.05em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nav-burger[aria-expanded="true"]{border-color:var(--amber)}
.filter-toggle{display:flex;align-items:center;gap:6px;background:var(--bg3);
border:1px solid var(--border);color:var(--light);border-radius:8px;
padding:9px 13px;font-size:.74rem;font-weight:700;font-family:inherit;cursor:pointer;
flex:0 0 auto}
.filter-toggle[aria-expanded="true"]{border-color:var(--amber);color:var(--amber)}
.fb-count{background:var(--amber);color:#12100a;border-radius:9px;padding:1px 6px;
font-size:.64rem;font-weight:800}
/* tabs become a dropdown list */
#nav-tabs{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:300;
flex-direction:column;background:var(--bg2);border:1px solid var(--amber);border-radius:10px;
padding:6px;gap:2px;overflow:visible;box-shadow:0 12px 30px rgba(0,0,0,.55)}
#nav-tabs.open{display:flex}
#nav-tabs .tab{width:100%;text-align:left;border-radius:6px;padding:11px 13px;font-size:.8rem}
#nav-tabs .tab.active{background:rgba(240,165,0,.15)}
.tab-menu{width:100%}
.tab-menu .tab-parent{width:100%;text-align:left}
/* filters become a panel */
.nav-filters{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:290;
flex-direction:column;align-items:stretch;gap:10px;background:var(--bg2);
border:1px solid var(--amber);border-radius:10px;padding:12px;
box-shadow:0 12px 30px rgba(0,0,0,.55)}
.nav-filters.open{display:flex}
.nav-filters .team-picker,.nav-filters .match-picker{display:flex;flex-direction:column;
align-items:stretch;gap:5px;width:100%}
.nav-filters select,.match-picker-btn{width:100%;max-width:none;min-width:0;box-sizing:border-box}
.match-picker-panel{position:static;width:100%;min-width:0;max-width:none;margin-top:6px;
max-height:min(60vh,460px)}
}
/* ── data-scope badges ──────────────────────────────────────────────── */
.scope{display:inline-block;vertical-align:middle;margin-left:8px;padding:2px 8px;border-radius:11px;
font-size:.63rem;font-weight:700;letter-spacing:.03em;text-transform:none;white-space:nowrap;
border:1px solid;cursor:help}
.scope-all{color:var(--gray);border-color:var(--border);background:rgba(255,255,255,.04)}
.scope-filtered{color:var(--amber);border-color:rgba(240,165,0,.5);background:rgba(240,165,0,.1)}
.scope-season{color:#8bb4f7;border-color:rgba(139,180,247,.45);background:rgba(139,180,247,.1)}
.scope-league{color:#c084fc;border-color:rgba(192,132,252,.45);background:rgba(192,132,252,.1)}
@media (max-width:600px){.scope{display:block;margin:5px 0 0;width:fit-content}}
/* ── match picker footer: staged selection with explicit apply ───────── */
.mp-foot{display:flex;align-items:center;gap:8px;padding:9px 10px;border-top:1px solid var(--border);
background:rgba(255,255,255,.02)}
.mp-count{flex:1;font-size:.72rem;color:var(--gray);white-space:nowrap}
.mp-reset,.mp-apply{border-radius:6px;padding:6px 12px;font-size:.74rem;font-weight:700;
font-family:inherit;cursor:pointer;border:1px solid var(--border);background:var(--bg3);color:var(--gray)}
.mp-reset:hover{color:var(--light);border-color:var(--gray)}
.mp-apply.on{background:var(--amber);border-color:var(--amber);color:#12100a}
.mp-apply:disabled{opacity:.45;cursor:default}
.mp-note{padding:8px 11px;font-size:.68rem;color:var(--gray);line-height:1.5;
border-top:1px solid rgba(255,255,255,.05)}
/* ── benchmark: metric picker + pinned team column ───────────────────── */
/* The metric picker is a phone accommodation: nine columns do not fit on a
handset, so it narrows the table to one. On anything wider all nine fit and
the picker only stands between the coach and the comparison. */
.bench-pick{display:none;align-items:center;gap:9px;margin:0 0 10px}
@media (max-width:900px){ .bench-pick{display:flex} }
.bench-pick-l{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
#bench-metric{background:var(--bg3);border:1px solid var(--border);color:var(--light);
border-radius:6px;padding:6px 10px;font-size:.78rem;font-family:inherit;cursor:pointer;
max-width:100%}
.bench-wrap{position:relative}
.bench-table .bench-team{position:sticky;left:0;z-index:2;background:var(--card);
box-shadow:1px 0 0 var(--border)}
.bench-table tr:hover .bench-team{background:var(--bg3)}
@media (max-width:700px){
.bench-pick{flex-direction:column;align-items:stretch;gap:5px}
#bench-metric{width:100%}
.bench-table .bench-team{max-width:132px;min-width:132px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.bench-table th,.bench-table td{padding:7px 8px;font-size:.74rem}
}
/* ── priority summary + collapsible sections ────────────────────────── */
.prio{background:linear-gradient(180deg,rgba(240,165,0,.1),rgba(240,165,0,.03));
border:1px solid rgba(240,165,0,.35);border-radius:11px;padding:14px 18px;margin:0 0 20px}
.prio-h{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
color:var(--amber);margin-bottom:10px}
.prio-l{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.prio-l li{color:var(--light)}
.prio-t{font-size:.88rem;display:block}
.prio-s{font-size:.74rem;color:var(--gray);display:block;margin-top:1px}
.tiny-sample{display:inline-block;margin-left:5px;padding:1px 6px;border-radius:9px;
font-size:.62rem;font-weight:700;color:#ffd27a;background:rgba(240,165,0,.14);
border:1px solid rgba(240,165,0,.4);cursor:help}
/* ── confidence chips ──
One vocabulary for "how much is this built on", so the same number of events
is described the same way on every tab. Colour carries a hint, the words
carry the meaning — the count is always spelled out beside them. */
.conf{display:inline-block;margin-left:5px;padding:1px 7px;border-radius:9px;
font-size:.62rem;font-weight:700;white-space:nowrap;vertical-align:middle;
font-variant-numeric:tabular-nums}
.conf-low{background:rgba(255,107,122,.13);color:#ff9aa4}
.conf-fair{background:rgba(240,165,0,.13);color:var(--amber)}
.conf-good{background:rgba(74,222,128,.12);color:#7fe0a0}
@media print{ .conf{border:1px solid #999;color:#333 !important;background:none} }
.coll{margin:22px 0 0}
.coll-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-bottom:7px;
border-bottom:1px solid var(--border);margin-bottom:12px}
.coll-t{font-size:.95rem;font-weight:800;color:var(--white)}
.coll-b{margin-left:auto;background:var(--bg3);border:1px solid var(--border);color:var(--gray);
border-radius:6px;padding:4px 11px;font-size:.7rem;font-family:inherit;cursor:pointer}
.coll-b:hover{color:var(--light);border-color:var(--gray)}
.coll-b:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
/* ── match report on a phone ─────────────────────────────────────────
These tables are genuinely wide (per-player reception, attack and block
columns), so horizontal scrolling stays — but the player's name is pinned
to the left edge, and the padding tightens, so a row can be read without
scrolling back and forth to see whose numbers they are. */
.mr-player-table,.mr-kill-table{position:relative}
/* The report modal is a LIGHT document (.mr-modal is #fff on #111 text), so
these cells must use light values. They used to take var(--card) and
var(--bg3) from the dark app theme: --card is 4% white and looked right by
accident over the white page, but --bg3 is opaque navy, so hovering a row
painted the player's name black-on-black. Literal colours here, matching the
table's own header tint, because this table exists nowhere else. */
.mr-player-table td.mr-name,.mr-player-table th:first-child,
.mr-kill-table td:first-child,.mr-kill-table th:first-child{
position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 #ccc}
.mr-player-table th:first-child,.mr-kill-table th:first-child{background:#eef1f7}
.mr-player-table tr:hover td,.mr-player-table tr:hover td.mr-name{background:#eef4fb;color:#111}
.mr-player-table tr.mr-totals-row:hover td{background:#eceff5}
@media (max-width:760px){
.mr-player-table,.mr-kill-table,.mr-sets-table{font-size:.72rem}
.mr-player-table th,.mr-player-table td,
.mr-kill-table th,.mr-kill-table td,
.mr-sets-table th,.mr-sets-table td{padding:5px 6px;white-space:nowrap}
.mr-player-table td.mr-name,.mr-player-table th:first-child,
.mr-kill-table td:first-child,.mr-kill-table th:first-child{
max-width:112px;min-width:112px;overflow:hidden;text-overflow:ellipsis}
.mr-set-box{min-width:18px;padding:1px 3px;font-size:.66rem}
/* a visible hint that there is more to the right */
.mr-scroll{position:relative}
.mr-scroll::after{content:'';position:absolute;top:0;right:0;bottom:0;width:22px;
background:linear-gradient(90deg,transparent,rgba(10,20,36,.85));pointer-events:none}
}
/* ── serve-target heat map ──────────────────────────────────────────── */
.szw{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:start;
background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px}
.szw-side{display:flex;flex-direction:column;gap:10px}
.szw-card{border-radius:9px;padding:11px 14px;border:1px solid}
.szw-card.best{background:rgba(230,57,70,.1);border-color:rgba(230,57,70,.5)}
.szw-card.avoid{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.4)}
.szw-k{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.szw-v{font-size:1.05rem;font-weight:800;color:var(--white);margin:2px 0 3px}
.szw-d{font-size:.75rem;color:var(--gray);line-height:1.5}
.szw-note{font-size:.76rem;color:var(--gray);line-height:1.5}
.serve-targets{display:flex;flex-direction:column;gap:10px;margin-top:16px}
@media (max-width:760px){.szw{grid-template-columns:1fr}}
/* rotation chips + zone drill-down on the serve map */
.szw-rots{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px}
.szw-chip{background:var(--bg3);border:1px solid var(--border);color:var(--gray);
border-radius:6px;padding:5px 11px;font-size:.75rem;font-family:inherit;cursor:pointer}
.szw-chip:hover{color:var(--light);border-color:var(--gray)}
.szw-chip.active{background:rgba(240,165,0,.16);border-color:var(--amber);color:var(--amber)}
.szw-chip b{font-weight:700;opacity:.6;font-size:.85em;margin-left:3px}
.szw-detail{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:9px;padding:11px 13px}
.szw-dh{display:flex;align-items:center;font-size:.78rem;font-weight:700;color:var(--light);margin-bottom:8px}
.szw-close{margin-left:auto;background:none;border:none;color:var(--gray);font-size:1.1rem;
line-height:1;cursor:pointer;font-family:inherit;padding:0 3px}
.szw-close:hover{color:var(--light)}
/* ── explanation callouts fold behind their own heading ──────────────── */
.al.alt.collapsible{cursor:default}
.al.alt.collapsible .at{cursor:pointer;display:flex;align-items:center;gap:8px;
user-select:none;outline:none}
.al.alt.collapsible .at::after{content:'?';margin-left:auto;flex:0 0 auto;
width:18px;height:18px;border-radius:50%;border:1px solid var(--border);
color:var(--gray);font-size:.68rem;font-weight:700;line-height:16px;text-align:center;
transition:color .15s,border-color .15s,background .15s}
.al.alt.collapsible .at:hover::after{color:var(--amber);border-color:var(--amber)}
.al.alt.collapsible .at:focus-visible::after{outline:2px solid var(--amber);outline-offset:2px}
.al.alt.collapsible.open .at::after{content:'×';color:var(--amber);border-color:var(--amber);
background:rgba(240,165,0,.12)}
.al.alt.collapsible .ad{display:none}
.al.alt.collapsible.open .ad{display:block;margin-top:6px;
border-top:1px solid rgba(255,255,255,.07);padding-top:7px}
/* closed boxes shrink to a single line so they stop taking vertical space */
.al.alt.collapsible:not(.open){padding-top:7px;padding-bottom:7px}
/* keep the trend card inside the court's height */
.atk-side{scrollbar-width:thin}
/* ── trend card with a full season loaded ────────────────────────────
The bars scroll sideways (they stay readable at a fixed width each) and
the legend scrolls vertically, so the card keeps a fixed footprint no
matter how many matches are in the selection. */
.trl-wrap{overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
.trl-wrap::-webkit-scrollbar{height:6px}
.trl-wrap::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.trl-wrap::-webkit-scrollbar-track{background:transparent}
.trl{scrollbar-width:thin}
.trl .trb{flex:0 0 22px}
.trleg{max-height:150px;overflow-y:auto;padding-right:3px;scrollbar-width:thin}
.trleg::-webkit-scrollbar{width:6px}
.trleg::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
.trleg::-webkit-scrollbar-track{background:transparent}
/* ═══════════════════════════════════════════════════════════════════════
NEW UI LAYER — sub-tabs, toasts, modal, publish box, print sheet
═══════════════════════════════════════════════════════════════════════ */
/* ── tactical sub-navigation ─────────────────────────────────────────── */
/* The three tactical views used to be three of seven top-level tabs. They are
one question seen from three angles, so they sit together on their own row
under the TAKTIKA tab. */
.nav-row-sub{min-height:0;padding-top:0;padding-bottom:0;
background:rgba(255,255,255,.02);border-top:1px solid rgba(255,255,255,.05)}
.subtabs-inner{display:flex;gap:var(--sp-1);overflow-x:auto;-webkit-overflow-scrolling:touch;
scrollbar-width:none;padding:var(--sp-2) 0}
.subtabs-inner::-webkit-scrollbar{display:none}
.subtab{background:transparent;border:1px solid transparent;color:var(--gray);
font-family:inherit;font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;
padding:7px 14px;border-radius:99px;cursor:pointer;white-space:nowrap;flex-shrink:0;
transition:color .15s ease,background .15s ease,border-color .15s ease}
.subtab:hover{color:var(--light);background:rgba(255,255,255,.04)}
.subtab.active{color:var(--amber);background:rgba(240,165,0,.12);border-color:rgba(240,165,0,.4)}
@media (max-width:900px){
.nav-row-sub{padding-left:14px;padding-right:14px}
.subtab{padding:7px 12px;font-size:var(--fs-xs)}
}
/* ── toasts ──────────────────────────────────────────────────────────── */
/* Replaces alert(): does not block the page, does not truncate on mobile, and
can carry an Undo button — which is what makes deletion safe. */
.toast-host{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:1200;
display:flex;flex-direction:column;gap:var(--sp-2);align-items:center;
width:min(440px,calc(100vw - 24px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:var(--sp-3);width:100%;
background:var(--bg4);border:1px solid var(--border);border-left:3px solid var(--gray);
border-radius:var(--radius);padding:11px 12px 11px 14px;box-shadow:var(--shadow);
font-size:var(--fs-md);color:var(--light);animation:toastIn .22s ease both}
.toast-msg{flex:1;min-width:0;line-height:1.45}
.toast-ok{border-left-color:#4ade80}
.toast-warn{border-left-color:var(--amber)}
.toast-bad{border-left-color:var(--red)}
.toast-undo{border-left-color:var(--amber)}
.toast-act{background:rgba(240,165,0,.15);border:1px solid rgba(240,165,0,.45);color:var(--amber);
font-family:inherit;font-size:var(--fs-sm);font-weight:800;padding:6px 12px;
border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;flex-shrink:0}
.toast-act:hover{background:rgba(240,165,0,.28)}
.toast-x{background:none;border:none;color:var(--gray);font-size:1.15rem;line-height:1;
cursor:pointer;padding:0 2px;flex-shrink:0}
.toast-x:hover{color:var(--light)}
.toast.leaving{animation:toastOut .2s ease both}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}
/* ── shared modal (confirm / alert / prompt) ─────────────────────────── */
.ui-modal{position:fixed;inset:0;z-index:1100;background:rgba(4,9,16,.72);
backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;
padding:20px;overflow-y:auto}
.ui-modal-box{background:var(--bg2);border:1px solid var(--border);border-radius:14px;
width:100%;max-width:460px;padding:var(--sp-5);box-shadow:0 24px 64px rgba(0,0,0,.6);
animation:modalIn .18s ease both;margin:auto}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ui-modal-title{font-size:var(--fs-xl);font-weight:800;color:var(--white);margin-bottom:var(--sp-3)}
.ui-modal-body{font-size:var(--fs-md);color:var(--light);line-height:1.6}
.ui-modal-sec{margin-bottom:var(--sp-3)}
.ui-modal-sec b{color:var(--white)}
.ui-modal-sec ul{margin:var(--sp-1) 0 0 18px;color:var(--gray)}
.ui-modal-sec li{margin:3px 0}
.ui-modal-hint{font-size:var(--fs-sm);color:var(--gray);margin-top:var(--sp-2)}
.ui-modal-warn{font-size:var(--fs-sm);color:var(--light);background:rgba(240,165,0,.08);
border-left:3px solid var(--amber);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
padding:10px 12px;margin-top:var(--sp-3);line-height:1.55}
.ui-modal-input{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--white);
font-family:inherit;font-size:var(--fs-lg);padding:11px 13px;border-radius:var(--radius);
margin-top:var(--sp-4)}
.ui-modal-input:focus{outline:none;border-color:var(--amber)}
.ui-modal-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-5)}
.ui-modal-cancel,.ui-modal-ok{font-family:inherit;font-size:var(--fs-md);font-weight:700;
padding:10px 18px;border-radius:var(--radius);cursor:pointer;border:1px solid var(--border)}
.ui-modal-cancel{background:transparent;color:var(--gray)}
.ui-modal-cancel:hover{color:var(--light);border-color:var(--gray)}
.ui-modal-ok{background:var(--amber);color:#12100a;border-color:var(--amber)}
.ui-modal-ok:hover{background:var(--amber2)}
.ui-modal-ok.danger{background:var(--red);color:#fff;border-color:var(--red)}
.ui-modal-ok.danger:hover{background:#f04a56}
/* Destination picker (copying a block to another sheet) — buttons instead of
asking the user to type a sheet number. */
.ui-choice{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-2)}
.ui-choice-btn{background:var(--bg3);border:1px solid var(--border);color:var(--light);
font-family:inherit;font-size:var(--fs-md);font-weight:700;text-align:left;
padding:11px 14px;border-radius:var(--radius);cursor:pointer}
.ui-choice-btn:hover{border-color:var(--amber);color:var(--amber)}
/* ── publish result: URL row + QR ────────────────────────────────────── */
.pub-row{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0}
.pub-row .pub-url{flex:1;min-width:0}
.pub-copy{background:rgba(240,165,0,.15);border:1px solid rgba(240,165,0,.45);color:var(--amber);
font-family:inherit;font-size:var(--fs-sm);font-weight:800;padding:6px 12px;
border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;flex-shrink:0}
.pub-copy:hover{background:rgba(240,165,0,.28)}
/* White quiet zone: a QR on a dark background does not scan on many phones. */
.pub-qr{margin-top:var(--sp-3);display:inline-flex;flex-direction:column;align-items:center;
gap:4px;background:#fff;padding:10px 10px 6px;border-radius:var(--radius)}
.pub-qr svg{display:block}
.pub-qr-cap{font-size:var(--fs-xs);color:#333;font-weight:700}
/* ── login: reveal button and caps-lock notice ───────────────────────── */
.login-pw-wrap{position:relative}
.login-pw-wrap .login-input{padding-right:46px}
.login-eye{position:absolute;right:6px;top:6px;background:none;border:none;color:var(--gray);
font-size:1rem;line-height:1;padding:8px;cursor:pointer;border-radius:var(--radius-sm)}
.login-eye:hover{color:var(--amber)}
.login-eye.on{color:var(--amber)}
.caps-warn{font-size:var(--fs-sm);color:var(--amber);background:rgba(240,165,0,.1);
border-radius:var(--radius-sm);padding:7px 10px;margin-bottom:var(--sp-3)}
.login-link{font-size:var(--fs-sm);line-height:1.4}
/* ── empty states ────────────────────────────────────────────────────── */
.empty-ico{width:64px;height:64px;margin:0 auto var(--sp-4);opacity:.5}
.empty-cta{margin-top:var(--sp-4);background:var(--amber);color:#12100a;border:none;
font-family:inherit;font-size:var(--fs-md);font-weight:800;padding:11px 20px;
border-radius:var(--radius);cursor:pointer}
.empty-cta:hover{background:var(--amber2)}
/* ── form sparkline (overview hero) ──────────────────────────────────── */
.form-strip{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2)}
.form-dot{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;
justify-content:center;font-size:var(--fs-xs);font-weight:800;font-family:var(--font-mono)}
.form-dot.w{background:rgba(39,174,96,.22);color:#4ade80}
.form-dot.l{background:rgba(230,57,70,.2);color:#ff6b7a}
/* ── toolbar for exports ─────────────────────────────────────────────── */
.ov-tools{display:flex;gap:var(--sp-2);align-items:center;margin-bottom:var(--sp-3);flex-wrap:wrap}
/* These two open the only genuinely analytical views in the tab, and dressed as
plain grey chips they read as decoration and got missed. Amber border, amber
text, amber tint: the same language the app already uses for "this does
something", so they stand out without becoming a second navigation bar. */
.ov-tool{background:rgba(240,165,0,.10);border:1px solid rgba(240,165,0,.55);color:var(--amber);
font-family:inherit;font-size:var(--fs-sm);font-weight:700;padding:6px 12px;
border-radius:var(--radius-sm);cursor:pointer}
.ov-tool:hover{background:rgba(240,165,0,.20);border-color:var(--amber);color:var(--amber);
box-shadow:0 0 0 3px rgba(240,165,0,.12)}
/* ═══════════════════════════════════════════════════════════════════════
PRINT — the match sheet on A4. The PNG export needs a CDN and renders at
screen resolution; this works offline and prints properly.
═══════════════════════════════════════════════════════════════════════ */
@media print{
@page{size:A4 portrait;margin:11mm}
nav,.toast-host,.ui-modal,.md-bar,.md-blkbar,.md-prevnote,.md-editnote,#md-publish-status,
.sw-update,.login-screen,#t1,#t8,.no-print,.nav-row-sub{display:none !important}
body{background:#fff !important;color:#111 !important}
.section{padding:0 !important;max-width:none !important}
.md-doc,.md-sec,.md-blk,.card{background:#fff !important;color:#111 !important;
border-color:#bbb !important;box-shadow:none !important}
.md-doc *{color:#111 !important}
.md-kicker,.md-head b{color:#a06d00 !important}
/* Blocks must not be split across a page break — half a court diagram at the
bottom of a page is useless in the gym. */
.md-blk,.md-sec,.player-card,.card{break-inside:avoid;page-break-inside:avoid}
h1,h2,h3,.st{break-after:avoid;page-break-after:avoid}
a[href]::after{content:"" !important}
table{font-size:9pt}
}
/* ═══════════════════════════════════════════════════════════════════════
INSIGHTS — comparison, player deep-dive, season trend
These are read-only side views on the current selection, so they share one
overlay rather than becoming tabs you have to navigate back out of.
═══════════════════════════════════════════════════════════════════════ */
.ins-overlay{position:fixed;inset:0;z-index:1050;background:rgba(4,9,16,.78);
backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;
padding:24px 16px;overflow-y:auto}
.ins-modal{background:var(--bg2);border:1px solid var(--border);border-radius:14px;
width:100%;max-width:900px;padding:var(--sp-5);box-shadow:0 24px 64px rgba(0,0,0,.6);
animation:modalIn .18s ease both;margin:auto}
.ins-head{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.ins-head h2{flex:1;font-size:1.25rem;font-weight:800;color:var(--white);line-height:1.3}
.ins-role{display:inline-block;margin-left:var(--sp-2);font-size:var(--fs-sm);font-weight:700;
color:var(--amber);background:rgba(240,165,0,.12);border-radius:99px;padding:3px 10px;
vertical-align:middle}
.ins-close{background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--light);
font-family:inherit;font-size:var(--fs-sm);font-weight:700;padding:8px 13px;
border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;flex-shrink:0}
.ins-close:hover{border-color:var(--amber);color:var(--amber)}
.ins-tabs{display:flex;gap:var(--sp-1);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.ins-tab{background:transparent;border:1px solid var(--border);color:var(--gray);
font-family:inherit;font-size:var(--fs-sm);font-weight:700;padding:6px 13px;
border-radius:99px;cursor:pointer;white-space:nowrap}
.ins-tab:hover{color:var(--light);border-color:var(--gray)}
.ins-tab.active{color:var(--amber);background:rgba(240,165,0,.12);border-color:rgba(240,165,0,.45)}
.ins-note{font-size:var(--fs-sm);color:var(--gray);line-height:1.6;margin-top:var(--sp-4)}
.ins-tools{margin-top:var(--sp-3)}
.ins-empty{font-size:var(--fs-sm);color:var(--gray);padding:var(--sp-2) 0}
/* comparison table: the delta column is the point, so it carries the colour */
.cmp-table th{vertical-align:top}
.cmp-sub{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--gray);margin-top:2px}
.cmp-metric{font-weight:700;color:var(--light)}
.cmp-num{text-align:right;font-variant-numeric:tabular-nums}
.cmp-d{text-align:right;white-space:nowrap}
.cmp-delta{font-weight:800;font-variant-numeric:tabular-nums}
.cmp-delta.up{color:#4ade80}
.cmp-delta.down{color:#ff6b7a}
.cmp-flat{color:var(--gray)}
/* player deep-dive cards */
.ins-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--sp-3)}
.ins-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
padding:var(--sp-4)}
.ins-card-t{font-size:var(--fs-md);font-weight:800;color:var(--white);margin-bottom:var(--sp-3);
display:flex;align-items:baseline;gap:var(--sp-2)}
.ins-n{font-size:var(--fs-xs);font-weight:600;color:var(--gray)}
.ins-kpis{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-2)}
.ins-kpis div{display:flex;flex-direction:column}
.ins-kpis b{font-size:1.35rem;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums}
.ins-kpis b.good{color:#4ade80}
.ins-kpis b.bad{color:#ff6b7a}
.ins-kpis span{font-size:var(--fs-xs);color:var(--gray);margin-top:1px}
.ins-line{font-size:var(--fs-sm);color:var(--light);margin-top:var(--sp-2);line-height:1.5}
.ins-line b{color:var(--amber)}
.ins-bar{display:flex;align-items:center;gap:var(--sp-2);margin-top:6px;font-size:var(--fs-xs)}
.ins-bar-l{width:104px;color:var(--gray);flex-shrink:0}
.ins-bar-t{flex:1;height:7px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.ins-bar-t i{display:block;height:100%;background:var(--gray);border-radius:4px}
.ins-bar-t i.good{background:#4ade80}
.ins-bar-t i.bad{background:#ff6b7a}
.ins-bar-v{width:30px;text-align:right;color:var(--light);font-variant-numeric:tabular-nums}
/* trend chart */
.trend-svg{width:100%;height:auto;display:block}
/* a jersey number that opens the player view has to look clickable */
.jsy-link{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.jsy-link:hover{transform:scale(1.12);box-shadow:0 0 0 2px rgba(240,165,0,.5)}
.jsy-link:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (max-width:600px){
.ins-overlay{padding:10px 8px}
.ins-modal{padding:var(--sp-4);border-radius:10px}
.ins-head h2{font-size:1.05rem}
.ins-kpis{gap:var(--sp-3)}
.ins-kpis b{font-size:1.15rem}
}
@media print{ .ins-overlay{display:none !important} }
/* Shown only when the app failed to start — see the boot guard in index.html. */
.boot-error{margin-top:var(--sp-4);padding:13px 15px;border-radius:var(--radius);
background:rgba(230,57,70,.12);border:1px solid rgba(230,57,70,.4);
font-size:var(--fs-sm);color:#ffb3ba;line-height:1.55;text-align:left}
.boot-error b{color:#ff8a95}
.boot-error-fix{margin-top:var(--sp-2);color:var(--gray);font-size:var(--fs-xs)}
.boot-error-btn{margin-top:var(--sp-3);background:var(--amber);border:none;color:#12100a;
font-family:inherit;font-size:var(--fs-sm);font-weight:800;padding:10px 18px;
border-radius:var(--radius-sm);cursor:pointer;min-height:42px}
.boot-error-btn:hover{background:var(--amber2)}
.boot-error code{background:rgba(255,255,255,.08);padding:1px 5px;border-radius:4px}
/* ═══════════════════════════════════════════════════════════════════════
COLLAPSIBLE / REORDERABLE SECTIONS
Applied to the rendered output of every data tab (see sections.js), so it
covers sections the renderers add later without any registration step.
═══════════════════════════════════════════════════════════════════════ */
.sec-block{margin:var(--sp-5) 0 0}
.sec-bar{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.sec-toggle{flex:1;min-width:0;display:flex;align-items:center;gap:var(--sp-2);
background:none;border:none;padding:6px 0;cursor:pointer;text-align:left;font-family:inherit}
.sec-chev{color:var(--amber);font-size:.8rem;transition:transform .18s ease;flex-shrink:0}
.sec-block.collapsed .sec-chev{transform:rotate(-90deg)}
.sec-title{font-size:1rem;font-weight:800;color:var(--white);letter-spacing:.01em;
text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-toggle:hover .sec-title{color:var(--amber)}
.sec-tools{display:flex;gap:var(--sp-1);opacity:0;transition:opacity .15s ease;flex-shrink:0}
.sec-block:hover .sec-tools,.sec-tools:focus-within{opacity:1}
.sec-move{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--gray);
font-family:inherit;font-size:.8rem;line-height:1;width:26px;height:26px;
border-radius:var(--radius-sm);cursor:pointer}
.sec-move:hover:not(:disabled){border-color:var(--amber);color:var(--amber)}
.sec-move:disabled{opacity:.25;cursor:default}
.sec-body{overflow:hidden}
.sec-block.collapsed .sec-body{display:none}
/* Touch has no hover, so the controls are always visible on a phone. */
@media (hover:none){ .sec-tools{opacity:1} }
/* A folded section must never hide content from a printed sheet. */
@media print{
.sec-block.collapsed .sec-body{display:block !important}
.sec-tools,.sec-chev{display:none !important}
}
/* match sheet: folded blocks */
.md-blkfold{background:none;border:none;color:var(--amber);cursor:pointer;
font-size:.8rem;line-height:1;padding:2px 4px}
.md-blkname{cursor:pointer}
.md-blk.folded .md-blk-body{display:none}
.md-blk.folded{opacity:.72}
/* Folding is an editing convenience, so it never affects the printed sheet. */
@media print{ .md-blk.folded .md-blk-body{display:block !important} .md-blk.folded{opacity:1} }
/* Comparison tables: the metric name is a row header on the left, every figure
column is right-aligned. Header cells inherit the same alignment as the cells
under them, which is what was drifting before. */
.cmp-table th,.cmp-table td{padding:9px 12px;vertical-align:bottom}
.cmp-table thead th{font-size:var(--fs-xs);font-weight:700;color:var(--gray);
text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);
line-height:1.35;white-space:nowrap}
.cmp-table th.cmp-num,.cmp-table td.cmp-num{text-align:right}
.cmp-table th.cmp-d,.cmp-table td.cmp-d{text-align:right}
.cmp-table th.cmp-metric,.cmp-table td.cmp-metric{text-align:left;white-space:normal}
.cmp-table tbody th.cmp-metric{font-weight:700;color:var(--light);font-size:var(--fs-sm)}
.cmp-table tbody td{font-size:var(--fs-md);color:var(--white)}
.cmp-table tbody tr:not(:last-child) th,.cmp-table tbody tr:not(:last-child) td{
border-bottom:1px solid rgba(255,255,255,.05)}
.cmp-table .cmp-sub{display:block;font-size:var(--fs-xs);font-weight:600;
color:var(--gray);text-transform:none;letter-spacing:0;margin-top:2px}
/* Scope badges kept in the section bar (Teljes szezon / Ligaátlag) */
.sec-bar .scope{margin-left:var(--sp-2);flex-shrink:0}
/* Build stamp in the shortcut panel, with a one-click cache purge. */
.kbd-build{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border);
font-size:var(--fs-xs);color:var(--gray);display:flex;align-items:center;gap:var(--sp-2)}
.kbd-build b{color:var(--amber);font-family:var(--font-mono)}
.kbd-reload{margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--border);
color:var(--light);font-family:inherit;font-size:var(--fs-xs);font-weight:700;
padding:5px 11px;border-radius:var(--radius-sm);cursor:pointer}
.kbd-reload:hover{border-color:var(--amber);color:var(--amber)}
/* Landing-zone cells are clickable filters, so they answer to the pointer. */
.atk-zone{transition:stroke .12s ease,fill-opacity .12s ease}
.atk-zone:hover{stroke:#f0a500;stroke-width:2}
/* Play button on the selected zone card — the way into the video from a number. */
/* A summary card that can play its balls is a button, and says so with a small
video mark rather than by looking different from the ones that cannot. */
.asc-c.asc-can{cursor:pointer;font-family:inherit;text-align:inherit;position:relative;
border:1px solid transparent;transition:border-color .12s,background .12s}
.asc-c.asc-can:hover{border-color:rgba(240,165,0,.55);background:rgba(240,165,0,.08)}
.asc-play{position:absolute;top:5px;right:6px;display:inline-flex;align-items:center;gap:2px;
font-size:.6rem;color:var(--amber);opacity:.75}
.asc-c.asc-can:hover .asc-play{opacity:1}
/* The way back out of a handed-over list. */
.vt-back{display:inline-flex;align-items:center;gap:4px;background:rgba(240,165,0,.12);
border:1px solid rgba(240,165,0,.45);color:var(--amber);font-family:inherit;font-size:.7rem;
font-weight:700;padding:3px 8px;border-radius:var(--radius-sm);cursor:pointer;margin-right:6px}
.vt-back:hover{background:rgba(240,165,0,.24)}
/* A roster card that opens a profile has to look like it does. */
.player-card.is-link{cursor:pointer}
.player-card.is-link:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* Drawing controls inside the fullscreen panel. */
.vt-fs-d{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 8px;
border-top:1px solid rgba(255,255,255,.10)}
.vt-fs-d .vt-seg.on,.vt-fs-o .vt-seg.on{background:rgba(240,165,0,.22);border-color:var(--amber);color:var(--amber)}
/* rv-v113: automatikus lejátszás és Akció/Labdamenet a teljes képernyős panelen. */
.vt-fs-o{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:6px 8px;
border-top:1px solid rgba(255,255,255,.10)}
.vt-fs-o .vt-seg,.vt-fs-d .vt-seg{min-height:32px;padding:6px 9px}
.vt-fs-d .vt-grp{margin-right:4px}
.vt-fs-col{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.vt-fs-col.on{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.5)}
/* Who receives in that zone, under the recommendation it belongs to. */
.szw-who{margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.10);
font-size:.74rem;line-height:1.45}
.szw-who.thin{color:var(--gray);font-size:.7rem}
.szw-role{color:var(--gray);font-size:.68rem}
.szw-share{display:block;color:var(--gray);font-size:.68rem;margin-top:1px}
.atk-play{width:100%;margin:8px 0 4px;background:rgba(240,165,0,.14);
border:1px solid rgba(240,165,0,.45);color:var(--amber);font-family:inherit;
font-size:var(--fs-sm);font-weight:800;padding:9px;border-radius:var(--radius-sm);
cursor:pointer}
.atk-play:hover{background:rgba(240,165,0,.26)}
/* Shared clip list opened from a #pl= link, for a coach who does not have an
account. Deliberately plain: no video here, just what was picked out. */
.pl-share{max-width:960px;margin:0 auto;padding:28px 18px}
.pl-share-h{border-bottom:2px solid var(--amber);padding-bottom:var(--sp-3);margin-bottom:var(--sp-4)}
.pl-share-t{font-size:1.4rem;font-weight:800;color:var(--white)}
.pl-share-s{font-size:var(--fs-sm);color:var(--gray);margin-top:4px}
.pl-share-note{font-size:var(--fs-sm);color:var(--light);background:rgba(240,165,0,.08);
border-left:3px solid var(--amber);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
padding:12px 14px;margin-bottom:var(--sp-4);line-height:1.6}
.pl-share-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.pl-share-tbl th{text-align:left;font-size:var(--fs-xs);text-transform:uppercase;
letter-spacing:.04em;color:var(--gray);padding:8px 10px;border-bottom:1px solid var(--border)}
.pl-share-tbl td{padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--light)}
.pl-share-tbl .pl-t{font-variant-numeric:tabular-nums;color:var(--amber)}
/* Admin: the YouTube field on a match row. */
.mr-yt{width:100%;min-width:0;background:var(--bg3);border:1px solid var(--border);
color:var(--light);font-family:inherit;font-size:.7rem;padding:5px 8px;border-radius:5px;
text-overflow:ellipsis}
.mr-yt::placeholder{color:var(--gray);opacity:.7}
.mr-yt:focus{outline:none;border-color:var(--amber)}
.mr-yt.set{border-color:rgba(240,165,0,.5);color:var(--amber)}
@media (max-width:900px){ .mr-yt{width:100%;margin-top:2px} }
/* ── PER-MATCH VIDEO UPLOAD ──
The URL field and the upload control share one cell so the row keeps its
column count, and so the whole cell can be a drop target: dragging a file
at a 6-pixel button is a worse aim than dragging it at the field. */
.mr-vid{display:flex;align-items:center;gap:6px;min-width:0}
.mr-vid.drop{outline:2px dashed var(--amber);outline-offset:3px;border-radius:7px;
background:rgba(240,165,0,.07)}
.mr-vid.drop .mr-yt{border-color:rgba(240,165,0,.5)}
.mr-up{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.mr-upbtn{background:var(--bg3);border:1px solid var(--border);color:var(--gray);
width:26px;height:26px;border-radius:6px;cursor:pointer;flex:0 0 auto;
display:flex;align-items:center;justify-content:center;transition:.15s;padding:0}
.mr-upbtn:hover{border-color:rgba(240,165,0,.55);color:var(--amber);background:rgba(240,165,0,.12)}
.mr-upbtn.cancel:hover{border-color:rgba(230,57,70,.5);color:#ff6b7a;background:rgba(230,57,70,.14)}
.mr-uperr{font-size:.66rem;font-weight:700;color:#ff6b7a;white-space:nowrap}
/* Progress is a real percentage of bytes on the wire, so it is worth the width:
on a two-gigabyte upload a spinner and a hang look identical. */
.mr-prog{position:relative;flex:1 1 auto;min-width:58px;height:22px;border-radius:5px;
background:var(--bg3);border:1px solid var(--border);overflow:hidden}
.mr-prog-fill{position:absolute;inset:0 auto 0 0;background:rgba(240,165,0,.35);
transition:width .25s linear}
.mr-prog-t{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:.65rem;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums}
.mr-upbtn.del:hover{border-color:rgba(230,57,70,.5);color:#ff6b7a;background:rgba(230,57,70,.14)}
/* ── STORAGE BAR ──
One line, because the whole R2 bill is one number: stored gigabytes. */
.video-storage-bar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
padding:8px 14px;margin-bottom:10px;background:var(--card);
border:1px solid var(--border);border-radius:8px;font-size:.76rem}
.video-storage-bar:empty{display:none}
.vs-l{font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--gray)}
.vs-num{font-weight:800;color:var(--white);font-variant-numeric:tabular-nums}
.vs-num.over{color:var(--amber)}
.vs-dim{color:var(--gray);font-size:.73rem}
.vs-bad{color:#ff6b7a;font-size:.73rem}
.vs-btn{background:var(--bg3);border:1px solid var(--border);color:var(--light);
font-family:inherit;font-size:.71rem;font-weight:700;padding:4px 9px;border-radius:5px;
cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.vs-btn:hover{border-color:rgba(240,165,0,.5);color:var(--amber)}
.vs-btn.warn{border-color:rgba(240,165,0,.4);color:var(--amber);background:rgba(240,165,0,.1)}
.vs-in{flex:1 1 260px;min-width:180px;background:var(--bg3);border:1px solid var(--border);
color:var(--light);font-family:inherit;font-size:.73rem;padding:5px 9px;border-radius:5px}
.vs-in::placeholder{color:var(--gray);opacity:.7}
.vs-in:focus{outline:none;border-color:var(--amber)}
.vs-in.set{border-color:rgba(240,165,0,.4);color:var(--amber)}
/* ── SEEN COUNT ──
The number the coach actually wants — "did the link reach them" — next to the
button that used to hide it behind a click. */
.md-seencount{font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.md-seencount.has{color:#4ade80;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3)}
.md-seencount.none{color:var(--gray);background:var(--bg3);border:1px solid var(--border)}
.md-seencount.dim{color:var(--gray);opacity:.6}
/* ── ORPHAN FILE LIST ── */
.orf{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;
padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.orf-n{font-family:monospace;font-size:.73rem;color:var(--light);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.orf-s{font-size:.72rem;color:var(--gray);font-variant-numeric:tabular-nums}
.orf-d{background:rgba(230,57,70,.12);border:1px solid rgba(230,57,70,.3);color:#ff6b7a;
font-family:inherit;font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:5px;cursor:pointer}
.orf-d:hover{background:rgba(230,57,70,.25)}
.orf-d.armed{background:rgba(230,57,70,.4);color:#fff;border-color:#ff6b7a}
.orf-d:disabled{opacity:.5;cursor:default}
/* ── WORKER SELF-TEST ── */
.st-row{display:grid;grid-template-columns:18px minmax(88px,auto) minmax(0,1fr);gap:9px;
align-items:start;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.76rem}
.st-row .st-i{display:flex;align-items:center;justify-content:center;margin-top:1px}
.st-row.ok .st-i{color:#4ade80}
.st-row.bad .st-i{color:#ff6b7a}
.st-n{font-weight:700;color:var(--light)}
.st-d{color:var(--gray);font-family:monospace;font-size:.71rem;
overflow-wrap:anywhere;white-space:pre-wrap}
.st-row.bad .st-d{color:#ffa8b0}
/* Watch button on a key point — the join between a number and its evidence. */
.prio-play{margin-left:8px;background:rgba(240,165,0,.15);border:1px solid rgba(240,165,0,.45);
color:var(--amber);font-family:inherit;font-size:.66rem;font-weight:800;
padding:2px 8px;border-radius:99px;cursor:pointer;vertical-align:middle;white-space:nowrap}
.prio-play:hover{background:rgba(240,165,0,.3)}
@media print{ .prio-play{display:none !important} }
/* ═══════════════════════════════════════════════════════════════════════
VIDEO TAB
Three columns on a wide screen: filters, player, scene list. The tab is one
screen tall and each column scrolls inside itself, so the PAGE never
scrolls here. That is the whole point — a page that scrolls under the
pointer every time a filter is clicked or the active scene changes is what
made the old layout feel like it was jumping around.
═══════════════════════════════════════════════════════════════════════ */
/* The video tab wants more width than a reading column. */
#t9{max-width:1720px}
.vt-wrap{
display:grid;
grid-template-columns:270px minmax(0,1fr) 346px;
grid-template-areas:"side main list";
gap:var(--sp-4);
height:calc(100vh - 152px);
min-height:540px;
}
.vt-wrap.filters-hidden{grid-template-columns:46px minmax(0,1fr) 346px}
/* ── filter column ── */
.vt-side{grid-area:side;display:flex;flex-direction:column;min-width:0;min-height:0;
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.vt-wrap.filters-hidden .vt-side{display:none}
.vt-side-h{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
padding:10px 12px;border-bottom:1px solid var(--border);font-size:var(--fs-xs);
font-weight:800;color:var(--gray);text-transform:uppercase;letter-spacing:.08em}
.vt-side-x{background:transparent;border:1px solid var(--border);color:var(--gray);
font-family:inherit;font-size:.9rem;line-height:1;width:28px;height:28px;
border-radius:var(--radius-sm);cursor:pointer}
.vt-side-x:hover{border-color:var(--amber);color:var(--amber)}
.vt-side-b{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--sp-3);
overscroll-behavior:contain}
.vt-side-f{flex:0 0 auto;padding:10px var(--sp-3);border-top:1px solid var(--border);
background:var(--bg2);box-shadow:0 -6px 14px rgba(0,0,0,.3)}
.vt-sec-tail{height:2px}
/* Collapsed, the column keeps a rail so the filters never become invisible —
with a count, because "are any filters on?" is the question it has to answer. */
.vt-rail{grid-area:side;display:none;flex-direction:column;align-items:center;gap:8px;
padding:12px 4px;background:var(--card);border:1px solid var(--border);
border-radius:var(--radius);color:var(--gray);font-family:inherit;cursor:pointer}
.vt-wrap.filters-hidden .vt-rail{display:flex}
.vt-rail:hover{border-color:var(--amber);color:var(--amber)}
.vt-rail-i{font-size:1.1rem;line-height:1}
.vt-rail-n{font-size:.62rem;font-weight:800;color:var(--amber);min-height:12px}
.vt-rail-t{writing-mode:vertical-rl;font-size:.6rem;font-weight:800;letter-spacing:.14em;
margin-top:4px}
/* ── centre column ── */
.vt-main{grid-area:main;display:flex;flex-direction:column;min-width:0;min-height:0;gap:var(--sp-2)}
/* A remembered video the browser has downgraded to "ask again". Sits above the
picture because it is the one thing standing between the coach and playback. */
.vt-notice{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-3);
background:rgba(240,165,0,.1);border:1px solid rgba(240,165,0,.35);
border-radius:var(--radius);padding:10px 14px}
.vt-notice-i{font-size:1rem;flex-shrink:0}
.vt-notice-t{flex:1 1 auto;min-width:0;font-size:var(--fs-xs);color:var(--light);line-height:1.5}
.vt-notice-t b{color:var(--amber)}
/* rv-v102: a kép és közvetlenül alatta az idősáv egy oszlopban. */
.vt-stage-wrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.vt-stage{position:relative;width:100%;max-width:100%;max-height:calc(100% - 36px);aspect-ratio:16/9;
background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border)}
.vt-video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
/* Annotation canvas. Sits over both players; pointer events only while armed,
so the video's own controls keep working the rest of the time. */
.vt-draw{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
touch-action:none;z-index:2}
.vt-draw.on{pointer-events:auto;cursor:crosshair}
.vt-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
pointer-events:none;z-index:3;padding:var(--sp-4)}
.vt-need{pointer-events:auto;background:rgba(7,17,29,.92);border:1px solid var(--border);
border-radius:var(--radius);padding:22px 26px;text-align:center;max-width:440px;
box-shadow:var(--shadow)}
.vt-need.quiet{background:rgba(7,17,29,.72);border-style:dashed}
.vt-need-t{font-size:var(--fs-lg);font-weight:800;color:var(--white)}
.vt-need-d{font-size:var(--fs-sm);color:var(--light);margin:var(--sp-2) 0 var(--sp-4);line-height:1.55}
.vt-need-s{font-size:var(--fs-xs);color:var(--gray);margin-top:var(--sp-3);line-height:1.55}
/* ── control bars ── */
.vt-bar{flex:0 0 auto;display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;
padding:var(--sp-2) 0}
/* Row one is a three-zone grid so the transport stays under the middle of the
picture however wide the buttons on either side turn out to be. */
.vt-bar1{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-3);
border-top:1px solid var(--border)}
.vt-bar-l{justify-self:start;display:flex;align-items:center;gap:var(--sp-2)}
.vt-bar-c{justify-self:center;display:flex;align-items:center;gap:22px}
.vt-bar-r{justify-self:end;display:flex;align-items:center;gap:var(--sp-2)}
.vt-bar2{padding-top:0;gap:6px}
.vt-bar3{padding-top:0;gap:6px}
/* Pushes itself and everything after it to the right end of the row. */
.vt-right{margin-left:auto}
/* The drawing tools open to the right of the Rajz button, on the same row, so
nothing below the picture moves when they appear. */
.vt-drawtools{display:none;align-items:center;gap:3px;padding-left:6px;
margin-left:2px;border-left:1px solid var(--border)}
.vt-drawtools.open{display:inline-flex}
.vt-pos{font-size:var(--fs-md);font-weight:800;color:var(--white);
font-variant-numeric:tabular-nums;white-space:nowrap}
.vt-grp{display:inline-flex;gap:3px;align-items:center}
/* Play/pause is the button the hand goes to without looking, so it is the one
solid, larger control on the row. */
.vt-play{width:58px;height:42px;background:var(--amber);border:1px solid var(--amber);
color:#12100a;font-family:inherit;font-size:1.05rem;line-height:1;cursor:pointer;
border-radius:var(--radius-sm);margin:0 3px;flex-shrink:0}
.vt-play:hover{background:var(--amber2)}
.vt-btn:disabled{opacity:.35;cursor:default}
.vt-btn:disabled:hover{border-color:var(--border);color:var(--light)}
.vt-btn.on{background:rgba(240,165,0,.16);border-color:rgba(240,165,0,.5);color:var(--amber)}
.vt-btn{display:inline-flex;align-items:center;gap:5px;min-height:36px;
background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--light);
font-family:inherit;font-size:var(--fs-sm);font-weight:700;padding:7px 12px;
border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap}
.vt-btn:hover{border-color:var(--amber);color:var(--amber)}
.vt-btn.primary{background:var(--amber);color:#12100a;border-color:var(--amber)}
.vt-btn.primary:hover{background:var(--amber2);color:#12100a}
.vt-grp .vt-btn{border-radius:0}
.vt-grp .vt-btn:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.vt-grp .vt-btn:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.vt-grp .vt-btn + .vt-btn{border-left:none}
.vt-seg{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--light);
font-family:inherit;font-size:var(--fs-xs);font-weight:700;padding:8px 11px;min-height:34px;
cursor:pointer;line-height:1.2;border-radius:var(--radius-sm)}
.vt-grp .vt-seg{border-radius:0}
.vt-grp .vt-seg:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}
.vt-grp .vt-seg:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.vt-grp .vt-seg:only-child{border-radius:var(--radius-sm)}
.vt-grp .vt-seg + .vt-seg{border-left:none}
.vt-seg:hover{color:var(--amber);border-color:rgba(240,165,0,.4)}
.vt-seg.on{background:rgba(240,165,0,.16);color:var(--amber);border-color:rgba(240,165,0,.5)}
.vt-gap{background:var(--bg3);border:1px solid var(--border);color:var(--light);
font-family:inherit;font-size:var(--fs-xs);padding:6px 8px;border-radius:var(--radius-sm);
margin-left:4px}
.vt-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;
cursor:pointer;padding:0;margin:0 2px;flex-shrink:0}
.vt-swatch.on{border-color:var(--white)}
.vt-swatch.cur{width:22px;height:22px;border-color:rgba(255,255,255,.5)}
/* One swatch on the row showing the current colour; the rest fan out only when
it is pressed. Four permanent swatches was four buttons of width spent on a
choice made once a session. */
.vt-pal{position:relative;display:inline-flex;align-items:center}
.vt-pal-list{display:none;position:absolute;bottom:calc(100% + 6px);left:50%;
transform:translateX(-50%);gap:2px;padding:6px;background:var(--bg2);
border:1px solid var(--border);border-radius:99px;box-shadow:var(--shadow);z-index:20}
.vt-pal.open .vt-pal-list{display:flex}
/* Icon-only controls. Their words live in the tooltip, where they cost no
width — on a 13-inch laptop the labelled versions pushed this row into the
scene list. */
.vt-btn.icon{padding:7px 10px;font-size:.85rem;min-width:38px;justify-content:center}
/* Offset calibration is a rare, fiddly job, so it lives behind its own toggle
rather than sitting in the main bar competing with playback. */
.vt-cal{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-xs);
color:var(--gray);background:var(--card);border:1px solid var(--border);
border-radius:var(--radius-sm);padding:8px 10px;width:100%}
.vt-cal-t{font-weight:800;color:var(--light)}
.vt-cal b{color:var(--amber);font-variant-numeric:tabular-nums;min-width:56px;text-align:center}
.vt-cal-h{flex:1 1 100%;color:var(--gray);line-height:1.5}
.vt-mini{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--gray);
font-family:inherit;font-size:var(--fs-xs);font-weight:700;padding:6px 10px;min-height:32px;
border-radius:var(--radius-sm);cursor:pointer}
.vt-mini:hover{border-color:var(--amber);color:var(--amber)}
.vt-mini.wide{padding:6px 12px}
.vt-mini.warn{border-color:rgba(255,107,122,.45);color:#ff6b7a}
.vt-mini:disabled{opacity:.4;cursor:default}
.vt-mini:disabled:hover{border-color:var(--border);color:var(--gray)}
.vt-keys{display:grid;gap:8px;font-size:var(--fs-sm);color:var(--light)}
.vt-keys div{display:flex;align-items:center;gap:8px}
.vt-keys kbd{background:var(--bg3);border:1px solid var(--border);border-bottom-width:2px;
border-radius:5px;padding:2px 7px;font-family:var(--font-mono);font-size:var(--fs-xs);
color:var(--amber)}
/* ── scene list column ── */
.vt-listcol{grid-area:list;display:flex;flex-direction:column;min-width:0;min-height:0;
background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.vt-listhead{flex:0 0 auto;padding:10px 12px;border-bottom:1px solid var(--border)}
.vt-lh-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.vt-count{font-size:var(--fs-sm);color:var(--gray);font-variant-numeric:tabular-nums}
.vt-count b{color:var(--white);font-size:var(--fs-lg);font-weight:800}
.vt-off{color:#ffb020;font-size:var(--fs-xs);margin-left:6px}
.vt-lh-bot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);
margin-top:6px}
.vt-view{font-size:var(--fs-xs);font-weight:700;color:var(--amber);background:rgba(240,165,0,.1);
border-radius:99px;padding:3px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px}
/* Two lines per scene: who and what on top, where and when underneath. Any
taller and a 500-scene list becomes a scroll marathon. */
.vt-card{display:flex;align-items:center;gap:8px;padding:8px 9px;cursor:pointer;
border-radius:var(--radius-sm);border-left:3px solid transparent;margin-bottom:3px;
background:rgba(255,255,255,.02)}
.vt-card:hover{background:rgba(255,255,255,.06)}
.vt-card:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
.vt-card.kill{border-left-color:#4ade80}
.vt-card.err{border-left-color:#ff6b7a}
.vt-card.on{background:rgba(240,165,0,.16);box-shadow:inset 0 0 0 1px rgba(240,165,0,.5)}
.vt-card.on .vt-card-nm{color:var(--white)}
.vt-card-i{width:26px;flex-shrink:0;text-align:right;color:var(--gray);font-size:var(--fs-xs);
font-variant-numeric:tabular-nums}
.vt-card-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
/* The name gets the whole first line. Squeezed in beside the action and the
outcome it was always the thing that got cut, and "Kov…" identifies nobody. */
.vt-card-1{display:flex;align-items:baseline;gap:6px;min-width:0;font-size:var(--fs-sm)}
.vt-card-j{color:var(--amber);font-weight:800;flex-shrink:0}
.vt-card-nm{color:var(--white);font-weight:600;flex:1 1 auto;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-card-sk{color:var(--light);flex-shrink:0}
.vt-card-3{font-size:.62rem;color:var(--gray);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.vt-card-g{flex-shrink:0;font-size:.64rem;font-weight:800;text-transform:uppercase;
letter-spacing:.03em;color:var(--light);background:rgba(255,255,255,.08);
border-radius:99px;padding:1px 7px}
.vt-card.kill .vt-card-g{color:#4ade80;background:rgba(74,222,128,.14)}
.vt-card.err .vt-card-g{color:#ff6b7a;background:rgba(255,107,122,.14)}
.vt-card-2{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--gray);
overflow:hidden;white-space:nowrap}
.vt-card-z{color:var(--amber);font-variant-numeric:tabular-nums}
.vt-card-t{font-variant-numeric:tabular-nums}
.vt-card-op{overflow:hidden;text-overflow:ellipsis;min-width:0}
.vt-card-nov{color:#ffb020;flex-shrink:0}
.vt-card-note{width:32px;height:32px;flex-shrink:0;background:transparent;border:1px solid transparent;
border-radius:var(--radius-sm);color:var(--gray);font-family:inherit;font-size:.85rem;
cursor:pointer;opacity:.5}
.vt-card-note:hover{opacity:1;border-color:var(--border);color:var(--amber)}
.vt-card-note.has{opacity:1;color:var(--amber)}
/* Switching a scene off leaves the row in place — the action still happened and
is still worth reading — but the video steps past it and a saved list leaves
it out. Legible, visibly inactive, not hidden. */
.vt-card-eye{width:32px;height:32px;flex-shrink:0;background:transparent;
border:1px solid transparent;border-radius:var(--radius-sm);color:var(--gray);
font-family:inherit;font-size:.8rem;cursor:pointer;opacity:.45}
.vt-card-eye:hover{opacity:1;border-color:var(--border);color:var(--amber)}
.vt-card-eye.off{opacity:1;color:#ff6b7a}
.vt-card.off{opacity:.5;border-left-color:var(--gray) !important}
.vt-card.off .vt-card-1{text-decoration:line-through;text-decoration-color:var(--gray)}
.vt-card.off.on{opacity:.75}
.vt-fsrow.off{opacity:.42}
/* Before there is a picture, the app's own name fills the frame. A blank black
rectangle reads as broken; this reads as "nothing has gone wrong yet". */
/* The still sits behind the idle panel, dimmed so the text on top stays
readable regardless of how bright the frame happens to be. */
#vt-overlay.has-shot{background-size:cover;background-position:center}
#vt-overlay.has-shot::before{content:'';position:absolute;inset:0;background:rgba(6,10,16,.62)}
#vt-overlay.has-shot > *{position:relative;z-index:1}
/* The second calibration row. Visually subordinate to the first: whole-video
correction is the common case, one-scene repair is the exception. */
.vt-cal2{margin-top:var(--sp-2);border-top:1px dashed var(--border);padding-top:var(--sp-2)}
.vt-cal2 .vt-cal-t{color:var(--gray)}
.vt-brand{text-align:center;margin-bottom:var(--sp-4);user-select:none}
.vt-brand-logo{font-size:2rem;line-height:1}
/* currentColor so the mark inherits the amber below without repeating it. */
.vt-brand-mark{width:64px;height:64px;color:var(--amber);opacity:.92;display:block;margin:0 auto}
.vt-idle .vt-brand-mark{width:86px;height:86px}
/* The empty player used to be a flat grey rectangle, which reads as broken
rather than as ready. A faint amber wash off one corner, matching the login
screen, says the app is alive and waiting. */
.vt-idle{background:radial-gradient(circle at 30% 18%,rgba(240,165,0,.10) 0%,transparent 58%),
rgba(7,17,29,.86);border-style:solid;min-width:min(320px,84%)}
.vt-idle .vt-need-t{margin-top:var(--sp-2)}
.vt-brand-t{font-size:1.05rem;font-weight:900;color:var(--amber);letter-spacing:.18em;margin-top:6px}
.vt-brand-s{font-size:.62rem;font-weight:700;color:var(--gray);letter-spacing:.22em;margin-top:2px}
.vt-none{padding:32px 20px;text-align:center}
.vt-none-t{font-size:var(--fs-md);font-weight:800;color:var(--white)}
.vt-none-d{font-size:var(--fs-sm);color:var(--gray);margin:var(--sp-2) 0 var(--sp-3);line-height:1.55}
.vt-none .vt-btn{margin:3px}
/* ── filter panel contents ── */
.vt-sec{margin-bottom:var(--sp-3);border-bottom:1px solid rgba(255,255,255,.05);
padding-bottom:var(--sp-3)}
.vt-sec.plain{border-bottom:none}
.vt-sec-h{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;
padding:4px 0;cursor:pointer;font-family:inherit;text-align:left;min-height:32px}
.vt-sec-c{color:var(--gray);font-size:.7rem;width:12px;flex-shrink:0}
.vt-sec-t{font-size:var(--fs-xs);font-weight:800;color:var(--light);text-transform:uppercase;
letter-spacing:.07em}
.vt-sec-s{margin-left:auto;font-size:.62rem;font-weight:700;color:var(--amber)}
.vt-sec-h:hover .vt-sec-t{color:var(--amber)}
.vt-sec-b{padding-top:var(--sp-2)}
.vt-sec.closed .vt-sec-b{display:none}
.vt-sub{font-size:.62rem;font-weight:800;color:var(--gray);text-transform:uppercase;
letter-spacing:.06em;margin:var(--sp-2) 0 5px}
.vt-sec-b .vt-sub:first-child{margin-top:0}
.vt-chips{display:flex;flex-wrap:wrap;gap:5px}
.vt-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;
background:transparent;border:1px solid rgba(240,165,0,.38);color:var(--light);
font-family:inherit;font-size:var(--fs-xs);font-weight:700;padding:5px 10px;
border-radius:99px;cursor:pointer;white-space:nowrap}
.vt-chip:hover{color:var(--amber);border-color:var(--amber)}
/* rv-v113: minden szűrőelem egyformán „lebeg", ha fölé viszed az egeret — az
egész gomb emelkedik, nem csak a benne lévő szám. A számláló korábban saját
átlátszóságot kapott, és a böngésző görgetéskor külön rétegként rajzolhatta:
úgy tűnt, mintha csak a számok mozognának. Most sima szín, együtt mozog a
gombbal. */
.vt-chip,.vt-pl-open{transition:transform .14s ease,box-shadow .14s ease,
color .14s ease,border-color .14s ease,background-color .14s ease}
.vt-chip:hover,.vt-pl-open:hover{transform:translateY(-2px);box-shadow:0 5px 12px rgba(0,0,0,.38)}
.vt-chip:active,.vt-pl-open:active{transform:translateY(0);box-shadow:none}
.vt-chip:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
.vt-chip,.vt-pl-open{transition:none}
.vt-chip:hover,.vt-pl-open:hover{transform:none}
}
.vt-chip.on{color:var(--amber);background:rgba(240,165,0,.13);border-color:rgba(240,165,0,.45)}
.vt-chip.hide{display:none}
.vt-chip.other{border-style:dashed}
.vt-n{font-size:.62rem;color:var(--gray);font-variant-numeric:tabular-nums}
.vt-chip:hover .vt-n,.vt-chip.on .vt-n,.vt-pl.on .vt-n{color:inherit}
/* Action chips carry a hide control alongside the select toggle: selecting is
"only these", hiding is "everything but this". */
/* A chip that would add nothing to the current selection. Dimmed rather than
removed: a chip that vanishes looks like a fault, and its absence answers
no question — "Nyitás 0" answers one. */
.vt-chip.dead{opacity:.35}
.vt-chip.dead .vt-n{opacity:1}
.vt-chip.o-kill.on{color:#4ade80;background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.45)}
.vt-chip.o-err.on{color:#ff6b7a;background:rgba(255,107,122,.14);border-color:rgba(255,107,122,.45)}
.vt-chip.o-warn.on{color:#ffb020;background:rgba(255,176,32,.14);border-color:rgba(255,176,32,.45)}
.vt-search{display:flex;align-items:center;gap:6px;background:var(--bg3);
border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 9px;
margin-bottom:var(--sp-2)}
.vt-search:focus-within{border-color:var(--amber)}
.vt-search-i{color:var(--gray);font-size:.75rem}
.vt-search-in{flex:1 1 auto;min-width:0;background:none;border:none;color:var(--light);
font-family:inherit;font-size:var(--fs-sm);padding:9px 0;outline:none}
.vt-search-in::placeholder{color:var(--gray)}
/* ── match + video source rows ── */
.vt-src{display:flex;flex-direction:column;gap:0;border:1px solid var(--border);
border-radius:var(--radius-sm);margin-bottom:6px;overflow:hidden;background:rgba(255,255,255,.02)}
.vt-src.on{border-color:rgba(240,165,0,.5);background:rgba(240,165,0,.08)}
.vt-src.st-local{border-left:3px solid rgba(74,222,128,.6)}
.vt-src.st-ready{border-left:3px solid rgba(240,165,0,.6)}
.vt-src.st-none{border-left:3px solid rgba(255,176,32,.5)}
.vt-src.st-wait{border-left:3px solid rgba(240,165,0,.6)}
.vt-src-b{display:flex;gap:8px;align-items:flex-start;width:100%;background:none;border:none;
padding:7px 8px;cursor:pointer;font-family:inherit;text-align:left}
.vt-src-b:hover{background:rgba(255,255,255,.04)}
.vt-src-thumb{width:56px;height:32px;flex-shrink:0;border-radius:4px;overflow:hidden;
background:var(--bg);display:flex;align-items:center;justify-content:center;
border:1px solid var(--border)}
.vt-src-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vt-src-ph{color:var(--gray);opacity:.45;font-size:.85rem}
.vt-src-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.vt-src-t{font-size:var(--fs-xs);font-weight:700;color:var(--light);overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.vt-src.on .vt-src-t{color:var(--amber)}
.vt-src-m{display:flex;align-items:center;gap:6px}
.vt-badge{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
border-radius:99px;padding:2px 7px;white-space:nowrap}
.b-local{color:#4ade80;background:rgba(74,222,128,.14)}
.b-ready{color:var(--amber);background:rgba(240,165,0,.14)}
.b-none{color:#ffb020;background:rgba(255,176,32,.12)}
.b-wait{color:var(--amber);background:rgba(240,165,0,.14)}
.vt-src-n{font-size:.6rem;color:var(--gray);font-variant-numeric:tabular-nums}
.vt-src-f{font-size:.58rem;color:var(--gray);overflow:hidden;text-overflow:ellipsis;
white-space:nowrap;opacity:.75}
.vt-attach{width:100%;background:rgba(240,165,0,.12);border:none;border-top:1px solid var(--border);
color:var(--amber);font-family:inherit;font-size:var(--fs-xs);font-weight:800;
padding:9px;cursor:pointer;min-height:38px}
.vt-attach:hover{background:rgba(240,165,0,.24)}
.vt-attach.sm{font-size:.62rem;padding:7px}
.vt-need .vt-attach{border-radius:var(--radius-sm);border:1px solid rgba(240,165,0,.45);
padding:11px 18px;width:auto;min-width:220px}
.vt-link{background:none;border:none;color:var(--gray);font-family:inherit;
font-size:.62rem;font-weight:700;padding:6px 8px;cursor:pointer;text-decoration:underline;
min-height:30px}
.vt-link:hover{color:var(--amber)}
.vt-link.wide{display:block;width:100%;text-align:center;margin-top:4px}
.vt-hint{font-size:.62rem;color:var(--gray);line-height:1.55;margin-top:var(--sp-2)}
.vt-pl{display:flex;align-items:center;gap:2px;margin-bottom:4px}
.vt-pl-open{flex:1 1 auto;min-width:0;text-align:left;background:transparent;
border:1px solid var(--border);color:var(--light);font-family:inherit;
font-size:var(--fs-xs);font-weight:700;padding:7px 10px;border-radius:var(--radius-sm);
cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:32px}
.vt-pl.on .vt-pl-open{color:var(--amber);border-color:rgba(240,165,0,.45);
background:rgba(240,165,0,.1)}
.vt-reset{width:100%;background:transparent;border:1px solid var(--border);color:var(--gray);
font-family:inherit;font-size:var(--fs-xs);font-weight:700;padding:10px;min-height:38px;
border-radius:var(--radius-sm);cursor:pointer}
.vt-reset:hover{border-color:var(--amber);color:var(--amber)}
/* ── fullscreen ──
The stage wrapper goes fullscreen rather than the