:root {
  --bg:#0f1115; --panel:#171a21; --panel-2:#1d212a; --line:#262b36;
  --text:#dfe3ea; --muted:#8b93a3; --accent:#4c8dff; --win:#3ecf8e; --lose:#ff6b6b;
  --warn:#f0b429; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
body { margin:0; font:14px/1.6 -apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; color:var(--text); background:var(--bg); }
[v-cloak] { display:none; }
.mono,.money { font-family:var(--mono); }
.money { font-variant-numeric:tabular-nums; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.tiny { font-size:11px; }
.num { text-align:right; }
.win { color:var(--win); }
.lose,.bad,.err { color:var(--lose); }
.boot { padding:40px; text-align:center; color:var(--muted); }
.gate { min-height:100vh; display:flex; justify-content:center; align-items:center; padding:16px; }
.gate-box { width:380px; padding:32px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }
.gate-box h1 { margin:0; font-size:22px; }
.gate-box input { width:100%; margin:0 0 12px; }
.gate-box button { width:100%; }
.shell { display:flex; min-height:100vh; }
aside { display:flex; flex-direction:column; width:190px; flex-shrink:0; padding:20px 0; background:var(--panel); border-right:1px solid var(--line); }
.brand { padding:0 20px 20px; font-size:18px; font-weight:600; }
.brand span { display:block; color:var(--muted); font-size:11px; }
nav { flex:1; }
nav button { display:block; width:100%; text-align:left; padding:10px 20px; border:0; border-left:2px solid transparent; border-radius:0; background:transparent; color:var(--muted); }
nav button.active { color:var(--text); background:var(--panel-2); border-left-color:var(--accent); }
.side-foot { padding:16px 20px 0; border-top:1px solid var(--line); }
.side-foot .mono { margin-bottom:10px; }
main { flex:1; min-width:0; padding:24px 28px 50px; }
.page-head { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom:12px; }
.page-head h2 { margin:0; font-size:18px; }
input,select,button { font:inherit; color:var(--text); padding:7px 10px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; }
input,select { min-width:150px; }
input[type=number] { width:80px; min-width:80px; }
button { cursor:pointer; padding:7px 14px; }
button:hover:not(:disabled) { border-color:var(--accent); }
button:disabled { cursor:not-allowed; opacity:.4; }
button.primary { color:white; background:var(--accent); border-color:var(--accent); }
button.ghost { background:transparent; }
button.small { padding:4px 10px; font-size:12px; }
input:focus,select:focus { outline:1px solid var(--accent); }
button:focus-visible,summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.filters { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.filter-panel { margin:16px 0; align-items:flex-end; }
.filters label { display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:12px; }
.bar,.ok-msg { padding:9px 12px; margin-bottom:14px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; }
.ok-msg { color:var(--win); }
.table-wrap { overflow-x:auto; margin-top:12px; }
table { width:100%; min-width:850px; border-collapse:collapse; }
th,td { padding:11px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--muted); font-size:12px; font-weight:500; background:var(--panel); white-space:nowrap; }
td { white-space:nowrap; }
tbody tr:hover { background:var(--panel); }
.empty { padding:28px; text-align:center; color:var(--muted); }
.balls { display:inline-flex; gap:4px; }
.balls i { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; padding:0 5px; font-family:var(--mono); font-size:12px; font-style:normal; background:var(--panel-2); border:1px solid var(--line); border-radius:12px; }
.balls.balls-five { display:inline-grid; grid-template-columns:repeat(5,24px); }
.games-table { min-width:1100px; }
.games-table td { vertical-align:middle; padding:16px 12px; }
.game-name { font-weight:500; }
.game-key { font-size:12px; margin-top:4px; }
.games-sync { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.game-info { display:grid; grid-template-columns:max-content max-content; gap:6px 12px; align-items:center; margin:0; font-size:12px; }
.game-info dt { color:var(--muted); }
.game-info dd { margin:0; font-variant-numeric:tabular-nums; }
.game-info .balls { vertical-align:middle; }
.round-countdown { color:var(--accent); font-size:14px; font-weight:600; }
.round-countdown.urgent { color:var(--warn); }
.round-error { margin:8px 0 0; max-width:260px; white-space:normal; overflow-wrap:anywhere; }
.game-params { display:grid; grid-template-columns:64px max-content; gap:2px 14px; margin:0; font-size:12px; }
.game-params dt { color:var(--muted); }
.game-params dd { margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.history-table { min-width:1100px; }
.round-settings { display:grid; gap:2px; margin:0; font-size:12px; }
.round-settings > div { display:grid; grid-template-columns:64px max-content; gap:10px; }
.round-settings dt { color:var(--muted); }
.round-settings dd { margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.round-settings-inline { display:flex; flex-wrap:wrap; gap:6px 20px; }
.round-settings-inline > div { grid-template-columns:64px minmax(0,1fr); max-width:100%; }
.round-settings-inline dd { min-width:0; overflow-wrap:anywhere; }
.detail-settings { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 20px; margin-bottom:16px; }
.tag { display:inline-block; padding:1px 7px; font-size:11px; border-radius:10px; }
.tag.ok { color:var(--win); background:rgb(62 207 142 / 12%); }
.tag.off { color:var(--muted); background:rgb(139 147 163 / 12%); }
.tag.warn { color:var(--warn); background:rgb(240 180 41 / 12%); }
.pager { display:flex; gap:14px; align-items:center; justify-content:center; margin-top:18px; }
.modal-mask { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgb(0 0 0 / 60%); }
.modal { width:380px; max-width:calc(100vw - 32px); max-height:90vh; overflow:auto; padding:22px 24px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.modal h3 { margin:0 0 16px; font-size:16px; }
.modal input { width:100%; margin-bottom:10px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
.game-setting-modal { width:480px; }
.game-setting-modal h3 { margin:0; }
.game-setting-modal .page-head { align-items:flex-start; }
.setting-description { color:var(--muted); font-size:12px; margin:0 0 20px; }
.setting-field { display:flex; flex-direction:column; gap:6px; margin:0 0 18px; }
.setting-field label { font-weight:500; }
.setting-input { display:flex; align-items:center; border:1px solid var(--line); border-radius:6px; background:var(--panel-2); overflow:hidden; }
.setting-input:focus-within { border-color:var(--accent); }
.game-setting-modal .setting-input input { width:100%; min-width:0; margin:0; padding:10px 12px; border:0; border-radius:0; outline:none; font-family:var(--mono); background:transparent; }
.input-unit { flex-shrink:0; padding:0 12px; color:var(--muted); }
.game-setting-modal .modal-actions { padding-top:16px; border-top:1px solid var(--line); }
.detail-modal { width:min(1500px,calc(100vw - 40px)); }
.detail-modal .filters input { width:auto; margin:0; }
.detail-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; padding:12px 0 16px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.detail-draw-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; min-width:0; font-size:13px; }
.detail-draw-meta > * { white-space:nowrap; }
.detail-draw-meta > * + *::before { content:"·"; margin-right:10px; color:var(--muted); }
.detail-numbers { flex-shrink:0; max-width:100%; line-height:1; }
.detail-numbers .balls { max-width:100%; flex-wrap:wrap; }
.detail-batch-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; font-size:12px; }
.detail-batch-meta > span { white-space:nowrap; }
.detail-tools { display:grid; grid-template-columns:minmax(180px,1fr) auto; align-items:start; gap:12px 20px; }
.snapshot-meta { grid-column:1 / -1; grid-row:1; min-width:0; overflow-wrap:anywhere; }
.snapshot-meta > summary { width:fit-content; padding:8px 0; }
.snapshot-content { margin-top:12px; padding:12px 14px; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; }
.snapshot-content p { margin:0 0 8px; }
.detail-filters { grid-column:2; grid-row:1; justify-content:flex-end; margin:0; }
.detail-filters label { flex-direction:row; align-items:center; gap:8px; white-space:nowrap; }
.detail-filters select { min-width:100px; max-width:200px; font-size:13px; }
summary { cursor:pointer; color:var(--accent); }
pre { max-width:400px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:860px) {
  .shell { display:block; }
  aside { width:100%; padding:12px; border-right:0; }
  nav { display:flex; }
  nav button { padding:8px 12px; white-space:nowrap; }
  .brand { padding:0 0 8px; }
  .side-foot { display:flex; align-items:center; gap:8px; padding:8px 0 0; }
  .side-foot .mono { margin:0; }
  main { padding:16px; }
  .detail-modal { max-width:calc(100vw - 16px); }
  .pager { gap:8px; font-size:12px; }
}
@media (max-width:760px) {
  .detail-modal { width:calc(100vw - 16px); padding:16px; }
  .detail-tools { grid-template-columns:minmax(0,1fr); gap:8px; }
  .detail-filters { grid-column:1; grid-row:2; justify-content:flex-start; }
  .detail-summary { justify-content:flex-start; }
  .detail-batch-meta > span { white-space:normal; }
  .detail-batch-meta time { white-space:nowrap; }
}
@media (max-width:380px) {
  .detail-numbers .balls { display:inline-grid; grid-template-columns:repeat(5,28px); max-width:156px; }
}