/* ══════════════════════════════════════════
   VulnScan Pro — Shared Styles
   ══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Syne:wght@400;600;700;800&display=swap');

:root {
  --bg:          #060b18;
  --bg-card:     rgba(12,20,38,0.9);
  --bg-input:    #070d1e;
  --border:      rgba(56,189,248,0.13);
  --border-h:    rgba(56,189,248,0.38);
  --blue:        #38bdf8;
  --purple:      #a78bfa;
  --green:       #34d399;
  --red:         #f87171;
  --orange:      #fb923c;
  --yellow:      #fbbf24;
  --text:        #e2eaf8;
  --muted:       #64748b;
  --dim:         #94a3b8;
  --mono:        'Space Mono', monospace;
  --display:     'Syne', sans-serif;
}

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

body {
  background: var(--bg);
  font-family: var(--display);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(56,189,248,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  position: relative;
  z-index: 1;
}

/* ── Navbar ── */
.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--border);
}
.logo-area { display:flex; align-items:center; gap:14px; text-decoration:none; }
.logo-icon {
  width:44px; height:44px;
  background: linear-gradient(135deg,#2563eb,#7c3aed);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
  box-shadow: 0 0 20px rgba(37,99,235,.4);
}
.logo-text h1 {
  font-size:1.4rem; font-weight:800; letter-spacing:-.5px;
  background: linear-gradient(to right,#e0f2fe,#a78bfa);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.logo-text span { font-size:.7rem; color:var(--muted); font-family:var(--mono); }
.nav-links { display:flex; gap:1.4rem; align-items:center; flex-wrap:wrap; }
.nav-links a {
  color:var(--dim); text-decoration:none;
  font-size:.88rem; font-weight:600; transition:.2s;
}
.nav-links a:hover, .nav-links a.active { color:var(--blue); }
.btn-nav {
  background: rgba(37,99,235,.12);
  border:1px solid #2563eb;
  padding:.38rem 1rem; border-radius:30px;
  font-weight:700; color:var(--blue);
  font-family:var(--display); font-size:.82rem;
  cursor:pointer; text-decoration:none; transition:.2s;
}
.btn-nav:hover { background:rgba(37,99,235,.22); }
.btn-nav.danger { border-color:var(--red); color:var(--red); background:rgba(239,68,68,.08); }
.btn-nav.danger:hover { background:rgba(239,68,68,.18); }

/* ── Cards ── */
.card {
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border-radius: 1.8rem;
  border: 1px solid var(--border);
  padding: 2rem;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
}

/* ── Inputs ── */
.field { display:flex; flex-direction:column; gap:.45rem; }
.field label {
  font-size:.68rem; text-transform:uppercase;
  letter-spacing:1.5px; font-weight:700;
  color:var(--muted); font-family:var(--mono);
}
.field input {
  background:var(--bg-input); border:1px solid var(--border);
  padding:.85rem 1.2rem; border-radius:1rem;
  color:var(--text); font-family:var(--mono); font-size:.88rem;
  transition:.2s; width:100%;
}
.field input:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(56,189,248,.13); }
.field input::placeholder { color:var(--muted); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:.85rem 2rem; border-radius:1.2rem;
  font-weight:700; font-size:.9rem; font-family:var(--display);
  cursor:pointer; border:none; transition:all .2s;
}
.btn-primary {
  background: linear-gradient(105deg,#2563eb,#7c3aed);
  color:white; box-shadow:0 6px 20px rgba(37,99,235,.35); width:100%;
  justify-content:center;
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,99,235,.45); }
.btn-primary:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.btn-ghost {
  background:transparent; border:1px solid var(--border-h);
  color:var(--blue); width:100%; justify-content:center;
}
.btn-ghost:hover { background:rgba(56,189,248,.08); }

/* ── Divider ── */
.divider {
  display:flex; align-items:center; gap:1rem;
  color:var(--muted); font-size:.78rem; font-family:var(--mono);
  margin:.5rem 0;
}
.divider::before, .divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* ── Toast ── */
.toast {
  position:fixed; bottom:2rem; right:2rem;
  background:var(--bg-card); border:1px solid var(--green);
  color:var(--green); padding:.8rem 1.4rem;
  border-radius:1rem; font-family:var(--mono); font-size:.78rem;
  z-index:9999; box-shadow:0 8px 24px rgba(0,0,0,.35);
  animation:slideUp .3s ease;
  display:flex; align-items:center; gap:8px;
}
.toast.error { border-color:var(--red); color:var(--red); }
@keyframes slideUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Error msg ── */
.error-msg {
  background: rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.3);
  color:var(--red); border-radius:.8rem;
  padding:.75rem 1rem; font-size:.8rem;
  font-family:var(--mono); display:none;
}
.error-msg.show { display:block; }

/* ── Spinner ── */
.spinner {
  width:18px; height:18px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:white;
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block;
}
@keyframes spin { to { transform:rotate(360deg); } }

@media(max-width:680px) {
  .wrap { padding:1rem; }
  .navbar { flex-direction:column; align-items:flex-start; gap:.8rem; }
}