:root{
  --ground:#0e1116; --panel:#161a20; --panel-2:#1c212a; --panel-3:#232a34;
  --edge:#2b323d; --edge-soft:#212732;
  --ink:#e9edf3; --ink-dim:#98a3b2; --ink-faint:#6b7684;
  --home:#dfae3c; --home-fill:#3a3018;
  --away:#37b7c7; --away-fill:#123139;
  --up:#3fbf7f; --up-fill:#12301f;
  --down:#e0605a; --down-fill:#331a1a;
  --flat:#9aa5b4; --flat-fill:#252b34;
  --team:var(--home); --team-fill:var(--home-fill);
  --sans:"Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;}
html,body{background:var(--ground);}
body{margin:0;padding-inline:14px;padding-block:0 calc(40px + env(safe-area-inset-bottom,0px));
  color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;}
button,input{font:inherit;color:inherit;}
button{cursor:pointer;}
button:focus-visible,input:focus-visible{outline:2px solid var(--home);outline-offset:2px;}
[hidden]{display:none!important;}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}
.wrap{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:16px;}
.wrap>*{min-width:0;}
[data-team="away"]{--team:var(--away);--team-fill:var(--away-fill);}

/* 台头 */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--ground);
  display:flex;align-items:center;gap:10px;padding-block:12px 10px;border-bottom:1px solid var(--edge);}
.top h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;}
.top h1 .h{color:var(--home);} .top h1 .a{color:var(--away);}
.top h1 .vs{font-family:var(--mono);font-size:.6em;font-weight:400;color:var(--ink-faint);padding-inline:.35em;}
.live{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
.live i{width:7px;height:7px;border-radius:50%;background:var(--ink-faint);}
.live.ok i{background:var(--up);} .live.bad i{background:var(--down);}
.role{font-family:var(--mono);font-size:10.5px;padding:2px 7px;border:1px solid var(--edge);border-radius:2px;color:var(--ink-dim);}
.role.admin{color:var(--home);border-color:var(--home);}

/* 分区标题 */
.sec{background:var(--panel);border:1px solid var(--edge);border-radius:4px;}
.sec-head{display:flex;align-items:baseline;gap:10px;padding:11px 14px;border-bottom:1px solid var(--edge-soft);}
.sec-head h2{margin:0;font-size:13px;font-weight:700;}
.sec-head .hint{font-size:11.5px;color:var(--ink-faint);}
.sec-head .right{margin-left:auto;}
.step-no{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);}

/* 积分榜 */
.board{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--edge-soft);}
.col{background:var(--panel);padding:8px;display:flex;flex-direction:column;gap:5px;min-width:0;}
.col-head{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 4px;}
.col-head b{color:var(--team);font-size:14px;}
.col-head span{font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
.pl{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px;
  padding:6px 8px;background:var(--panel-2);border-left:3px solid var(--flat);border-radius:2px;}
.pl.up{border-left-color:var(--up);} .pl.down{border-left-color:var(--down);}
.pl .nm{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pl .sc{font-family:var(--mono);font-size:13.5px;text-align:right;}
.pl .df{grid-column:1/-1;display:flex;justify-content:space-between;font-size:10.5px;font-family:var(--mono);color:var(--ink-faint);}
.pl.up .df b{color:var(--up);} .pl.down .df b{color:var(--down);} .pl .df b{font-weight:500;}
.pl input{width:74px;text-align:right;background:var(--ground);border:1px solid var(--edge);border-radius:2px;
  padding:3px 6px;font-family:var(--mono);font-size:13.5px;}

/* 下注单 */
.block{padding:12px 14px;border-bottom:1px solid var(--edge-soft);display:flex;flex-direction:column;gap:9px;}
.block:last-child{border-bottom:0;}
.label{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-dim);}
.label b{color:var(--ink);font-weight:500;}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--edge);border-radius:3px;overflow:hidden;}
.seg button{appearance:none;border:0;background:transparent;padding:9px 6px;font-size:13.5px;color:var(--ink-dim);}
.seg button+button{border-left:1px solid var(--edge);}
.seg button[aria-pressed="true"]{background:var(--panel-3);color:var(--ink);box-shadow:inset 0 -2px 0 var(--team);}
.seg .sub{display:block;font-size:10.5px;color:var(--ink-faint);font-weight:400;}

.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:6px;}
.chip{appearance:none;text-align:left;background:var(--panel-2);border:1px solid var(--edge);border-radius:3px;
  padding:7px 9px;display:flex;flex-direction:column;gap:1px;}
.chip .nm{font-size:13.5px;font-weight:500;}
.chip .sc{font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
.chip.up .sc{color:var(--up);} .chip.down .sc{color:var(--down);}
.chip[aria-pressed="true"]{border-color:var(--team);background:var(--team-fill);}
.chip[aria-pressed="true"] .nm::after{content:" ✓";color:var(--team);}

.outs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.out{appearance:none;background:var(--panel-2);border:1px solid var(--edge);border-radius:3px;
  padding:9px 8px 8px;text-align:left;display:flex;flex-direction:column;gap:2px;}
.out .t{font-size:12.5px;color:var(--ink-dim);}
.out .o{font-family:var(--mono);font-size:22px;font-weight:600;line-height:1.1;}
.out .p{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);}
.out.win .t{color:var(--up);} .out.loss .t{color:var(--down);}
.out[aria-pressed="true"]{border-color:var(--team);background:var(--team-fill);}

