/* ==================== CodeStuff Bootstrap Brand Theme ==================== */
:root {
  --bs-body-bg: #07090f;
  --bs-body-color: #f3f5f9;
  --brand-primary: #6366f1;
  --brand-primary-dark: #4f46e5;
  --brand-secondary: #8b5cf6;
  --brand-card-bg: #0d1117;
  --brand-elevated: #151b26;
  --brand-border: #1c2333;
  --brand-border-light: #2a3448;
  --brand-text-secondary: #99a1b3;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: radial-gradient(circle at 10% 0%, rgba(99,102,241,0.06), transparent 45%), var(--bs-body-bg);
  padding-top: 62px;
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -0.02em; }

a { color: var(--brand-primary); }
a:hover { color: var(--brand-secondary); }

.text-secondary { color: var(--brand-text-secondary) !important; }

.brand-gradient-text {
  background: linear-gradient(135deg, #8890f8, var(--brand-secondary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-section-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.brand-badge {
  background: rgba(99,102,241,0.12);
  color: #a5a9fb;
  border: 1px solid rgba(99,102,241,0.3);
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
}

.brand-card {
  background: linear-gradient(180deg, var(--brand-elevated), var(--brand-card-bg));
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  transition: all 0.2s ease;
}
.brand-card:hover {
  border-color: var(--brand-border-light);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}

.brand-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.18));
  color: var(--brand-primary);
}

.brand-inline-code {
  color: #a5a9fb;
  background: rgba(99,102,241,0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  font-size: 0.85em;
}

.registry-stat-number {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.25rem;
  font-weight: 700;
  min-height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #8890f8, var(--brand-secondary));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: #fff;
  border: none;
  font-weight: 600;
}
.brand-btn-primary:hover { background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-secondary)); color: #fff; }

.brand-btn-outline {
  background: transparent;
  border: 1px solid var(--brand-border-light);
  color: var(--bs-body-color);
  font-weight: 500;
}
.brand-btn-outline:hover { border-color: var(--brand-primary); color: #fff; background: rgba(99,102,241,0.08); }

/* Navbar */
.brand-navbar {
  background: rgba(7,9,15,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--brand-border);
  min-height: 62px;
}
.brand-navbar .nav-link { color: var(--brand-text-secondary); font-weight: 500; font-size: 0.92rem; }
.brand-navbar .nav-link:hover, .brand-navbar .nav-link.active { color: #fff; }
.nav-icon-link {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: var(--brand-text-secondary);
  transition: all 0.15s ease;
}
.nav-icon-link:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* Hero */
.brand-hero { border-bottom: 1px solid var(--brand-border); }

/* CTA */
.brand-cta { border-top: 1px solid var(--brand-border); background: rgba(255,255,255,0.015); }

/* Footer */
.brand-footer { background: #05060a; border-top: 1px solid var(--brand-border); }
.brand-footer-links li { margin-bottom: 0.5rem; }
.brand-footer-links a { color: var(--brand-text-secondary); text-decoration: none; font-size: 0.9rem; }
.brand-footer-links a:hover { color: #fff; }

/* Auth gate (kept, restyled to match theme) */
#authGate {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at top left, var(--brand-primary) 0%, transparent 45%),
              radial-gradient(circle at bottom right, var(--brand-secondary) 0%, transparent 45%),
              #05060a;
}
#authGate .ag-card {
  width: min(430px, 92%);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px; padding: 40px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
#authGate .ag-icon {
  width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  box-shadow: 0 10px 30px rgba(99,102,241,.45);
}
#authGate .ag-spinner {
  width: 40px; height: 40px; border: 4px solid rgba(255,255,255,.25);
  border-top-color: #fff; border-radius: 50%; animation: agSpin 1s linear infinite;
}
@keyframes agSpin { to { transform: rotate(360deg); } }
#authGate h1 { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 8px; }
#authGate .ag-sub { opacity: .75; font-size: 14px; color: #fff; }
#authGate .ag-turnstile-wrap { margin-top: 26px; display: flex; justify-content: center; }
#authGate .ag-progress { margin-top: 28px; height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; }
#authGate .ag-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary)); transition: width .5s; }
#authGate .ag-timer { margin-top: 16px; font-size: 14px; opacity: .85; color: #fff; }
#authGate .ag-footer { margin-top: 24px; font-size: 12px; opacity: .45; color: #fff; }
#authGate.ag-success .ag-icon { background: linear-gradient(135deg, #34d399, #16a34a); }
#authGate.ag-success .ag-spinner { display: none; }
#authGate.ag-success .ag-icon::after { content: "\2713"; font-size: 34px; font-weight: bold; color: #fff; }
#authGate.ag-error .ag-icon { background: linear-gradient(135deg, #ff5e7d, #ff3333); }
#authGate.ag-error .ag-spinner { display: none; }
#authGate.ag-error .ag-icon::after { content: "\2715"; font-size: 34px; font-weight: bold; color: #fff; }
#authGate.ag-hidden { display: none; }

/* Auth modal (custom, driven by auth.js classList toggles) */
#authModal {
  position: fixed; inset: 0; z-index: 1050;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
}
#authModal.show { display: flex; }
#authModal .modal-content { width: min(420px, 92%); position: relative; }
#authModal .close {
  position: absolute; top: 14px; right: 14px;
  background: transparent; border: none; color: var(--brand-text-secondary);
  cursor: pointer;
}
#authModal .close:hover { color: #fff; }
#authModal .tab-btn {
  background: transparent; border: 1px solid var(--brand-border-light); color: var(--brand-text-secondary);
}
#authModal .tab-btn.active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
#authModal .auth-form { display: none; }
#authModal .auth-form.active { display: block; }

.brand-border { border-color: var(--brand-border) !important; }

/* Captcha modal (contributors.html) */
.captcha-modal {
  position: fixed; inset: 0; z-index: 1060;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.6);
}
.captcha-modal.show { display: flex; }
.captcha-modal-content {
  background: var(--brand-card-bg);
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  padding: 1.5rem;
  width: min(360px, 92%);
  position: relative;
}
.captcha-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none; color: var(--brand-text-secondary);
  font-size: 1.3rem; cursor: pointer;
}
.captcha-close:hover { color: #fff; }