:root {
  --bg: #050507; --panel: #0a0a0e; --line: #1c1a16;
  --amber: #ff9a1f; --amber2: #ffb347; --green: #00ff88; --red: #ff3b4a;
  --muted: #7a7468; --text: #f2ead8;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #050507; color: var(--text); font-family: "IBM Plex Mono", ui-monospace, monospace; }
button, .btn { font: inherit; min-height: 44px; cursor: pointer; }
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(ellipse at 15% 0%, rgba(255,154,31,.12), transparent 45%), #050507; }
.gate[hidden], #desk[hidden], .settings[hidden] { display: none !important; }
.card { width: min(520px, 100%); border: 1px solid var(--line); background: #0a0a0e; padding: 22px; }
.card h1 { margin: 0 0 8px; color: var(--amber2); letter-spacing: .16em; font-size: 22px; }
.note { color: var(--muted); }
.login-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
#emailCode { letter-spacing: .4em; font-size: 22px; width: 100%; background: #100e0a; color: #f2ead8; border: 1px solid #ffb347; padding: 8px; }
.device-row { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #1c1a16; padding: 6px 0; }
.login-stack button, #googleBtn { display: flex; align-items: center; gap: 10px; width: 100%; background: #100e0a; color: var(--amber2); border: 1px solid rgba(255,154,31,.45); padding: 8px 12px; text-align: left; }
.hud { display: grid; grid-template-rows: 56px 1fr 28px; height: 100vh; padding: 10px 12px 6px; gap: 8px; }
.topbar { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: linear-gradient(180deg, #0f0e0b, #0a0908); padding: 6px 12px; position: relative; overflow: hidden; }
.topbar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--amber), var(--green)); }
.logo-mech { width: 40px; height: 40px; object-fit: contain; }
.word { display: flex; flex-direction: column; line-height: 1.05; }
.word strong { color: var(--amber2); letter-spacing: .16em; }
.word span, .sub { color: var(--muted); font-size: 9px; letter-spacing: .14em; }
.badge { font-size: 9px; padding: 3px 8px; border: 1px solid rgba(255,154,31,.4); color: var(--amber2); letter-spacing: .12em; }
.tape { flex: 1; overflow: hidden; white-space: nowrap; font-size: 10px; color: var(--muted); }
.chip { position: relative; }
.chip > button { background: transparent; color: var(--text); border: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.menu { position: absolute; right: 0; top: 46px; background: #0a0a0e; border: 1px solid var(--line); min-width: 180px; z-index: 5; }
.menu button, .menu a { display: block; width: 100%; background: transparent; color: var(--text); border: 0; text-align: left; text-decoration: none; padding: 8px 10px; }
.clock { color: var(--amber2); font-variant-numeric: tabular-nums; }
.grid { display: grid; grid-template-columns: 1.05fr 1.35fr .9fr; grid-template-rows: 1.05fr .95fr; gap: 8px; min-height: 0; }
.panel { background: var(--panel); border: 1px solid var(--line); min-height: 0; display: flex; flex-direction: column; position: relative; }
.panel.yours { border-color: #00ff88; }
.panel.agent-wallet { border-color: #7ad7ff; }
.adslot { margin: 8px 0; padding: 8px; border: 1px dashed #ffb347; color: #ffb347; font-size: 12px; }
#lab { border: 1px solid #ffb347; margin-top: 8px; }
.panel::after { content: ""; position: absolute; top: 0; right: 0; width: 16px; height: 16px; border-top: 1px solid var(--amber); border-right: 1px solid var(--amber); opacity: .5; }
.ph { display: flex; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #16140f; letter-spacing: .14em; font-size: 11px; }
.ph b { color: var(--amber); }
.pb { padding: 8px 10px; overflow: auto; font-size: 12px; }
.big { font-size: 42px; color: var(--green); line-height: 1; text-shadow: 0 0 24px rgba(0,255,136,.35); }
.down { color: var(--red); }
.hero-mech { width: 110px; justify-self: end; }
.eq { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: center; }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.stage { border: 1px solid #1a1814; padding: 4px; background: #08080c; }
.stage b { color: var(--amber2); font-size: 10px; }
.kill { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #14120f; padding: 3px 0; }
.term { color: #9cffb0; font-size: 11px; line-height: 1.45; }
#net { width: 100%; height: 180px; display: block; }
.foot { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.light { padding: 2px 8px; border: 1px solid var(--line); }
.light.stopped { color: var(--muted); }
.light.running { color: var(--green); border-color: var(--green); }
.light.error { color: var(--red); border-color: var(--red); }
#useOnFile { display: flex; width: 100%; margin-top: 8px; background: #100e0a; color: var(--amber2); border: 1px solid rgba(255,154,31,.45); padding: 8px 12px; }
#botForm label, #magicForm label { display: block; margin: 6px 0; color: var(--muted); font-size: 12px; }
#botForm input, #botForm select, #botForm textarea, #magicEmail, #botAgent { width: 100%; margin-top: 4px; background: #050507; color: var(--text); border: 1px solid var(--line); padding: 8px; }
#gear { background: transparent; color: var(--amber2); border: 1px solid var(--line); min-width: 44px; padding: 8px; }
.ticker { overflow: hidden; border-bottom: 1px solid #1c1a16; background: #07080c; color: #cfc6b6; font-size: 12px; }
.ticker[hidden] { display: none !important; }
.ticker-track { display: inline-block; white-space: nowrap; animation: ticker 28s linear infinite; padding: 6px 0; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
#mechaBoot { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #050507; color: #ffb347; letter-spacing: .16em; }
#mechaBoot[hidden] { display: none !important; }
#mechaBoot svg { animation: boot 1.2s ease-in-out infinite; }
@keyframes boot { 50% { transform: translateY(-6px); filter: drop-shadow(0 0 12px #ffb347); } }
@media (prefers-reduced-motion: reduce) {
  #mechaBoot svg { animation: none; }
}
#deskChat { position: fixed; right: 12px; bottom: 36px; width: min(360px, calc(100% - 24px)); max-height: 70vh; z-index: 30; background: #0a0a0e; border: 1px solid #1c1a16; display: flex; flex-direction: column; }
#deskChat[hidden] { display: none !important; }
#chatLog { height: 220px; overflow: auto; }
#chatForm { display: flex; gap: 6px; padding: 8px; }
#chatText { flex: 1; background: #050507; color: #f2ead8; border: 1px solid #1c1a16; }
.approve { border: 1px solid #ffb347; padding: 8px; margin: 6px 0; }
.settings { position: fixed; inset: 0; background: rgba(5,5,7,.72); z-index: 40; display: flex; justify-content: flex-end; }
.settings[hidden] { display: none; }
.settings .panel { width: min(420px, 100%); height: 100%; background: #0a0a0e; overflow: auto; }
.settings h2 { color: var(--amber2); letter-spacing: .12em; font-size: 13px; margin: 16px 0 6px; }
.settings label { display: block; margin: 8px 0; color: var(--muted); font-size: 12px; }
.settings input, .settings select { width: 100%; margin-top: 4px; background: #050507; color: var(--text); border: 1px solid var(--line); padding: 8px; }
.settings button { margin: 6px 6px 0 0; background: #100e0a; color: var(--amber2); border: 1px solid rgba(255,154,31,.45); }
body[data-theme="day"] { --bg: #efe8da; --panel: #f7f1e6; --text: #1c140c; --muted: #5e564c; --line: #d9cbb6; background: var(--bg); color: var(--text); }
body[data-theme="day"] .panel, body[data-theme="day"] .settings .panel, body[data-theme="day"] .topbar { background: var(--panel); }
body.compact .hero-mech { display: none; }
body.compact .hud { padding: 4px; gap: 4px; }
body.compact .big { font-size: 28px; }
@media (max-width: 900px) {
  .hud { height: auto; grid-template-rows: auto auto auto; }
  .grid { display: flex; flex-direction: column; }
  .topbar { flex-wrap: wrap; }
  .stages { grid-template-columns: 1fr 1fr; }
}