:root {
  --nav-h: 62px;
  --bg-main: #0a1418;
  --bg-panel: rgba(14, 28, 33, 0.84);
  --bg-panel-strong: rgba(9, 22, 26, 0.95);
  --text-main: #f2f6f7;
  --text-soft: #9fb6be;
  --line: rgba(165, 202, 214, 0.18);
  --primary: #18bf7d;
  --primary-soft: rgba(24, 191, 125, 0.2);
  --accent: #f7931e;
  --danger: #da4141;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100dvh;
  overflow: hidden;
}

body {
  color: var(--text-main);
  font-family: "IBM Plex Sans", sans-serif;
  background: radial-gradient(circle at 22% 18%, #1d3740 0%, var(--bg-main) 45%);
}

.app-bg {
  position: fixed;
  inset: 0;
  background-image: linear-gradient(120deg, rgba(32, 117, 90, 0.16) 0%, rgba(247, 147, 30, 0.07) 100%);
  pointer-events: none;
}

/* ── Multi-view SPA ── */
.view {
  display: none;
  height: calc(100dvh - var(--nav-h));
  overflow: hidden;
}

.view.active {
  display: flex;
  flex-direction: column;
}

/* During route: nav hides → views expand to full viewport */
body.in-route .view {
  height: 100dvh;
}

.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
}

.label {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--text-soft);
}

.primary-btn,
.secondary-btn,
.accent-btn,
.danger-btn {
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.2rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease, background-color 180ms ease;
}

.primary-btn {
  background: var(--primary);
  color: #06160e;
}

.primary-btn.pause {
  background: var(--danger);
  color: #ffe5e5;
}

.accent-btn {
  background: var(--accent);
  color: #2f1a06;
}

.secondary-btn {
  background: rgba(170, 198, 209, 0.14);
  color: var(--text-main);
  border: 1px solid rgba(170, 198, 209, 0.24);
}

.danger-btn {
  background: rgba(218, 65, 65, 0.2);
  color: #ffd6d6;
  border: 1px solid rgba(218, 65, 65, 0.5);
}

.danger-btn.armed {
  background: #da4141;
  color: #fff0f0;
}

.primary-btn:hover,
.secondary-btn:hover,
.accent-btn:hover,
.danger-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.primary-btn:disabled,
.secondary-btn:disabled,
.accent-btn:disabled,
.danger-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hidden {
  display: none;
}

.error-msg {
  color: var(--danger);
  font-size: 0.82rem;
  margin: 0.15rem 0 0.4rem;
}

@media (prefers-reduced-motion: no-preference) {
  .card {
    animation: rise 550ms ease both;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}