/* YOMI prototype — design tokens identiek aan functioneel ontwerp v1.0 */
:root{
  --bg:#EFF2F4; --surface:#FFFFFF; --surface2:#E7EBEF; --surface3:#DDE3E8;
  --ink:#171C22; --ink2:#4E5A66; --ink3:#8A95A0; --line:#D6DCE2;
  --aka:#C4222F; --ao:#145DA8;
  --aka-soft:rgba(196,34,47,.10); --ao-soft:rgba(20,93,168,.10);
  --good:#2E7D4F; --warn:#A9671F;
  --shadow:0 1px 2px rgba(23,28,34,.05), 0 8px 28px rgba(23,28,34,.06);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1317; --surface:#161B21; --surface2:#1F262E; --surface3:#28313A;
    --ink:#E8ECEF; --ink2:#A3AEB8; --ink3:#6E7A85; --line:#2A323B;
    --aka:#E04A55; --ao:#4E94DB;
    --aka-soft:rgba(224,74,85,.16); --ao-soft:rgba(78,148,219,.16);
    --good:#5CA97E; --warn:#C98B45;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Avenir Next","Avenir","Helvetica Neue",Helvetica,system-ui,sans-serif;
  font-size:14.5px; line-height:1.5;
  min-height:100vh; display:flex; flex-direction:column;
  padding:14px 18px 10px; gap:12px;
}
button{font:inherit; color:inherit; cursor:pointer}
kbd{
  font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11px;
  background:var(--surface2); border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; padding:0 5px;
}
.mono{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--ao); outline-offset:2px}

/* ── appbar ── */
.appbar{display:flex; align-items:center; gap:14px}
.wordmark{font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif; font-weight:700; letter-spacing:.14em; font-size:16px}
.wordmark i{display:inline-block; width:7px; height:7px; border-radius:50%; margin-left:2px}
.wordmark .da{background:var(--aka)} .wordmark .db{background:var(--ao)}
.wordmark em{font-style:normal; font-weight:500; letter-spacing:.08em; font-size:10px; color:var(--ink3); text-transform:uppercase; margin-left:8px}
.appbtns{margin-left:auto; display:flex; gap:8px}
.abtn{
  font-size:12.5px; font-weight:600; background:var(--surface); border:1px solid var(--line);
  border-radius:8px; padding:6px 12px; color:var(--ink2);
}
.abtn:hover{color:var(--ink); border-color:var(--ink3)}

/* ── scorebar ── */
.scorebar{display:flex; align-items:center; gap:12px; background:var(--surface2); border:1px solid var(--line); border-radius:10px; padding:8px 14px}
.fighter{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600}
.fighter i{width:10px; height:10px; border-radius:2px; flex:none}
.fighter.aka i{background:var(--aka)} .fighter.ao i{background:var(--ao)}
.score{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:21px; font-weight:700; font-variant-numeric:tabular-nums}
.score.sep{color:var(--ink3)}
.senshu{font-size:9.5px; font-weight:700; letter-spacing:.1em; color:var(--ink2); border:1px solid var(--ink3); border-radius:4px; padding:1px 6px}
.clock{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:17px; font-weight:600; margin-left:10px; min-width:52px}
.matchmeta{margin-left:auto; text-align:right; font-size:11.5px; color:var(--ink2); line-height:1.4}

/* ── main layout ── */
.ana{display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:14px; flex:1; min-height:0}
.left{min-width:0; display:flex; flex-direction:column}
.videowrap{
  position:relative; width:100%; aspect-ratio:16/9; max-height:56vh;
  background:#10141A; border-radius:10px; overflow:hidden; border:1px solid var(--line);
}
.videowrap iframe{position:absolute; inset:0; width:100%; height:100%}

