:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #0b1020;
  color: #e8edf7;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.console-shell { min-height: 100vh; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }

.topbar {
  min-height: 64px;
  padding: 0 22px;
  background: #11182c;
  border-bottom: 1px solid #24304d;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand { color: inherit; text-decoration: none; display: flex; gap: 10px; align-items: center; font-weight: 650; letter-spacing: .01em; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #39b7ff, #7c5cff); color: white; font-size: 14px; }
.toolbar { display: flex; gap: 16px; align-items: center; }
.current-title { color: #aab7d4; font-size: 14px; }
.open-link { color: #81d4ff; text-decoration: none; font-size: 14px; white-space: nowrap; }
.open-link:hover { color: #c5efff; }

.tabs { min-height: 50px; display: flex; align-items: stretch; gap: 5px; overflow-x: auto; padding: 7px 16px; background: #0e1528; border-bottom: 1px solid #24304d; }
.tab-group { align-self: center; margin: 0 4px 0 7px; color: #687595; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tab { border: 0; border-radius: 7px; padding: 7px 13px; background: transparent; color: #b8c3dc; cursor: pointer; font: inherit; font-size: 14px; }
.tab:hover { background: #1b2643; color: white; }
.tab.is-active { background: #26385f; color: #fff; box-shadow: inset 0 0 0 1px #3e5e98; }

.workspace { min-height: 0; position: relative; background: #fff; }
iframe { width: 100%; height: 100%; border: 0; display: block; background: white; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #1c2945; background: #f7f9fc; }
.empty-state h1 { margin: 0; font-size: 22px; }
.empty-state p { color: #56647c; }
code { padding: 2px 5px; border-radius: 4px; background: #e9edf4; }

@media (max-width: 600px) {
  .topbar { padding: 10px 14px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .toolbar { width: 100%; justify-content: space-between; }
  .tabs { padding-inline: 9px; }
}