* { box-sizing: border-box; }

:root {
  --bg: #03060d;
  --panel: rgba(8, 15, 28, .96);
  --panel-deep: rgba(4, 9, 18, .97);
  --line: rgba(62, 83, 120, .56);
  --line-strong: rgba(214, 155, 69, .58);
  --gold: #e49a39;
  --gold-light: #ffe0a1;
  --purple: #bd61f0;
  --text: #f8fafc;
  --muted: #bec7d6;
  --danger: #ff6a73;
  --radius: 15px;
}

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  padding: 18px;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 85% 0%, rgba(75, 45, 130, .22), transparent 30%),
    radial-gradient(circle at 0% 100%, rgba(229, 141, 54, .10), transparent 28%),
    linear-gradient(145deg, #02050b, #080c16 55%, #02040a);
}

img {
  -webkit-user-drag: none;
  user-select: none;
}

button, input, select { font: inherit; }

button { cursor: pointer; }

.page-shell {
  width: min(1500px, 100%);
  margin: 0 auto;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at top left, rgba(14,165,233,.06), transparent 30%),
    linear-gradient(180deg, var(--panel), var(--panel-deep));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 20px 55px rgba(0,0,0,.35);
}

.legacy-controls {
  position: fixed !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

[hidden] { display: none !important; }