.transport{display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap}
.tbtn{
  font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11.5px;
  background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:6px 10px;
}
.tbtn:hover{border-color:var(--ink3)}
.tbtn.play2{background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:700; padding:6px 16px}
.markbtns{display:flex; gap:6px; margin-left:10px}
.tbtn.mk-a{color:var(--aka); border-color:var(--aka); font-weight:700}
.tbtn.mk-b{color:var(--ao); border-color:var(--ao); font-weight:700}
.tbtn.mk-a:hover{background:var(--aka-soft)} .tbtn.mk-b:hover{background:var(--ao-soft)}
.speed{margin-left:auto; display:flex; gap:4px}
.tbtn.spd.on{background:var(--surface3); font-weight:700}

.timeline{margin-top:12px}
.tl-scroll{overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:2px}
.tl-scroll::-webkit-scrollbar{height:7px}
.tl-scroll::-webkit-scrollbar-thumb{background:var(--surface3); border-radius:4px}
.tl-inner{width:100%; min-width:100%}
.zoomhint{font-size:11px; color:var(--ink3)}
.tl-track{position:relative; height:36px; background:var(--surface2); border:1px solid var(--line); border-radius:8px; cursor:pointer}
.mk{
  position:absolute; top:50%; width:12px; height:12px; border-radius:50%;
  transform:translate(-50%,-50%); border:2px solid var(--surface); cursor:pointer; padding:0;
}
.mk.a{background:var(--aka)} .mk.b{background:var(--ao)}
.mk.raw.a{background:var(--surface); border:2.5px solid var(--aka)}
.mk.raw.b{background:var(--surface); border:2.5px solid var(--ao)}
.mk.pen{border-radius:3px}
.mk.active{box-shadow:0 0 0 3px var(--ao-soft), 0 0 0 2px var(--ink); width:14px; height:14px; z-index:2}
.playhead{position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--ink); border-radius:2px; pointer-events:none}
.tl-labels{display:flex; justify-content:space-between; font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10.5px; color:var(--ink3); margin-top:5px}
.tl-legend{display:flex; gap:16px; font-size:11.5px; color:var(--ink2); margin-top:7px; align-items:center}
.tl-legend i{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:-1px}
.tl-legend .la{background:var(--aka)} .tl-legend .lb{background:var(--ao)}
.tl-legend .lh{background:transparent; border:2px solid var(--ink3); width:7px; height:7px}
.tl-legend .right{margin-left:auto; font-size:11px; color:var(--ink3)}

/* ── panel ── */
.panel{
  background:var(--surface2); border:1px solid var(--line); border-radius:12px;
  padding:14px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; min-height:0;
}
.ptitle{display:flex; align-items:baseline; justify-content:space-between}
.ptitle-eyebrow{
  font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif;
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink2);
}
.ptitle .mono{font-size:11px; color:var(--ink3)}
.hint{font-size:13px; color:var(--ink2); margin:10px 0 0}
#panelForm{display:flex; flex-direction:column; gap:12px}
#formAction,#formPenalty{display:flex; flex-direction:column; gap:12px}

