* { box-sizing: border-box; }

:root {
  --bg: #061016;
  --panel: #0a171f;
  --fg: #d9f8f1;
  --muted: #77918d;
  --accent: #36f1c4;
  --keyword: #72a9ff;
  --string: #ffd16c;
  --number: #ff82c6;
  --comment: #668780;
  --success: #5cff92;
  --warn: #ff9152;
  --error: #ff5f7e;
  --border: #173741;
  --shadow: rgba(54, 241, 196, 0.18);
}

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

body {
  font-family: Consolas, "Cascadia Code", "Courier New", monospace;
  color: var(--fg);
}

.screen {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr 32px;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.03), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.015), transparent 18%),
    var(--bg);
}

.topbar {
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand { display: flex; align-items: center; min-width: 0; }
.dots { display: flex; gap: 7px; margin-right: 12px; flex: 0 0 auto; }
.dots span { width: 10px; height: 10px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 14px var(--shadow); }
.dots span:nth-child(2) { opacity: .72; }
.dots span:nth-child(3) { opacity: .45; }

.brand-title {
  font-size: clamp(12px, 1.05vw, 15px);
  letter-spacing: .4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-sub {
  margin-top: 3px;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

button, select {
  font: inherit;
  font-size: 11px;
  color: var(--fg);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 9px;
  outline: none;
}

button { cursor: pointer; }
button:hover, select:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
button:focus-visible, select:focus-visible { box-shadow: 0 0 0 2px var(--shadow); }

.terminal {
  overflow: hidden;
  padding: clamp(16px, 2vw, 28px);
  font-size: clamp(13px, 1.12vw, 18px);
  line-height: 1.42;
  text-shadow: 0 0 12px var(--shadow);
}

.line {
  min-height: 1.42em;
  white-space: pre-wrap;
  word-break: break-word;
}

.prompt { color: var(--accent); }
.keyword { color: var(--keyword); }
.string { color: var(--string); }
.number { color: var(--number); }
.comment { color: var(--comment); }
.success { color: var(--success); }
.warn { color: var(--warn); }
.error { color: var(--error); }
.dim { opacity: .6; }
.bold { font-weight: 700; }

.statusbar {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 12px;
  font-size: 10px;
  color: var(--muted);
}

.status-left { display: flex; align-items: center; gap: 7px; }
.status-right { justify-self: end; }
.status-center { justify-self: center; }

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 10px color-mix(in srgb, var(--success) 55%, transparent);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 52px;
  transform: translateX(-50%) translateY(10px);
  background: color-mix(in srgb, var(--panel) 95%, black);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

body.theme-matrix {
  --bg: #020702;
  --panel: #061006;
  --fg: #b7ffb7;
  --muted: #4d7950;
  --accent: #4cff5a;
  --keyword: #7dff8c;
  --string: #c7ff8a;
  --number: #6cffde;
  --comment: #3f6a44;
  --success: #71ff71;
  --warn: #d9ff5e;
  --error: #ff6b72;
  --border: #13391a;
  --shadow: rgba(76, 255, 90, 0.2);
}

body.theme-purple {
  --bg: #080611;
  --panel: #100b1d;
  --fg: #eee9ff;
  --muted: #82789c;
  --accent: #b68cff;
  --keyword: #6fdbff;
  --string: #ff9edd;
  --number: #ffd76d;
  --comment: #746c88;
  --success: #79ffa7;
  --warn: #ff9a62;
  --error: #ff6688;
  --border: #30204b;
  --shadow: rgba(182, 140, 255, 0.19);
}

body.theme-amber {
  --bg: #100905;
  --panel: #1a1008;
  --fg: #fff0ca;
  --muted: #92765f;
  --accent: #ffb04b;
  --keyword: #ffde76;
  --string: #83ffd8;
  --number: #ff7ea0;
  --comment: #8b7560;
  --success: #a0ff76;
  --warn: #ff8357;
  --error: #ff5d5d;
  --border: #4b2b12;
  --shadow: rgba(255, 176, 75, 0.18);
}

@media (max-width: 760px) {
  .topbar { align-items: flex-start; }
  .brand-sub { display: none; }
  .controls { max-width: 56vw; }
  button, select { font-size: 10px; padding: 6px 7px; }
  .terminal { font-size: 12px; }
  .status-center { display: none; }
  .statusbar { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}