:root{
  --ink:#1d2733; --ink-2:#46535f; --muted:#7d8995; --faint:#aab4bd;
  --line:#e4e9ef; --line-2:#eef2f6; --page:#e9edf1; --card:#ffffff;
  --blue:#1463a8; --blue-d:#0f4e85; --blue-dd:#0b3d69; --blue-soft:#e9f2fb; --blue-tint:#f2f8fd;
  --green:#15803d; --green-d:#116631; --green-soft:#e8f6ed; --green-line:#bfe6cb;
  --amber:#b4690e; --amber-2:#e08a1e; --amber-soft:#fdf4e4; --amber-line:#f0d9a8;
  --red:#c0392b; --red-soft:#fbeceb;
  --radius:12px; --radius-sm:8px; --radius-xs:6px;
  --shadow:0 1px 2px rgba(18,40,60,.05), 0 6px 18px -8px rgba(18,40,60,.16);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Roboto Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
}
.bp-wrap h1,.bp-wrap h2,.bp-wrap h3{color:var(--ink)}
.page-h{display:flex;align-items:center;gap:14px;padding:18px 0 14px;flex-wrap:nowrap}
.page-h h1{margin:0;font-size:22px;font-weight:700;white-space:nowrap;flex:none}
.page-h .h-sub{font-size:13px;color:var(--muted);flex:1;min-width:0}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

.btn{appearance:none; font:inherit; font-weight:600; cursor:pointer; border-radius:var(--radius-xs);
  padding:9px 17px; border:1px solid transparent; display:inline-flex; align-items:center; gap:7px;
  transition:all .14s; line-height:1; white-space:nowrap; font-size:14px}
