/* German Eiland admin tab host (BUILD-PACKET W1 section 7).
 *
 * Page-local design tokens (same pattern admin/popcontrol/popcontrol.css
 * already uses -- assets/ge-design.css scopes itself to index.html/wallet/
 * voice/status only). --ge-accent still chains through var(--accent, ...)
 * so the sitewide color picker keeps working here.
 */
:root {
  --ge-bg: #0c1013;
  --ge-bg-1: #12171c;
  --ge-panel: #161d24;
  --ge-panel-2: #1c242d;
  --ge-line: #28323c;
  --ge-line-2: #3a4653;
  --ge-text: #ecf1f5;
  --ge-dim: #9db0bf;
  --ge-faint: #6b7d8b;
  --ge-accent: var(--accent, #ffc247);
  --ge-accent-ink: #1a1205;
  --ge-radius: 4px;
  --ge-mono: "Cascadia Mono", Consolas, "SFMono-Regular", ui-monospace, Menlo, monospace;
}

body.ge-scope {
  background-color: var(--ge-bg);
  background-image: radial-gradient(circle, rgba(157, 176, 191, 0.12) 1px, transparent 1.6px);
  background-size: 26px 26px;
  background-attachment: fixed;
  color: var(--ge-text);
}

.ge-label {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 16px;
  font-family: var(--ge-mono);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ge-dim);
}
.ge-label::before { content: ""; width: 14px; height: 2px; flex: 0 0 auto; background: var(--ge-accent); }

.admin-host-main {
  padding: clamp(24px, 5vw, 56px) clamp(20px, 5vw, 64px) 40px;
  display: grid; gap: 18px; max-width: 1280px;
}

.admin-tabs {
  display: inline-flex; gap: 4px; padding: 5px;
  border: 1px solid var(--ge-line); border-radius: var(--ge-radius);
  background: var(--ge-panel); width: max-content; max-width: 100%;
}
.admin-tab {
  padding: 10px 22px; border: 0; border-radius: calc(var(--ge-radius) - 1px);
  background: transparent; color: var(--ge-dim);
  font-family: var(--ge-mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.admin-tab:hover { color: var(--ge-text); }
.admin-tab.active { background: var(--ge-accent); color: var(--ge-accent-ink); }

.admin-tab-panes { position: relative; }
.admin-tab-pane { display: none; }
.admin-tab-pane.active { display: block; }
.admin-host-frame {
  display: block; width: 100%;
  height: 78vh; min-height: 640px; max-height: 920px;
  border: 0; border-radius: var(--ge-radius);
  background: var(--ge-bg-1);
}

@media (max-width: 640px) {
  .admin-tab { padding: 9px 16px; font-size: 10px; }
  .admin-host-frame { height: 72vh; min-height: 520px; }
}