/* ==========================================================================
       SYNTHAPSE SOTA DESIGN SYSTEM — ELEKTRON / ABLETON LIVE CLUB INSTRUMENT
       100vh Zero-Scroll Surface
       ========================================================================== */
    :root {
      --bg-deep: #080907;
      --bg-surface-1: #12140f;
      --bg-surface-2: #1c1f17;
      --bg-surface-3: #262a20;
      --line-subtle: #2d3225;
      --line-bright: #444c38;
      
      --text-main: #ecebdc;
      --text-muted: #919785;
      --text-dim: #5c6252;

      --acid: #d8ff45;
      --acid-dim: rgba(216, 255, 69, 0.15);
      --orange: #ff7848;
      --cyan: #66dce7;
      --red: #ff3b30;
      --red-dim: rgba(255, 59, 48, 0.2);
      --yellow: #facc15;
      --green: #22c55e;

      --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-mono: 'JetBrains Mono', 'Space Mono', 'SF Mono', monospace;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
      touch-action: manipulation;
    }

    html, body {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
      overflow: hidden;
      background: var(--bg-deep);
      color: var(--text-main);
      font-family: var(--font-ui);
      font-size: 11px;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* 100vh ZERO-SCROLL MASTER GRID — spec: 48px top / flex workspace / 72px transport */
    .app-root {
      width: 100vw;
      height: 100vh;
      height: 100dvh;
      display: grid;
      grid-template-rows: 48px minmax(0, 1fr) clamp(60px, 8dvh, 72px);
      overflow: hidden;
      background:
        radial-gradient(circle at 65% 20%, rgba(216, 255, 69, 0.035), transparent 30%),
        var(--bg-deep);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

    /* TOP STATUS BAR */
    header.status-bar {
      background: var(--bg-surface-1);
      border-bottom: 1px solid var(--line-subtle);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      gap: 12px;
      z-index: 20;
    }

    .brand-group {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .brand-logo {
      font: 900 14px var(--font-mono);
      letter-spacing: 2.5px;
      color: #fff;
    }
    .brand-logo span {
      color: var(--acid);
    }
    .brand-subtitle {
      font: 700 8px var(--font-mono);
      color: var(--text-muted);
      letter-spacing: 1px;
    }

    .bpm-box {
      display: flex;
      align-items: center;
      background: var(--bg-deep);
      border: 1px solid var(--line-subtle);
      padding: 2px 8px;
      gap: 8px;
    }
    .bpm-val {
      font: 900 22px var(--font-mono);
      color: #fff;
      font-variant-numeric: tabular-nums;
      cursor: pointer;
    }
    .bpm-sub {
      display: flex;
      flex-direction: column;
      font: 700 8px var(--font-mono);
      color: var(--text-muted);
    }
    .bar-counter {
      font: 800 11px var(--font-mono);
      color: var(--cyan);
      background: #091417;
      border: 1px solid #142e36;
      padding: 3px 8px;
      font-variant-numeric: tabular-nums;
    }

    .status-hud-banner {
      flex: 1;
      max-width: 440px;
      background: #080c06;
      border: 1px solid #1c2e10;
      padding: 5px 10px;
      font: 700 9px var(--font-mono);
      color: var(--acid);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .hud-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--acid);
      box-shadow: 0 0 8px var(--acid);
      flex-shrink: 0;
    }
    .hud-dot.error { background: var(--red); box-shadow: 0 0 8px var(--red); }
    .hud-dot.orange { background: var(--orange); box-shadow: 0 0 8px var(--orange); }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .badge-entitlement {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 5px 9px;
      border: 1px solid var(--line-bright);
      background: var(--bg-surface-2);
      color: var(--orange);
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
    }

    .badge-entitlement.pro {
      background: var(--acid-dim);
      border-color: var(--acid);
      color: var(--acid);
    }

    .link-btn {
      font-family: var(--font-mono);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 5px 9px;
      border: 1px solid var(--line-bright);
      background: var(--bg-surface-2);
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s;
    }

    .link-btn.amber {
      border-color: var(--orange);
      color: var(--orange);
      background: rgba(255, 120, 72, 0.1);
    }

    .link-btn.active.acid {
      border-color: var(--acid);
      color: var(--acid);
      background: var(--acid-dim);
      box-shadow: 0 0 10px rgba(216, 255, 69, 0.25);
    }

    .badge-cue {
      font-family: var(--font-mono);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 5px 7px;
      border: 1px solid var(--line-bright);
      background: var(--bg-surface-2);
      color: var(--text-dim);
    }
    .badge-cue.active {
      border-color: var(--cyan);
      color: var(--cyan);
    }