/* ============================================================================
   CIVIC OS - DRASTIC VISUAL REDESIGN
   Strong, high-contrast, premium visual layer applied across all modules.
   ============================================================================ */

:root {
  --premium-bg-deep: #061423;
  --premium-bg-mid: #0a2238;
  --premium-surface: rgba(10, 32, 56, 0.66);
  --premium-surface-strong: rgba(8, 26, 46, 0.86);
  --premium-border: rgba(125, 199, 255, 0.22);
  --premium-border-strong: rgba(125, 199, 255, 0.4);
  --premium-text: #eef7ff;
  --premium-muted: #b6d1eb;
  --premium-accent: #2ec4b6;
  --premium-accent-2: #ff8a3d;
  --premium-shadow: 0 24px 60px rgba(2, 10, 18, 0.55);
}

html,
body {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(46, 196, 182, 0.2), transparent 60%),
    radial-gradient(900px 600px at -15% 25%, rgba(255, 138, 61, 0.16), transparent 62%),
    linear-gradient(160deg, var(--premium-bg-deep) 0%, var(--premium-bg-mid) 46%, #071a30 100%) !important;
  color: var(--premium-text) !important;
  font-family: 'Space Grotesk', Inter, sans-serif !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 36px 36px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.civic-hero-title,
.gn-hero-title,
.civic-heading {
  color: var(--premium-text) !important;
  font-family: 'Fraunces', 'Cinzel', serif !important;
  letter-spacing: 0.02em;
  text-wrap: balance;
}

p,
li,
label,
small,
span,
.civic-text,
.gn-hero-description,
.gn-section-description {
  color: var(--premium-muted) !important;
}

a {
  color: #8bd8ff;
}

a:hover {
  color: #c6efff;
}

/* Main layout spacing */
.civic-main {
  padding-top: 1.5rem;
}

.container,
.gn-container,
.civic-container {
  max-width: min(1240px, 94vw);
}

/* Strong global nav redesign */
.civic-os-global-nav,
.civic-navbar {
  height: 86px !important;
  border-bottom: 1px solid var(--premium-border-strong) !important;
  background: linear-gradient(135deg, rgba(6, 20, 35, 0.9), rgba(8, 30, 52, 0.82)) !important;
  backdrop-filter: blur(18px) saturate(130%) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35) !important;
}

.logo-text {
  font-family: 'Fraunces', serif !important;
  letter-spacing: 0.04em !important;
}

.domain-nav-item,
.modules-toggle,
.user-profile-toggle,
.auth-btn,
.quick-action-btn {
  border: 1px solid var(--premium-border) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.domain-nav-item:hover,
.modules-toggle:hover,
.user-profile-toggle:hover,
.auth-btn:hover,
.quick-action-btn:hover {
  transform: translateY(-2px);
  border-color: var(--premium-border-strong) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  background: rgba(255, 255, 255, 0.08) !important;
}

.domain-nav-item.active {
  background: linear-gradient(120deg, rgba(46, 196, 182, 0.2), rgba(139, 216, 255, 0.16)) !important;
  border-color: rgba(139, 216, 255, 0.6) !important;
}

/* Sections and cards */
.civic-section,
.gn-section,
.civic-card,
.gn-card,
.emission-card,
.civic-media-card,
.login-card-enhanced,
.gn-stats-card {
  background: linear-gradient(145deg, var(--premium-surface), var(--premium-surface-strong)) !important;
  border: 1px solid var(--premium-border) !important;
  border-radius: 24px !important;
  box-shadow: var(--premium-shadow) !important;
  backdrop-filter: blur(14px) !important;
}

.civic-section,
.gn-section {
  padding: clamp(1.2rem, 2vw, 2rem) !important;
  margin-block: clamp(1rem, 2vw, 1.8rem) !important;
}

/* Hero emphasis */
.gn-hero,
.login-enhanced-section {
  position: relative;
  overflow: hidden;
}

.gn-hero::after,
.login-enhanced-section::after {
  content: "";
  position: absolute;
  width: 38rem;
  height: 38rem;
  right: -10rem;
  top: -12rem;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(46, 196, 182, 0.2), transparent 65%);
  pointer-events: none;
}

