/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:            #07070f;
  --surface:       #0a0a1a;
  --surface2:      #0f0f22;
  --border:        rgba(139, 92, 246, 0.18);
  --border-h:      rgba(139, 92, 246, 0.42);

  /* Purple — primary */
  --purple:        #8b5cf6;
  --purple-d:      #6d28d9;
  --purple-l:      #a78bfa;
  --purple-ll:     #c4b5fd;
  --purple-gl:     rgba(139, 92, 246, 0.28);
  --purple-gl-h:   rgba(139, 92, 246, 0.5);

  /* Cyan — data-stream accent */
  --cyan:          #00d4ff;
  --cyan-d:        #0099cc;
  --cyan-gl:       rgba(0, 212, 255, 0.18);
  --cyan-gl-h:     rgba(0, 212, 255, 0.38);

  /* Semantic */
  --teal:          #14b8a6;
  --teal-gl:       rgba(20, 184, 166, 0.28);
  --red:           #f87171;
  --red-gl:        rgba(248, 113, 113, 0.24);
  --orange:        #ff6b35;
  --orange-gl:     rgba(255, 107, 53, 0.24);
  --green:         #34d399;
  --green-gl:      rgba(52, 211, 153, 0.24);

  /* Typography */
  --text:          #e2e8f0;
  --text-s:        #94a3b8;
  --muted:         #64748b;
  --font-display:  'Syne', system-ui, sans-serif;
  --font-body:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', monospace;
}

/* ── Alpine cloak — must be present for x-cloak to work ─── */
[x-cloak] { display: none !important; }

/* ── Base ────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 110% 55% at 50% -10%, rgba(139,92,246,0.14) 0%, transparent 62%),
    radial-gradient(ellipse 55% 70% at 95% 60%,  rgba(0,212,255,0.05)   0%, transparent 55%),
    linear-gradient(rgba(139,92,246,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,92,246,0.035) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  background-attachment: fixed;
}

::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(139,92,246,0.32); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.6); }

/* ── Typography helpers ──────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-display); }
code, pre, kbd  { font-family: var(--font-mono); }

/* ── Glassmorphism card ──────────────────────────────────── */
.glass {
  background: rgba(10, 10, 26, 0.82);
  border: 1px solid var(--border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.glass:hover {
  border-color: rgba(139, 92, 246, 0.3);
}

/* ── Metric card ─────────────────────────────────────────── */
.metric-card {
  position: relative;
  overflow: hidden;
}
.metric-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cyan) 35%, var(--purple) 65%, transparent 100%);
  opacity: 0.55;
}
.metric-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 30% at 50% 0%, rgba(139,92,246,0.07) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-scan {
  background: linear-gradient(135deg, var(--purple) 0%, var(--purple-d) 55%, #5b21b6 100%);
  border: 1px solid rgba(139,92,246,0.48);
  box-shadow: 0 0 22px var(--purple-gl), 0 1px 0 rgba(255,255,255,0.08) inset;
  border-radius: 10px;
  transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn-scan::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.25s;
}
.btn-scan:hover:not(:disabled) {
  box-shadow: 0 0 44px var(--purple-gl), 0 0 88px rgba(139,92,246,0.11), 0 4px 24px rgba(139,92,246,0.28);
  transform: translateY(-2px) scale(1.015);
}
.btn-scan:hover:not(:disabled)::after { opacity: 1; }
.btn-scan:active:not(:disabled)        { transform: translateY(0) scale(0.975); transition-duration: .1s; }
.btn-scan:disabled                     { opacity: 0.48; cursor: not-allowed; }

.btn-purge {
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.24);
  color: #fca5a5;
  border-radius: 8px;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-purge:hover:not(:disabled) {
  background: rgba(248,113,113,0.16);
  border-color: rgba(248,113,113,0.52);
  box-shadow: 0 0 20px rgba(248,113,113,0.18), 0 0 40px rgba(248,113,113,0.07);
  transform: translateY(-1px);
}
.btn-purge:active:not(:disabled) { transform: scale(0.97); transition-duration: .08s; }
.btn-purge:disabled               { opacity: 0.44; cursor: not-allowed; }

.btn-dry {
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.24);
  color: #c4b5fd;
  border-radius: 8px;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-dry:hover:not(:disabled) {
  background: rgba(139,92,246,0.17);
  border-color: rgba(139,92,246,0.52);
  box-shadow: 0 0 18px rgba(139,92,246,0.18);
  transform: translateY(-1px);
}
.btn-dry:active:not(:disabled) { transform: scale(0.97); transition-duration: .08s; }
.btn-dry:disabled               { opacity: 0.44; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  transition: all .22s;
  cursor: pointer;
}
.btn-ghost:hover {
  border-color: rgba(139,92,246,0.38);
  color: var(--text);
  background: rgba(139,92,246,0.06);
}

/* ── Data glow utilities ─────────────────────────────────── */
.data-glow        { color: var(--cyan);    text-shadow: 0 0 18px var(--cyan-gl),    0 0 36px rgba(0,212,255,0.08); }
.data-glow-red    { color: var(--red);     text-shadow: 0 0 18px var(--red-gl),     0 0 36px rgba(248,113,113,0.08); }
.data-glow-purple { color: var(--purple-l);text-shadow: 0 0 18px var(--purple-gl),  0 0 36px rgba(139,92,246,0.08); }
.data-glow-green  { color: var(--green);   text-shadow: 0 0 18px var(--green-gl),   0 0 36px rgba(52,211,153,0.08); }

/* ── Scan beam loading ───────────────────────────────────── */
.scan-beam {
  position: relative;
  overflow: hidden;
}
.scan-beam::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cyan-gl) 38%,
    rgba(0,212,255,0.45) 50%,
    var(--cyan-gl) 62%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: scan-beam-anim 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* ── Breathing pulse ─────────────────────────────────────── */
