/* Meteor Dodge One-Button - Dark Theme */
:root {
  color-scheme: dark;
  --bg: #0b0d12;
  --panel: #12151d;
  --panel-2: #181c26;
  --text: #e6e9ef;
  --muted: #a9b0bf;
  --accent: #ff7a18;
  --accent-2: #ff9a5a;
  --ok: #6ee7b7;
  --danger: #f87171;
  --border: #242a36;
  --focus: #5dade2;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: linear-gradient(180deg, #0b0d12, #111422);
  color: var(--text); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
img { display: block; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: rgba(10,12,18,0.6); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.brand { display:flex; align-items:center; gap:10px; }
.logo { width: 28px; height: 28px; }
.app-title { margin: 0; font-size: 18px; letter-spacing: 0.2px; }
.muted { color: var(--muted); font-weight: 500; }
.small { font-size: 12px; }

.actions { display:flex; gap:8px; }
button { appearance: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 8px 12px; border-radius: 10px; cursor: pointer; transition: 0.15s ease; }
button:hover { border-color: #2e3646; background: #1a1f2b; }
button:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
button.primary { background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #1b0f06; border-color: transparent; font-weight: 700; }
button.ghost { background: transparent; }
button.tiny { padding: 4px 8px; font-size: 12px; }

.layout { display: grid; grid-template-columns: 1fr 360px; gap: 14px; padding: 14px; }
.stage { position: relative; background: #0b0d12; border:1px solid var(--border); border-radius: 14px; min-height: 60vh; }
.stage canvas { width: 100%; height: clamp(300px, 70vh, 78vh); display: block; border-radius: 14px; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.hud { position: absolute; top: 12px; left: 12px; display:flex; gap: 10px; pointer-events: auto; }
.hud-item { background: rgba(20,24,34,0.7); padding: 6px 10px; border-radius: 999px; border:1px solid var(--border); font-size: 14px; }
.center-cta { position: absolute; inset: 0; display:flex; flex-direction:column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.center-cta h2 { margin: 0; }

.panel { background: var(--panel); border:1px solid var(--border); border-radius: 14px; padding: 14px; display:flex; flex-direction: column; gap: 16px; max-height: calc(100vh - 80px); overflow:auto; }
.field { display:flex; flex-direction: column; gap:6px; }
.field.row { flex-direction: row; align-items: center; gap: 16px; }
label { font-weight: 600; }
.checkbox { display:flex; gap:8px; align-items: center; font-weight: 500; }
input, select { background: var(--panel-2); color: var(--text); border:1px solid var(--border); padding: 8px 10px; border-radius: 10px; }

.ai .ai-row { display:flex; gap: 8px; align-items: center; }
.ai output { background: var(--panel-2); border:1px solid var(--border); padding: 8px 10px; border-radius: 10px; min-height: 40px; flex:1; }

.history-head { display:flex; align-items: center; justify-content: space-between; }
.run-list { list-style: none; padding: 0; margin: 8px 0 0; display:flex; flex-direction: column; gap: 8px; }
.run-list li { display:flex; align-items: center; gap: 8px; }
.pill { padding: 6px 10px; border-radius: 999px; background: var(--panel-2); border:1px solid var(--border); }
.pill.score { background: #1e2a1f; border-color: #29422a; color: var(--ok); font-weight: 700; }
.pill.seed { color: var(--muted); }

.dialog { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: 12px; padding: 16px; }
.dialog::backdrop { backdrop-filter: blur(3px); background: rgba(0,0,0,0.3); }

.noscript { margin: 12px; padding: 12px; border:1px solid var(--danger); color: #fff; background: #2a1212; border-radius: 10px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .panel { order: 2; }
  .stage { order: 1; min-height: 58vh; }
}