/* =============================================================
   ELEMENT.FM — Neon Tokyo / Cyberpunk Design System
   Tokens, typography, and semantic defaults
   ============================================================= */

@font-face {
  font-family: 'Mothercode';
  src: url('/fonts/Mothercode.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  /* Brand neons */
  --neon-magenta:   #FF00E5;
  --neon-cyan:      #00F0FF;
  --neon-violet:    #B026FF;
  --neon-lime:      #C6FF00;
  --neon-yellow:    #FFE600;
  --neon-red:       #FF2E5B;

  /* Glow variants */
  --glow-magenta:   0 0 12px rgba(255, 0, 229, 0.55), 0 0 32px rgba(255, 0, 229, 0.25);
  --glow-cyan:      0 0 12px rgba(0, 240, 255, 0.55),  0 0 32px rgba(0, 240, 255, 0.25);
  --glow-violet:    0 0 12px rgba(176, 38, 255, 0.55), 0 0 32px rgba(176, 38, 255, 0.25);
  --glow-lime:      0 0 10px rgba(198, 255, 0, 0.5),   0 0 24px rgba(198, 255, 0, 0.2);

  /* Backgrounds — near-black with violet undertone */
  --bg-void:        #05040A;
  --bg-deep:        #0B0820;
  --bg-panel:       #120C2E;
  --bg-raised:      #1A1340;
  --bg-inset:       #080615;
  --bg-grid:        #0E0A22;

  /* Foregrounds */
  --fg-1:           #F5F2FF;
  --fg-2:           #B8B0D9;
  --fg-3:           #7A729E;
  --fg-4:           #4A4370;

  /* Borders */
  --border-1:       rgba(184, 176, 217, 0.12);
  --border-2:       rgba(184, 176, 217, 0.24);
  --border-hot:     var(--neon-magenta);
  --border-signal:  var(--neon-cyan);

  /* Semantic */
  --color-primary:  var(--neon-magenta);
  --color-signal:   var(--neon-cyan);
  --color-success:  #00FF9C;
  --color-warn:     var(--neon-yellow);
  --color-error:    var(--neon-red);
  --color-live:     var(--neon-red);

  /* Gradients */
  --grad-hero:      linear-gradient(135deg, #FF00E5 0%, #B026FF 50%, #00F0FF 100%);
  --grad-deep:      linear-gradient(180deg, #0B0820 0%, #05040A 100%);
  --grad-scan:      repeating-linear-gradient(
                      to bottom,
                      rgba(255, 255, 255, 0.02) 0px,
                      rgba(255, 255, 255, 0.02) 1px,
                      transparent 1px,
                      transparent 3px
                    );
  --grad-grid:      linear-gradient(rgba(255, 0, 229, 0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 240, 255, 0.06) 1px, transparent 1px);

  /* Type families */
  --font-logo:      'Mothercode', 'Rajdhani', 'Chakra Petch', 'Eurostile', system-ui, sans-serif;
  --font-display:   'Rajdhani', 'Chakra Petch', 'Eurostile', system-ui, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', Menlo, monospace;

  /* Scale */
  --text-hero:      clamp(48px, 7vw, 96px);
  --text-h1:        56px;
  --text-h2:        40px;
  --text-h3:        28px;
  --text-h4:        22px;
  --text-lg:        18px;
  --text-base:      16px;
  --text-sm:        14px;
  --text-xs:        12px;
  --text-micro:     10px;

  /* Weights */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* Line height */
  --lh-tight:       1.05;
  --lh-snug:        1.25;
  --lh-normal:      1.5;
  --lh-loose:       1.7;

  /* Tracking */
  --ls-tight:       -0.02em;
  --ls-normal:      0;
  --ls-wide:        0.08em;
  --ls-ultra:       0.24em;

  /* Spacing — 4px base */
  --sp-0:           0;
  --sp-1:           4px;
  --sp-2:           8px;
  --sp-3:           12px;
  --sp-4:           16px;
  --sp-5:           24px;
  --sp-6:           32px;
  --sp-7:           48px;
  --sp-8:           64px;
  --sp-9:           96px;
  --sp-10:          128px;

  /* Radius */
  --r-0:            0px;
  --r-1:            2px;
  --r-2:            4px;
  --r-3:            8px;
  --r-4:            12px;
  --r-full:         9999px;

  /* Elevation */
  --shadow-1:       0 1px 0 rgba(255, 255, 255, 0.04) inset,
                    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2:       0 4px 12px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  --shadow-3:       0 12px 40px rgba(0, 0, 0, 0.6),
                    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --shadow-inset:   inset 0 0 0 1px rgba(255, 255, 255, 0.06),
                    inset 0 2px 8px rgba(0, 0, 0, 0.6);

  /* Motion */
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:        cubic-bezier(0.7, 0, 0.84, 0);
  --ease-snap:      cubic-bezier(0.85, 0, 0.15, 1);
  --dur-quick:      120ms;
  --dur-base:       200ms;
  --dur-slow:       400ms;
  --dur-glow:       1800ms;
}

/* =============================================================
   BASE ELEMENT DEFAULTS
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--bg-void);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0;
}

h1 { font-size: var(--text-h1); font-weight: var(--fw-bold); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); font-weight: var(--fw-medium); }
h5 { font-size: var(--text-lg); font-weight: var(--fw-medium); }
h6 { font-size: var(--text-base); font-weight: var(--fw-medium); }

p {
  margin: 0 0 var(--sp-4);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--neon-cyan);
}

a {
  color: var(--neon-cyan);
  text-decoration: none;
  transition: color var(--dur-quick) var(--ease-out),
              text-shadow var(--dur-quick) var(--ease-out);
}
a:hover { color: var(--fg-1); text-shadow: var(--glow-cyan); }

::selection { background: var(--neon-magenta); color: var(--bg-void); }

hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: var(--sp-5) 0;
}

img { max-width: 100%; height: auto; }

/* =============================================================
   TYPOGRAPHY UTILITIES
   ============================================================= */

.hero-title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--neon-cyan);
}

.terminal-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--fg-3);
}