.breathing { animation: breathe 3.2s ease-in-out infinite; }

/* ── Radar ───────────────────────────────────────────────── */
.radar-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  flex-shrink: 0;
}
.radar-wrap > * { position: absolute; border-radius: 50%; }
.radar-bg {
  inset: 0;
  background: radial-gradient(circle, rgba(139,92,246,0.07) 0%, rgba(0,212,255,0.03) 45%, transparent 70%);
  border: 1px solid rgba(139,92,246,0.28);
  box-shadow: 0 0 40px rgba(139,92,246,0.06) inset;
}
.radar-r2 { inset: 25%; border: 1px solid rgba(139,92,246,0.16); }
.radar-r3 { inset: 50%; border: 1px solid rgba(0,212,255,0.14); }

.radar-sweep-mask { inset: 0; overflow: hidden; }
.radar-sweep-mask > div {
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 295deg,
    rgba(0,212,255,0.05)   295deg 325deg,
    rgba(139,92,246,0.28)  325deg 348deg,
    rgba(139,92,246,0.92)  348deg 360deg
  );
  animation: radar-spin 2.4s linear infinite;
}

.radar-x { inset: 0; }
.radar-x::before, .radar-x::after {
  content: ''; position: absolute;
  background: rgba(139,92,246,0.12);
}
.radar-x::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar-x::after  { top: 50%; left: 0; right: 0; height: 1px; }

