/* ============================================================
   SymposiON — app.css
   Supporting styles for all app.js modules:
     · Onyx-Gold theme overrides
     · Workspace bifurcation tabs
     · Version update modal
     · Grace period banner
     · Symphoni notification toasts
     · Theory Library deck grid
     · Subscription sync button
     · Admin asset studio
     · Admin tier toggle
============================================================ */

/* ══════════════════════════════════════════════════════════════
   ONYX-GOLD THEME
   Applied via [data-sym-theme="onyx-gold"] on html + body.
   CSS variables are already declared in main.css :root.
══════════════════════════════════════════════════════════════ */

[data-sym-theme="onyx-gold"] {
  background-color: var(--bg-master) !important;
  color:            var(--text-core) !important;
}

[data-sym-theme="onyx-gold"] .nav {
  background: rgba(0, 0, 0, 0.96) !important;
  border-bottom-color: rgba(200, 122, 40, 0.2) !important;
}

[data-sym-theme="onyx-gold"] .logo,
[data-sym-theme="onyx-gold"] .logo span,
[data-sym-theme="onyx-gold"] .logo__wordmark,
[data-sym-theme="onyx-gold"] .logo__wordmark span {
  color: var(--text-core) !important;
}

[data-sym-theme="onyx-gold"] .page.active {
  background: var(--bg-master);
  color: var(--text-core);
}

/* Cards */
[data-sym-theme="onyx-gold"] .g-card,
[data-sym-theme="onyx-gold"] .subject-card,
[data-sym-theme="onyx-gold"] .browse-box,
[data-sym-theme="onyx-gold"] .theory-deck-card {
  background:    var(--bg-card) !important;
  border-color:  rgba(200, 122, 40, 0.18) !important;
  color:         var(--text-core) !important;
  transition:    box-shadow 0.2s, border-color 0.2s, transform 0.2s;
}

[data-sym-theme="onyx-gold"] .g-card:hover,
[data-sym-theme="onyx-gold"] .subject-card:hover,
[data-sym-theme="onyx-gold"] .browse-box:hover,
[data-sym-theme="onyx-gold"] .theory-deck-card:hover {
  box-shadow:   0 0 15px rgba(255, 223, 115, 0.65) !important;
  border-color: rgba(255, 223, 115, 0.5) !important;
}

/* Form controls */
[data-sym-theme="onyx-gold"] input:not([type="color"]):not([type="file"]):not([type="checkbox"]),
[data-sym-theme="onyx-gold"] select,
[data-sym-theme="onyx-gold"] textarea {
  background:   var(--bg-card) !important;
  color:        var(--text-core) !important;
  border-color: rgba(200, 122, 40, 0.3) !important;
}

[data-sym-theme="onyx-gold"] input:focus,
[data-sym-theme="onyx-gold"] select:focus,
[data-sym-theme="onyx-gold"] textarea:focus {
  box-shadow:   0 0 15px rgba(255, 223, 115, 0.65) !important;
  border-color: var(--glow-active) !important;
  outline:      none;
}

/* Dropdowns */
[data-sym-theme="onyx-gold"] .dropdown,
[data-sym-theme="onyx-gold"] .bc-dropdown,
[data-sym-theme="onyx-gold"] .theme-picker__panel {
  background:   var(--bg-card) !important;
  border-color: rgba(200, 122, 40, 0.25) !important;
}

[data-sym-theme="onyx-gold"] .dd-item:hover,
[data-sym-theme="onyx-gold"] .bc-dd-item:hover,
[data-sym-theme="onyx-gold"] .theme-opt:hover {
  background: rgba(200, 122, 40, 0.12) !important;
  color:      var(--glow-active) !important;
}

/* Footer */
[data-sym-theme="onyx-gold"] .footer {
  background:         var(--bg-card) !important;
  border-top-color:   rgba(200, 122, 40, 0.15) !important;
  color:              var(--text-subtle) !important;
}
[data-sym-theme="onyx-gold"] .footer a,
[data-sym-theme="onyx-gold"] .footer-logo,
[data-sym-theme="onyx-gold"] .footer-copy { color: var(--text-subtle) !important; }
[data-sym-theme="onyx-gold"] .footer a:hover { color: var(--text-core) !important; }
[data-sym-theme="onyx-gold"] .footer-logo span { color: var(--text-core) !important; }