.btn-primary{background:var(--blue); color:#fff} .btn-primary:hover{background:var(--blue-d)}
.btn-green{background:var(--green); color:#fff} .btn-green:hover{background:var(--green-d)}
.btn-amber{background:var(--amber-2); color:#fff} .btn-amber:hover{background:var(--amber)}
.btn-ghost{background:#fff; color:var(--ink-2); border-color:var(--line)} .btn-ghost:hover{background:#f6f8fa; border-color:#d3dbe3}
.btn-sm{padding:6px 12px; font-size:13px} .btn-lg{padding:11px 22px; font-size:15px}
.btn:disabled{opacity:.5; cursor:not-allowed}

.pill{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:650;
  padding:3px 10px; border-radius:999px; line-height:1.3; white-space:nowrap}
.pill .d{width:6px; height:6px; border-radius:50%}
.pill-open{background:var(--green-soft); color:var(--green-d)} .pill-open .d{background:var(--green)}
.pill-soon{background:var(--amber-soft); color:var(--amber)} .pill-soon .d{background:var(--amber-2)}
.pill-closed{background:#eef1f4; color:var(--muted)} .pill-closed .d{background:var(--faint)}
.pill-done{background:var(--blue-soft); color:var(--blue-d)} .pill-done .d{background:var(--blue)}

.summary{display:flex; flex-wrap:wrap; gap:12px; margin:2px 0 4px}
.sum-card{flex:1; min-width:150px; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 15px; background:#fff; display:flex; flex-direction:column; gap:3px}
.sum-card.pool{background:linear-gradient(180deg,var(--green-soft),#fff); border-color:var(--green-line)}
.sum-card.clock{background:linear-gradient(180deg,var(--amber-soft),#fff); border-color:var(--amber-line)}
.sum-card .sc-label{font-size:11.5px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:6px}
.sum-card .sc-val{font-size:24px; font-weight:780; letter-spacing:-.5px; line-height:1.1}
.sum-card.pool .sc-val{color:var(--green-d)}
.sum-card .sc-val .u{font-size:13px; font-weight:600; color:var(--muted); margin-left:3px}
.pool-sponsor-hint{font-size:13px; font-weight:600; color:var(--green); margin-left:4px}
.sum-card .sc-sub{font-size:11.5px; color:var(--muted)}
.cd{font-variant-numeric:tabular-nums; color:var(--amber)} .cd.urgent{color:var(--red)}

.meta-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; color:var(--ink-2); font-size:13px; margin-top:8px}
.meta-row .mi{display:inline-flex; align-items:center; gap:6px}
.meta-row a{color:var(--blue-d); text-decoration:none}
.meta-row a:hover{text-decoration:underline}
.meta-sep{width:1px; height:13px; background:var(--line); display:inline-block}

.opts-head{display:flex; align-items:center; justify-content:space-between; margin:6px 0 2px}
.opts-head h3{font-size:14px; margin:0; font-weight:700; color:var(--ink)}
.opts-head .oh-hint{font-size:12px; color:var(--muted)}

.opts{display:flex; flex-direction:column; gap:10px}
.opt{position:relative; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; overflow:hidden; transition:border-color .15s, box-shadow .15s}
.opt:hover{border-color:#cdd8e2}
.opt.mine{border-color:var(--blue); box-shadow:0 0 0 1px var(--blue) inset}
.opt.win{border-color:var(--amber-2); border-left-width:4px; background:var(--amber-soft)}
.win-badge{font-size:11px; font-weight:700; color:#fff; background:var(--amber-2); border-radius:999px; padding:2px 8px; white-space:nowrap}
.opt-fill{display:none !important}
.opt-body{position:relative; z-index:1; padding:13px 15px; display:flex; align-items:center; gap:14px}
.opt-main{flex:1; min-width:0}
.opt-name{font-size:15.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px}
.opt-name .star{color:var(--amber-2)}
.opt-sub{font-size:12px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.opt-sub > span{white-space:nowrap}
.opt-sub b{color:var(--ink-2); font-weight:650}

.odds{flex:none; text-align:center; border-radius:var(--radius-xs); padding:6px 12px; min-width:64px;
  background:#0e1c2b; color:#fff}
.odds .ov{font-size:17px; font-weight:780; font-family:var(--mono); line-height:1}
.odds .ol{font-size:9.5px; color:#9fb3c4; letter-spacing:.4px; margin-top:3px}
.odds.flat{background:#eef2f6; color:var(--muted)} .odds.flat .ol{color:var(--faint)}

.sharebar{height:6px; border-radius:999px; background:#eef2f6; overflow:hidden; margin-top:9px}
.sharebar > i{display:block; height:100%; background:var(--blue); border-radius:999px;
  transition:width .5s cubic-bezier(.22,.61,.36,1)}
.opt.win .sharebar > i{background:var(--amber-2)}

.mybet{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:650;
  color:var(--blue-d); background:var(--blue-soft); border-radius:999px; padding:2px 9px}

.betctl{position:relative; z-index:1; display:flex; align-items:center; gap:9px 12px; flex-wrap:wrap;
  padding:12px 15px 13px; border-top:1px solid var(--line-2)}
.betctl > form{display:contents}
.betctl input[type=hidden]{display:none}
.betctl .amt-wrap{position:relative; flex:0 0 auto; width:170px; min-width:140px; max-width:200px}
.betctl .amt-wrap > input{width:100%; max-width:170px}
.betctl > input{flex:0 0 auto; width:170px; max-width:170px}
.betctl .chips,
.betctl .btn,
.betctl .bet-bal{flex:0 0 auto}
.betctl .payout-preview{flex:0 1 auto; min-width:160px}
.betctl .amt-wrap .u{position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--muted); pointer-events:none}
.betctl .input{padding-right:36px}
.input{box-sizing:border-box; width:100%; font:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid #cfd8e1; border-radius:var(--radius-xs); padding:10px 12px;
  transition:border .14s, box-shadow .14s}
.input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}
.chips{display:flex; gap:5px}
.chip{font:inherit; font-size:12px; font-weight:600; border:1px solid var(--line); background:#fff;
  color:var(--ink-2); border-radius:999px; padding:4px 10px; cursor:pointer; transition:all .12s; white-space:nowrap}
.chip:hover{border-color:var(--blue); color:var(--blue-d); background:var(--blue-tint)}
.chip:disabled{opacity:.45; cursor:not-allowed}
.payout-preview{font-size:12.5px; color:var(--green-d); background:var(--green-soft);
  border:1px solid var(--green-line); border-radius:var(--radius-xs); padding:6px 11px;
  display:flex; align-items:center; gap:7px}
.payout-preview b{font-weight:750; font-family:var(--mono)}
.payout-preview.muted{color:var(--muted); background:#f4f7fa; border-color:var(--line)}
.bet-bal{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--muted); white-space:nowrap}
.bet-bal b{color:var(--ink-2); font-weight:700}

.bettors{position:relative; z-index:1; padding:0 15px 13px; display:flex; flex-direction:column; gap:6px; max-width:340px}
.bettor{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.bettor .bn{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bettor.me .bn{font-weight:700; color:var(--ink)}
.bettor .ba{font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums}
.bettor .payout-got{color:var(--green-d); font-weight:700; margin-left:6px}
.expand-btn{font-size:12.5px; color:var(--blue); cursor:pointer; align-self:flex-start;
  display:inline-flex; align-items:center; gap:4px}
.av{width:24px; height:24px; border-radius:50%; flex:none; display:inline-flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700; color:#fff}

.notice{display:flex; gap:10px; align-items:flex-start; padding:12px 15px; border-radius:var(--radius-sm);
  font-size:13.5px; line-height:1.55}
.notice.amber{background:var(--amber-soft); border:1px solid var(--amber-line); color:#7a4a08}
.notice.blue{background:var(--blue-soft); border:1px solid #c7dff4; color:var(--blue-dd)}
.notice.green{background:var(--green-soft); border:1px solid var(--green-line); color:var(--green-d)}
.notice .ni{flex:none; margin-top:1px}

.field{margin-bottom:18px}
.field > label{display:block; font-weight:650; font-size:13.5px; margin-bottom:7px; color:var(--ink)}
.field .hint{color:var(--muted); font-size:12.5px; margin-top:6px}
.textarea,.select{width:100%; font:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  border:1px solid #cfd8e1; border-radius:var(--radius-xs); padding:10px 12px; transition:border .14s, box-shadow .14s}
.textarea:focus,.select:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}
.textarea{resize:vertical; min-height:84px; line-height:1.55}

.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl thead th{text-align:left; font-size:12px; font-weight:700; color:var(--muted);
  padding:9px 12px; border-bottom:2px solid var(--line); background:#f8fafc}
.tbl tbody td{padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle}
.tbl tbody tr:hover{background:var(--blue-tint)}
.tbl tbody tr:last-child td{border-bottom:none}

.sponsor-bettor{align-items:flex-start; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-2)}
.sponsor-list{max-width:100%}
.sponsor-type-pill{font-size:11px; padding:2px 8px}
.sponsor-comment-text{font-size:12px; color:var(--ink-2); margin-top:3px}
.sponsor-time-text{font-size:11px; color:var(--muted); margin-top:2px}
.sponsor-empty{font-size:13px; margin:8px 0}
.sponsor-form-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:12px}
.sponsor-form-title{font-size:14px; font-weight:700}
.sponsor-direction{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.sponsor-dir-label{font-size:13px; color:var(--ink-2)}
.sponsor-radio{display:flex; align-items:center; gap:5px; font-size:13px; cursor:pointer}
.sponsor-amount-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.sponsor-amt-wrap{position:relative; width:160px}
.sponsor-amt-wrap input{width:100%; padding-right:34px}
.sponsor-amt-wrap .u{position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--muted); pointer-events:none}
.sponsor-textarea{resize:vertical; width:100%; max-width:480px}
.sponsor-comment-row{width:100%; margin-top:6px}
.sponsor-feedback{margin-top:6px}

@media (max-width:720px){
  .summary{flex-direction:row} .sum-card{min-width:120px}
  .opt-body{flex-wrap:wrap}
}