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

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

:root {
  /* ==========================================================================
     Brand Palette - Official SATGuardian Design System (satguardian.tech)
     ========================================================================== */
  --bg-void:        #0B0F19; /* Obsidian Slate - Deep Cosmic Base */
  --bg-deep:        #070A11; /* Deeper Layer for Code/Terminals */
  --bg-surface:     #111827; /* Surface Card Layer */
  --bg-elevated:    #1A2234; /* Elevated Panel/Header Layer */
  --bg-glass:       rgba(17, 24, 39, 0.75);

  /* Borders & Glows */
  --border-subtle:  rgba(16, 185, 129, 0.14);
  --border-cyan:    rgba(6, 182, 212, 0.20);
  --border-glow:    rgba(16, 185, 129, 0.35);
  --border-active:  #10B981;

  /* Accents */
  --emerald-cyber:  #10B981; /* Emerald Cyber - Primary Action & Verified Clean SAT */
  --emerald-glow:   rgba(16, 185, 129, 0.25);
  --emerald-dim:    #059669;
  --cyan-logic:     #06B6D4; /* Cyan Logic - Secondary Accent & Boolean Engine */
  --cyan-glow:      rgba(6, 182, 212, 0.25);
  --violet-cloud:   #8B5CF6; /* Electric Violet - Cloud Synthesis & Rule Learning */
  --violet-glow:    rgba(139, 92, 246, 0.25);
  --crimson-threat: #EF4444; /* Threat / Blocked Attack */
  --amber-anomaly:  #F59E0B; /* Review / Anomaly Flag */

  /* Text Hierarchy */
  --text-main:      #F8FAFC;
  --text-muted:     #94A3B8;
  --text-dim:       #64748B;
  --text-glow:      rgba(248, 250, 252, 0.95);

  /* Typography */
  --font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:   'Space Grotesk', 'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Radii & Shadows */
  --radius-xs:      4px;
  --radius-sm:      8px;
  --radius-md:      12px;
  --radius-lg:      18px;
  --shadow-card:    0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(16, 185, 129, 0.05);
  --shadow-glow-emerald: 0 0 25px rgba(16, 185, 129, 0.35);
  --shadow-glow-cyan:    0 0 25px rgba(6, 182, 212, 0.35);
  --shadow-glow-violet:  0 0 25px rgba(139, 92, 246, 0.35);

  /* ==========================================================================
     Backward-Compatible Aliases (Translates legacy code to SATGuardian tokens)
     ========================================================================== */
  --lab-void:       var(--bg-void);
  --lab-deep:       var(--bg-deep);
  --lab-surface:    var(--bg-surface);
  --lab-panel:      var(--bg-elevated);
  --lab-border:     var(--border-subtle);
  --lab-glow:       var(--emerald-glow);
  --emerald:        var(--emerald-cyber);
  --ice:            var(--cyan-logic);
  --crimson:        var(--crimson-threat);
  --amber:          var(--amber-anomaly);
  --white-90:       var(--text-main);
  --white-60:       var(--text-muted);
  --white-55:       rgba(255, 255, 255, 0.55);
  --white-30:       var(--text-dim);
  --white-10:       rgba(255, 255, 255, 0.06);
  --font-lab:       var(--font-display);
  --font-code:      var(--font-mono);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background-color: var(--bg-void);
  color: var(--text-main);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ==========================================================================
   Background FX & Grid
   ========================================================================== */
.cyber-grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: 
    linear-gradient(to right, rgba(16, 185, 129, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(6, 182, 212, 0.035) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%);
}

.ambient-aurora {
  position: fixed; top: -150px; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 500px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.12) 0%, rgba(6, 182, 212, 0.06) 40%, transparent 70%);
  filter: blur(60px);
  pointer-events: none; z-index: 0;
}

/* ==========================================================================
   Typography Helpers
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #FFFFFF;
}

.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); }

.gradient-text-emerald {
  background: linear-gradient(135deg, #FFFFFF 20%, var(--emerald-cyber) 70%, var(--cyan-logic) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gradient-text-violet {
  background: linear-gradient(135deg, #FFFFFF 20%, var(--violet-cloud) 70%, var(--cyan-logic) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.gradient-text-cyan {
  background: linear-gradient(135deg, #FFFFFF 20%, var(--cyan-logic) 70%, var(--emerald-cyber) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ==========================================================================
   Standard Topbar (Used across Dashboard, Console, Jobs, History, Admin)
   ========================================================================== */
