/* =========================================
   SHOWTIME Q&A — Shared Styles v3
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Cinzel:wght@700;900&family=Bebas+Neue&family=Rajdhani:wght@500;600;700&family=Oswald:wght@500;600;700&family=Lato:wght@300;400;700&family=Cormorant+Garamond:wght@700&family=Montserrat:wght@700;900&family=Dancing+Script:wght@700&display=swap');

:root {
  --primary:     #1e3a8a;
  --primary-dark:#0b0e14;
  --primary-light:#1e40af;
  --gold:        #00f2ff;
  --gold-light:  #80f9ff;
  --gold-dark:   #00b3cc;
  --cream:       #ffffff;
  --black:       #0b0e14;
  --glass-bg:    rgba(255, 255, 255, 0.12);
  --glass-border:rgba(255, 255, 255, 0.2);
  --glass-shadow:rgba(0, 0, 0, 0.3);
  --font-display:'Helvetica Neue', Arial, sans-serif;
  --font-ui:     'Helvetica Neue', Arial, sans-serif;
  --font-body:   'Helvetica Neue', Arial, sans-serif;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background-color: #0b0e14;
  color: var(--cream);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Stage Background ── */
.stage-bg {
  background-color: #0b0e14;
  background-image: 
    radial-gradient(at 0% 0%, #1e3a8a 0px, transparent 50%),
    radial-gradient(at 100% 0%, #581c87 0px, transparent 50%),
    radial-gradient(at 50% 100%, #1e40af 0px, transparent 50%);
  position: relative;
}

.stage-bg::before {
  display: none;
}

.stage-bg::after {
  display: none;
}

/* ── Glass Card ── */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

/* ── Gold Divider ── */
.gold-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1rem 0;
  opacity: 0.55;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.45rem; padding: 10px 16px;
  border: none; border-radius: 8px;
  font-family: var(--font-ui); font-weight: 600; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s; text-decoration: none; line-height: 1;
}
.btn-gold {
  background: var(--gold);
  color: #000;
  box-shadow: none;
}
.btn-gold:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-red {
  background: var(--primary);
  color: var(--cream);
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
.btn-red:hover { transform: translateY(-2px); filter: brightness(1.15); }
.btn-ghost {
  background: transparent; color: #fff;
  border: 1px solid var(--glass-border);
}
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--gold); }
.btn-danger {
  background: rgba(255, 75, 92, 0.1); color: #ff4b5c;
  border: 1px solid #ff4b5c;
}
.btn-danger:hover { background: rgba(255, 75, 92, 0.2); }
.btn-sm  { padding: 0.4rem 0.9rem; font-size: 0.78rem; }
.btn-lg  { padding: 0.9rem 2.2rem; font-size: 1.1rem; border-radius: 10px; }
.btn-xl  { padding: 1.2rem 3.2rem; font-size: 1.3rem; border-radius: 50px; }

/* ── Logo Title ── */
.logo-title {
  font-family: var(--font-display);
  font-weight: 900; color: var(--gold);
  text-shadow: 0 2px 25px rgba(212,175,55,0.45);
  letter-spacing: 0.05em;
}

/* ── Nav Bar ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 2rem;
  background: rgba(10,0,5,0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(212,175,55,0.18);
}
.nav-logo {
  font-family: var(--font-display); font-size: 1.35rem;
  color: var(--gold); font-weight: 900; letter-spacing: 0.06em;
}
.nav-links { display: flex; gap: 0.65rem; align-items: center; flex-wrap: wrap; }

/* ── Toast ── */
#toast-container {
  position: fixed; bottom: 2rem; right: 2rem;
  z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem;
}
.toast {
  padding: 0.75rem 1.3rem; border-radius: 8px;
  font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.04em; animation: slideInToast 0.3s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.55);
}
.toast-success { background: #1a4a1a; border: 1px solid #4caf50; color: #a5d6a7; }
.toast-error   { background: #4a1a1a; border: 1px solid #e53935; color: #ef9a9a; }
.toast-info    { background: #1a2a4a; border: 1px solid var(--gold-dark); color: var(--gold-light); }
@keyframes slideInToast { from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:translateX(0)} }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(8px);
  z-index: 800; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  max-width: 560px; width: 92%; padding: 2rem; border-radius: 20px;
  transform: scale(0.9); transition: transform 0.3s;
  max-height: 90vh; overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: scale(1); }
.modal-title {
  font-family: var(--font-display); font-size: 1.45rem;
  color: var(--gold); margin-bottom: 1.5rem;
}

/* ── Forms ── */
.form-group { margin-bottom: 1.15rem; }
.form-label {
  display: block; font-family: var(--font-ui); font-size: 0.76rem;
  font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.4rem;
}
.form-control {
  width: 100%; padding: 0.68rem 1rem;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(212,175,55,0.25);
  border-radius: 8px; color: var(--cream); font-family: var(--font-body);
  font-size: 0.92rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.form-control option { background: #1a0008; }

/* ── Tables ── */
.table-wrapper { border-radius: 12px; border: 1px solid var(--glass-border); overflow: hidden; overflow-x: auto; margin-bottom: 1.5rem; }
.data-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: 0.87rem; }
.data-table th {
  font-family: var(--font-ui); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: 0.72rem; color: var(--gold);
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--glass-border);
  text-align: left; user-select: none; white-space: nowrap;
  background: rgba(0,0,0,0.25);
}
.data-table td { padding: 0.7rem 1rem; border-bottom: 1px solid rgba(212,175,55,0.07); vertical-align: middle; color: var(--cream); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(212,175,55,0.04); }

/* ── Badges ── */
.badge {
  display: inline-block; padding: 0.2rem 0.65rem; border-radius: 50px;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.badge-gold   { background: rgba(212,175,55,0.18); color: var(--gold-light); border: 1px solid var(--gold-dark); }
.badge-red    { background: rgba(196,30,58,0.2);   color: #ff8a8a;           border: 1px solid var(--primary); }
.badge-green  { background: rgba(76,175,80,0.2);   color: #a5d6a7;           border: 1px solid #4caf50; }
.badge-blue   { background: rgba(33,150,243,0.18); color: #90caf9;           border: 1px solid #2196f3; }
.badge-orange { background: rgba(255,152,0,0.18);  color: #ffcc80;           border: 1px solid #ff9800; }

/* ── Toggle ── */
.toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:rgba(255,255,255,0.1); border-radius:24px; cursor:pointer; transition:background 0.3s; border:1px solid rgba(255,255,255,0.15); }
.toggle-slider::before { content:''; position:absolute; width:18px; height:18px; left:2px; top:2px; background:rgba(255,255,255,0.5); border-radius:50%; transition:transform 0.3s,background 0.3s; }
.toggle input:checked+.toggle-slider { background: var(--gold-dark); }
.toggle input:checked+.toggle-slider::before { transform:translateX(20px); background:var(--gold); }
.toggle-wrap { display:flex; align-items:center; gap:0.8rem; margin-bottom:0.5rem; }
.toggle-label { font-family:var(--font-body); font-size:0.9rem; color:var(--cream); }

/* ── Letter Chips ── */
.letters-chips { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem; }
.letter-chip {
  display:inline-flex; align-items:center; gap:0.35rem;
  padding:0.4rem 0.75rem;
  background:rgba(212,175,55,0.1); border:1px solid rgba(212,175,55,0.3);
  border-radius:6px; font-family:var(--font-display); font-size:1rem;
  font-weight:700; color:var(--gold); cursor:pointer; user-select:none; transition:background 0.15s;
}
.letter-chip:hover { background:rgba(212,175,55,0.2); }
.remove-chip { font-size:0.68rem; opacity:0.5; margin-left:0.15rem; cursor:pointer; font-family:sans-serif; }
.remove-chip:hover { opacity:1; color:#e53935; }

/* ── Progress bar ── */
.progress-bar { height:3px; background:rgba(255,255,255,0.08); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--gold-dark),var(--gold)); border-radius:2px; transition:width 0.5s ease; }

/* ── Danger Box ── */
.danger-box { border:1px solid rgba(229,57,53,0.3); border-radius:12px; padding:1.5rem; background:rgba(229,57,53,0.04); margin-top:2rem; }
.danger-title { font-family:var(--font-ui); font-size:0.7rem; font-weight:700; letter-spacing:0.2em; text-transform:uppercase; color:#e53935; margin-bottom:1rem; }

/* ── Scroll ── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background:var(--gold-dark); border-radius:3px; }

/* ── Utilities ── */
.text-gold    { color: var(--gold); }
.text-cream   { color: var(--cream); }
.text-muted   { color: rgba(255,248,231,0.42); }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.gap-1        { gap: 0.5rem; }
.gap-2        { gap: 1rem; }
.mt-1         { margin-top: 0.5rem; }
.mt-2         { margin-top: 1rem; }
.mt-3         { margin-top: 1.5rem; }
.mb-2         { margin-bottom: 1rem; }
.mb-3         { margin-bottom: 1.5rem; }
.p-2          { padding: 1rem; }
.p-3          { padding: 1.5rem; }
.text-center  { text-align: center; }

@media (max-width:768px) {
  .topnav { padding: 0.6rem 1rem; }
  .nav-logo { font-size: 1rem; }
}