:root {
  color-scheme: dark;
  --bg: #0d1015;
  --surface: #171b22;
  --surface-raised: #1d222b;
  --line: #303641;
  --muted: #8f99a8;
  --text: #f3f5f7;
  --orange: #d17a23;
  --green: #38a169;
  --red: #d8565d;
  --blue: #5277aa;
  --offline-bg: #2a1c21;
  --offline-line: #71343b;
  --starting-bg: #342719;
  --running-bg: #172c24;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  font-family: "Trebuchet MS", "Aptos", sans-serif;
  letter-spacing: 0;
}

button, select { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }

.shell { min-height: 100vh; }
.topbar {
  height: 74px;
  padding: 0 max(24px, calc((100vw - 1380px) / 2));
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(18, 21, 27, .94);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--orange);
  color: #111318;
  font-weight: 900;
  border-radius: 4px;
}

.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-copy span { color: var(--muted); font-size: 12px; margin-top: 2px; }

.operator { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #cbd1da; }
.operator img { width: 32px; height: 32px; border-radius: 50%; }
.icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  background: var(--surface-raised);
  cursor: pointer;
}
.icon-button:hover { color: var(--text); border-color: #596272; }

main { width: min(1380px, calc(100% - 48px)); margin: 26px auto 50px; }
.dashboard { display: grid; gap: 18px; }
.connection-strip { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.connection-strip > span { display: flex; align-items: center; gap: 8px; }
.signal { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(209,122,35,.12); }
.signal.online { background: var(--green); box-shadow: 0 0 0 4px rgba(56,161,105,.12); }
.signal.error { background: var(--red); box-shadow: 0 0 0 4px rgba(216,86,93,.12); }

.panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: 5px;
  background: var(--surface);
  box-shadow: 0 10px 32px rgba(0,0,0,.2);
  padding: 20px 22px;
}

.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-heading > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel-heading h2, .authorized-panel h2 { margin: 0; font-size: 17px; text-transform: uppercase; }
.panel-index { color: var(--orange); font-family: monospace; font-size: 11px; }
.panel-meta { color: var(--muted); font-size: 12px; }
.generation-badge { border: 1px solid #3e4f68; color: #9fb8dc; padding: 5px 8px; border-radius: 3px; font-size: 11px; text-transform: uppercase; }

.schedule-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.schedule-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; min-width: 0; padding: 12px; border: 1px solid var(--line); background: var(--surface-raised); border-radius: 4px; }
.schedule-row i, .task-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.schedule-row.enabled i, .task-row.running i { background: var(--green); }
.schedule-row b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schedule-row span { color: var(--muted); font-size: 11px; text-transform: uppercase; }

.table-head { color: #7f8999; font-family: monospace; font-size: 11px; text-transform: uppercase; }
.datacenter-table .table-head, .task-row { display: grid; grid-template-columns: 1.5fr .7fr .7fr 1fr; gap: 16px; padding: 0 12px; }
.datacenter-table .table-head { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.task-row { align-items: center; padding-top: 13px; font-size: 13px; }
.task-row > span { overflow: hidden; text-overflow: ellipsis; }
.task-status { display: flex; align-items: center; gap: 8px; color: #c9d0d9; }

.operations-grid, .workspace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.status-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.status-card, .layer-card { border: 1px solid var(--offline-line); background: var(--offline-bg); border-radius: 4px; }
.status-card { min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.status-card i, .layer-card i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.status-card div, .layer-card div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.status-card b, .layer-card b { text-transform: uppercase; font-size: 13px; }
.status-card span, .layer-card > span { color: #df858a; font-size: 11px; text-transform: uppercase; }
.layer-list { display: grid; gap: 8px; margin-top: 10px; }
.layer-card { min-height: 55px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-left-width: 5px; }
.layer-card small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-health="running"] { border-color: #2d7654; background: var(--running-bg); }
[data-health="running"] i { background: var(--green); }
[data-health="running"] span, [data-health="running"] > span { color: #7ee2a8; }
[data-health="starting"] { border-color: #8c612b; background: var(--starting-bg); }
[data-health="starting"] i { background: var(--orange); }
[data-health="starting"] span, [data-health="starting"] > span { color: #f3c07b; }

.progress-block { margin-top: 18px; }
.progress-block > div:first-child { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.progress-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 9px; }
.progress-track i { height: 6px; background: var(--offline-line); border-radius: 2px; }
.progress-track i.running { background: var(--green); }
.progress-track i.starting { background: var(--orange); }

.lock-state { padding: 5px 8px; background: #17352a; color: #7ee2a8; border-radius: 3px; font-size: 11px; text-transform: uppercase; }
.lock-state.busy { background: #4a321b; color: #f3c07b; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.control {
  min-height: 44px;
  border: 1px solid #48515e;
  border-radius: 4px;
  color: var(--text);
  background: #29303a;
  cursor: pointer;
  font-weight: 700;
}
.control:not(:disabled):hover { filter: brightness(1.14); }
.control:disabled, .disabled-controls button:disabled, .full-disabled:disabled { cursor: not-allowed; opacity: .42; }
.control.success { background: #205f43; border-color: #42b77a; }
.control.danger { background: #66292e; border-color: var(--red); }
.control.warning { background: #68451f; border-color: #d9943b; }
.control.wide { grid-column: 1 / -1; }
.system-facts { margin: 22px 0 0; border-top: 1px solid var(--line); }
.system-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid #272d36; }
dt { color: var(--muted); font-size: 11px; text-transform: uppercase; }
dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

.players-panel { border-top-color: var(--blue); }
.player-table { overflow-x: auto; }
.player-row { min-width: 570px; display: grid; grid-template-columns: 1.2fr 1.35fr .5fr .55fr; gap: 14px; align-items: center; padding: 10px 8px; border-bottom: 1px solid #282e38; font-size: 13px; }
.player-row:not(.table-head):hover { background: #1d232c; }
.player-row .ready { color: #7ee2a8; }
.player-row .not-ready { color: #f3c07b; }
.empty-state { color: var(--muted); font-size: 13px; padding: 18px 8px; }
.right-stack { display: grid; gap: 18px; }
.engine-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.engine-grid div { min-width: 0; }
.engine-grid dd { margin-top: 5px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.controller-label { color: var(--muted); font-size: 13px; }
.controller-label b { color: var(--text); }
.disabled-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.disabled-controls button, .full-disabled, dialog button[value="cancel"] { min-height: 38px; border: 1px solid #3b424e; border-radius: 4px; color: #c7cdd5; background: #262c35; }
.select-label { display: block; margin: 18px 0 7px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #3b424e; border-radius: 4px; color: var(--text); background: #11151b; }
select:disabled { opacity: .5; }
.hotjoin-block { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.hotjoin-block h3 { margin: 0; font-size: 13px; text-transform: uppercase; }
.hotjoin-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px; border-bottom: 1px solid #282e38; font-size: 12px; }
.hotjoin-row span { color: var(--muted); }
.full-disabled { width: 100%; margin-top: 12px; }

.authorized-panel { border-top-color: var(--red); display: flex; align-items: center; justify-content: space-between; gap: 20px; background-color: #21171b; background-image: repeating-linear-gradient(135deg, transparent 0 16px, rgba(216,86,93,.035) 16px 32px); }
.authorized-panel > div { display: flex; align-items: center; gap: 13px; }
.authorized-panel p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.warning-mark { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--red); color: #ff9ca1; font-weight: 900; }
.authorized-actions { min-width: min(480px, 50%); display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }

.login-panel { width: min(540px, 100%); margin: 13vh auto 0; padding: 38px; border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: 5px; background: var(--surface); }
.login-panel .eyebrow { color: var(--orange); text-transform: uppercase; font-size: 11px; font-weight: 700; }
.login-panel h1 { margin: 12px 0; font-size: 36px; }
.login-panel > p:not(.eyebrow) { color: var(--muted); line-height: 1.6; }
.discord-login { display: inline-flex; margin-top: 12px; min-height: 46px; padding: 0 20px; align-items: center; border-radius: 4px; color: white; background: #5865f2; text-decoration: none; font-weight: 700; }

dialog { width: min(500px, calc(100% - 32px)); border: 1px solid #4a515e; border-top: 4px solid var(--red); border-radius: 5px; color: var(--text); background: var(--surface); padding: 24px; }
dialog::backdrop { background: rgba(5,7,10,.78); backdrop-filter: blur(3px); }
dialog form > p { color: var(--muted); line-height: 1.5; }
.dialog-heading, .dialog-heading > div, .dialog-actions { display: flex; align-items: center; }
.dialog-heading { justify-content: space-between; }
.dialog-heading > div { gap: 12px; }
.dialog-heading h2 { margin: 0; font-size: 18px; }
.dialog-actions { justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dialog-actions button { min-width: 120px; }

.toast { position: fixed; right: 24px; bottom: 24px; max-width: min(420px, calc(100% - 48px)); padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 4px; background: #1b2028; box-shadow: 0 14px 40px rgba(0,0,0,.4); z-index: 50; }
.toast.error { border-left-color: var(--red); }

@media (max-width: 900px) {
  main { width: min(100% - 28px, 700px); }
  .operations-grid, .workspace-grid { grid-template-columns: 1fr; }
  .schedule-list { grid-template-columns: 1fr; }
  .authorized-panel { align-items: stretch; flex-direction: column; }
  .authorized-actions { min-width: 100%; }
}

@media (max-width: 600px) {
  .topbar { height: 66px; padding: 0 14px; }
  .brand-copy strong { font-size: 13px; }
  .brand-copy span, #operator-name { display: none; }
  main { width: calc(100% - 20px); margin-top: 14px; }
  .panel { padding: 16px 14px; }
  .datacenter-table .table-head { display: none; }
  .task-row { grid-template-columns: 1fr 1fr; padding: 10px 0; }
  .status-pair, .control-grid, .engine-grid { grid-template-columns: 1fr; }
  .control.wide { grid-column: auto; }
  .disabled-controls { grid-template-columns: repeat(2, 1fr); }
  .authorized-actions { grid-template-columns: 1fr; }
  .system-facts div { grid-template-columns: 100px 1fr; }
  .login-panel { margin-top: 8vh; padding: 26px 22px; }
}