:root {
  color-scheme: dark;
  --bg: #071017;
  --panel: #0d1922;
  --panel-2: #111f29;
  --line: #263945;
  --text: #e8f0f4;
  --muted: #8da2ae;
  --accent: #5dd6c0;
  --red: #ef5b64;
  --blue: #4f8cff;
  --green: #42c879;
  --warning: #f3bc52;
  --shadow: 0 12px 30px rgb(0 0 0 / 28%);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; width: 100%; height: 100%; min-width: 0; min-height: 0;
  overflow: hidden; background: var(--bg); color: var(--text);
}
body { padding: 0; }
button, input, select { font: inherit; }
button {
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel-2);
  color: var(--text); cursor: pointer; transition: border-color .15s, transform .15s, background .15s;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .45; }
.primary { border-color: #3bbca5; background: var(--accent); color: #06201b; font-weight: 750; }
.eyebrow { margin: 0 0 3px; color: var(--accent); font-size: 10px; letter-spacing: .16em; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(20px, 2vw, 30px); letter-spacing: -.035em; }

.top-actions {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: center; min-width: 0; gap: clamp(3px, .35vw, 6px);
}
.top-actions button {
  min-width: 0; min-height: clamp(28px, 4vh, 34px); padding: 0 clamp(2px, .5vw, 10px);
  overflow: hidden; font-size: clamp(9px, .75vw, 12px); white-space: nowrap; text-overflow: ellipsis;
}

.profit-positive { color: var(--green) !important; }
.profit-negative { color: var(--red) !important; }

.workspace {
  width: 100%; height: 100dvh; min-width: 0; min-height: 0;
  padding: clamp(4px, .7vw, 10px); overflow: hidden;
}
.casino-console {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  gap: clamp(4px, .6vw, 9px); padding: clamp(4px, .6vw, 9px);
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow);
}
.console-upper {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, .82fr) minmax(0, .9fr);
  align-items: stretch; min-width: 0; min-height: 0; gap: clamp(4px, .6vw, 9px);
}
.video-placeholder {
  position: relative; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0;
  overflow: hidden; border: 1px solid #1d303b; border-radius: 7px;
  background:
    radial-gradient(circle at center, rgb(31 58 70 / 38%), transparent 48%), #020609;
}
.video-stage {
  position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0;
  overflow: hidden; background: #02070a;
}
.video-stage canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%;
  object-fit: contain; background: #02070a;
}
.video-stage canvas[hidden] { display: none; }
.video-status {
  position: absolute; inset: 0; display: grid; z-index: 2;
  place-content: center; gap: 6px; padding: 16px;
  color: #536976; text-align: center; pointer-events: none;
  background: radial-gradient(circle at center, rgb(31 58 70 / 42%), transparent 52%);
}
.video-status[hidden] { display: none; }
.video-status strong { color: #8295a0; font-size: clamp(15px, 1.6vw, 24px); }
.video-status span { font-size: 11px; }
.video-countdown {
  position: absolute; top: clamp(8px, 1.1vw, 18px); right: clamp(8px, 1.1vw, 18px);
  z-index: 3; display: grid; width: clamp(48px, 5.5vw, 84px); aspect-ratio: 1;
  place-items: center; pointer-events: none;
  border: clamp(2px, .22vw, 4px) solid #f3d56a; border-radius: 50%;
  background: rgb(5 13 18 / 82%); color: #fff5bd;
  box-shadow: 0 0 0 3px rgb(0 0 0 / 36%), 0 8px 24px rgb(0 0 0 / 46%);
  font-size: clamp(21px, 2.7vw, 42px); font-weight: 850; line-height: 1;
  text-shadow: 0 2px 8px rgb(0 0 0 / 75%);
}
.video-countdown.urgent {
  border-color: #ff6b35; color: #ff624d;
  box-shadow: 0 0 0 3px rgb(0 0 0 / 36%), 0 0 20px rgb(255 80 42 / 52%);
}
.control-column {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: 100%; height: 100%; min-width: 0; min-height: 0; gap: clamp(4px, .55vw, 8px);
}
.runtime-panel { min-width: 0; }
.runtime-grid {
  display: grid; min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px; background: #0a151d;
}
.runtime-row {
  display: grid; align-items: center; min-width: 0; min-height: clamp(27px, 3.8vh, 37px);
  color: var(--muted); font-size: clamp(9px, .72vw, 12px);
}
.runtime-row + .runtime-row { border-top: 1px solid var(--line); }
.runtime-primary { grid-template-columns: auto 1fr; gap: 10px; padding: 0 clamp(6px, .7vw, 10px); }
.runtime-primary strong { color: var(--text); }
.runtime-primary #active-table-round { text-align: left; }
.runtime-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.runtime-split > span {
  min-width: 0; height: 100%; padding: 0 clamp(5px, .65vw, 10px);
  display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.runtime-split > span + span { border-left: 1px solid var(--line); }
.runtime-row strong, .runtime-row span, .runtime-row b { font-size: inherit; }
.runtime-row b { color: var(--text); }
.bet-panel-stack { min-width: 0; min-height: 0; height: 100%; }
.bet-panel-stack .manual-bet-zone:not([hidden]) { height: 100%; }
.right-column {
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: 100%; height: 100%; min-width: 0; min-height: 0; gap: clamp(4px, .55vw, 8px);
}
.road-panel-stack { min-width: 0; min-height: 0; height: 100%; }
.manual-bet-zone[hidden], .road-panel[hidden] { display: none; }

.console-lower {
  display: grid; grid-template-columns: clamp(72px, 7vw, 112px) minmax(0, 1fr);
  height: min(40dvh, calc((100vw - clamp(72px, 7vw, 112px) - 36px) / 5));
  align-items: stretch; min-width: 0; min-height: 0; gap: clamp(4px, .5vw, 8px);
}
.table-tabs {
  display: grid; grid-template-rows: repeat(4, minmax(0, 1fr));
  min-width: 0; min-height: 0; gap: clamp(3px, .4vw, 6px);
}
.table-tab {
  display: flex; align-items: center; justify-content: space-between;
  min-width: 0; min-height: 0; padding: clamp(2px, .45vw, 7px) clamp(3px, .6vw, 10px);
  overflow: hidden;
  border-color: var(--line); background: var(--panel); color: var(--muted); box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}
.table-tab span { min-width: 0; font-size: clamp(8px, .75vw, 13px); font-weight: 750; white-space: nowrap; }
.table-tab strong { min-width: 0; color: var(--muted); font-size: clamp(13px, 1.4vw, 22px); line-height: 1; text-align: right; }
.table-tab.bet-open strong { color: var(--accent); }
.table-tab.urgent strong { color: var(--warning); }
.table-tab[aria-selected="true"] { border-color: var(--accent); background: #122932; color: var(--text); box-shadow: inset 0 0 0 1px var(--accent), 0 8px 24px rgb(0 0 0 / 24%); }
.table-tab[aria-selected="true"] strong { color: var(--accent); }
.table-tab[aria-selected="true"].urgent strong { color: var(--warning); }

.road-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: stretch; width: 100%; height: 100%; min-width: 0; min-height: 0;
  gap: clamp(4px, .5vw, 8px);
}
.road-zone {
  width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px; background: #f8fafb;
}
.canvas-shell {
  display: flex; width: 100%; height: 100%; max-width: 100%;
  align-items: flex-start; justify-content: flex-start; overflow: hidden; background: #f8fafb;
}
.bead-canvas-shell { aspect-ratio: 10 / 6; }
.composite-canvas-shell { aspect-ratio: 40 / 12; }
.road-zone canvas { display: block; max-width: 100%; }

.manual-bet-zone {
  position: relative; display: grid; align-content: space-between;
  gap: clamp(4px, .65vh, 9px); min-width: 0; min-height: 0;
  padding: clamp(6px, .8vw, 12px); overflow: hidden;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2);
}
.manual-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.manual-sides button { display: flex; min-height: clamp(34px, 6vh, 52px); flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: clamp(16px, 1.4vw, 22px); font-weight: 800; }
.manual-sides button:first-child { color: var(--red); }
.manual-sides button:last-child { color: #73a3ff; }
.manual-sides button.selected { border-color: currentColor; background: rgb(255 255 255 / 8%); box-shadow: inset 0 0 0 1px currentColor; }
.manual-side-label { line-height: 1; }
.manual-side-amount { max-width: 100%; overflow: hidden; font-size: clamp(10px, .9vw, 14px); line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.manual-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.manual-chips button { min-width: 0; max-height: 56px; padding: 4px 1px; border-radius: 50%; font-size: clamp(8px, .7vw, 11px); font-weight: 750; aspect-ratio: 1; }
.manual-total { padding: clamp(6px, 1vh, 10px) 5px; overflow: hidden; border-radius: 5px; background: #07141c; font-size: clamp(9px, .78vw, 13px); font-weight: 700; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.manual-actions { display: grid; grid-template-columns: minmax(54px, .38fr) 1fr; gap: 7px; }
.manual-actions button { min-height: clamp(32px, 5vh, 42px); }
.manual-risk { color: var(--warning); font-size: 11px; line-height: 1.4; }
.manual-overlay { position: absolute; inset: 0; display: grid; place-content: center; padding: 12px; background: rgb(8 17 24 / 92%); text-align: center; backdrop-filter: blur(2px); }
.manual-overlay[hidden] { display: none; }
.manual-overlay strong { color: var(--accent); font-size: 21px; }
.manual-overlay small { margin-top: 5px; color: var(--muted); }

.activity-rail {
  display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  min-width: 0; min-height: 0; gap: clamp(4px, .55vw, 8px);
}
.run-bet-list { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #0a1218; box-shadow: var(--shadow); }
.run-bet-list > header { display: flex; align-items: baseline; justify-content: space-between; min-width: 0; padding: clamp(5px, .6vw, 9px) clamp(6px, .7vw, 12px); border-bottom: 1px solid var(--line); }
.run-bet-list h2 { font-size: clamp(10px, .78vw, 13px); }
.run-bet-list header span { color: var(--muted); font-size: 10px; }
.run-bet-scroll { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.run-bet-list table { width: 100%; min-width: 0; table-layout: fixed; font-size: clamp(8px, .68vw, 11px); }
.run-col-time { width: 22%; }
.run-col-round { width: 14%; }
.run-col-position { width: 18%; }
.run-col-amount { width: 18%; }
.run-col-result { width: 28%; }
.run-bet-list thead { position: sticky; top: 0; z-index: 1; background: #10171c; }
.run-bet-list th { color: #909aa4; font-size: clamp(8px, .65vw, 10px); letter-spacing: .02em; }
.run-bet-list th, .run-bet-list td { min-width: 0; padding: clamp(4px, .5vw, 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-bet-list .position-banker { color: var(--red); font-weight: 750; }
.run-bet-list .position-player { color: #69a7ff; font-weight: 750; }
.run-result { font-weight: 750; }
.run-result.win { color: var(--green); }
.run-result.lose { color: var(--red); }
.run-result.tie { color: var(--warning); }
.run-result.pending { color: var(--muted); }
.run-bet-empty { color: var(--muted); text-align: center; }

.log-rail { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.log-rail header { display: flex; align-items: baseline; justify-content: space-between; padding: 10px; border-bottom: 1px solid var(--line); }
.log-rail h2 { font-size: 13px; }
.log-rail header span { color: var(--muted); font-size: 9px; }
.log-list { min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 10px; }
.log-entry { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 10px; line-height: 1.4; }
.log-entry time { display: block; color: var(--muted); font-size: 9px; }
.log-entry.error { color: var(--red); }

dialog { width: min(92vw, 520px); padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgb(0 0 0 / 72%); backdrop-filter: blur(3px); }
.modal-card { display: grid; gap: 13px; padding: 18px; }
.modal-card > header { display: flex; justify-content: space-between; align-items: start; }
.modal-card h2 { font-size: 19px; }
.modal-card label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.modal-card input, .modal-card select { width: 100%; min-height: 38px; padding: 0 9px; border: 1px solid var(--line); border-radius: 7px; background: #08141c; color: var(--text); }
.modal-card footer { display: flex; justify-content: flex-end; gap: 7px; }
.modal-card footer button { min-height: 34px; padding: 0 16px; }
.icon-button { width: 32px; height: 32px; font-size: 20px; }
.records-card { width: min(94vw, 1050px); }
#records-modal { width: min(96vw, 1080px); }
.records-filters { display: grid; grid-template-columns: 180px 140px; gap: 8px; }
.records-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
table { width: 100%; min-width: 850px; border-collapse: collapse; font-size: 11px; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; }
.records-pagination { align-items: center; }
#records-page-text { color: var(--muted); font-size: 11px; }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 10; max-width: min(360px, calc(100vw - 36px)); padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; background: #10232c; box-shadow: var(--shadow); font-size: 12px; }

.login-body { display: grid; min-height: 100vh; place-items: center; }
.login-shell { width: min(92vw, 420px); }
.login-box { display: grid; gap: 16px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.login-copy { color: var(--muted); font-size: 12px; }
.login-box label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.login-box input { min-height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: #08141c; color: var(--text); }
.login-box button { min-height: 42px; border-color: var(--accent); background: var(--accent); color: #06201b; font-weight: 750; }
.login-error { min-height: 18px; color: var(--red); font-size: 11px; }

@media (max-width: 760px) {
  .casino-console { padding: 3px; gap: 3px; }
  .console-upper { gap: 3px; }
  .control-column, .right-column, .activity-rail { gap: 3px; }
  .video-status span, .log-rail header span { display: none; }
  .video-status strong { font-size: 11px; }
  .runtime-primary, .runtime-split > span { padding-right: 3px; padding-left: 3px; }
  .manual-bet-zone { padding: 3px; gap: 3px; }
  .manual-sides, .manual-chips, .manual-actions { gap: 3px; }
  .manual-risk { font-size: 8px; }
  .run-bet-list > header, .log-rail header { padding: 3px; }
  .log-list { padding: 0 3px; }
  .records-filters { grid-template-columns: 1fr; }
}