.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.seg button{flex:1; text-align:center; font-size:12.5px; font-weight:700; letter-spacing:.06em; padding:7px 0; background:var(--surface); color:var(--ink2); border:0}
.seg button.on-aka{background:var(--aka); color:#fff}
.seg button.on-ao{background:var(--ao); color:#fff}
.seg.kind button.on{background:var(--ink); color:var(--bg)}

.bodywrap{display:grid; grid-template-columns:100px 1fr; gap:12px; align-items:center}
.zones-svg .zonepart{fill:var(--surface); stroke:var(--ink3); stroke-width:1.5; cursor:pointer}
.zones-svg .zonepart:hover{stroke:var(--ink)}
.panel[data-fighter="aka"] .zonepart.on{fill:var(--aka-soft); stroke:var(--aka); stroke-width:2}
.panel[data-fighter="ao"] .zonepart.on{fill:var(--ao-soft); stroke:var(--ao); stroke-width:2}
.zones-svg .deco{fill:var(--surface); stroke:var(--ink3); stroke-width:1.5}
.zones-svg line.deco{fill:none}
.zones-svg .dash{stroke-dasharray:3 3}
.zonebtns{display:flex; flex-direction:column; gap:8px}
.zone{border:1px solid var(--line); background:var(--surface); border-radius:9px; padding:7px 11px; font-size:12.5px; text-align:left}
.zone b{display:block}
.zone span{font-size:11px; color:var(--ink3)}
.panel[data-fighter="aka"] .zone.on{border-color:var(--aka); background:var(--aka-soft)}
.panel[data-fighter="ao"] .zone.on{border-color:var(--ao); background:var(--ao-soft)}

.grp{display:flex; flex-direction:column; gap:6px}
.grplabel{
  font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif;
  font-size:10px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--ink3);
}
.grplabel .kbdhint{text-transform:none; letter-spacing:0; font-family:inherit; color:var(--ink3); font-weight:500}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.tag{
  font-size:12px; font-weight:500; background:var(--surface); border:1px solid var(--line);
  border-radius:7px; padding:5px 9px;
}
.panel[data-fighter="aka"] .tag.on{border-color:var(--aka); background:var(--aka-soft); font-weight:600}
.panel[data-fighter="ao"] .tag.on{border-color:var(--ao); background:var(--ao-soft); font-weight:600}
.tag .pt{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10px; color:var(--ink3); margin-left:4px}
.note{
  font:inherit; font-size:13px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:8px; padding:7px 10px; width:100%;
}
.actions{display:flex; gap:8px}
.pbtn{
  flex:1; text-align:center; font-size:12.5px; font-weight:700; border-radius:9px; padding:9px 0;
  background:var(--ink); color:var(--bg); border:1px solid var(--ink);
}
.pbtn.ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line); font-weight:600}
.pbtn.danger{flex:0 0 44px; color:var(--ink2)}
.pbtn.danger:hover{color:var(--aka); border-color:var(--aka)}

.alist{display:flex; flex-direction:column; gap:4px; margin-top:auto; border-top:1px solid var(--line); padding-top:10px}
.alist:empty{display:none}
.arow{
  display:flex; gap:8px; align-items:baseline; font-size:12px; color:var(--ink2);
  background:none; border:0; padding:2px 4px; border-radius:6px; text-align:left; width:100%;
}
.arow:hover{background:var(--surface)}
.arow.active{background:var(--surface); color:var(--ink)}
.arow .t{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:11px; color:var(--ink3); flex:none; width:38px}
.arow .dot{width:8px; height:8px; border-radius:50%; flex:none; align-self:center}
.arow .dot.a{background:var(--aka)} .arow .dot.b{background:var(--ao)}
.arow .dot.raw{background:transparent; border:2px solid var(--ink3); width:6px; height:6px}
.arow .sum{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── footer ── */
.keys{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px; color:var(--ink3); padding-top:4px}

/* ── toast ── */
#toast{
  position:fixed; bottom:20px; right:20px; z-index:99;
  background:var(--ink); color:var(--bg); font-size:13px; font-weight:600;
  padding:10px 18px; border-radius:10px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(6px); transition:opacity .18s, transform .18s; pointer-events:none;
}
#toast.show{opacity:1; transform:translateY(0)}
@media (prefers-reduced-motion: reduce){ #toast{transition:none; transform:none} }

/* ── setup dialog ── */
dialog{
  border:1px solid var(--line); border-radius:14px; background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow); padding:22px; width:min(560px, 92vw);
}
dialog::backdrop{background:rgba(15,19,23,.55)}
.setup{display:flex; flex-direction:column; gap:12px}
.setup h2{font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif; font-size:19px; margin:0 0 4px}
.setup label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--ink2); flex:1}
.setup input,.setup select{
  font:inherit; font-size:13.5px; font-weight:400; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%;
}
.setup .row2{display:flex; gap:12px}
.setup .cA{color:var(--aka)} .setup .cB{color:var(--ao)}
.offrow{display:flex; gap:6px}
.offrow .abtn{flex:none}
.warn{font-size:12.5px; color:var(--warn); margin:0}
.setupbtns{display:flex; gap:8px; align-items:center; margin-top:6px}
.setupbtns .spacer{flex:1}
.setupbtns .pbtn{flex:0 0 auto; padding:9px 22px}

