:root{--bg:#07090f;--panel:#111827;--line:#263049;--gold:#e9b949;--gold2:#f7dc87;--text:#eef1f7;--muted:#9aa6c2;--red:#ef5350;--green:#2ea043;--pitch:#1d6b35}
*{box-sizing:border-box}
html,body{margin:0}
html{background:#06080d}
body{background:radial-gradient(1400px 700px at 50% -250px,#1d2d50 0,#0a0f1c 55%,#06080d 100%) fixed;color:var(--text);font-family:Rubik,system-ui,sans-serif;font-size:16px;line-height:1.5;min-height:100vh}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--gold2)}
.top{position:sticky;top:0;z-index:20;display:flex;gap:12px;align-items:center;padding:10px 16px;background:rgba(6,8,13,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.06em;color:var(--gold);white-space:nowrap;direction:ltr}
.badge{width:30px;height:34px;background:linear-gradient(180deg,#f7dc87,#b8862a);clip-path:polygon(50% 0,100% 15%,100% 65%,50% 100%,0 65%,0 15%);display:grid;place-items:center;color:#111;font-size:12px;font-weight:900}
select.ws{background:#121a2c;border:1px solid var(--line);border-radius:10px;padding:7px 10px}
nav{display:flex;gap:4px;overflow-x:auto;flex:1 1 400px;scrollbar-width:none}
nav a{padding:7px 13px;border-radius:999px;color:var(--muted);text-decoration:none;white-space:nowrap;font-weight:500;font-size:15px}
nav a:hover{color:var(--text);background:#151d31}
nav a.on{background:var(--gold);color:#1a1300;font-weight:700}
.mini{display:none;cursor:pointer;background:#1a2440;border:1px solid var(--gold);color:var(--gold2);border-radius:999px;padding:5px 12px;font-weight:700;font-variant-numeric:tabular-nums;direction:ltr}
.mini.on{display:inline-block}
main{max-width:1200px;margin:0 auto;padding:22px 16px 90px}
h1.page{font-weight:900;font-size:clamp(30px,4.4vw,48px);line-height:1.1;margin:4px 0 6px;background:linear-gradient(180deg,#fff6d2 0,#e9b949 60%,#b8862a);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);margin:0 0 20px;font-size:17px}
h2{font-size:22px;margin:0 0 12px;font-weight:800}
h3{font-size:18px;margin:0 0 8px;color:var(--gold2)}
.card{background:linear-gradient(180deg,#131c30,#0d1322);border:1px solid var(--line);border-radius:18px;padding:18px}
.card.gold{border-color:#6b5420;background:linear-gradient(180deg,#1d1a10,#0f0e09)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.mt{margin-top:16px}.mt2{margin-top:28px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.center{justify-content:center}
.btn{background:linear-gradient(180deg,#f3cf6a,#d7a43a);color:#1a1300;border:0;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.ghost{background:#151e33;border:1px solid var(--line);color:var(--text);border-radius:12px;padding:9px 14px;cursor:pointer;font-weight:500}
.ghost:hover{border-color:#3a4870}
.ghost.on{border-color:var(--gold);color:var(--gold2)}
.ic{background:#182238;border:1px solid var(--line);border-radius:8px;width:30px;height:30px;cursor:pointer;line-height:1;padding:0}
.ic:hover{border-color:var(--gold)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:#1a2440;color:var(--muted);font-size:13px}
.muted{color:var(--muted)}
.big{font-size:20px}
ol.q,ul.q{margin:0;padding-inline-start:22px}
ol.q li,ul.q li{margin:6px 0}
.note{border-inline-start:3px solid var(--gold);padding:8px 14px;background:#141b2c;border-radius:8px;color:#d9deea}
/* home */
.wscard{cursor:pointer;transition:.15s}
.wscard:hover{border-color:#4a5a88}
.wscard.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.swatch{display:inline-block;width:18px;height:18px;border-radius:50%;border:2px solid #fff3;vertical-align:-3px}
.tile{display:block;text-decoration:none;color:var(--text);padding:18px;border-radius:16px;background:#111a2d;border:1px solid var(--line)}
.tile:hover{border-color:var(--gold)}
.tile b{display:block;font-size:18px;margin:6px 0 2px}
.tile span{color:var(--muted);font-size:14px}
.tile i{font-style:normal;font-size:26px}
/* teams */
.thead{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--tc);color:var(--ti);margin:-6px -6px 10px;font-size:20px}
.thead .cnt{margin-inline-start:auto;font-weight:800}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;align-items:center;gap:10px;padding:7px 4px;border-bottom:1px solid #1c2540}
.num{min-width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:800;border:1px solid #fff3;font-size:15px}
.nm{flex:1;display:flex;flex-direction:column;line-height:1.25}
.nm small{color:var(--muted);font-size:13px}
.tools{display:flex;gap:4px;opacity:.55}
.plist li:hover .tools{opacity:1}
textarea,input[type=text],input[type=number],input[type=date]{background:#0b1120;border:1px solid var(--line);border-radius:10px;padding:10px;width:100%}
textarea{min-height:110px;resize:vertical}
/* schedule */
.sched{width:100%;border-collapse:collapse}
.sched td{padding:12px 10px;border-bottom:1px solid #1c2540;vertical-align:top}
.sched tr.now td{background:#1d1a0f}
.sched tr.now td:first-child{box-shadow:inset -4px 0 0 var(--gold)}
.time{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700;color:var(--gold2);direction:ltr;text-align:right}
details.sub2{margin-top:8px}
details.sub2 summary{cursor:pointer;color:var(--muted);font-size:14px}
.subrow{display:flex;gap:10px;align-items:center;padding:6px 0;border-top:1px dashed #222c47;font-size:15px;flex-wrap:wrap}
.subrow .time{min-width:92px;font-weight:500}
.subrow .what{flex:1;min-width:180px}
/* timer */
.timerwrap{text-align:center;padding:24px 10px;border-radius:24px;background:radial-gradient(600px 300px at 50% 0,#13213d,#0b101d);border:1px solid var(--line)}
.tlabel{font-size:clamp(20px,3vw,32px);font-weight:700;color:var(--gold2);min-height:1.4em}
.clock{font-variant-numeric:tabular-nums;font-size:clamp(96px,21vw,280px);font-weight:800;line-height:1;letter-spacing:-.02em;direction:ltr;margin:6px 0 16px;transition:color .3s}
.clock.warn{color:var(--gold)}
.clock.end{color:var(--red);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.presets{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.preset{text-align:start;background:#111a2d;border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
.preset:hover{border-color:var(--gold)}
.preset b{display:block}
.preset span{color:var(--muted);font-size:13px}
.rot{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin:6px auto 18px;max-width:900px}
.rotcol{border-radius:18px;padding:14px;background:var(--tc);color:var(--ti)}
.rotcol .lbl{font-size:14px;opacity:.75}
.rotcol .cur{font-size:clamp(28px,4vw,46px);font-weight:900;line-height:1.15}
.rotcol .nxt{font-size:18px;opacity:.8}
.slot{font-size:clamp(40px,7vw,80px);font-weight:900;direction:ltr;font-variant-numeric:tabular-nums}
/* pitch */
.pitchwrap{max-width:440px;margin:0 auto}
svg.pitch text{font-family:Rubik,sans-serif}
/* score */
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;text-align:center}
.tbadge{border-radius:16px;padding:14px;background:var(--tc);color:var(--ti);font-weight:900;font-size:clamp(20px,3vw,30px)}
.tbadge.win{box-shadow:0 0 0 3px var(--gold),0 0 30px #e9b94966}
.scoreNum{font-size:clamp(60px,10vw,120px);font-weight:900;font-variant-numeric:tabular-nums;direction:ltr;line-height:1}
.half{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:6px 0}
.half .lbl{min-width:120px;color:var(--muted)}
.pick{border-radius:10px;padding:7px 12px;cursor:pointer;border:1px solid var(--line);background:#121a2c;font-weight:700}
.pick.sel{background:var(--tc);color:var(--ti);border-color:var(--gold)}
.dots{display:inline-flex;gap:6px}
.dot{width:16px;height:16px;border-radius:50%;background:#26304d;border:1px solid #fff2}
.verdict{font-size:22px;font-weight:800;color:var(--gold2);margin-top:10px}
table.tbl{width:100%;border-collapse:collapse}
table.tbl th,table.tbl td{padding:10px;border-bottom:1px solid #1c2540;text-align:start}
table.tbl th{color:var(--muted);font-weight:500}
/* press */
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.do{color:#7ee2a0}.dont{color:#ff9b98}
.meter{height:26px;border-radius:999px;background:#2a1416;overflow:hidden;display:flex}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#2ea043,#58d27a)}
.trap{font-size:clamp(24px,3.4vw,40px);font-weight:800;min-height:2.6em;display:grid;place-items:center;text-align:center;padding:10px}
/* mabat */
.pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px}
.pair{background:#111a2d;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;gap:8px;align-items:center}
.pair .n{width:26px;height:26px;border-radius:50%;background:var(--gold);color:#111;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.qbig{font-size:clamp(24px,3.6vw,42px);font-weight:800;line-height:1.3;text-align:center;padding:24px 10px;min-height:5em;display:grid;place-items:center}
.qnum{width:64px;height:64px;border-radius:50%;border:3px solid var(--gold);display:grid;place-items:center;font-size:30px;font-weight:900;color:var(--gold);margin:0 auto}
.mabat-img{width:100%;max-width:360px;border-radius:14px;border:1px solid var(--line);display:block;margin:0 auto}
/* me */
.phone{max-width:430px;margin:0 auto;border:1px solid var(--line);border-radius:28px;padding:18px;background:#0b1120}
.idcard{border-radius:18px;padding:16px;background:var(--tc);color:var(--ti);display:flex;gap:14px;align-items:center}
.idcard .num{width:56px;height:56px;font-size:26px;background:#0003;color:inherit}
.demo{background:#2a2110;border:1px solid #6b5420;color:#f7dc87;border-radius:12px;padding:8px 12px;font-size:14px}
.stars{display:flex;gap:6px;direction:ltr;justify-content:flex-end}
.star{font-size:28px;cursor:pointer;color:#34405f;background:none;border:0;padding:0}
.star.on{color:var(--gold)}
/* overlay + screen */
#big{position:fixed;inset:0;z-index:50;background:rgba(5,7,12,.97);display:none;flex-direction:column;align-items:center;justify-content:center;padding:40px;text-align:center}
#big.on{display:flex}
#big .t{color:var(--gold);font-weight:800;font-size:clamp(20px,2.6vw,30px);margin-bottom:20px}
#big .x{font-size:clamp(30px,5vw,64px);font-weight:800;line-height:1.3;max-width:1300px}
#big .close{position:absolute;top:16px;left:16px}
.exitscreen{display:none;position:fixed;top:12px;left:12px;z-index:40;opacity:.4}
.exitscreen:hover{opacity:1}
body.screen .top{display:none}
body.screen .exitscreen{display:block}
body.screen main{max-width:none;padding-top:30px}
body.screen .noscreen{display:none!important}
body:not(.fac) .fac{display:none!important}
body.fac .nofac{display:none!important}
.lock{background:#151e33;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap;font-size:14px}
body.fac .lock{border-color:var(--gold);color:var(--gold2)}
#login{position:fixed;inset:0;z-index:55;background:rgba(5,7,12,.85);display:none;align-items:center;justify-content:center;padding:20px}
#login.on{display:flex}
#login .card{max-width:380px;width:100%}
.facbox{border:1px dashed #6b5420;border-radius:18px;padding:4px}
.factag{display:inline-block;font-size:12px;color:#1a1300;background:var(--gold);border-radius:999px;padding:1px 8px;margin-inline-start:8px;vertical-align:middle;font-weight:700}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1d2742;border:1px solid var(--gold);padding:10px 18px;border-radius:12px;opacity:0;transition:.3s;pointer-events:none;z-index:60}
#toast.on{opacity:1}
@media (max-width:640px){.two{grid-template-columns:1fr}.match{grid-template-columns:1fr}.half .lbl{min-width:auto;width:100%}}
/* --- full version additions --- */
label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px}
label.ghost{flex-direction:row;align-items:center;gap:8px;color:var(--text);font-size:15px}
label.btn{display:inline-flex;flex-direction:row;color:#1a1300;font-size:16px}
select.ws{color:var(--text)}
.tbl input[type=text],.tbl input[type=number]{padding:7px 8px}
.lock.on{border-color:var(--gold);color:var(--gold2)}
body.proj .exitscreen{opacity:.15}