.gradient-text {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.neon-magenta { color: var(--neon-magenta); text-shadow: var(--glow-magenta); }
.neon-cyan    { color: var(--neon-cyan);    text-shadow: var(--glow-cyan); }
.neon-lime    { color: var(--neon-lime);    text-shadow: var(--glow-lime); }

/* =============================================================
   ATMOSPHERE — scanlines, grid, glow orbs
   ============================================================= */

.scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.012) 0,
    rgba(255, 255, 255, 0.012) 1px,
    transparent 1px,
    transparent 3px
  );
}

.grid-bg {
  background-image: var(--grad-grid);
  background-size: 44px 44px;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
}

/* =============================================================
   BUTTONS
   ============================================================= */

.btn-el {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--dur-quick) var(--ease-out);
  user-select: none;
  line-height: 1;
}

.btn-el:hover { filter: brightness(1.1); }
.btn-el:active { transform: scale(0.98); }
.btn-el:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

.btn-el--primary {
  background: var(--neon-magenta);
  color: #000;
  box-shadow: 0 0 14px rgba(255, 0, 229, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.btn-el--primary:hover {
  color: #000;
  box-shadow: 0 0 22px rgba(255, 0, 229, 0.75),
              inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.btn-el--outline {
  background: transparent;
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}
.btn-el--outline:hover {
  background: rgba(0, 240, 255, 0.08);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
  color: var(--fg-1);
}

.btn-el--ghost {
  background: transparent;
  border-color: var(--border-2);
  color: var(--fg-2);
}
.btn-el--ghost:hover {
  border-color: var(--neon-cyan);
  color: var(--fg-1);
}

.btn-el--sm { font-size: 11px; padding: 8px 14px; }
.btn-el--lg { font-size: 14px; padding: 16px 28px; letter-spacing: 0.2em; }

/* =============================================================
   CARDS / PANELS
   ============================================================= */

.panel {
  background: var(--bg-deep);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  position: relative;
}

.panel--accent::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--neon-magenta);
  box-shadow: 0 0 8px var(--neon-magenta);
  opacity: 0.7;
}

.panel__head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-1);
}

.panel__body {
  padding: var(--sp-4);
}

/* =============================================================
   FORMS
   ============================================================= */

input, textarea, select {
  background: var(--bg-inset);
  color: var(--fg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  transition: border-color var(--dur-quick) var(--ease-out),
              box-shadow var(--dur-quick) var(--ease-out);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 12px rgba(0, 240, 255, 0.35);
}
input::placeholder, textarea::placeholder { color: var(--fg-4); }

label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-bottom: 6px;
}

/* Native file input — dark theme */
input[type="file"] {
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: transparent;
  border: none;
  padding: 0;
}
input[type="file"]::file-selector-button {
  background: var(--bg-inset);
  color: var(--fg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--text-sm);
  cursor: pointer;
  margin-right: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}
input[type="file"]::file-selector-button:hover {
  border-color: var(--neon-cyan);
  box-shadow: var(--glow-cyan);
  color: var(--fg-1);
}

