/* COSTUME:FONTS:START */
@import url('https://fonts.googleapis.com/css2?family=Bebas%20Neue&family=IBM%20Plex%20Sans:wght@300;400;500;600&display=swap');
/* COSTUME:FONTS:END */

/* Shared shell styling for hub tools */
/* COSTUME:VARIABLES:START */
body.hub-shell {
  --hub-bg:             #0d0d0f;
  --hub-panel:          rgba(0, 109, 143, 0.04);
  --hub-panel-2:        rgba(0, 0, 0, 0.35);
  --hub-surface:        rgba(0, 109, 143, 0.06);
  --hub-surface-2:      rgba(0, 109, 143, 0.10);
  --hub-border:         rgba(26, 10, 83, 0.10);
  --hub-border-subtle:  rgba(26, 10, 83, 0.07);
  --hub-border-strong:  rgba(26, 10, 83, 0.20);
  --hub-text:           #e8e6e0;
  --hub-muted:          #8c8a91;
  --hub-text-dim:       rgba(232, 230, 224, 0.22);
  --hub-accent:         #ffb43f;
  --hub-accent-2:       #ff6a00;
  --hub-shadow:         0 20px 50px rgba(0, 0, 0, 0.6);
  --hub-radius:         10px;
  --hub-radius-sm:      6px;

  /* --fomo-* aliases (index.php + legacy pages) */
  --fomo-bg:            var(--hub-bg);
  --fomo-panel:         var(--hub-panel);
  --fomo-panel-2:       var(--hub-panel-2);
  --fomo-border:        var(--hub-border);
  --fomo-border-subtle: var(--hub-border-subtle);
  --fomo-text:          var(--hub-text);
  --fomo-text-muted:    var(--hub-muted);
  --fomo-accent:        var(--hub-accent);
  --fomo-accent-soft:   rgba(255, 180, 63, 0.15);
  --fomo-accent-strong: rgba(255, 180, 63, 0.90);
  --fomo-radius-lg:     18px;
  --fomo-radius-md:     10px;
  --fomo-shadow-soft:   var(--hub-shadow);

  /* module short-var aliases (runtime/*.css, live-action/*.css, displays.css) */
  --bg:   var(--hub-bg);
  --s1:   var(--hub-panel);
  --s2:   var(--hub-surface);
  --s3:   var(--hub-surface-2);
  --b1:   var(--hub-border-subtle);
  --b2:   var(--hub-border);
  --b3:   var(--hub-border-strong);
  --t1:   var(--hub-text);
  --t2:   var(--hub-muted);
  --t3:   var(--hub-text-dim);
  --gold:   var(--hub-accent);
  --gold-d: rgba(255, 180, 63, 0.10);
  --gold-b: rgba(255, 180, 63, 0.30);
  --r:    var(--hub-radius);
  --rs:   var(--hub-radius-sm);

  /* semantic status colors (static, not theme-controlled) */
  --green:    #22c55e;
  --green-d:  rgba(34, 197, 94, 0.12);
  --red:      #e53535;
  --red-d:    rgba(229, 53, 53, 0.10);
  --red-b:    rgba(229, 53, 53, 0.35);
  --blue:     #3b9eff;
  --blue-d:   rgba(59, 158, 255, 0.10);
  --blue-b:   rgba(59, 158, 255, 0.30);
  --purple:   #a78bfa;
  --purple-d: rgba(167, 139, 250, 0.10);
  --purple-b: rgba(167, 139, 250, 0.30);

  /* live-action module colors */
  --la-green:   #00e676;
  --la-green-d: rgba(0, 230, 118, 0.10);
  --la-green-b: rgba(0, 230, 118, 0.22);
  --la-red:     #ff3d5a;
  --la-red-d:   rgba(255, 61, 90, 0.10);
  --la-red-b:   rgba(255, 61, 90, 0.25);
  --la-amber:   #ffab00;
  --la-amber-d: rgba(255, 171, 0, 0.10);

  margin: 0;
  color: var(--hub-text);
  background: var(--hub-bg);
  min-height: 100vh;
  font-family: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height: 1.35;
}
/* COSTUME:VARIABLES:END */

body.hub-shell button,
body.hub-shell input,
body.hub-shell select,
body.hub-shell textarea {
  font: inherit;
}

/* COSTUME:GRADIENTS:START */
body.hub-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 18% 10%, rgba(255, 180, 63, 0.08), transparent 60%),
    radial-gradient(900px 600px at 82% 16%, rgba(255, 106, 0, 0.06), transparent 60%),
    radial-gradient(600px 400px at 55% 92%, rgba(255, 180, 63, 0.05), transparent 55%),
    var(--hub-bg);
  background-repeat: no-repeat;
  background-size: cover;
}
/* COSTUME:GRADIENTS:END */

body.hub-shell .hp-header,
body.hub-shell .media-head {
  border: none;
  border-bottom: 1px solid var(--hub-border-subtle);
  border-radius: 0;
  background: var(--hub-panel);
  box-shadow: none;
  margin: 0;
}

body.hub-shell .hp-sidebar,
body.hub-shell .hp-editor,
body.hub-shell .media-card,
body.hub-shell .sig-card {
  border: 1px solid var(--hub-border-subtle);
  border-radius: 18px;
  background: var(--hub-panel);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

body.hub-shell .hp-list,
body.hub-shell .hp-content,
body.hub-shell .media-card .meta {
  background: var(--hub-bg);
  border: 1px solid var(--hub-border-subtle);
  border-radius: 14px;
}

body.hub-shell .hp-input,
body.hub-shell .hp-textarea,
body.hub-shell .hp-btn,
body.hub-shell .hp-tool {
  border-color: rgba(255,255,255,0.14);
}

body.hub-shell .hp-sub,
body.hub-shell .hp-hint,
body.hub-shell .media-url,
body.hub-shell .media-empty {
  color: var(--hub-muted);
}

/* COSTUME:HEADING_FONT:START */
body.hub-shell h1,
body.hub-shell h2,
body.hub-shell .hub-topbar__left h1 {
  font-family: 'Bebas Neue', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
}
/* COSTUME:HEADING_FONT:END */

/* Header button normalization */
body.hub-shell .btn,
body.hub-shell .hp-header__right .hp-btn,
body.hub-shell .media-toolbar .hp-btn {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: var(--hub-text);
  border-radius: 999px;
}

body.hub-shell .btn.btn-ghost,
body.hub-shell .hp-btn--ghost {
  background: transparent;
}

/* COSTUME:ACCENT_BUTTON:START */
body.hub-shell .btn.btn-primary,
body.hub-shell .hp-btn--good,
body.hub-shell .su-btn-primary,
body.hub-shell .su-tab-btn.active,
body.hub-shell .su-tab-btn[aria-selected="true"],
body.hub-shell .su-chip.active,
body.hub-shell .su-chip[aria-pressed="true"] {
  border-color: rgba(255, 180, 63, 0.45);
  background: rgba(255, 180, 63, 0.15);
  color: #ffb43f;
}
body.hub-shell .su-btn-primary:hover {
  background: rgba(255, 180, 63, 0.22);
}
/* COSTUME:ACCENT_BUTTON:END */