.ladder{display:flex;flex-direction:column;gap:3px;max-height:340px;overflow-y:auto;}
.rung{appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid transparent;border-left:3px solid var(--flat);border-radius:2px;
  padding:7px 10px;text-align:left;}
.rung.up{border-left-color:var(--up);} .rung.down{border-left-color:var(--down);}
.rung .t{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rung .p{font-family:var(--mono);font-size:10.5px;color:var(--ink-faint);}
.rung .o{font-family:var(--mono);font-size:15px;font-weight:600;min-width:52px;text-align:right;}
.rung.now .t::after{content:" · 当前";color:var(--team);font-size:11px;}
.rung[aria-pressed="true"]{border-color:var(--team);background:var(--team-fill);}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.field{display:flex;flex-direction:column;gap:4px;min-width:0;}
.field label{font-size:11.5px;color:var(--ink-faint);}
.field input{background:var(--panel-2);border:1px solid var(--edge);border-radius:3px;padding:9px 10px;width:100%;}
.field input.num{font-size:15px;}
.quick{display:flex;gap:5px;flex-wrap:wrap;}
.quick button{appearance:none;background:transparent;border:1px solid var(--edge);border-radius:2px;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-dim);padding:5px 9px;}

.confirm{background:var(--panel-2);border:1px solid var(--edge);border-radius:3px;padding:10px 12px;
  display:flex;flex-direction:column;gap:6px;}
.confirm .what{font-size:13px;color:var(--ink-dim);}
.confirm .cond{font-size:14.5px;font-weight:500;}
.confirm .money{display:flex;align-items:baseline;gap:6px;font-family:var(--mono);font-size:13px;color:var(--ink-dim);}
.confirm .money b{font-size:18px;color:var(--ink);font-weight:600;}
.place{appearance:none;border:0;border-radius:3px;background:var(--team);color:#14110a;
  font-size:15.5px;font-weight:700;padding:12px;}
.place:disabled{background:var(--panel-3);color:var(--ink-faint);cursor:not-allowed;}
.msg{font-size:12.5px;color:var(--ink-dim);}
.msg.ok{color:var(--up);} .msg.err{color:var(--down);}

/* 注单 */
.bets{display:flex;flex-direction:column;}
.bet{padding:11px 14px;border-bottom:1px solid var(--edge-soft);display:flex;flex-direction:column;gap:5px;}
.bet:last-child{border-bottom:0;}
.bet-top{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--ink-faint);}
.bet-top .who{color:var(--ink);font-weight:500;font-size:13.5px;}
.bet-top .when{margin-left:auto;font-family:var(--mono);}
.tag{font-size:11px;padding:1px 6px;border-radius:2px;background:var(--team-fill);color:var(--team);white-space:nowrap;}
.bet .line1{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;}
.bet .pickl{font-size:15px;font-weight:700;}
.bet .cond{font-size:13px;color:var(--ink-dim);}
.bet .cond::before{content:"中奖条件 ";color:var(--ink-faint);font-size:11.5px;}
.bet .snap{font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
.bet .money{display:flex;align-items:baseline;gap:8px;font-family:var(--mono);font-size:12.5px;color:var(--ink-dim);}
.bet .money b{color:var(--ink);font-size:14px;}
.bet .del{margin-left:auto;appearance:none;background:transparent;border:1px solid var(--edge);border-radius:2px;
  color:var(--ink-faint);font-size:11px;padding:3px 8px;}
.bet .del:hover{color:var(--down);border-color:var(--down);}
.empty{padding:22px 14px;text-align:center;color:var(--ink-faint);font-size:13px;}
.filter{display:flex;gap:6px;align-items:center;}
.filter input{background:var(--panel-2);border:1px solid var(--edge);border-radius:2px;padding:4px 8px;width:110px;font-size:12.5px;}

/* 管理 */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;padding:12px 14px;}
.admin-grid .desc{font-size:11.5px;color:var(--ink-faint);}
.danger{appearance:none;background:transparent;border:1px solid var(--down);color:var(--down);border-radius:3px;padding:8px 12px;font-size:13px;}

/* 口令 */
.gate{position:fixed;inset:0;z-index:20;background:var(--ground);display:flex;align-items:center;justify-content:center;padding:20px;}
.gate form{width:min(340px,100%);display:flex;flex-direction:column;gap:12px;}
.gate h1{margin:0;font-size:24px;}
.gate h1 .h{color:var(--home);} .gate h1 .a{color:var(--away);}
.gate p{margin:0;font-size:13px;color:var(--ink-dim);}
.gate input{background:var(--panel);border:1px solid var(--edge);border-radius:3px;padding:12px;
  font-family:var(--mono);font-size:22px;letter-spacing:.3em;text-align:center;}
.gate button{border:0;border-radius:3px;background:var(--home);color:#14110a;font-weight:700;padding:12px;font-size:15px;}

@media (min-width:640px){
  .outs .out .o{font-size:26px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}