/* ======================================================================
   排球轮次规则讲解器 · 独立设计（室内球场蓝 + 界线黄主题）
   浅色 = 浅看台 + 蓝地胶；深色 = 夜场灯光
   ====================================================================== */
.vb{
  --ink:#122033; --sub:#4d627e; --faint:#8ba0ba;
  --bg:#eef3f9; --card:#ffffff; --card2:#e8f0f8; --line:#d2dfec; --line2:#e0eaf4;
  --pri:#1d5fa8; --pri-2:#3b82d6; --pri-soft:#ddebfa; --pri-ink:#14457c;
  --court:#2b6cb0; --court2:#245c96; --court-line:#ffd43b; --court-txt:#eaf4ff;
  --gold:#e8b008; --gold-ink:#8a6500; --gold-soft:#fdf3d3;
  --green:#2f8f5b; --green-soft:#e4f4ec;
  --red:#c02b2b; --red-soft:#fbe6e6;
  --r:14px;
  --shadow:0 1px 2px rgba(18,32,51,.06),0 12px 30px rgba(29,95,168,.13);
  color:var(--ink);
  font-family:-apple-system,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.75;
  background:
    radial-gradient(820px 380px at 90% -140px, rgba(59,130,214,.14), transparent 60%),
    radial-gradient(560px 300px at 0% 160px, rgba(232,176,8,.08), transparent 60%),
    var(--bg);
  padding:0 16px 56px;
}
:root[data-theme="dark"] .vb{
  --ink:#e2ebf5; --sub:#93a7c0; --faint:#5f7692;
  --bg:#0a111d; --card:#111c2c; --card2:#16253a; --line:#243a56; --line2:#1d3149;
  --pri:#4d9be6; --pri-2:#74b5f0; --pri-soft:rgba(77,155,230,.14); --pri-ink:#a8d1f5;
  --court:#1a4a7d; --court2:#153c66; --court-line:#e8b008; --court-txt:#dcecff;
  --gold:#fbbf24; --gold-ink:#fcd34d; --gold-soft:rgba(251,191,36,.12);
  --green:#4ade80; --green-soft:rgba(74,222,128,.12);
  --red:#f87171; --red-soft:rgba(248,113,128,.12);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
}
.vb *{box-sizing:border-box;}
.vb b{font-weight:700;}
.vb-wrap{max-width:1120px;margin:0 auto;}
.vb input{font-family:inherit;}

/* ---------- 首屏：记分牌横幅 ---------- */
.vb-hero{
  margin-top:22px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);
  background:linear-gradient(120deg,var(--court),var(--court2) 70%);
  border:1px solid var(--pri);position:relative;
}
.vb-hero:after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:repeating-linear-gradient(90deg,var(--court-line) 0 26px,transparent 26px 52px);}
.vb-hero-in{padding:26px 28px 24px;position:relative;}
.vb-hero h1{margin:0 0 8px;font-size:clamp(24px,3.6vw,32px);font-weight:900;color:#fff;line-height:1.3;}
.vb-hero p{margin:0;color:#cfe3f8;font-size:14.5px;max-width:760px;}
.vb-hero p em{font-style:normal;color:var(--court-line);font-weight:800;}
.vb-ball{position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:58px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.3));}
@media (max-width:640px){.vb-ball{display:none;}}

/* ---------- 工作台 ---------- */
.vb-desk{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;margin-top:20px;}
@media (max-width:940px){.vb-desk{grid-template-columns:1fr;}}
.vb-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px;}
.vb-card h2{margin:0 0 4px;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.vb-num{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:7px;background:var(--pri);color:#fff;font-size:12px;font-weight:800;}
:root[data-theme="dark"] .vb-num{color:#08131f;}
.vb-tip{font-size:12.5px;color:var(--sub);margin:0 0 12px;}
.vb-svgwrap{background:var(--card2);border:1px solid var(--line2);border-radius:12px;padding:8px;}
.vb svg{display:block;width:100%;height:auto;}

.vb-ctl{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:center;}
.vb-btn{border:none;border-radius:10px;padding:9px 18px;font-size:13.5px;font-weight:800;cursor:pointer;transition:all .15s;}
.vb-btn-go{background:var(--pri);color:#fff;}
:root[data-theme="dark"] .vb-btn-go{color:#08131f;}
.vb-btn-go:hover{background:var(--pri-2);}
.vb-btn-gold{background:var(--gold);color:#3a2c00;}
.vb-btn-gold:hover{filter:brightness(1.08);}
.vb-btn-ghost{background:var(--card2);color:var(--pri-ink);border:1px solid var(--line);}
.vb-btn-ghost:hover{border-color:var(--pri-2);}
.vb-btn-warn{background:var(--red-soft);color:var(--red);border:1px solid var(--red);}
.vb-sw{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;user-select:none;}
.vb-sw input{width:17px;height:17px;accent-color:var(--pri);}

.vb-names{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
@media (max-width:560px){.vb-names{grid-template-columns:repeat(2,1fr);}}
.vb-nf{display:flex;flex-direction:column;gap:3px;}
.vb-nf label{font-size:11.5px;color:var(--faint);font-weight:700;}
.vb-nf input{background:var(--card2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:6px 9px;font-size:13px;outline:none;width:100%;}
.vb-nf input:focus{border-color:var(--pri-2);box-shadow:0 0 0 3px var(--pri-soft);}

.vb-status{border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:700;margin-bottom:12px;}
.vb-status.ok{background:var(--green-soft);color:var(--green);}
.vb-status.bad{background:var(--red-soft);color:var(--red);}
.vb-server{background:var(--gold-soft);border:1px dashed var(--gold);border-radius:10px;padding:10px 14px;font-size:13.5px;margin-bottom:12px;color:var(--ink);}
.vb-server b{color:var(--gold-ink);font-size:16px;}
.vb-rule{font-size:13px;color:var(--sub);background:var(--card2);border:1px solid var(--line2);border-radius:10px;padding:10px 14px;margin-bottom:10px;}
.vb-rule b{color:var(--pri-ink);}
.vb-msg{margin-top:10px;font-size:13px;min-height:20px;font-weight:600;}
.vb-msg.err{color:var(--red);}
.vb-msg.ok{color:var(--green);}

/* ---------- 轮次表 ---------- */
.vb-rounds{margin-top:18px;overflow-x:auto;}
.vb-table{width:100%;border-collapse:collapse;font-size:13px;min-width:640px;}
.vb-table th,.vb-table td{border:1px solid var(--line);padding:7px 9px;text-align:center;}
.vb-table th{background:var(--card2);font-weight:800;}
.vb-table td.sv{background:var(--gold-soft);font-weight:800;color:var(--gold-ink);}
.vb-table td.cur{outline:2px solid var(--pri);outline-offset:-2px;}
.vb-table td.front{color:var(--pri-ink);font-weight:700;}

/* ---------- FAQ ---------- */
.vb-faq{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);}
.vb-faq h2{margin:0 0 12px;font-size:19px;font-weight:900;}
.vb-faq h3{margin:18px 0 6px;font-size:15.5px;font-weight:800;color:var(--pri-ink);}
.vb-faq p{margin:0;color:var(--sub);font-size:14px;}
.vb-faq p b{color:var(--ink);}