.civic-hero-title,
.gn-hero-title,
.login-title {
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* Buttons */
.btn,
.civic-btn,
.gn-btn,
.btn-primary,
.btn-secondary,
.auth-btn,
button[type="submit"],
.login-form-enhanced .btn {
  min-height: 48px;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.btn-primary,
.civic-btn-primary,
.gn-btn--primary,
.auth-btn.register,
button[type="submit"],
.login-form-enhanced .btn-primary {
  background: linear-gradient(130deg, var(--premium-accent), #23a99c 55%, #1e8d82) !important;
  color: #f8feff !important;
  box-shadow: 0 12px 28px rgba(20, 132, 123, 0.38) !important;
}

.btn-primary:hover,
.civic-btn-primary:hover,
.gn-btn--primary:hover,
.auth-btn.register:hover,
button[type="submit"]:hover,
.login-form-enhanced .btn-primary:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 16px 34px rgba(20, 132, 123, 0.45) !important;
}

.btn-secondary,
.civic-btn-outline,
.gn-btn--secondary,
.auth-btn.login {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--premium-text) !important;
}

.btn-secondary:hover,
.civic-btn-outline:hover,
.gn-btn--secondary:hover,
.auth-btn.login:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  transform: translateY(-2px);
}

/* Forms */
input,
select,
textarea,
.form-control,
.form-control-glass {
  background: rgba(5, 20, 36, 0.64) !important;
  border: 1px solid rgba(139, 216, 255, 0.34) !important;
  border-radius: 12px !important;
  color: var(--premium-text) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(182, 209, 235, 0.72) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-control-glass:focus {
  border-color: rgba(139, 216, 255, 0.72) !important;
  box-shadow: 0 0 0 4px rgba(46, 196, 182, 0.22) !important;
}

/* Alerts and badges */
.alert,
.civic-alert {
  border-radius: 14px !important;
  border: 1px solid var(--premium-border) !important;
}

.civic-badge,
.gn-hero-badge,
.gn-section-badge,
.badge {
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: linear-gradient(120deg, rgba(255, 138, 61, 0.2), rgba(46, 196, 182, 0.2)) !important;
  color: #f7fbff !important;
  font-weight: 700 !important;
}

/* Footer upgrade */
.civic-footer {
  margin-top: 2rem;
  background: linear-gradient(180deg, rgba(7, 24, 42, 0.7), rgba(4, 14, 25, 0.96)) !important;
  border-top: 1px solid var(--premium-border) !important;
}

.civic-footer-title {
  font-family: 'Fraunces', serif !important;
  color: var(--premium-text) !important;
}

.civic-footer-link,
.civic-footer-text {
  color: var(--premium-muted) !important;
}

.civic-footer-link:hover {
  color: #d8f2ff !important;
}

/* Meaningful motion - progressive reveal only */
@media (prefers-reduced-motion: no-preference) {
  .civic-section,
  .gn-card,
  .civic-card,
  .login-card-enhanced,
  .emission-card,
  .civic-media-card {
    animation: civic-rise-in 420ms ease both;
  }

  .civic-section:nth-of-type(2),
  .gn-card:nth-of-type(2),
  .civic-card:nth-of-type(2) {
    animation-delay: 70ms;
  }

  .civic-section:nth-of-type(3),
  .gn-card:nth-of-type(3),
  .civic-card:nth-of-type(3) {
    animation-delay: 120ms;
  }
}

@keyframes civic-rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile tuning */
@media (max-width: 992px) {
  .civic-os-global-nav,
  .civic-navbar {
    height: auto !important;
    min-height: 74px;
    padding: 0.8rem 1rem !important;
  }

  body {
    padding-top: 88px !important;
  }

  .civic-section,
  .gn-section,
  .login-card-enhanced {
    border-radius: 18px !important;
    padding: 1rem !important;
  }
}

@media (max-width: 576px) {
  .civic-hero-title,
  .gn-hero-title,
  .login-title {
    font-size: clamp(1.7rem, 7.2vw, 2.2rem) !important;
  }

  .domain-nav-label,
  .current-module-indicator,
  .quick-actions-toolbar {
    display: none !important;
  }
}