/* Nav buttons */
[data-sym-theme="onyx-gold"] .nav-btn {
  color:        var(--text-subtle) !important;
  border-color: rgba(200, 122, 40, 0.25) !important;
}
[data-sym-theme="onyx-gold"] .nav-btn:hover {
  color:        var(--text-core) !important;
  border-color: rgba(200, 122, 40, 0.55) !important;
  box-shadow:   0 0 10px rgba(255, 223, 115, 0.35) !important;
}
[data-sym-theme="onyx-gold"] .nav-btn.primary {
  background: var(--text-core) !important;
  color:      #000 !important;
}

/* Page header text */
[data-sym-theme="onyx-gold"] .page-header h1,
[data-sym-theme="onyx-gold"] .page-header p,
[data-sym-theme="onyx-gold"] .grade-pill,
[data-sym-theme="onyx-gold"] .grid-label {
  color: var(--text-core) !important;
}

/* Level locked overlay */
[data-sym-theme="onyx-gold"] .level-locked,
[data-sym-theme="onyx-gold"] .g-card.locked,
[data-sym-theme="onyx-gold"] .symposion-flashcard--locked {
  background:     var(--lock-accent) !important;
  opacity:        0.65;
  pointer-events: none;
  filter:         saturate(0.4);
}

/* Hero */
[data-sym-theme="onyx-gold"] .subject-hero,
[data-sym-theme="onyx-gold"] .game-hero,
[data-sym-theme="onyx-gold"] .sym-hero {
  background: var(--bg-master) !important;
}
[data-sym-theme="onyx-gold"] .subject-hero h1,
[data-sym-theme="onyx-gold"] .game-hero h1,
[data-sym-theme="onyx-gold"] .sym-hero__lede { color: var(--text-core) !important; }

