/* ============================================================
   account.css — TrendNalysis account / auth surface.
   The DARK "Gaming Arena Console" corporate look (Finance(1) dark theme):
   warm near-black #111111, #181816 cards, thin #2A2925 borders, warm off-white
   text, uppercase micro-labels, monospaced numerics, indigo accent + green/red
   data accents. Standalone — its own warm-dark surface, distinct from the app's
   cooler #0f0f1a shell.

   Typeface: the site's self-hosted Inter + JetBrains Mono (loaded by style.css)
   stand in for Geist / Geist Mono — keeps the zero-Google-fonts policy + CSP intact.
   Loaded AFTER style.css so these rules win.
   ============================================================ */

:root {
  --fin-bg:#111111; --fin-surface:#181816; --fin-2:#1F1F1D; --fin-3:#282723;
  --fin-fg:#F4F2EC; --fin-fg2:#BBB8AD; --fin-fg3:#7A776E; --fin-fg4:#4D4B45;
  --fin-border:#2A2925; --fin-border-strong:#3A3833;
  --fin-accent:#4F6AF0; --fin-accent-fg:#FFFFFF; --fin-accent-soft:rgba(79,106,240,.16);
  --fin-green:#4ADE80; --fin-green-soft:rgba(74,222,128,.14);
  --fin-red:#F87171; --fin-red-soft:rgba(248,113,113,.14);
  --fin-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fin-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* Override the site theme for this surface */
body.fin {
  background:var(--fin-bg) !important;
  color:var(--fin-fg) !important;
  font-family:var(--fin-sans) !important;
  letter-spacing:-0.005em;
  margin:0;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body.fin a { color:var(--fin-accent); }

/* Top bar */
.fin-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 22px; border-bottom:1px solid var(--fin-border);
  background:var(--fin-surface);
}
.fin-top__brand { font-weight:700; font-size:16px; color:var(--fin-fg); text-decoration:none; letter-spacing:-0.01em; }
.fin-top__brand span { color:var(--fin-accent); }
.fin-top__link { font-size:13px; color:var(--fin-fg2); text-decoration:none; }
.fin-top__link:hover { color:var(--fin-fg); }

/* Layout */
.fin-wrap { width:100%; max-width:760px; margin:0 auto; padding:36px 22px 56px; flex:1 0 auto; }
.fin-eyebrow { font-size:11px; text-transform:uppercase; letter-spacing:0.09em; color:var(--fin-fg3); font-weight:600; margin:0 0 6px; }
.fin-h1 { font-size:26px; font-weight:700; letter-spacing:-0.02em; margin:0 0 26px; color:var(--fin-fg); }

/* Card */
.fin-card {
  background:var(--fin-surface); border:1px solid var(--fin-border);
  border-radius:12px; padding:22px; margin-bottom:16px;
}
.fin-card__hd { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.fin-card h2 { font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color:var(--fin-fg3); font-weight:600; margin:0 0 12px; }
.fin-muted { color:var(--fin-fg3); font-size:13px; line-height:1.55; }
.fin-val { font-family:var(--fin-mono); font-size:15px; color:var(--fin-fg); letter-spacing:-0.01em; }
.fin-row { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

/* Badge — JS sets className 'badge free' / 'badge pro' */
.badge { display:inline-block; padding:3px 9px; border-radius:5px; font-family:var(--fin-mono); font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
.badge.free { background:var(--fin-2); color:var(--fin-fg2); border:1px solid var(--fin-border-strong); }
.badge.pro  { background:var(--fin-green-soft); color:var(--fin-green); border:1px solid rgba(74,222,128,.34); }

/* Buttons — JS builds: .btn = primary (Upgrade), .btn.secondary = Manage/Log out */
.btn { display:inline-flex; align-items:center; gap:6px; padding:9px 15px; border:1px solid var(--fin-accent); border-radius:8px; background:var(--fin-accent); color:var(--fin-accent-fg); font-family:var(--fin-sans); font-weight:600; font-size:13px; cursor:pointer; text-decoration:none; transition:filter .12s, background .12s; }
.btn:hover { filter:brightness(1.1); }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn.secondary { background:var(--fin-2); color:var(--fin-fg); border-color:var(--fin-border-strong); }
.btn.secondary:hover { background:var(--fin-3); filter:none; }
a.btn { display:inline-block; }

/* Watchlist — JS builds span.chip > span + button.× */
.wl { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.chip { display:inline-flex; align-items:center; gap:7px; background:var(--fin-2); border:1px solid var(--fin-border); border-radius:6px; padding:5px 10px; font-family:var(--fin-mono); font-size:12.5px; color:var(--fin-fg); }
.chip button { background:none; border:0; color:var(--fin-red); cursor:pointer; font-size:14px; line-height:1; padding:0; }
.chip button:hover { color:#fca5a5; }

/* Watchlist add form */
.wl-add { margin-top:14px; display:flex; gap:8px; }
.fin-input, .wl-add input {
  flex:1; padding:9px 12px; border-radius:8px; border:1px solid var(--fin-border-strong);
  background:var(--fin-bg); color:var(--fin-fg); font-family:var(--fin-mono); font-size:13px;
  text-transform:uppercase; box-sizing:border-box; outline:none;
}
.fin-input::placeholder { color:var(--fin-fg4); letter-spacing:0; }
.fin-input:focus, .wl-add input:focus { border-color:var(--fin-accent); box-shadow:0 0 0 3px var(--fin-accent-soft); }

/* Footer */
.fin-foot { flex-shrink:0; border-top:1px solid var(--fin-border); padding:22px; text-align:center; font-size:12px; color:var(--fin-fg3); line-height:1.9; background:var(--fin-surface); }
.fin-foot a { color:var(--fin-fg2); text-decoration:none; }
.fin-foot a:hover { color:var(--fin-fg); }

/* ---------------- Auth pages (login / reset) ---------------- */
.auth-wrap { width:100%; max-width:400px; margin:0 auto; padding:48px 22px 56px; flex:1 0 auto; }
.auth-card { background:var(--fin-surface); border:1px solid var(--fin-border); border-radius:14px; padding:28px; box-shadow:0 1px 2px rgba(0,0,0,.35); }
.auth-card h1 { font-size:22px; font-weight:700; letter-spacing:-0.02em; margin:0 0 4px; color:var(--fin-fg); }
.auth-sub { font-size:13px; color:var(--fin-fg3); margin:0 0 18px; line-height:1.5; }
.auth-card label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--fin-fg3); font-weight:600; margin:14px 0 5px; }
.auth-card input { width:100%; padding:11px 12px; border-radius:8px; border:1px solid var(--fin-border-strong); background:var(--fin-bg); color:var(--fin-fg); font-size:14px; font-family:var(--fin-sans); box-sizing:border-box; outline:none; }
.auth-card input:focus { border-color:var(--fin-accent); box-shadow:0 0 0 3px var(--fin-accent-soft); }
.auth-btn { width:100%; margin-top:18px; padding:12px; border:1px solid var(--fin-accent); border-radius:8px; background:var(--fin-accent); color:var(--fin-accent-fg); font-family:var(--fin-sans); font-weight:600; font-size:14px; cursor:pointer; transition:filter .12s; }
.auth-btn:hover { filter:brightness(1.1); }
.auth-btn:disabled { opacity:.55; cursor:not-allowed; }
.auth-toggle { text-align:center; font-size:13px; color:var(--fin-fg3); margin-top:14px; }
.auth-toggle a { color:var(--fin-accent); cursor:pointer; text-decoration:none; }
.auth-toggle a:hover { text-decoration:underline; }
.auth-msg { font-size:13px; margin-top:14px; min-height:18px; line-height:1.5; }
.auth-msg.err { color:var(--fin-red); }
.auth-msg.ok { color:var(--fin-green); }
.cf-turnstile { margin-top:16px; }