body.console { margin: 0; background: var(--mist); color: var(--ink); min-height: 100vh; }

.topbar {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 13px;
  border-radius: 0; position: sticky; top: 0; z-index: 5;
}
.topbar strong { flex: none; white-space: nowrap; }
.topbar span:nth-of-type(1) { margin-left: auto; opacity: .85; }
.topbar span { font-size: 11px; }
body.elevated .topbar { background: var(--alert-red); color: #fff; text-shadow: none; border-color: transparent; }
body.elevated .topbar .logomark { filter: none; }

.tabs { display: flex; gap: 2px; background: rgba(76,155,214,.15); padding: 6px 12px 0; font-size: 12px; }
.tabs button, .tabs a {
  padding: 6px 12px; border-radius: 5px 5px 0 0; background: #fff; border: 1px solid rgba(76,155,214,.3); border-bottom: none;
  font: inherit; color: var(--ink); cursor: pointer; text-decoration: none;
}
.tabs button[data-tab].active { background: var(--glass-blue); color: #fff; font-weight: 600; }

.banner { background: var(--alert-red); color: #fff; font-size: 12px; padding: 6px 14px; }

main { padding: 16px; max-width: 760px; margin: 0 auto; }
main section { background: #fff; border: 1px solid #cfe0ee; border-radius: 6px; padding: 14px 16px; margin-bottom: 12px; }
main section h2 { margin: 0 0 10px; font-size: 14px; }
#q { padding: 5px 8px; border: 1px solid #9fc3dd; border-radius: 3px; margin-right: 6px; }
#pool-out { background: #f4f8fb; border: 1px solid #cfe0ee; border-radius: 4px; padding: 10px; font: 12px var(--font-mono); white-space: pre-wrap; min-height: 1.4em; }
main a { color: var(--glass-blue); }

.modal {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20;
  background: #f4f8fb; border: 1px solid #6d8fb0; border-radius: 6px; padding: 18px 20px;
  box-shadow: 0 16px 44px rgba(0,0,0,.5); max-width: 420px; text-shadow: none;
}
.modal h2 { margin: 0 0 8px; font-size: 15px; }
.modal p { font-size: 12.5px; margin: 0 0 10px; }

.term-win, .terminal-page main { background: transparent; }
.term { background: #0c0c0c; color: #7CFC9A; font: 13px var(--font-mono); padding: 14px; margin: 0; border-radius: 6px 6px 0 0; min-height: 60vh; white-space: pre-wrap; }
.term-in {
  width: 100%; box-sizing: border-box; background: #0c0c0c; color: #7CFC9A; font: 13px var(--font-mono);
  border: none; border-top: 1px solid #222; padding: 10px 14px; border-radius: 0 0 6px 6px;
}
.term-in:focus { outline: none; }
.terminal-page main { padding: 0; max-width: none; }
.terminal-page .topbar a { color: #fff; margin-left: auto; }

#inspect {
  position: fixed; left: 0; right: 0; bottom: 0; height: 32vh; z-index: 15;
  background: #2a2a2a; color: #ddd; text-shadow: none; box-shadow: 0 -4px 12px rgba(0,0,0,.4);
  display: flex; flex-direction: column;
}
#inspect[hidden] { display: none; } /* an ID selector otherwise beats the UA's [hidden] rule */
.inspect-tabs { display: flex; gap: 2px; background: #1c1c1c; padding: 4px 8px; }
.inspect-tabs button { font: 11px var(--font-ui); background: #333; color: #ccc; border: none; padding: 5px 12px; border-radius: 3px 3px 0 0; cursor: pointer; }
#inspect-out { flex: 1; margin: 0; padding: 10px 14px; overflow: auto; font: 11px var(--font-mono); white-space: pre-wrap; }