/* Bootstrap pagination — dark theme */
.pagination {
  gap: 4px;
}
.pagination .page-link {
  background: var(--bg-inset);
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  border-radius: var(--r-2);
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pagination .page-link:hover {
  color: var(--fg-1);
  border-color: var(--neon-cyan);
  background: var(--bg-deep);
  box-shadow: var(--glow-cyan);
}
.pagination .page-link:focus { box-shadow: var(--glow-cyan); outline: none; }
.pagination .page-item.active .page-link {
  background: var(--neon-magenta);
  border-color: var(--neon-magenta);
  color: var(--bg-void);
  font-weight: 700;
  box-shadow: var(--glow-magenta);
}
.pagination .page-item.disabled .page-link {
  background: var(--bg-inset);
  color: var(--fg-4);
  border-color: var(--border-1);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Inline checkbox/radio labels — reset global label treatment */
.form-check-label {
  font-family: var(--font-body);
  font-size: var(--text-base);
  letter-spacing: normal;
  text-transform: none;
  color: var(--fg-1);
  display: inline;
  margin-bottom: 0;
  margin-left: 8px;
}

/* =============================================================
   BOOTSTRAP BRIDGE — neon skin over existing .btn / .container / .navbar
   (the app still loads Bootstrap JS for dropdowns; this re-skins its CSS)
   ============================================================= */

.btn {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  transition: all var(--dur-quick) var(--ease-out);
}
.btn-primary, .btn-primary:focus {
  background: var(--neon-magenta);
  border-color: var(--neon-magenta);
  color: #000;
  box-shadow: 0 0 14px rgba(255, 0, 229, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
  background: var(--neon-magenta);
  border-color: var(--neon-magenta);
  color: #000;
  filter: brightness(1.1);
  box-shadow: 0 0 22px rgba(255, 0, 229, 0.75);
}
.btn-outline-secondary {
  background: transparent;
  border-color: var(--neon-cyan);
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}
.btn-outline-secondary:hover {
  background: rgba(0, 240, 255, 0.08);
  border-color: var(--neon-cyan);
  color: var(--fg-1);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}
.btn:active { transform: scale(0.98); }

.container, .container-fluid {
  max-width: 1200px;
}
.container-fluid { max-width: 100%; }

.navbar, .navbar-dark, .bg-dark {
  background: var(--bg-deep) !important;
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.navbar .nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--fg-3) !important;
  padding: 10px 18px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-quick) var(--ease-out),
              border-color var(--dur-quick) var(--ease-out),
              text-shadow var(--dur-quick) var(--ease-out);
}
.navbar .nav-link:hover {
  color: var(--fg-1) !important;
  text-shadow: var(--glow-cyan);
}
.navbar .nav-link.active {
  color: var(--fg-1) !important;
  border-bottom-color: var(--neon-magenta);
  text-shadow: 0 0 8px rgba(255, 0, 229, 0.6);
}

.alert {
  background: var(--bg-deep);
  color: var(--fg-1);
  border: 1px solid var(--border-1);
  border-left: 2px solid var(--neon-cyan);
  border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
}
.alert-heading {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--neon-cyan);
}
.alert-info { border-left-color: var(--neon-cyan); }
.alert-warning { border-left-color: var(--neon-yellow); }
.alert-danger { border-left-color: var(--neon-red); }
.alert-success { border-left-color: var(--color-success); }

.dropdown-menu {
  background: var(--bg-deep);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-3);
  padding: 6px;
}
.dropdown-item {
  color: var(--fg-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: var(--r-1);
  transition: all var(--dur-quick) var(--ease-out);
}
.dropdown-item:hover, .dropdown-item:focus {
  background: rgba(255, 0, 229, 0.08);
  color: var(--fg-1);
  text-shadow: 0 0 8px rgba(255, 0, 229, 0.6);
}
.dropdown-divider { border-top: 1px solid var(--border-1); }

.dropdown-toggle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.dropdown-toggle:hover { color: var(--fg-1); text-shadow: var(--glow-cyan); }

/* When a dropdown-toggle is also a .btn, let .btn sizing win */
.btn.dropdown-toggle {
  font-family: var(--font-display);
  font-size: inherit;
  letter-spacing: 0.18em;
  color: inherit;
}
.btn.dropdown-toggle:hover { text-shadow: none; }

/* Card overrides for Bootstrap's .card */
.card {
  background: var(--bg-deep);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  color: var(--fg-1);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--border-1);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--fg-3);
  font-size: var(--text-xs);
}

/* Tables */
.table {
  color: var(--fg-1);
  --bs-table-bg: transparent;
  --bs-table-color: var(--fg-1);
  --bs-table-border-color: var(--border-1);
}
.table thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-regular);
  border-bottom: 1px solid var(--border-2);
}

.form-control, .form-select {
  background: var(--bg-inset);
  color: var(--fg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-1);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-inset);
  color: var(--fg-1);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 1px var(--neon-cyan), 0 0 12px rgba(0, 240, 255, 0.35);
}
.form-label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Display helper Bootstrap uses in landing: .display-5 */
.display-5 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* Legend / misc text accents */
em {
  font-style: normal;
  color: var(--neon-magenta);
  text-shadow: 0 0 12px rgba(255, 0, 229, 0.45);
}

.badge {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--fg-2);
}

/* Bootstrap modal — dark theme overrides */
.modal-content {
  background: var(--bg-deep);
  color: var(--fg-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-3);
}
.modal-header {
  border-bottom: 1px solid var(--border-1);
  padding: 16px 20px;
}
.modal-footer {
  border-top: 1px solid var(--border-1);
  padding: 14px 20px;
}
.modal-title {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.modal .btn-close {
  filter: invert(1) grayscale(1) brightness(1.4);
  opacity: 0.75;
}
.modal .btn-close:hover { opacity: 1; }
.modal .form-label { color: var(--fg-2); }
.modal .form-text { color: var(--fg-3); }