:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050a1a; color: #f2f5fa; font-family: "Noto Sans JP", system-ui, sans-serif; }
.layout { height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; padding: 12px; }
.layout > * { min-width: 0; }
.table-area { min-height: 0; }
.table-area .gt { height: 100%; }
/* keep the outer seats inside the box */
.table-area .gt-stage { margin: 0 7%; }
.side { display: grid; grid-template-rows: auto auto auto auto minmax(0, 1fr); gap: 10px; min-height: 0; }
.side h1 { margin: 0; font-size: 16px; letter-spacing: .06em; }
.row { display: flex; gap: 6px; }
.row input, .row select { flex: 1; min-width: 0; height: 40px; border-radius: 10px; border: 1px solid #24304d; background: #0d1426; color: inherit; padding: 0 10px; font-size: 15px; }
.row button { height: 40px; border: 0; border-radius: 10px; padding: 0 14px; background: #f08a16; color: #1b0f00; font-weight: 800; cursor: pointer; }
.row button[type=button] { background: #1c2438; color: #c4cee6; flex: 1; }
.log { list-style: none; margin: 0; padding: 0; overflow: auto; display: grid; align-content: start; gap: 6px; }
.lg { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: #0d1426; box-shadow: inset 3px 0 0 #3a4660; }
.lg.ok { box-shadow: inset 3px 0 0 #3ddc84; }
.lg.error { box-shadow: inset 3px 0 0 #ff4d5a; }
.lg time { font-size: 11px; color: #93a1bd; }
.lg b { font-size: 14px; }
.lg small { grid-column: 2 / 4; font-size: 11px; color: #93a1bd; }
.lg .src { font-size: 10px; color: #6f7c98; text-transform: uppercase; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: minmax(360px, 60dvh) auto; height: auto; }
  .side { grid-template-rows: none; }
  .log { max-height: 40dvh; }
}