/* ── ProspectRadar Design System ──────────────────────────────────────
   Extends the existing brand identity: deep navy + cyan detection accent
   + purple AI accent, radar/sonar visual language throughout. */

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

:root{
  /* Surfaces */
  --bg:       #080c1a;
  --panel:    #0d1428;
  --panel-2:  #111a33;
  --line:     #1c2740;
  --line-lt:  #26335a;

  /* Text */
  --text:      #e8edf8;
  --text-dim:  #8695b7;
  --text-dim2: #566187;

  /* Brand */
  --cyan:     #00c8ff;
  --cyan-dim: #0a3d57;
  --cyan-bg:  rgba(0,200,255,0.08);
  --purple:   #8b5cf6;
  --purple-bg:rgba(139,92,246,0.10);

  /* Status */
  --green: #00e5a0;
  --amber: #ffb830;
  --red:   #ff4d6a;

  /* Type */
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body:    'Manrope', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  --radius: 10px;
  --radius-sm: 6px;
}

/* ── Light theme override — toggled via data-theme="light" on <html>,
   set/persisted by /js/theme.js. Brand accents (cyan/purple/green/amber/red)
   stay the same in both themes; only surfaces and text invert. ── */
:root[data-theme="light"]{
  --bg:       #f4f6fb;
  --panel:    #ffffff;
  --panel-2:  #eef1f8;
  --line:     #dde3ef;
  --line-lt:  #c7d0e3;

  --text:      #0f1626;
  --text-dim:  #4b5670;
  --text-dim2: #6b7690;

  --cyan-dim: #cdeeff;
  --cyan-bg:  rgba(0,150,200,0.10);
  --purple-bg:rgba(139,92,246,0.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--f-body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  transition:background-color .15s ease, color .15s ease;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.15; margin:0; letter-spacing:-0.01em}
p{margin:0}
a{color:inherit; text-decoration:none}
button{font-family:var(--f-body); cursor:pointer}
input,select,textarea{font-family:var(--f-body)}
::selection{background:var(--cyan); color:#04121c}

.mono{font-family:var(--f-mono)}

/* ── Layout ── */
.wrap{max-width:1320px; margin:0 auto; padding:0 32px}
.wrap-narrow{max-width:520px; margin:0 auto; padding:0 24px}

/* ── Nav ── */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.nav-brand{display:flex; align-items:center}
.nav-logo-img{height:52px; width:auto; display:block}

/* ── Brand lockup — radar-icon mark + "ProspectRadar" wordmark, used in
   place of the old flat logo PNG so the wordmark always matches the
   current theme's text color instead of needing a separate light/dark
   image swap. The icon art has its own dark backing, so it reads fine
   on both themes without a swap. ── */
.brand-lockup{display:flex; align-items:center; gap:10px}
.brand-icon{height:40px; width:40px; border-radius:9px; object-fit:cover; display:block; flex-shrink:0}
.brand-word{font-family:var(--f-display); font-weight:700; font-size:21px; letter-spacing:-0.01em; color:var(--text); white-space:nowrap}
.brand-word .accent{color:var(--cyan)}
.brand-lockup.lg .brand-icon{height:52px; width:52px; border-radius:12px}
.brand-lockup.lg .brand-word{font-size:26px}

.nav-links{display:flex; align-items:center; gap:28px; font-size:15px; color:var(--text-dim)}
.nav-links a:hover{color:var(--text)}
.nav-cta{display:flex; align-items:center; gap:18px}

/* ── Theme toggle ── */
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; font-size:17px; line-height:1;
  background:var(--panel-2); border:1px solid var(--line-lt); color:var(--text);
  transition:border-color .15s ease;
}
.theme-toggle:hover{border-color:var(--cyan)}
.theme-toggle-fixed{position:fixed; top:22px; right:22px; z-index:50}

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:var(--radius-sm); font-size:15.5px; font-weight:600;
  border:1px solid transparent; transition:all .15s ease; white-space:nowrap;
}
.btn-primary{background:var(--cyan); color:#04121c}
.btn-primary:hover{background:#33d4ff; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--line-lt)}
.btn-ghost:hover{border-color:var(--cyan); color:var(--cyan)}
.btn-sm{padding:10px 16px; font-size:14px}
.btn-full{width:100%}
.btn-danger{background:transparent; color:var(--red); border-color:rgba(255,77,106,0.35)}
.btn-danger:hover{background:rgba(255,77,106,0.08)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important}

/* ── Cards / panels ── */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px;
}

/* ── Forms ── */
.field{margin-bottom:20px}
.field label{display:block; font-size:14px; color:var(--text-dim); margin-bottom:8px; font-weight:500}
.field input{
  width:100%; background:var(--panel-2); border:1px solid var(--line-lt); color:var(--text);
  padding:14px 16px; border-radius:var(--radius-sm); font-size:16px; transition:border-color .15s;
}
.field input:focus{outline:none; border-color:var(--cyan)}
.field-hint{font-size:13px; color:var(--text-dim2); margin-top:6px}
.form-error{
  background:rgba(255,77,106,0.08); border:1px solid rgba(255,77,106,0.3); color:#ff8fa3;
  padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:18px;
}
.form-success{
  background:rgba(0,229,160,0.08); border:1px solid rgba(0,229,160,0.3); color:#5fffce;
  padding:12px 14px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:18px;
}

/* ── Badges ── */
.badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--f-mono); font-size:12.5px;
  font-weight:500; padding:5px 12px; border-radius:20px; letter-spacing:0.02em;
}
.badge-cyan{background:var(--cyan-bg); color:var(--cyan); border:1px solid var(--cyan-dim)}
.badge-purple{background:var(--purple-bg); color:#b8a3ff; border:1px solid rgba(139,92,246,0.35)}
.badge-green{background:rgba(0,229,160,0.1); color:var(--green); border:1px solid rgba(0,229,160,0.3)}
.badge-amber{background:rgba(255,184,48,0.1); color:var(--amber); border:1px solid rgba(255,184,48,0.3)}

/* ── Utility ── */
.dim{color:var(--text-dim)}
.center{text-align:center}
.spin{
  width:18px; height:18px; border:2px solid rgba(255,255,255,0.2); border-top-color:var(--cyan);
  border-radius:50%; animation:sp .7s linear infinite; display:inline-block;
}
@keyframes sp{to{transform:rotate(360deg)}}

footer{border-top:1px solid var(--line); padding:32px 0; margin-top:80px}
footer .wrap{display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--text-dim2)}

@media (max-width: 720px){
  .nav-links{display:none}
  .wrap{padding:0 18px}
  .nav-logo-img{height:42px}
  .auth-logo-img{height:52px}
  .brand-icon{height:32px; width:32px}
  .brand-word{font-size:18px}
  .brand-lockup.lg .brand-icon{height:42px; width:42px}
  .brand-lockup.lg .brand-word{font-size:21px}
}