.radar-dot {
  width: 10px; height: 10px;
  background: var(--cyan);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 12px var(--cyan), 0 0 28px var(--cyan-gl);
}

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes radar-spin    { to { transform: rotate(360deg); } }
@keyframes ghost-float   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes slide-up      { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes slide-in      { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }
@keyframes fade-in       { from { opacity:0; } to { opacity:1; } }
@keyframes pulse-ring    { 0% { transform:scale(.85); opacity:1; } 100% { transform:scale(2); opacity:0; } }
@keyframes glow-pulse    { 0%,100% { box-shadow:0 0 12px var(--purple-gl); } 50% { box-shadow:0 0 40px var(--purple-gl), 0 0 80px rgba(139,92,246,.12); } }
@keyframes shimmer       { 0% { background-position:-1200px 0; } 100% { background-position:1200px 0; } }
@keyframes blink         { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes count-in      { from { opacity:0; transform:translateY(8px) scale(.9); } to { opacity:1; transform:none; } }
@keyframes success-flash { 0% { background:rgba(52,211,153,.22); } 100% { background:transparent; } }
@keyframes error-flash   { 0% { background:rgba(248,113,113,.22); } 100% { background:transparent; } }
@keyframes scan-beam-anim { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes breathe       { 0%,100% { opacity:.65; transform:scale(1); } 50% { opacity:1; transform:scale(1.06); } }
@keyframes border-glow   { 0%,100% { box-shadow:0 0 8px var(--purple-gl); } 50% { box-shadow:0 0 22px var(--purple-gl-h), 0 0 48px var(--purple-gl); } }
@keyframes cyan-pulse    { 0%,100% { box-shadow:0 0 8px var(--cyan-gl); } 50% { box-shadow:0 0 22px var(--cyan-gl-h), 0 0 48px var(--cyan-gl); } }
@keyframes float-up      { 0%,100% { transform:translateY(0) rotate(0deg); } 33% { transform:translateY(-18px) rotate(2deg); } 66% { transform:translateY(-8px) rotate(-1deg); } }

/* ── Animation utilities ─────────────────────────────────── */
.anim-ghost-float  { animation: ghost-float 3.5s ease-in-out infinite; display:inline-block; }
.anim-float-up     { animation: float-up 5s ease-in-out infinite; display:inline-block; }
.anim-slide-up     { animation: slide-up .45s ease-out both; }
.anim-slide-in     { animation: slide-in .4s ease-out both; }
.anim-fade-in      { animation: fade-in .5s ease both; }
.anim-glow         { animation: glow-pulse 2.5s ease-in-out infinite; }
.anim-blink        { animation: blink 1.1s ease-in-out infinite; }
.anim-count        { animation: count-in .4s ease both; }
.anim-pulse-ring   { animation: pulse-ring 1.8s cubic-bezier(0,.5,.2,1) infinite; }
.anim-border-glow  { animation: border-glow 2.5s ease-in-out infinite; }
.anim-cyan-pulse   { animation: cyan-pulse 2s ease-in-out infinite; }
.breathing         { animation: breathe 3.2s ease-in-out infinite; }

.stagger-1 { animation-delay: .08s; }
.stagger-2 { animation-delay: .16s; }
.stagger-3 { animation-delay: .24s; }
.stagger-4 { animation-delay: .32s; }
.stagger-5 { animation-delay: .40s; }
.stagger-6 { animation-delay: .48s; }

/* ── Skeleton — data-stream shimmer ─────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(10,10,26,0.8) 25%,
    rgba(0,212,255,0.04) 43%,
    rgba(139,92,246,0.07) 50%,
    rgba(0,212,255,0.04) 57%,
    rgba(10,10,26,0.8) 75%
  );
  background-size: 1200px 100%;
  animation: shimmer 1.8s infinite;
  border-radius: 6px;
}

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 10px; border-radius:20px;
  font-size:.7rem; font-weight:600; letter-spacing:.04em;
  font-family: var(--font-body);
  white-space: nowrap;
}
.badge-purple { background:rgba(139,92,246,.14); color:#c4b5fd; border:1px solid rgba(139,92,246,.28); }
.badge-teal   { background:rgba(20,184,166,.14);  color:#5eead4; border:1px solid rgba(20,184,166,.28); }
.badge-orange { background:rgba(255,107,53,.14);  color:#fdba74; border:1px solid rgba(255,107,53,.28); }
.badge-yellow { background:rgba(251,191,36,.14);  color:#fde68a; border:1px solid rgba(251,191,36,.28); }
.badge-red    { background:rgba(248,113,113,.14); color:#fca5a5; border:1px solid rgba(248,113,113,.28); }
.badge-green  { background:rgba(52,211,153,.14);  color:#6ee7b7; border:1px solid rgba(52,211,153,.28); }
.badge-cyan   { background:rgba(0,212,255,.1);    color:#67e8f9; border:1px solid rgba(0,212,255,.24); }

/* ── Table ───────────────────────────────────────────────── */
.ghost-table { width:100%; border-collapse:collapse; }
.ghost-table th {
  padding:12px 16px; text-align:left; font-size:.68rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color: var(--muted); border-bottom:1px solid var(--border);
}
.ghost-table td {
  padding:14px 16px; font-size:.875rem;
  border-bottom:1px solid rgba(139,92,246,.045);
  transition: background .15s;
}
.ghost-table tbody tr:hover td { background: rgba(139,92,246,.055); }
.ghost-table tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--purple); }

/* ── Toggle switch ───────────────────────────────────────── */
.toggle { position:relative; display:inline-block; width:42px; height:24px; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-track {
  position:absolute; cursor:pointer; inset:0;
  background: rgba(100,116,139,.22); border-radius:24px;
  border:1px solid rgba(100,116,139,.22);
  transition: all .38s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-track::before {
  content:''; position:absolute;
  width:16px; height:16px; background:#e2e8f0; border-radius:50%;
  left:3px; top:3px;
  transition: transform .38s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.toggle input:checked + .toggle-track {
  background: linear-gradient(135deg, var(--purple-d), var(--purple));
  border-color: rgba(139,92,246,.48);
  box-shadow: 0 0 14px rgba(139,92,246,.28);
}
.toggle input:checked + .toggle-track::before {
  transform: translateX(18px);
  background: #fff;
}

/* ── Nav ─────────────────────────────────────────────────── */
.nav-link {
  color: var(--muted); font-size:.875rem;
  font-family: var(--font-body);
  padding:6px 12px; border-radius:8px;
  transition: all .22s; text-decoration:none;
  font-weight: 500; letter-spacing:.01em;
}
.nav-link:hover {
  color: var(--text);
  background: rgba(139,92,246,.1);
}
.nav-link.active {
  color: #c4b5fd;
  background: rgba(139,92,246,.15);
  box-shadow: inset 0 0 0 1px rgba(139,92,246,.2);
}

/* ── Region chip ─────────────────────────────────────────── */
.region-chip {
  padding:4px 12px; border-radius:20px; font-size:.72rem; cursor:pointer;
  border:1px solid var(--border); color:var(--muted);
  transition: all .28s cubic-bezier(0.34, 1.56, 0.64, 1);
  background:transparent; user-select:none;
  font-family: var(--font-mono);
  font-weight: 400; letter-spacing:.02em;
}
.region-chip.active {
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(0,212,255,.07));
  border-color: rgba(139,92,246,.48);
  color: #c4b5fd;
  box-shadow: 0 0 14px rgba(139,92,246,.14);
}
.region-chip:hover:not(.active) {
  border-color: rgba(139,92,246,.3);
  color: var(--text);
  background: rgba(139,92,246,.05);
  transform: translateY(-1px);
}

/* ── Cost numbers ────────────────────────────────────────── */
.cost-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Stat numbers (plain counts) ─────────────────────────── */
/* Never use var(--font-display) for bare digits — Syne renders "0" as an
   ambiguous oval at small/medium sizes. Use this for any integer stat. */
.stat-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Status row flash ────────────────────────────────────── */
.flash-ok  { animation: success-flash .8s ease-out; }
.flash-err { animation: error-flash   .8s ease-out; }

/* ── History item ────────────────────────────────────────── */
.history-item {
  border-left: 2px solid var(--border);
  transition: border-color .28s, background .28s;
}
.history-item:hover {
  border-left-color: var(--cyan);
  background: rgba(0,212,255,.015);
}