:root{
  --pb-bg-1:#111111;
  --pb-bg-2:#050505;
  --pb-bg-3:#000000;
  --pb-text:#e5e7eb;
  --pb-muted:#9ca3af;
  --pb-surface:#0b0b0b;
  --pb-surface-2:#111111;
  --pb-border:rgba(255,255,255,0.12);

  --pb-accent:#C8102E;        /* England red */
  --pb-accent-2:#8F0017;      /* deeper hover */
  --pb-accent-soft:rgba(200,16,46,0.16);
  --pb-focus:rgba(200,16,46,0.28);
}

/* Theme hooks (keeps Core stable) */
body{
  background: radial-gradient(circle at top, var(--pb-bg-1) 0, var(--pb-bg-2) 45%, var(--pb-bg-3) 100%);
  color: var(--pb-text);
}
.subtitle,.muted{ color: var(--pb-muted); }

/* Accent-y bits (override if Core has hardcoded colors) */
a, .tab-btn.active, .mini-btn.primary{
  color: var(--pb-text);
}
.btn-primary, .primary-btn, #random-all-btn, .tab-btn.active{
  border-color: var(--pb-accent);
}
.btn-primary, .primary-btn, #random-all-btn{
  background: linear-gradient(180deg, rgba(200,16,46,0.95), rgba(143,0,23,0.95));
}
.btn-primary:hover, .primary-btn:hover, #random-all-btn:hover{
  filter: brightness(1.08);
}
.tag-chip.selected{
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 2px var(--pb-focus);
}


/* --- Mobile top tabs: Tags / Output (UK deploy) ----------------------- */

.mobile-topbar{ display:none; }
.mobile-top-tabs{ display:none; }

@media (max-width: 900px){
  .mobile-topbar{
    display:block;
    position: sticky;
    top: 0;
    z-index: 90;
    background: rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  }
  .mobile-topbar .lang-banner{
    display:flex;
    position: static;
    top: auto;
    z-index: auto;
    border-bottom: none;
    background: transparent;
    backdrop-filter: none;
    padding-bottom: 0.45rem;
  }
  .mobile-top-tabs{
    display:flex;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem 0.75rem;
  }
  .mobile-tab{
    flex: 1 1 0;
    padding: 0.55rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(17, 24, 39, 0.55);
    color: var(--pb-text);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.78rem;
    cursor: pointer;
  }
  .mobile-tab.active{
    border-color: var(--pb-accent);
    box-shadow: 0 0 0 2px var(--pb-focus);
    background: linear-gradient(180deg, rgba(200,16,46,0.92), rgba(143,0,23,0.92));
  }

  /* Switch between the two panes on mobile */
  .app-root[data-mobile-panel="tags"] .left-panel{ display:flex; }
  .app-root[data-mobile-panel="tags"] .right-panel{ display:none; }

  .app-root[data-mobile-panel="output"] .left-panel{ display:none; }
  .app-root[data-mobile-panel="output"] .right-panel{ display:flex; }

  /* Avoid an extra divider when only one pane is shown */
  .left-panel{ border-bottom: none; }
}


/* --- Toggle label color overrides (requested) --- */

/* Animal + folklore toggle labels should stay bright on dark headers */
.animal-toggle, .folklore-toggle{ color:#ffffff !important; }
.animal-toggle span, .folklore-toggle span{ color:#ffffff !important; }