.topbar {
  height: 58px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem;
  background: rgba(11, 15, 25, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-shrink: 0;
  z-index: 50;
}

.page-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--emerald-cyber);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}

.topbar-right {
  display: flex; align-items: center; gap: 1rem;
}

.su-counter {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--emerald-cyber);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 5px 14px;
  border-radius: var(--radius-xs);
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 6px;
}

.tier-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--emerald-cyber);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 5px 12px;
  border-radius: var(--radius-xs);
}

/* ==========================================================================
   Public Navigation Header (Index, Pricing, Terms, Privacy, Whitelist)
   ========================================================================== */
.nav-header, nav.public-nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  background: rgba(11, 15, 25, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

.brand-logo {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
}
.brand-badge {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(16, 185, 129, 0.12);
  border: 1.5px solid var(--emerald-cyber);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  box-shadow: var(--shadow-glow-emerald);
}
.brand-title {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: #FFFFFF;
  letter-spacing: -0.01em; line-height: 1.1;
}
.brand-sub {
  font-family: var(--font-mono); font-size: 0.62rem; color: var(--cyan-logic);
  letter-spacing: 0.12em; text-transform: uppercase; margin-top: 2px;
}

/* ==========================================================================
   Cards, Panels, and Glassmorphism
   ========================================================================== */
.panel, .card, .glass-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.panel:hover, .card:hover, .glass-panel:hover {
  border-color: rgba(16, 185, 129, 0.3);
}

.card-elevated {
  background: var(--bg-elevated);
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.92rem;
  text-decoration: none; border: none; cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-sans);
}

.btn-emerald, .btn-primary {
  background: linear-gradient(135deg, var(--emerald-cyber), var(--emerald-dim));
  color: #070A11 !important;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.35);
}
.btn-emerald:hover:not(:disabled), .btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.55);
  filter: brightness(1.1);
}

.btn-violet {
  background: linear-gradient(135deg, var(--violet-cloud), #6D28D9);
  color: #FFFFFF !important;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.35);
}
.btn-violet:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139, 92, 246, 0.55);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  border: 1px solid var(--border-subtle);
}
.btn-ghost:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: var(--border-glow);
  color: #FFFFFF;
  transform: translateY(-1px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}

.btn:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important;
}

/* ==========================================================================
   Form Controls (Inputs, Selects, Textareas)
   ========================================================================== */
.field {
  margin-bottom: 1.5rem;
}
.field label {
  display: block; font-size: 0.8rem; font-weight: 600;
  color: var(--text-main); margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}
.field-hint {
  font-size: 0.72rem; color: var(--text-dim); margin-top: 0.35rem; font-family: var(--font-mono);
}

input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.75rem 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

select option {
  background: var(--bg-surface);
  color: var(--text-main);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--emerald-cyber);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

textarea {
  resize: vertical; min-height: 110px; line-height: 1.6;
}

/* ==========================================================================
   Badges & Tags
   ========================================================================== */
.badge-sat-safe {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--emerald-cyber); background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.badge-sat-threat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--crimson-threat); background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
}
.badge-cloud-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700;
  color: var(--violet-cloud); background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

/* ==========================================================================
   Data Tables
   ========================================================================== */
.data-table-container { overflow-x: auto; width: 100%; }
.data-table {
  width: 100%; border-collapse: collapse; text-align: left;
}
.data-table th {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle);
  background: rgba(16, 185, 129, 0.03);
}
.data-table td {
  padding: 1rem 1.25rem; border-bottom: 1px solid rgba(16, 185, 129, 0.08);
  font-size: 0.88rem; color: var(--text-main);
  vertical-align: middle;
}
.data-table tr:hover td {
  background: rgba(16, 185, 129, 0.04);
}

/* ==========================================================================
   Code Blocks
   ========================================================================== */
pre, code, .code-snippet {
  font-family: var(--font-mono);
}
.code-block {
  background: var(--bg-deep); padding: 1.25rem; border-radius: var(--radius-sm);
  font-family: var(--font-mono); color: var(--emerald-cyber); margin: 1.25rem 0;
  border: 1px solid var(--border-subtle); font-size: 0.86rem; line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--emerald-cyber); }