/* style.css — Bottleneck Calculator */
/* Upload to WordPress and reference with <link> in your HTML block */


    #bnc-root {
      --bnc-bg: #0F1115;
      --bnc-card: #181B21;
      --bnc-card-border: #2A2E37;
      --bnc-text: #E8EAED;
      --bnc-muted: #8B93A1;
      --bnc-good: #C4FF61;
      --bnc-warn: #FFC857;
      --bnc-bad: #FF5A5F;
      --bnc-accent: #5AC8FA;
      --bnc-font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
      --bnc-font-body: 'Inter', 'Segoe UI', sans-serif;
      --bnc-font-mono: 'JetBrains Mono', 'Courier New', monospace;
      max-width: 1400px;
      margin: 0 auto;
      background: var(--bnc-bg);
      color: var(--bnc-text);
      font-family: var(--bnc-font-body);
      border: 1px solid var(--bnc-card-border);
      border-radius: 16px;
      padding: 32px 36px;
      box-sizing: border-box;
    }
    #bnc-root * { box-sizing: border-box; }

    /* ── WordPress theme color override ──────────────────────────────────
       Forces all text inside #bnc-root to remain white regardless of what
       Astra, Kadence, GeneratePress, Elementor or Gutenberg theme injects.
       Scoped entirely to #bnc-root — nothing outside is affected.
       ──────────────────────────────────────────────────────────────────── */

    /* All generic text */
    #bnc-root,
    #bnc-root *,
    #bnc-root p,
    #bnc-root span,
    #bnc-root div,
    #bnc-root li,
    #bnc-root ul,
    #bnc-root a {
      color: #E8EAED !important;
    }

    /* Headings */
    #bnc-root h1,
    #bnc-root h2,
    #bnc-root h3,
    #bnc-root h4,
    #bnc-root h5,
    #bnc-root h6 {
      color: #E8EAED !important;
    }

    /* Labels */
    #bnc-root label {
      color: #8B93A1 !important;
    }

    /* Selects */
    #bnc-root select,
    #bnc-root select:focus,
    #bnc-root select:active,
    #bnc-root select:hover {
      color: #E8EAED !important;
      background-color: #1b1f27 !important;
      background: #1b1f27 !important;
      border-color: #2A2E37 !important;
      -webkit-text-fill-color: #E8EAED !important;
    }

    /* Options inside selects */
    #bnc-root select option {
      color: #E8EAED !important;
      background-color: #1b1f27 !important;
      background: #1b1f27 !important;
      -webkit-text-fill-color: #E8EAED !important;
    }

    /* Placeholder / default option (value="") */
    #bnc-root select option[value=""],
    #bnc-root select option:first-child {
      color: #8B93A1 !important;
      -webkit-text-fill-color: #8B93A1 !important;
    }

    /* Muted text helpers — restore intentional muted colours */
    #bnc-root .bnc-eyebrow  { color: #5AC8FA !important; }
    #bnc-root .bnc-muted,
    #bnc-root .bnc-gauge-labels span,
    #bnc-root .bnc-pct-label,
    #bnc-root #bottleneckMessage,
    #bnc-root .bnc-fe-note,
    #bnc-root .bnc-ri-res-label { color: #8B93A1 !important; }

    /* Accent colours that must stay on specific elements */
    #bnc-root #bottleneckPercent { color: inherit !important; }
    #bnc-root .bnc-pdf-btn       { color: #E8EAED !important; }
    #bnc-root .bnc-btn           { color: #111827 !important; }
    #bnc-root #bnc-advanced-toggle { color: #8B93A1 !important; }
    #bnc-root .bnc-eyebrow {
      font-family: var(--bnc-font-mono);
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--bnc-accent);
      margin: 0 0 6px;
    }
    #bnc-root h2 {
      font-family: var(--bnc-font-display);
      font-size: 24px;
      font-weight: 700;
      margin: 0 0 20px;
      line-height: 1.25;
    }
    #bnc-root .bnc-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    #bnc-root .bnc-row-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    @media (max-width: 900px) {
      #bnc-root .bnc-row { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 480px) {
      #bnc-root .bnc-row { grid-template-columns: 1fr; }
      #bnc-root .bnc-row-2 { grid-template-columns: 1fr; }
    }
    /* Advanced Options toggle */
    #bnc-advanced-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 340px;
      height: 60px;
      margin: 0 auto 14px auto;
      background: none;
      border: 1px solid var(--bnc-card-border);
      color: var(--bnc-muted);
      font-family: var(--bnc-font-mono);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 14px 24px;
      border-radius: 12px;
      cursor: pointer;
      transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }
    #bnc-advanced-toggle:hover {
      color: var(--bnc-accent);
      border-color: var(--bnc-accent);
      box-shadow: 0 0 16px rgba(90, 200, 250, 0.25);
    }
    #bnc-advanced-panel {
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.35s ease;
    }
    #bnc-advanced-panel.bnc-adv-open { max-height: 400px; }
    #bnc-root label {
      display: block;
      font-size: 12px;
      color: var(--bnc-muted);
      margin-bottom: 6px;
      font-family: var(--bnc-font-mono);
      letter-spacing: 0.03em;
    }
    #bnc-root select {
      width: 100%;
      background: var(--bnc-card);
      border: 1px solid var(--bnc-card-border);
      color: var(--bnc-text);
      padding: 11px 12px;
      border-radius: 8px;
      font-size: 14px;
      font-family: var(--bnc-font-body);
      cursor: pointer;
    }
    #bnc-root select:focus {
      outline: none;
      border-color: var(--bnc-accent);
    }
    #bnc-root .bnc-btn {
      width: 100%;
      margin-top: 10px;
      background: #e0f2fe;
      color: #111827;
      border: none;
      height: 66px;
      padding: 0 16px;
      border-radius: 12px;
      font-family: var(--bnc-font-display);
      font-weight: 700;
      font-size: 20px;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    #bnc-root .bnc-btn:hover { background: #bae6fd; }
    #bnc-root .bnc-btn:active { transform: scale(0.99); }

    #bnc-root #resultBox {
      margin-top: 24px;
      padding-top: 24px;
      border-top: 1px dashed var(--bnc-card-border);
      display: none;
    }
    #bnc-root #resultBox.show { display: block; }

    #bnc-root .bnc-headline {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 8px;
    }
    #bnc-root #bottleneckPercent {
      font-family: var(--bnc-font-mono);
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
    }
    #bnc-root #bottleneckLabel {
      font-family: var(--bnc-font-mono);
      font-size: 13px;
      color: var(--bnc-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    #bnc-root .bnc-gauge-track {
      height: 26px;
      border-radius: 13px;
      background: var(--bnc-card);
      border: 1px solid var(--bnc-card-border);
      overflow: hidden;
      margin: 14px 0 4px;
    }
    #bnc-root #gaugeFill {
      height: 100%;
      width: 0%;
      border-radius: 13px;
      transition: width 0.6s cubic-bezier(.22,1,.36,1), background-color 0.4s ease;
    }
    #bnc-root .bnc-gauge-labels {
      display: flex;
      justify-content: space-between;
      font-family: var(--bnc-font-mono);
      font-size: 10px;
      color: var(--bnc-muted);
      margin-bottom: 14px;
    }
    #bnc-root #bottleneckMessage {
      font-size: 14px;
      color: var(--bnc-muted);
      line-height: 1.55;
      margin: 0 0 16px;
    }
    #bnc-root .bnc-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 16px;
      font-size: 13px;
      margin-bottom: 16px;
    }
    #bnc-root .bnc-stats p {
      margin: 0;
      padding: 8px 10px;
      background: var(--bnc-card);
      border: 1px solid var(--bnc-card-border);
      border-radius: 6px;
    }
    #bnc-root #fpsAdvisoryList {
      margin: 0;
      padding-left: 18px;
      font-size: 13px;
      color: var(--bnc-muted);
      line-height: 1.6;
    }
    #bnc-root #upgradeRecommendation {
      margin-top: 14px;
      padding: 12px 14px;
      background: rgba(196,255,97,0.08);
      border: 1px solid rgba(196,255,97,0.3);
      border-radius: 8px;
      font-size: 14px;
      color: var(--bnc-good);
    }