/* Active palette indicator — solid amber outline */
.theme-opt--active {
  outline:        2px solid var(--text-core, #C87A28);
  outline-offset: 2px;
}

/* Active season indicator — left accent bar + subtle tint.
   Visually reads as "add-on layer on top of palette", not
   a competing primary selection. */
.season-opt.theme-opt--active {
  outline:          none;
  border-left:      3px solid var(--text-core, #C87A28);
  background:       rgba(200, 122, 40, 0.10);
  padding-left:     9px;   /* compensate for border */
}
.season-opt.theme-opt--active .theme-opt__swatch {
  outline: 1px solid var(--text-core, #C87A28);
}

/* ══════════════════════════════════════════════════════════════
   REIMAGINED THEME PICKER — multi-column grouped layout
══════════════════════════════════════════════════════════════ */

/* Wide flat panel — all columns visible at once, no scroll */
.theme-picker__panel {
  min-width: 0 !important;
  width: max-content;
  max-height: none;
  overflow: visible;
  padding: 0 !important;
}

/* Picker header showing current theme name */
.tp-header {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.tp-label {
  font-family: var(--sym-font-mono, monospace);
  font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sym-stone, #867660);
}
.tp-sep { color: var(--sym-stone, #867660); opacity: .4; }
.tp-current-name {
  font-size: 12px; font-weight: 600;
  color: var(--sym-fg, #F0EBE0);
  font-family: var(--sym-font-sans, 'Inter', sans-serif);
}
.tp-current-sub {
  font-family: var(--sym-font-mono, monospace);
  font-size: 9px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--sym-stone, #867660);
}

/* Column grid — single flat 6-column row, no scroll needed */
.tp-row { display: grid; }
.tp-row--full { grid-template-columns: repeat(6, auto); }

.tp-col { padding: 6px 0; min-width: 150px; }
.tp-row--full .tp-col + .tp-col {
  border-left: 1px solid rgba(255,255,255,0.07);
}

/* Group label */
.tp-group-label {
  font-family: var(--sym-font-mono, monospace);
  font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sym-stone, #867660);
  padding: 4px 12px 5px; opacity: .7;
}

/* Restructure theme-opt to have an info block */
.theme-opt__info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.theme-opt__name {
  font-size: 12px; font-weight: 500;
  color: var(--sym-fg, #F0EBE0);
  line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Override existing auto-margin on desc; it now lives inside .info */
.tp-row .theme-opt__desc { margin-left: 0; }

/* Rectangular swatch for new picker */
.tp-row .theme-opt__swatch {
  width: 26px; height: 22px;
  border-radius: 3px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

/* Season dot */
.theme-opt__season-dot {
  width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0; margin-left: auto;
}
/* Lock indicator */
.theme-opt__lock { font-size: 11px; flex-shrink: 0; margin-left: auto; opacity: .6; }

/* Locked row styling */
.theme-opt--locked { opacity: .65; }
.theme-opt--locked .theme-opt__name { color: var(--sym-fg-muted, var(--sym-stone)); }

/* Season divider */
.tp-season-divider {
  border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 2px 0;
}

/* Season buttons inside picker — override seasons.css token bleed.
   Use literal values so var() resolves to stable colours regardless of active season. */
.season-opt {
  background: none !important;
  background-image: none !important;
  color: #EFE9DC !important;
  --sym-fg: #EFE9DC;
  --sym-stone: #867660;
}
.season-opt:hover { background: rgba(240,235,224,0.06) !important; }
.season-opt .theme-opt__name { color: #EFE9DC !important; line-height: 1.2; }
.season-opt .theme-opt__desc { margin-left: 0; color: #867660 !important; }

/* Season swatch: same rectangle shape as theme swatches */
.tp-swatch--season {
  width: 26px !important; height: 22px !important;
  border-radius: 3px !important; flex-shrink: 0;
  background-attachment: initial !important;
}

/* Active theme: gold border (use sym-accent instead of onyx-specific text-core) */
.theme-opt--active {
  outline: 2px solid var(--sym-accent, #C87A28) !important;
  outline-offset: -1px;
}

/* Admin sees all locked themes as fully available */
.is-admin .theme-opt--locked { opacity: 1; }
.is-admin .theme-opt--locked .theme-opt__name { color: var(--sym-fg, #F0EBE0); }
.is-admin .theme-opt__lock { display: none; }

/* ── Responsive theme picker ──────────────────────────────────────
   The flat 6-column panel is wider than narrow viewports; anchored to
   the right it would clip its left columns off-screen. Below the wide
   breakpoint, dock it as a full-width sheet, let the theme columns wrap
   to the available width, and scroll vertically so every theme is
   reachable regardless of screen size. */
@media (max-width: 1040px) {
  .theme-picker__panel {
    position: fixed !important;
    top: 60px;
    left: 10px;
    right: 10px;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100vh - 76px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 4px !important;
  }
  .tp-row--full {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  /* Vertical dividers look broken once columns wrap onto new rows */
  .tp-row--full .tp-col + .tp-col { border-left: none; }
  .tp-col { min-width: 0; }
}

@media (max-width: 420px) {
  .tp-row--full {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
}

/* ══════════════════════════════════════════════════════════════
   WORKSPACE BIFURCATION TABS
   Subject page: Αρένες Παιχνιδιών ↔ Βιβλιοθήκη Θεωρίας
══════════════════════════════════════════════════════════════ */

.workspace-tab-bar {
  display:         flex;
  align-items:     center;
  gap:             0;
  padding:         0 2rem;
  border-bottom:   1px solid var(--dark-border, rgba(195, 165, 105, 0.14));
  background:      transparent;
  margin:          0 0 1.5rem;
  overflow-x:      auto;
  scrollbar-width: none;
}
.workspace-tab-bar::-webkit-scrollbar { display: none; }

.workspace-tab {
  display:         flex;
  align-items:     center;
  gap:             0.55rem;
  padding:         0.8rem 1.5rem;
  border:          none;
  border-bottom:   2.5px solid transparent;
  background:      transparent;
  font-family:     'Raleway', 'Inter', sans-serif;
  font-size:       11.5px;
  font-weight:     700;
  letter-spacing:  1.2px;
  text-transform:  uppercase;
  color:           var(--stone, #867660);
  cursor:          pointer;
  white-space:     nowrap;
  transition:      color 0.2s, border-color 0.2s;
  flex-shrink:     0;
  margin-bottom:   -1px;
}
.workspace-tab .ws-tab-icon { font-size: 15px; }

.workspace-tab.ws-tab-active {
  color:         var(--text-core, #C87A28);
  border-bottom-color: var(--text-core, #C87A28);
}

.workspace-tab:hover:not(.ws-tab-active) {
  color: var(--charcoal, #39301F);
}

[data-sym-theme="onyx-gold"] .workspace-tab-bar {
  border-bottom-color: rgba(200, 122, 40, 0.2);
}
[data-sym-theme="onyx-gold"] .workspace-tab:hover:not(.ws-tab-active) {
  color: var(--text-subtle);
}

/* Hub containers */
.workspace-hub {
  display:   none;
  animation: ws-hub-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.workspace-hub.ws-active { display: block; }

@keyframes ws-hub-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════
   THEORY LIBRARY — Deck Grid
══════════════════════════════════════════════════════════════ */

.theory-lib-header {
  padding:     0 2rem 1rem;
  display:     flex;
  align-items: baseline;
  gap:         1rem;
  flex-wrap:   wrap;
}

.theory-lib-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size:   clamp(18px, 2.5vw, 24px);
  font-weight: 400;
  color:       var(--espresso, #221B10);
}
[data-sym-theme="onyx-gold"] .theory-lib-title { color: var(--text-core); }

.theory-lib-sub {
  font-family:    'Raleway', sans-serif;
  font-size:      11px;
  font-weight:    600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--stone, #867660);
}

.theory-deck-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:                   1rem;
  padding:               0 2rem 2rem;
}

.theory-empty {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.75rem;
  padding:        3rem 2rem;
  font-family:    'Raleway', sans-serif;
  font-size:      13px;
  color:          var(--stone, #867660);
  text-align:     center;
}
.theory-empty-icon { font-size: 36px; }

/* ── Keep existing .g-card--study layout inside theory hub ── */
#theory-library-hub .g-card--study {
  /* inherit existing g-card styles — no override needed */
}

/* ══════════════════════════════════════════════════════════════
   VERSION UPDATE MODAL
══════════════════════════════════════════════════════════════ */

.sym-version-modal {
  position:        fixed;
  inset:           0;
  z-index:         100000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  transition:      opacity 0.25s;
}
.sym-version-modal.sym-vm-visible { opacity: 1; }

.sym-vm-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter:         blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sym-vm-box {
  position:    relative;
  background:  var(--bg-card, #0d0d0d);
  border:      1.5px solid rgba(200, 122, 40, 0.45);
  border-radius: 14px;
  padding:     2.5rem 2rem;
  max-width:   380px;
  width:       calc(100vw - 2rem);
  text-align:  center;
  box-shadow:  0 0 40px rgba(200, 122, 40, 0.18), 0 24px 60px rgba(0, 0, 0, 0.72);
  transform:   translateY(20px);
  transition:  transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}
.sym-version-modal.sym-vm-visible .sym-vm-box { transform: translateY(0); }

.sym-vm-bolt {
  font-size:   38px;
  margin-bottom: 1rem;
  filter:      drop-shadow(0 0 14px rgba(255, 223, 115, 0.9));
  display:     block;
}

.sym-vm-title {
  font-family:    'Raleway', sans-serif;
  font-size:      18px;
  font-weight:    700;
  letter-spacing: 0.4px;
  color:          var(--text-core, #C87A28);
  margin-bottom:  0.75rem;
}

.sym-vm-body {
  font-family:   'Raleway', sans-serif;
  font-size:     13px;
  color:         var(--text-subtle, #a69570);
  line-height:   1.6;
  margin-bottom: 1.75rem;
}

.sym-vm-btn {
  font-family:    'Raleway', sans-serif;
  font-size:      13px;
  font-weight:    700;
  letter-spacing: 0.5px;
  color:          #000;
  background:     var(--text-core, #C87A28);
  border:         none;
  border-radius:  8px;
  padding:        13px 28px;
  cursor:         pointer;
  transition:     background 0.18s, box-shadow 0.18s;
  box-shadow:     0 0 18px rgba(200, 122, 40, 0.35);
}
.sym-vm-btn:hover {
  background: var(--glow-active, #ffdf73);
  box-shadow: 0 0 26px rgba(255, 223, 115, 0.6);
}

/* ══════════════════════════════════════════════════════════════
   GRACE PERIOD BANNER
══════════════════════════════════════════════════════════════ */

.sym-grace-banner {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 18px;
  background:  rgba(122, 34, 20, 0.1);
  border-bottom: 1.5px solid rgba(122, 34, 20, 0.35);
  font-family: 'Raleway', sans-serif;
  font-size:   13px;
  color:       #c0574a;
  position:    relative;
  z-index:     200;
  animation:   sgb-in 0.32s ease both;
}
@keyframes sgb-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sgb-icon { font-size: 16px; flex-shrink: 0; }
.sgb-text { flex: 1; line-height: 1.5; }

.sgb-cta {
  background:      none;
  border:          none;
  cursor:          pointer;
  color:           var(--glow-active, #ffdf73);
  font-family:     inherit;
  font-size:       inherit;
  font-weight:     700;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding:         0;
  margin-left:     4px;
}
.sgb-close {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       rgba(192, 87, 74, 0.65);
  font-size:   15px;
  padding:     3px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition:  color 0.15s;
}
.sgb-close:hover { color: #c0574a; }

/* ══════════════════════════════════════════════════════════════
   SYMPHONI NOTIFICATION TOASTS
   success → moss-green | error → terracotta
   warning → amber      | info → gold
══════════════════════════════════════════════════════════════ */

.sym-notify-toast {
  position:    fixed;
  bottom:      1.5rem;
  left:        50%;
  transform:   translateX(-50%) translateY(10px);
  z-index:     99998;
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     12px 20px;
  border-radius: 9px;
  font-family: 'Raleway', sans-serif;
  font-size:   13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  min-width:   220px;
  max-width:   min(480px, calc(100vw - 2rem));
  box-shadow:  0 8px 32px rgba(0, 0, 0, 0.45);
  opacity:     0;
  transition:  opacity 0.28s, transform 0.28s;
  pointer-events: none;
}
.sym-notify-toast.snt-visible {
  opacity:   1;
  transform: translateX(-50%) translateY(0);
}

.snt-icon {
  font-size:  15px;
  flex-shrink: 0;
  font-style: normal;
}

/* Success */
.sym-notify-toast--success {
  background: #0b1a0d;
  border:     1px solid rgba(100, 170, 80, 0.45);
  color:      #7fc96f;
}
.sym-notify-toast--success .snt-icon { color: #7fc96f; }

/* Error — terracotta */
.sym-notify-toast--error {
  background: #170908;
  border:     1px solid rgba(122, 34, 20, 0.55);
  color:      #c0574a;
}
.sym-notify-toast--error .snt-icon { color: #c07464; }

/* Warning */
.sym-notify-toast--warning {
  background: #18140a;
  border:     1px solid rgba(200, 122, 40, 0.45);
  color:      var(--text-core, #C87A28);
}
.sym-notify-toast--warning .snt-icon { color: var(--glow-active, #ffdf73); }

/* Info */
.sym-notify-toast--info {
  background: #0d0d0d;
  border:     1px solid rgba(200, 122, 40, 0.3);
  color:      var(--text-subtle, #a69570);
}
.sym-notify-toast--info .snt-icon { color: var(--text-core, #C87A28); }

/* ══════════════════════════════════════════════════════════════
   SUBSCRIPTION SYNC BUTTON
   Injected by progression.js into #hj-billing-section
══════════════════════════════════════════════════════════════ */

#sync-sub-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  font-family:     'Raleway', sans-serif;
  font-size:       13px;
  font-weight:     700;
  letter-spacing:  0.4px;
  color:           var(--text-core, #C87A28);
  background:      rgba(200, 122, 40, 0.07);
  border:          1px solid rgba(200, 122, 40, 0.28);
  border-radius:   8px;
  padding:         10px 16px;
  cursor:          pointer;
  width:           100%;
  margin-top:      0.75rem;
  transition:      background 0.18s, border-color 0.18s, box-shadow 0.18s;
}
#sync-sub-btn:hover:not(:disabled) {
  background:  rgba(200, 122, 40, 0.14);
  border-color: rgba(200, 122, 40, 0.5);
  box-shadow:  0 0 12px rgba(255, 223, 115, 0.25);
}
#sync-sub-btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN ASSET STUDIO
══════════════════════════════════════════════════════════════ */

.admin-asset-studio-wrap {
  padding: 1.5rem 0;
}

.asset-studio-section {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--dark-border, rgba(195,165,105,0.1));
}
.asset-studio-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.asset-studio-label {
  font-family:    'Raleway', sans-serif;
  font-size:      11px;
  font-weight:    700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color:          var(--text-subtle, #a69570);
  margin-bottom:  0.85rem;
}

.asset-color-row {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-wrap:   wrap;
}

.asset-color-input {
  width:         46px;
  height:        46px;
  border:        2px solid rgba(200, 122, 40, 0.3);
  border-radius: 8px;
  padding:       2px;
  cursor:        pointer;
  background:    transparent;
  flex-shrink:   0;
}

.asset-color-hex {
  flex:          1;
  max-width:     140px;
  background:    rgba(0, 0, 0, 0.3);
  border:        1px solid rgba(200, 122, 40, 0.22);
  border-radius: 6px;
  padding:       9px 12px;
  font-family:   'JetBrains Mono', 'Courier New', monospace;
  font-size:     13px;
  color:         var(--text-core, #C87A28);
}

.asset-color-preview {
  margin-top:    0.5rem;
  height:        36px;
  border-radius: 6px;
  display:       flex;
  align-items:   center;
}

.asset-icon-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap:                   0.45rem;
  margin-bottom:         0.6rem;
  max-height:            220px;
  overflow-y:            auto;
}

.asset-icon-cell {
  aspect-ratio:    1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0, 0, 0, 0.22);
  border:          1px solid rgba(200, 122, 40, 0.14);
  border-radius:   7px;
  cursor:          pointer;
  font-size:       22px;
  transition:      border-color 0.18s, background 0.18s;
  position:        relative;
}
.asset-icon-cell:hover {
  background:  rgba(200, 122, 40, 0.1);
  border-color: rgba(200, 122, 40, 0.4);
}
.asset-icon-cell.selected {
  border-color: var(--text-core, #C87A28);
  background:   rgba(200, 122, 40, 0.12);
  box-shadow:   0 0 8px rgba(255, 223, 115, 0.35);
}

.asset-svg-textarea {
  width:         100%;
  min-height:    100px;
  background:    rgba(0, 0, 0, 0.3);
  border:        1px solid rgba(200, 122, 40, 0.2);
  border-radius: 7px;
  padding:       10px 12px;
  font-family:   'JetBrains Mono', 'Courier New', monospace;
  font-size:     11.5px;
  color:         var(--text-subtle, #a69570);
  resize:        vertical;
  margin-bottom: 0.6rem;
}

.asset-file-input-wrap {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  flex-wrap:   wrap;
}

.asset-file-btn {
  font-family:    'Raleway', sans-serif;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.4px;
  color:          var(--text-core, #C87A28);
  background:     rgba(200, 122, 40, 0.07);
  border:         1px solid rgba(200, 122, 40, 0.28);
  border-radius:  7px;
  padding:        9px 14px;
  cursor:         pointer;
  transition:     background 0.18s;
  white-space:    nowrap;
}
.asset-file-btn:hover { background: rgba(200, 122, 40, 0.15); }

.asset-upload-btn {
  font-family:    'Raleway', sans-serif;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.4px;
  color:          #000;
  background:     var(--text-core, #C87A28);
  border:         none;
  border-radius:  7px;
  padding:        9px 16px;
  cursor:         pointer;
  transition:     background 0.18s, box-shadow 0.18s;
  white-space:    nowrap;
}
.asset-upload-btn:hover:not(:disabled) {
  background: var(--glow-active, #ffdf73);
  box-shadow: 0 0 12px rgba(255, 223, 115, 0.4);
}
.asset-upload-btn:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* ══════════════════════════════════════════════════════════════
   ADMIN TIER TOGGLE SWITCH
══════════════════════════════════════════════════════════════ */

.admin-tier-toggle {
  position:      relative;
  display:       inline-block;
  width:         40px;
  height:        22px;
  flex-shrink:   0;
  cursor:        pointer;
}
.admin-tier-toggle input {
  opacity: 0;
  width:   0;
  height:  0;
  position: absolute;
}

.admin-tier-toggle-track {
  position:      absolute;
  inset:         0;
  border-radius: 11px;
  background:    rgba(255, 255, 255, 0.07);
  border:        1px solid rgba(255, 255, 255, 0.12);
  transition:    background 0.22s, border-color 0.22s;
}
.admin-tier-toggle input:checked + .admin-tier-toggle-track {
  background:  var(--text-core, #C87A28);
  border-color: var(--text-core, #C87A28);
}

.admin-tier-toggle-track::before {
  content:       '';
  position:      absolute;
  left:          2px;
  top:           2px;
  width:         16px;
  height:        16px;
  border-radius: 50%;
  background:    rgba(255, 255, 255, 0.85);
  transition:    transform 0.22s;
  box-shadow:    0 1px 4px rgba(0, 0, 0, 0.3);
}
.admin-tier-toggle input:checked + .admin-tier-toggle-track::before {
  transform: translateX(18px);
}

/* ══════════════════════════════════════════════════════════════
   GLOBAL GAME HOME BUTTON
   Shows whenever any .game-overlay.active exists on the page.
══════════════════════════════════════════════════════════════ */

#game-home-btn {
  display:  none;
  position: fixed;
  top:      14px;
  right:    14px;
  z-index:  9800;
  width:    40px;
  height:   40px;
  padding:  8px;
  border:   1px solid rgba(200,120,48,0.35);
  border-radius: 8px;
  background: rgba(13,11,9,0.72);
  backdrop-filter: blur(8px);
  color: rgba(200,120,48,0.85);
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
  align-items: center;
  justify-content: center;
}
#game-home-btn svg {
  width: 100%; height: 100%; display: block;
}
#game-home-btn:hover {
  background: rgba(200,120,48,0.18);
  border-color: rgba(200,120,48,0.7);
  color: #E09E52;
  transform: scale(1.08);
}

/* Show when any game overlay is active */
body:has(.game-overlay.active) #game-home-btn { display: flex; }
/* Hide during auth modal to avoid cluttering the overlay */
body:has(#auth-modal.active) #game-home-btn    { display: none; }

/* ══════════════════════════════════════════════════════════════
   AUTH MODAL — OAUTH ROW (Google / Microsoft / Apple)
   Overrides main.css .auth-google-btn width:100% within the row.
══════════════════════════════════════════════════════════════ */

.auth-oauth-row {
  display: flex; gap: 8px; width: 100%; margin-bottom: 16px;
}
.auth-oauth-btn {
  /* Equal thirds — override .auth-google-btn { width:100% } from main.css */
  flex: 1 1 0; width: 0 !important;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 6px; height: 44px; box-sizing: border-box;
  border-radius: 6px; border: 1px solid var(--parchment, rgba(180,160,120,0.3));
  background: var(--alabaster, rgba(255,255,255,0.06));
  color: var(--espresso, #221B10);
  font-size: 12px; font-weight: 500; cursor: pointer; letter-spacing: 0.3px;
  transition: background 0.18s, border-color 0.18s;
  /* Remove margin-bottom from .auth-google-btn */
  margin-bottom: 0 !important;
}
.auth-oauth-btn:hover {
  background: var(--linen, rgba(255,255,255,0.12));
  border-color: var(--charcoal, rgba(200,160,80,0.5));
}
.auth-oauth-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-oauth-btn svg { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   THEMED SIGN-OUT CONFIRMATION MODAL
══════════════════════════════════════════════════════════════ */

.sym-confirm-overlay {
  display: none; position: fixed; inset: 0; z-index: 10200;
  background: rgba(10,8,5,0.75); backdrop-filter: blur(10px);
  align-items: center; justify-content: center; padding: 20px;
}
.sym-confirm-overlay.active { display: flex; }
.sym-confirm-box {
  background: var(--sym-bg-panel, #181412);
  border: 1px solid var(--sym-hairline, rgba(200,120,48,0.18));
  border-top: 2px solid var(--sym-gold, #C87830);
  padding: 32px 36px 28px;
  width: min(360px, 100%);
  text-align: center;
  box-shadow: 0 32px 80px rgba(0,0,0,0.55);
  animation: modal-in 0.28s cubic-bezier(0.16,1,0.3,1);
}
.sym-confirm-icon {
  font-size: 28px; margin-bottom: 14px;
  color: var(--sym-gold, #C87830);
  opacity: 0.85;
}
.sym-confirm-title {
  font-family: var(--sym-font-serif, 'Cinzel', serif);
  font-size: 16px; font-weight: 600; letter-spacing: 0.5px;
  color: var(--sym-fg, #EFE9DC);
  margin-bottom: 10px;
}
.sym-confirm-msg {
  font-family: 'Inter', sans-serif;
  font-size: 13px; color: var(--sym-fg-muted, #7C6F58);
  margin-bottom: 24px; line-height: 1.5;
}
.sym-confirm-btns {
  display: flex; gap: 10px; justify-content: center;
}
.sym-confirm-btn {
  padding: 10px 24px; border-radius: 4px;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.sym-confirm-cancel {
  background: transparent;
  border: 1px solid var(--sym-hairline, rgba(200,120,48,0.2));
  color: var(--sym-fg-muted, #7C6F58);
}
.sym-confirm-cancel:hover {
  border-color: var(--sym-gold, #C87830);
  color: var(--sym-fg, #EFE9DC);
}
.sym-confirm-yes {
  background: var(--sym-gold, #C87830);
  border: 1px solid var(--sym-gold, #C87830);
  color: #0D0B09;
}
.sym-confirm-yes:hover {
  background: var(--sym-gold-lt, #E09E52);
  border-color: var(--sym-gold-lt, #E09E52);
}

/* ══════════════════════════════════════════════════════════════
   LIVE ARENA — INVITE ROW
══════════════════════════════════════════════════════════════ */

.la-invite-row {
  display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap;
}
.la-invite-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(200,160,80,0.25);
  color: rgba(232,209,186,0.85); font-size: 12px; font-weight: 500; cursor: pointer;
  transition: background 0.18s, border-color 0.18s; letter-spacing: 0.4px;
}
.la-invite-btn:hover { background: rgba(200,160,80,0.12); border-color: rgba(200,160,80,0.5); color: #E8D9BA; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .workspace-tab-bar   { padding: 0 1rem; }
  .workspace-tab       { padding: 0.7rem 1rem; font-size: 10.5px; }
  .theory-deck-grid    { grid-template-columns: 1fr; padding: 0 1rem 1.5rem; }
  .theory-lib-header   { padding: 0 1rem 0.75rem; }
  .sym-vm-box          { padding: 2rem 1.25rem; }
}