@media (max-width:900px){
  .ana{grid-template-columns:1fr}
  .videowrap{max-height:none}
}

/* ══ navigatie ══ */
.mainnav{display:flex; gap:18px; font-size:13.5px; margin-left:18px}
.mainnav a{color:var(--ink2); text-decoration:none; padding-bottom:2px}
.mainnav a:hover{color:var(--ink)}
.mainnav a.on{color:var(--ink); font-weight:600; border-bottom:2px solid var(--ink)}
.pbtn.slim{flex:0 0 auto; padding:7px 14px; font-size:12.5px; text-decoration:none; display:inline-block}
.page-doc{display:block}
.page-doc .appbar{margin-bottom:18px}

/* ══ bibliotheek ══ */
.library{max-width:860px}
.emptystate{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:34px 30px; max-width:560px; box-shadow:var(--shadow);
}
.emptystate h2{font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif; font-size:20px; margin:0 0 8px}
.emptystate p{color:var(--ink2); margin:0 0 18px}
.rowbtns{display:flex; gap:10px}
.rowbtns .pbtn{flex:0 0 auto; padding:9px 18px; text-decoration:none}
.matchlist{display:flex; flex-direction:column; gap:12px}
.mcard{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 18px; box-shadow:var(--shadow)}
.mrow1{display:flex; align-items:center; gap:12px}
.badge{
  flex:none; width:26px; height:26px; border-radius:7px; display:grid; place-items:center;
  font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:13px; font-weight:700;
}
.badge.w{background:var(--good); color:#fff}
.badge.l{background:var(--aka); color:#fff}
.badge.e{background:var(--surface3); color:var(--ink2)}
.mnames{font-size:14.5px; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.mnames .ownname{text-decoration:underline}
.mscore{font-size:15px; font-weight:700}
.mtags{margin-left:auto; font-size:11px; color:var(--ink3)}
.mrow2{display:flex; justify-content:space-between; gap:12px; color:var(--ink2); font-size:12.5px; margin:6px 0 10px; padding-left:38px}
.mrow3{display:flex; gap:8px; padding-left:38px}
.abtn.del:hover{color:var(--aka); border-color:var(--aka)}
.fieldhint{font-size:12px; color:var(--ink3); margin:0}

/* ══ dashboard ══ */
.dashpage{max-width:1080px}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.filt{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:5px 8px 5px 11px; color:var(--ink2);
}
.filt select{font:inherit; font-size:12px; font-weight:600; color:var(--ink); background:transparent; border:0}
.dash{display:grid; grid-template-columns:repeat(12,1fr); gap:12px}
.tile{grid-column:span 3; background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:13px 15px}
.tile .k{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3); font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif; margin:0}
.tile .v{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; margin:2px 0 0}
.tile .d{font-size:11.5px; color:var(--ink2); margin:2px 0 0}
.dcard{background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:14px 16px}
.dcard h4{margin:0 0 2px; font-size:13.5px; font-weight:600}
.dcard .sub{font-size:11.5px; color:var(--ink3); margin:0 0 12px}
.span6{grid-column:span 6} .span4{grid-column:span 4} .span8{grid-column:span 8} .span12{grid-column:span 12}

.hbar{display:grid; grid-template-columns:170px 1fr 34px; align-items:center; gap:10px; margin:7px 0}
.hbar .l{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hbar .track{height:12px; background:var(--surface2); border-radius:4px; position:relative; display:block}
.hbar .fill{position:absolute; inset:0 auto 0 0; border-radius:4px; background:var(--ao)}
.hbar .v{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:12px; text-align:right; font-variant-numeric:tabular-nums}

.histo{display:flex; align-items:flex-end; gap:14px; height:120px; border-bottom:1px solid var(--line); padding:16px 6px 0}
.bucket{flex:1; display:flex; align-items:flex-end; justify-content:center; gap:2px; height:100%}
.bar{width:20px; border-radius:4px 4px 0 0; position:relative}
.bar.voor{background:var(--ao)} .bar.tegen{background:var(--aka)}
.bar .bl{position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10px; color:var(--ink2)}
.histo-x{display:flex; gap:14px; padding:5px 6px 0}
.histo-x span{flex:1; text-align:center; font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:10px; color:var(--ink3)}
.legend{display:flex; gap:14px; font-size:11.5px; color:var(--ink2); margin-top:10px}
.legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px}
.legend .lv{background:var(--ao)} .legend .lt{background:var(--aka)}

.zonesrow{display:flex; align-items:center; gap:16px}
.heat-legend{display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--ink2); flex:1}
.heat-legend .row{display:flex; justify-content:space-between; gap:10px}
.heat-legend .row b{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-weight:600; color:var(--ink)}
.heat-legend .row.top{border-top:1px solid var(--line); padding-top:6px}

.ladder{display:flex; gap:8px}
.rung{flex:1; background:var(--surface2); border:1px solid var(--line); border-radius:9px; padding:9px 10px; text-align:center}
.rung .n{font-family:"SF Mono",ui-monospace,Menlo,monospace; font-size:19px; font-weight:700; margin:0}
.rung .t{font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3); font-weight:600; margin:2px 0 0}

