:root{
  --bg:#ffffff; --fg:#1a1d21; --muted:#6b7280; --line:#e5e7eb;
  --card:#ffffff; --accent:#2d8cff; --accent-fg:#ffffff;
  --warn-bg:#fff7e6; --warn-fg:#8a5a00; --danger:#c33;
  --chip:#f3f4f6;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16181d; --fg:#e8eaed; --muted:#9aa0a6; --line:#2b2f36;
    --card:#1e2127; --accent:#2d8cff; --accent-fg:#ffffff;
    --warn-bg:#3a2f10; --warn-fg:#ffd479; --danger:#ff6b6b;
    --chip:#2a2e35;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:14px/1.6 -apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic UI",sans-serif;
}
.bar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px;
  padding:10px 14px; background:var(--bg); border-bottom:1px solid var(--line);
}
.bar h1{font-size:15px; margin:0; flex:1}
main{padding:12px; display:flex; flex-direction:column; gap:12px}
.card{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:12px}
.card h2{font-size:13px; margin:0 0 8px; color:var(--muted); font-weight:600}
.head{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.head h2{margin:0; flex:1}
.count{
  display:inline-block; min-width:20px; padding:0 6px; margin-left:4px;
  background:var(--chip); border-radius:10px; text-align:center;
  font-size:12px; color:var(--fg);
}
.pill{padding:2px 8px; border-radius:10px; font-size:11px; background:var(--chip); color:var(--muted)}
.pill-ok{background:#e6f4ea; color:#137333}
.pill-wait{background:var(--warn-bg); color:var(--warn-fg)}
.pill-ng{background:#fce8e6; color:#c5221f}
@media (prefers-color-scheme:dark){
  .pill-ok{background:#12331f; color:#7ee2a8}
  .pill-ng{background:#3a1a18; color:#ff8a80}
}
.people{list-style:none; margin:0 0 8px; padding:0; max-height:180px; overflow:auto}
.people li{padding:5px 8px; border-bottom:1px solid var(--line); font-size:13px}
.people li:last-child{border-bottom:0}
.empty{color:var(--muted); font-size:12px; padding:6px 0}
.btn{
  display:block; width:100%; padding:9px 12px; margin-top:6px;
  border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg);
  font-size:13px; font-weight:600; cursor:pointer;
}
.btn:hover:not(:disabled){border-color:var(--accent)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--accent); color:var(--accent-fg); border-color:var(--accent)}
.btn.ghost{background:transparent; font-weight:500}
.btn.danger{color:var(--danger); border-color:var(--danger)}
.btns{display:flex; gap:8px}
.btns .btn{margin-top:8px}
.row{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px}
.row span{flex:1}
.row input[type=number]{
  width:70px; padding:5px 8px; border:1px solid var(--line);
  border-radius:6px; background:var(--bg); color:var(--fg);
}
.check{display:flex; gap:8px; align-items:flex-start; margin:8px 0; font-size:13px; cursor:pointer}
.check input{margin-top:3px; flex:0 0 auto}
.check small{display:block; color:var(--muted); font-size:11px; line-height:1.5}
.rooms{display:flex; flex-direction:column; gap:6px}
.room{border:1px solid var(--line); border-radius:8px; padding:8px}
.room-head{display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px}
.room-head .n{margin-left:auto; font-size:11px; color:var(--muted)}
.room.full .room-head .n{color:var(--danger)}
.room-members{margin:4px 0 0; padding:0; list-style:none; font-size:12px; color:var(--muted)}
.room-members li{padding:1px 0}
.hint{margin:6px 0 0; font-size:11px; color:var(--muted)}
.log{max-height:200px; overflow:auto; font-size:11px; line-height:1.7; font-family:ui-monospace,Consolas,monospace}
.log div{padding:1px 0; border-bottom:1px solid var(--line); word-break:break-all}
.log .warn{color:var(--warn-fg)}
.log .err{color:var(--danger)}