/* Olympia 5 Matchday Studio — donkere studio-stijl */
:root{ --bg:#0F0F0F; --card:#1A1A1A; --line:#262626; --ink:#FFF; --mut:#929293; --red:#DF3223; }
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent }
button,input,select{ touch-action:manipulation }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink);
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif }
header{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px;
  background:#000; padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px; border-bottom:1px solid #1c1c1c }
header img{ height:34px }
header .ht{ flex:1; font-size:17px; font-weight:400; letter-spacing:.3px }
header .ht b{ font-weight:900 }
.hbtn{ background:#262626; color:#fff; border:none; border-radius:100px; padding:9px 16px; font:500 13px 'Roboto' }
main{ max-width:560px; margin:0 auto; padding:14px 14px calc(30px + env(safe-area-inset-bottom,0px)) }
.tplrow{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px }
.tplpill{ flex:1 1 28%; padding:11px 0; border:none; border-radius:100px; background:#1A1A1A; color:var(--mut);
  font:500 13.5px 'Roboto'; border:1px solid var(--line) }
.tplpill.on{ background:var(--red); border-color:var(--red); color:#fff; font-weight:700 }
.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:12px }
h3{ margin:6px 0 10px; font-size:16px }
.mut{ color:var(--mut) } .center{ text-align:center } .small{ font-size:12px }
code{ background:#262626; border-radius:5px; padding:1px 6px; font-size:12px }
.field{ margin-bottom:10px }
.field label{ display:block; font-size:12.5px; font-weight:500; color:var(--mut); margin-bottom:5px }
input,select{ font:inherit; width:100%; padding:11px 12px; border:1px solid #3d3d3d; border-radius:8px;
  background:#202020; color:#fff }
input[type=file]{ padding:8px }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:9px }
.selgrid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:7px }
.selp{ border:1px solid #3d3d3d; background:#202020; color:var(--mut); border-radius:10px; padding:10px 4px;
  font:500 12.5px 'Roboto'; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.selp b{ color:#fff; margin-right:2px }
.selp.on{ background:rgba(223,50,35,.16); border-color:var(--red); color:#fff }
.prevwrap{ background:#000; border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:12px }
#cv{ display:block; width:100%; height:auto }
.actrow{ display:flex; gap:9px }
.btn{ flex:1; border:none; border-radius:100px; padding:14px 0; background:var(--red); color:#fff;
  font:700 15px 'Roboto' }
.btn.ghost{ background:#262626; font-weight:500 }
.btn.mini{ padding:9px 16px; font-size:13px; flex:none }
.btn.gray{ background:#262626 }
.prow{ display:flex; gap:7px; margin-bottom:7px }
.prow .pnm{ flex:1 }
.prow .pnr{ width:74px }
.prow .pdel{ width:42px; border:none; border-radius:8px; background:#262626; color:#E54937; font-size:15px }

.fmtrow{ display:flex; gap:7px; margin-bottom:12px }
.fmtpill{ flex:1; padding:9px 0; border-radius:100px; background:#161616; color:var(--mut);
  font:500 12.5px 'Roboto'; border:1px solid var(--line) }
.fmtpill.on{ color:#fff; border-color:var(--red); background:rgba(223,50,35,.14); font-weight:700 }