.insights{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.insight{
  border-left:3px solid var(--ao); background:var(--surface); border-radius:0 10px 10px 0;
  border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:12px 14px; font-size:13px;
}
.insight .cat{
  display:block; margin-bottom:4px;
  font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif;
  font-size:9.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3);
}
.insight p{margin:0}

@media (max-width:900px){
  .tile{grid-column:span 6}
  .span6,.span4,.span8{grid-column:span 12}
}

/* ══ doelen ══ */
.goalspage{max-width:860px}
.goalgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px}
.goal{display:flex; flex-direction:column; gap:10px}
.ghead{display:flex; flex-direction:column; gap:2px}
.ghead b{font-size:14.5px}
.gsub{font-size:11.5px; color:var(--ink3)}
.gprog{height:10px; background:var(--surface2); border-radius:5px; position:relative; overflow:hidden}
.gfill{position:absolute; inset:0 auto 0 0; border-radius:5px; background:var(--ao)}
.gfill.ok{background:var(--good)}
.gmeta{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--ink2)}
.gmeta .mono{font-size:11.5px}
.gchecks{display:flex; flex-direction:column; gap:6px}
.check{display:flex; gap:9px; font-size:13px; align-items:baseline; background:none; border:0; padding:2px 0; text-align:left; color:var(--ink)}
.check i{flex:0 0 14px; width:14px; height:14px; border-radius:4px; border:1.5px solid var(--ink3); display:inline-block; transform:translateY(2px)}
.check.done i{background:var(--good); border-color:var(--good)}
.check.done span{color:var(--ink2); text-decoration:line-through}
.gfoot{display:flex; justify-content:space-between; align-items:center; margin-top:auto; border-top:1px solid var(--line); padding-top:10px}
.gstatus{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink3)}
.gstatus.ok{color:var(--good)}
.setup textarea{
  font:inherit; font-size:13.5px; font-weight:400; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; resize:vertical;
}

