:root{
  --bg: #0b1120;
  --bg-alt: #0e1526;
  --panel: rgba(17, 24, 39, 0.72);
  --panel-solid: #111827;
  --border: #1f2937;
  --accent: #22d3ee;
  --accent-2: #3b82f6;
  --text: #e5e7eb;
  --text-muted: #94a3b8;
  --radius: 14px;
}

*{box-sizing:border-box}
body{
  background: radial-gradient(circle at 20% -10%, rgba(59,130,246,.16), transparent 40%),
              radial-gradient(circle at 90% 10%, rgba(34,211,238,.12), transparent 35%),
              var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}
h1,h2,h3,h4,h5,h6{ font-family:'Space Grotesk', 'Inter', sans-serif; letter-spacing:-0.01em; }
.accent{ color: var(--accent); }
a{ color: var(--accent); text-decoration:none; }
a:hover{ color: #67e8f9; }
code, .mono { font-family: 'JetBrains Mono', monospace; }

/* Navbar */
.wg-navbar{ background: rgba(11,17,32,.85); backdrop-filter: blur(10px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; padding:14px 0; }
.wg-brand{ font-family:'Space Grotesk',sans-serif; font-weight:700; color:var(--text); font-size:1.15rem; }
.wg-navbar .nav-link{ color: var(--text-muted); font-weight:500; }
.wg-navbar .nav-link:hover{ color: var(--text); }

/* Buttons */
.wg-btn-accent{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#04121a; font-weight:600; border:none;
}
.wg-btn-accent:hover{ filter:brightness(1.08); color:#04121a; }
.wg-btn-outline{ border:1px solid var(--border); color:var(--text); background:transparent; }
.wg-btn-outline:hover{ border-color: var(--accent); color: var(--accent); }

/* Hero */
.wg-hero{ padding-top: 40px; }
.wg-eyebrow{ font-size:.75rem; letter-spacing:.12em; color: var(--accent); font-weight:600; }
.wg-h1{ font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight:700; line-height:1.05; }
.wg-h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight:700; }
.wg-lead{ color: var(--text-muted); font-size:1.1rem; max-width:540px; }
.wg-scan-form .form-control, .wg-scan-form .input-group-text{
  background: var(--panel-solid); border-color: var(--border); color: var(--text);
}
.wg-scan-form .form-control:focus{ background:var(--panel-solid); color:#fff; border-color:var(--accent); box-shadow:0 0 0 .2rem rgba(34,211,238,.2); }

/* Terminal signature element */
.wg-terminal{ background:#070c17; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 20px 60px -20px rgba(34,211,238,.25); }
.wg-terminal-bar{ display:flex; gap:6px; padding:12px 14px; background:#0d1424; border-bottom:1px solid var(--border); }
.wg-terminal-bar span{ width:10px; height:10px; border-radius:50%; background:#374151; }
.wg-terminal-bar span:nth-child(1){ background:#ef4444; }
.wg-terminal-bar span:nth-child(2){ background:#f59e0b; }
.wg-terminal-bar span:nth-child(3){ background:#10b981; }
.wg-terminal-body{ padding:20px; height:260px; overflow:hidden; font-family:'JetBrains Mono',monospace; font-size:.82rem; color:#6ee7f9; }
.wg-term-line{ opacity:0; animation: wgFadeIn .3s ease forwards; margin-bottom:6px; }
@keyframes wgFadeIn{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

/* Cards */
.wg-card{ background: var(--panel); border:1px solid var(--border); border-radius: var(--radius); padding:24px; backdrop-filter: blur(8px); }
.wg-card-icon{ font-size:1.4rem; color: var(--accent); }
.wg-card-highlight{ border-color: var(--accent); box-shadow:0 0 0 1px var(--accent), 0 20px 50px -25px rgba(34,211,238,.4); }
.wg-section-alt{ background: rgba(255,255,255,.02); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.wg-step-num{ width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04121a; font-weight:700; display:flex; align-items:center; justify-content:center; margin:0 auto; }

.wg-price{ font-size:2rem; font-weight:700; font-family:'Space Grotesk',sans-serif; margin-top:6px; }

.wg-disclaimer{ background: rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.3); border-radius: var(--radius); padding:16px 20px; color:#fbbf24; font-size:.9rem; }
.wg-disclaimer i{ margin-right:8px; }

/* Score ring */
.wg-score-ring{
  width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Space Grotesk',sans-serif; font-size:1.7rem; font-weight:700;
  background: conic-gradient(var(--accent) 0deg, var(--accent) 330deg, #1f2937 330deg);
  color:#04121a;
}
.wg-score-ring::before{ content:''; }
.wg-grade-A{ background: conic-gradient(#10b981 360deg, #1f2937 0deg); }
.wg-grade-B{ background: conic-gradient(#22d3ee 360deg, #1f2937 0deg); }
.wg-grade-C{ background: conic-gradient(#f59e0b 360deg, #1f2937 0deg); }
.wg-grade-D{ background: conic-gradient(#f97316 360deg, #1f2937 0deg); }
.wg-grade-F{ background: conic-gradient(#ef4444 360deg, #1f2937 0deg); }

/* Progress */
.wg-progress{ height:28px; background: var(--panel-solid); border:1px solid var(--border); border-radius:8px; }
.wg-progress-bar{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#04121a; font-weight:600; font-size:.8rem; line-height:28px; }
.wg-scan-log{ background:#070c17; border:1px solid var(--border); border-radius:8px; padding:14px; height:180px; overflow-y:auto; font-family:'JetBrains Mono',monospace; font-size:.8rem; color:#6ee7f9; }

/* Findings */
.wg-finding{ border-bottom:1px solid var(--border); padding:14px 0; }
.wg-finding:last-child{ border-bottom:none; }

/* Stat cards (dashboard) */
.wg-stat-card{ background: var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-align:center; }
.wg-stat-value{ font-family:'Space Grotesk',sans-serif; font-size:1.6rem; font-weight:700; }
.wg-stat-label{ color:var(--text-muted); font-size:.8rem; margin-top:2px; }

/* Tables */
.wg-table{ color: var(--text); }
.wg-table thead th{ color: var(--text-muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; border-bottom-color: var(--border); font-weight:600; }
.wg-table td{ border-bottom-color: var(--border); vertical-align:middle; }

.wg-badge-completed{ background:#10b981; color:#04121a; }
.wg-badge-running{ background:#3b82f6; color:#fff; }
.wg-badge-queued{ background:#6b7280; color:#fff; }
.wg-badge-timeout{ background:#f59e0b; color:#04121a; }
.wg-badge-failed{ background:#ef4444; color:#fff; }

/* Footer */
.wg-footer{ border-top:1px solid var(--border); background: rgba(255,255,255,.015); }
.wg-footer a{ color: var(--text-muted); }
.wg-footer a:hover{ color: var(--accent); }

/* Modal theming */
.wg-modal{ background: var(--panel-solid); color: var(--text); border:1px solid var(--border); }
.wg-modal .form-control, .wg-modal .form-select{ background:#0b1120; border-color:var(--border); color:var(--text); }

/* Alerts on dark bg */
.alert{ border:1px solid var(--border); }

/* Accordion (FAQ) */
.accordion-item{ background: var(--panel); border-color: var(--border); }
.accordion-button{ background: var(--panel); color: var(--text); }
.accordion-button:not(.collapsed){ background: rgba(34,211,238,.08); color: var(--accent); box-shadow:none; }
.accordion-button::after{ filter: invert(1); }

@media (max-width:768px){
  .wg-terminal-body{ height:200px; }
}
