:root{
  --bg:#0c0c10;
  --bg-soft:#16161e;
  --card:#1c1c26;
  --gold:#d4a843;
  --gold-soft:#e8c96a;
  --text:#f0ece2;
  --text-dim:#8a8698;
  --line:#2a2a38;
  --win:#4ade80;
  --bye:#60a5fa;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--bg);color:var(--text);font-family:'Noto Sans SC',system-ui,sans-serif;min-height:100vh}
h1,h2,h3,.serif{font-family:'Noto Serif SC',serif}

.view{display:none;min-height:100vh;padding:32px 20px 60px}
.view.active{display:block}
.phase{display:none}
.phase.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.container{max-width:1080px;margin:0 auto}
.narrow{max-width:420px}

.btn{
  display:inline-block;padding:11px 26px;border:none;border-radius:6px;
  font-size:15px;font-weight:500;cursor:pointer;transition:all .2s;font-family:inherit;
}
.btn-primary{background:var(--gold);color:#1a1a1a}
.btn-primary:hover:not(:disabled){background:var(--gold-soft);transform:translateY(-1px)}
.btn-primary:disabled{background:#3a3a44;color:#888;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--text-dim);border:1px solid var(--line)}
.btn-ghost:hover{color:var(--text);border-color:var(--text-dim)}
.btn-sm{padding:7px 14px;font-size:13px}
.btn-block{width:100%;margin-top:6px}
.btn-lg{padding:13px 40px;font-size:16px}

.field{
  width:100%;padding:11px 14px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:6px;color:var(--text);
  font-size:14px;font-family:inherit;outline:none;transition:border-color .2s;
}
.field:focus{border-color:var(--gold)}
.muted{color:var(--text-dim);font-size:13px}

/* ===== 加入页 ===== */
.join-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:36px 28px;text-align:center;margin-top:8vh;
}
.logo{font-size:40px;color:var(--gold);margin-bottom:8px}
.join-card h1{font-size:30px;font-weight:900;letter-spacing:2px;margin-bottom:6px}
.subtitle{color:var(--text-dim);font-size:13px;margin-bottom:26px;line-height:1.6}
.field-label{display:block;text-align:left;font-size:13px;color:var(--text-dim);margin:14px 0 6px}
.hint{color:var(--text-dim);font-size:12px;margin-top:16px;line-height:1.6}
.hint.center{text-align:center;margin-top:12px}

/* ===== 房间头 ===== */
.room-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:16px;flex-wrap:wrap;margin-bottom:24px;
}
.room-tag{font-size:12px;color:var(--text-dim);letter-spacing:2px}
.room-id{font-family:'Noto Serif SC',serif;font-size:26px;font-weight:700;color:var(--gold)}
.head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.conn{font-size:12px;padding:5px 12px;border-radius:20px;border:1px solid var(--line)}
.conn-on{color:var(--win);border-color:rgba(74,222,128,.4);background:rgba(74,222,128,.1)}
.conn-off{color:#f87171;border-color:rgba(248,113,113,.4);background:rgba(248,113,113,.1)}

/* ===== 面板 ===== */
.panel{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px;margin-bottom:18px;
}
.panel-title{font-size:16px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.panel-title.big{justify-content:center;font-size:22px;margin:10px 0 24px}

.add-row{display:flex;gap:10px;flex-wrap:wrap}
.add-row .field{flex:1;min-width:140px}
.add-tools{display:flex;justify-content:space-between;align-items:center;margin-top:12px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}

/* ===== 歌单 ===== */
.playlist{display:flex;flex-direction:column;gap:8px}
.song{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:8px;transition:all .2s;
}
.song-main{flex:1;min-width:0}
.song-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song-sub{font-size:12px;color:var(--text-dim);margin-top:2px}
.song-sub .by{color:var(--gold-soft)}
.del-btn{
  flex:none;background:transparent;border:none;color:var(--text-dim);
  font-size:16px;cursor:pointer;padding:4px 6px;line-height:1;
}
.del-btn:hover{color:#f87171}

.start-bar{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}

/* ===== 参赛者 / 选择公示 ===== */
.people{display:flex;flex-direction:column;gap:8px}
.person{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;
}
.person.me{border-color:rgba(212,168,67,.5)}
.dot{width:8px;height:8px;border-radius:50%;background:#555;flex:none}
.dot.online{background:var(--win);box-shadow:0 0 6px rgba(74,222,128,.6)}
.person-name{font-size:14px;font-weight:500}

/* ===== 淘汰赛：轮次条 ===== */
.round-bar{
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 20px;margin-bottom:18px;
}
.round-no{font-family:'Noto Serif SC',serif;font-size:18px;font-weight:700;color:var(--gold)}
.round-status{font-size:13px;color:var(--text-dim)}
.round-status.done{color:var(--win)}

/* ===== 对阵卡片 ===== */
.pairs{display:flex;flex-direction:column;gap:14px}
.pair-card{
  background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;
  padding:12px;display:flex;flex-direction:column;gap:8px;position:relative;
}
.pair-card.bye{border-color:rgba(96,165,250,.4);background:rgba(96,165,250,.08)}
.song-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:12px 14px;background:var(--card);border:1px solid var(--line);
  border-radius:8px;color:var(--text);font-size:14px;cursor:pointer;font-family:inherit;
  transition:all .15s;
}
.song-opt:hover{border-color:var(--gold-soft);transform:translateX(2px)}
.song-opt.picked{
  background:rgba(212,168,67,.16);border-color:var(--gold);color:var(--gold-soft);font-weight:500;
}
.song-opt.picked::after{content:"✓";margin-left:auto;color:var(--gold)}
.bye-opt{cursor:default;color:var(--bye);border-color:rgba(96,165,250,.4)}
.bye-opt:hover{transform:none;border-color:rgba(96,165,250,.4)}
.vs-tag{
  font-size:11px;padding:2px 8px;border-radius:10px;background:rgba(96,165,250,.2);
  color:var(--bye);flex:none;
}
.opt-title{font-weight:500}
.vs{
  text-align:center;font-size:11px;color:var(--text-dim);letter-spacing:3px;
}

/* ===== 公示板 ===== */
.board{display:flex;flex-direction:column;gap:10px}
.person-picks{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pick-chip{
  font-size:12px;padding:3px 10px;border-radius:20px;
  background:rgba(138,134,152,.12);color:var(--text-dim);border:1px solid var(--line);
}
.pick-chip.chosen{
  background:rgba(212,168,67,.16);color:var(--gold-soft);border-color:rgba(212,168,67,.4);font-weight:500;
}
.pick-chip.bye-chip{background:rgba(96,165,250,.12);color:var(--bye);border-color:rgba(96,165,250,.3)}
.pick-empty{font-size:12px;color:var(--text-dim)}

/* ===== 结束页 ===== */
.champions{display:flex;flex-direction:column;gap:10px;max-width:560px;margin:0 auto}
.champion{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;
}
.champion.me{border-color:rgba(212,168,67,.5)}
.champ-name{font-size:15px;font-weight:600;min-width:90px}
.champ-song{font-size:15px;color:var(--gold-soft);font-weight:500}

.actions{margin-top:22px}
.actions.center{text-align:center}

.empty{color:var(--text-dim);font-size:13px;text-align:center;padding:24px 0}

/* ===== Toast ===== */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:#000;color:var(--text);border:1px solid var(--line);
  padding:10px 20px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;
  transition:all .25s;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}