/* ══ cloud: gebruikersbalk, auth, beheer ══ */
.userchip{
  font-size:12px; font-weight:600; color:var(--ink2);
  background:var(--surface2); border:1px solid var(--line); border-radius:999px; padding:5px 12px;
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pageerror{
  background:var(--aka-soft); border:1px solid var(--aka); color:var(--ink);
  border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:14px;
}
.authpage{display:flex; min-height:100vh; align-items:center; justify-content:center}
.authwrap{width:min(420px, 94vw); display:flex; flex-direction:column; gap:8px}
.authwrap .hero-dots{display:flex; gap:7px}
.authwrap .hero-dots i{width:11px; height:11px; border-radius:50%}
.authwrap .hero-dots i:first-child{background:var(--aka)}
.authwrap .hero-dots i:last-child{background:var(--ao)}
.authtitle{font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif; font-size:38px; font-weight:700; letter-spacing:.06em; margin:4px 0 0}
.authsub{color:var(--ink2); margin:0 0 14px; font-size:14px}
.authcard{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:22px;
}
.authcard .pane{display:flex; flex-direction:column; gap:12px}
.authcard label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--ink2)}
.authcard input{
  font:inherit; font-size:14px; font-weight:400; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%;
}
.authcard h2{font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif; font-size:19px; margin:0}
.authcard p{margin:0; font-size:13.5px; color:var(--ink2)}
.authcard .pbtn{padding:11px 0}
.authseg{margin-bottom:4px}
.linkbtn{background:none; border:0; color:var(--ao); font-size:12.5px; text-align:center; padding:2px}
.linkbtn:hover{text-decoration:underline}
.authfoot{font-size:11.5px; color:var(--ink3); text-align:center}
.adminpage{max-width:720px}
.rolechip{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:var(--ao-soft); color:var(--ao); border-radius:5px; padding:2px 7px;
}
.ucard .mnames{flex-direction:column; gap:0; align-items:flex-start}
.ucard .gsub{font-weight:400}
.privacypage{max-width:640px; margin:40px auto; padding:0 8px}
.privacypage h1{font-family:"Futura","Avenir Next Condensed",system-ui,sans-serif; font-size:26px; margin:6px 0 6px; text-wrap:balance}
.privacypage h3{margin:22px 0 6px; font-size:15px}
.privacypage p{color:var(--ink2); font-size:14px}

/* ══ nieuwe-wedstrijd-dialog: video-import ══ */
.dlgvideo{position:relative; width:100%; aspect-ratio:16/9; background:#10141A; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.dlgvideo iframe{position:absolute; inset:0; width:100%; height:100%}
#dlgFileVideo{position:absolute; inset:0; width:100%; height:100%; background:#000}
#rowFile input[type="file"]{font-size:13px; padding:8px}
.offbtns{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px}
.offview{font-size:11.5px; color:var(--ink2); margin-left:auto}

/* ══ lokale videobron + AI-suggesties ══ */
.filevideo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000}
.dropzone{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center; text-align:center; padding:24px;
  color:#E8ECEF; font-size:13.5px; cursor:pointer; line-height:1.55;
}
.dropzone b{font-size:15px}
.dropzone span{color:rgba(232,236,239,.72); font-size:12.5px}
.dropzone.hover{outline:2px dashed #E8ECEF; outline-offset:-12px}
.aibtn{font-family:"Avenir Next","Avenir",system-ui,sans-serif; font-weight:600; margin-left:10px}
.aibtn:not(:disabled){color:var(--ao); border-color:var(--ao)}
.aibtn:not(:disabled):hover{background:var(--ao-soft)}
.aiprogress{
  position:absolute; left:14px; right:14px; bottom:12px; height:6px;
  background:rgba(255,255,255,.25); border-radius:3px; overflow:hidden;
}
.aiprogress i{display:block; height:100%; width:0%; background:#E8ECEF; transition:width .2s}
.mk.n{background:var(--surface3)}
.mk.sug{background:var(--surface); border:2px dashed var(--ink3)}
.arow .dot.s{background:transparent; border:2px dashed var(--ink3); width:6px; height:6px}
.panel[data-fighter="none"] .tag.on{border-color:var(--ink2); background:var(--surface3); font-weight:600}
.panel[data-fighter="none"] .zone.on{border-color:var(--ink2); background:var(--surface3)}
.panel[data-fighter="none"] .zonepart.on{fill:var(--surface3); stroke:var(--ink2); stroke-width:2}