:root{--bg:#0f1115;--panel:#181b22;--line:#2a2f3a;--fg:#e6e8ee;--muted:#9aa3b2;--red:#e5372b;--blue:#2f6bff;--gold:#f4c430;--ok:#3ecf6a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 system-ui,Segoe UI,Roboto,sans-serif}
header{display:flex;align-items:center;gap:16px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
header h1{font-size:18px;margin:0;letter-spacing:.5px}header .sp{flex:1}header a{color:var(--muted);text-decoration:none;margin-left:14px}
main{max-width:1100px;margin:0 auto;padding:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:16px}
.card h2{margin:0 0 10px;font-size:16px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
input,select,button,textarea{font:inherit;color:var(--fg);background:#0b0d12;border:1px solid var(--line);border-radius:6px;padding:8px 10px}
button{cursor:pointer;background:#232838}button.primary{background:var(--gold);color:#111;font-weight:600;border-color:transparent}
button.red{background:var(--red)}button.blue{background:var(--blue)}button:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.slot{border:2px solid var(--line);border-radius:10px;padding:12px;background:#12151c}.slot.red{border-color:var(--red)}.slot.blue{border-color:var(--blue)}
.slot.mine{box-shadow:0 0 0 3px var(--gold) inset}.slot .who{font-weight:600;min-height:22px}.muted{color:var(--muted)}.err{color:#ff6b6b}.ok{color:var(--ok)}
table{width:100%;border-collapse:collapse}td,th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
textarea{width:100%;min-height:420px;font-family:ui-monospace,Menlo,monospace;font-size:13px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#232838;font-size:12px;color:var(--muted)}