/* StrykeIQ — shared styles for auth / utility pages. Matches index.html tokens. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --seafoam:#5DCAA5; --seafoam-dark:#1D9E75; --seafoam-light:#9FE1CB;
  --navy:#0D1B2A; --navy-mid:#1a2b3c; --navy-light:#243447; --navy-card:#16243a;
  --white:#fff; --gray-text:#8fa3b8; --gray-dim:#4a6070; --amber:#EF9F27; --red:#e05555;
  --font-main:'Barlow',sans-serif; --font-condensed:'Barlow Condensed',sans-serif;
}
html { scroll-behavior:smooth; }
body { background:var(--navy); color:var(--white); font-family:var(--font-main); font-size:16px; line-height:1.6; min-height:100vh; }

/* nav */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; height:64px; background:rgba(13,27,42,.92); backdrop-filter:blur(12px); border-bottom:1px solid rgba(93,202,165,.12); }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo img { height:34px; width:auto; }
.nav-wordmark { font-family:var(--font-condensed); font-size:23px; font-weight:700; letter-spacing:.02em; color:var(--white); }
.nav-wordmark span { color:var(--seafoam); }
.nav-back { color:var(--gray-text); text-decoration:none; font-size:14px; font-weight:500; }
.nav-back:hover { color:var(--white); }

/* layout */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:96px 20px 48px; position:relative; overflow:hidden; }
.auth-grid-bg { position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(93,202,165,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(93,202,165,.04) 1px,transparent 1px);
  background-size:60px 60px; }
.auth-glow { position:absolute; top:10%; left:50%; transform:translateX(-50%); width:600px; height:360px;
  background:radial-gradient(ellipse,rgba(93,202,165,.08) 0%,transparent 70%); pointer-events:none; }

.card { position:relative; width:100%; max-width:440px; background:var(--navy-card);
  border:1px solid rgba(93,202,165,.15); border-radius:14px; padding:38px 34px; box-shadow:0 30px 70px rgba(0,0,0,.45); }
.card.wide { max-width:540px; }
.card-icon { display:flex; justify-content:center; margin-bottom:18px; }
.card-icon svg { width:52px; height:52px; }
.card h1 { font-family:var(--font-condensed); font-size:30px; font-weight:800; text-align:center; line-height:1.05; margin-bottom:8px; }
.card h1 .green { color:var(--seafoam); }
.card .sub { text-align:center; color:var(--gray-text); font-size:15px; margin-bottom:26px; }

/* forms */
.field { margin-bottom:18px; }
.field label { display:block; font-size:13px; font-weight:600; color:var(--gray-text); margin-bottom:7px; letter-spacing:.02em; }
.field input { width:100%; background:var(--navy); border:1px solid rgba(255,255,255,.12); border-radius:8px;
  padding:13px 14px; color:var(--white); font-family:var(--font-main); font-size:15px; transition:border-color .15s; }
.field input:focus { outline:none; border-color:var(--seafoam); }
.field input::placeholder { color:var(--gray-dim); }
.row-between { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.checkbox { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--gray-text); cursor:pointer; }
.checkbox input { width:16px; height:16px; accent-color:var(--seafoam); }
.link { color:var(--seafoam); text-decoration:none; font-size:14px; font-weight:600; }
.link:hover { color:var(--seafoam-light); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px;
  border:none; border-radius:8px; font-family:var(--font-main); font-size:16px; font-weight:700; cursor:pointer;
  text-decoration:none; transition:background .15s,transform .1s,opacity .15s; }
.btn-primary { background:var(--seafoam); color:var(--navy); }
.btn-primary:hover { background:var(--seafoam-light); transform:translateY(-1px); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-ghost { background:transparent; color:var(--white); border:1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { border-color:var(--seafoam); background:rgba(93,202,165,.06); }

.foot { text-align:center; margin-top:22px; font-size:14px; color:var(--gray-text); }
.foot a { color:var(--seafoam); text-decoration:none; font-weight:600; }

/* alerts */
.alert { border-radius:8px; padding:12px 14px; font-size:14px; font-weight:500; margin-bottom:18px; display:flex; gap:9px; align-items:flex-start; line-height:1.45; }
.alert svg { flex-shrink:0; margin-top:2px; }
.alert-error { background:rgba(224,85,85,.13); border:1px solid rgba(224,85,85,.3); color:#ff9b9b; }
.alert-ok { background:rgba(93,202,165,.12); border:1px solid rgba(93,202,165,.3); color:var(--seafoam-light); }
.alert-amber { background:rgba(239,159,39,.13); border:1px solid rgba(239,159,39,.35); color:#f3c277; }
.hidden { display:none !important; }

/* spinner */
.spin { width:18px; height:18px; border:2px solid rgba(13,27,42,.35); border-top-color:var(--navy); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* status / activate big states */
.state-icon { width:64px; height:64px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.state-ok { background:rgba(93,202,165,.12); }
.state-warn { background:rgba(239,159,39,.12); }
.state-err { background:rgba(224,85,85,.12); }

@media (max-width:480px) {
  .card { padding:30px 22px; }
  .card h1 { font-size:26px; }
  nav { padding:0 5%; }
}
@media (prefers-reduced-motion:reduce) { .spin { animation:none; } }