@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ── Global base — dark body so scrollbar gutter never shows white ────────── */
html, body {
  background: #0e1117;   /* match app root bg — fixes white scrollbar gutter */
  margin: 0;
}

/* ── Info button on layer tiles ─────────────────────────────────────────── */

.fw-info-btn {
    opacity: 0.6;
    transition: opacity 0.15s, transform 0.1s;
}
.fw-info-btn:hover {
    opacity: 1 !important;
    transform: scale(1.2);
}

/* ── Timeframe radio buttons — active highlight ──────────────────────────── */
/* Dash 4.1 doesn't support labelCheckedStyle, so we use CSS instead.        */
/* Dash renders: <label><input type=radio> 1D</label> (input INSIDE label)   */

#chart-timeframe label:has(input[type=radio]:checked) {
    background-color: #26a69a !important;
    color: #fff !important;
    border-color: #26a69a !important;
}

/* ── Auth form inputs — dark bg + teal focus ring ───────────────────────── */
input[id^="login-"],
input[id^="reg-"],
input[id^="forgot-"],
input[id^="reset-"] {
    background-color: #0e1117 !important;
    color: #d1d4dc !important;
    -webkit-text-fill-color: #d1d4dc !important;
    caret-color: #26a69a;
    transition: border-color 0.2s, box-shadow 0.2s;
}
input[id^="login-"]:focus,
input[id^="reg-"]:focus,
input[id^="forgot-"]:focus,
input[id^="reset-"]:focus {
    border-color: #26a69a !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.15);
}
input[id^="login-"]:hover,
input[id^="reg-"]:hover,
input[id^="forgot-"]:hover,
input[id^="reset-"]:hover {
    border-color: #3d4659 !important;
}
/* Block browser autofill from flipping inputs white */
input[id^="login-"]:-webkit-autofill,
input[id^="login-"]:-webkit-autofill:hover,
input[id^="login-"]:-webkit-autofill:focus,
input[id^="reg-"]:-webkit-autofill,
input[id^="reg-"]:-webkit-autofill:hover,
input[id^="reg-"]:-webkit-autofill:focus,
input[id^="forgot-"]:-webkit-autofill,
input[id^="forgot-"]:-webkit-autofill:focus,
input[id^="reset-"]:-webkit-autofill,
input[id^="reset-"]:-webkit-autofill:focus {
    -webkit-text-fill-color: #d1d4dc !important;
    -webkit-box-shadow: 0 0 0 1000px #0e1117 inset !important;
    caret-color: #26a69a !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ── Auth buttons — hover / active states ───────────────────────────────── */
button[id^="login-btn"],
button[id^="reg-btn"],
button[id^="forgot-btn"],
button[id^="reset-btn"] {
    transition: opacity 0.15s, transform 0.1s;
}
button[id^="login-btn"]:hover,
button[id^="reg-btn"]:hover,
button[id^="forgot-btn"]:hover,
button[id^="reset-btn"]:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}
button[id^="login-btn"]:active,
button[id^="reg-btn"]:active,
button[id^="forgot-btn"]:active,
button[id^="reset-btn"]:active {
    transform: translateY(0);
    opacity: 0.75;
}

/* ── Landing page — gradient headline animation ─────────────────────────── */
/* The React inline style handles the gradient; this adds a subtle shimmer  */
@keyframes shimmer {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* ── Dash link (dcc.Link) — remove default underline ────────────────────── */
a {
    text-decoration: none;
}
a:hover {
    opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤768px)
   ══════════════════════════════════════════════════════════════════════════ */

/* Auth card — full width with safe margins on small screens */
@media (max-width: 480px) {
    .auth-page-wrap {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .auth-card {
        padding-left: 18px !important;
        padding-right: 18px !important;
        max-width: 100% !important;
    }
}

/* Landing navbar — shrink padding, hide brand text, smaller buttons */
@media (max-width: 768px) {
    .landing-nav {
        padding: 12px 16px !important;
    }
    .landing-brand-text {
        display: none !important;
    }
    .landing-nav-btn {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* Search splash — full-width input on small screens */
@media (max-width: 600px) {
    #fw-search-splash input {
        width: calc(100vw - 120px) !important;
        font-size: 16px !important;  /* prevents iOS zoom on focus */
    }
    #fw-search-splash button#fw-btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
}

/* Dashboard two-column layout — stack vertically on mobile */
@media (max-width: 768px) {
    .fw-body {
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }
    .fw-left-col {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
    .fw-right-col {
        flex: none !important;
        width: 100% !important;
        height: auto !important;      /* let chart card set its own height */
        min-height: 460px;
        overflow: visible !important;
    }
    /* Hide Plotly modebar on mobile — pinch/zoom is handled by the browser */
    #fw-ewt-chart .modebar-container { display: none !important; }
    /* Hide the long inline chart title — card header already says "Wave structure" */
    #fw-ewt-chart .gtitle { display: none !important; }
    /* Tighten chart card header on mobile */
    .fwd-chead { flex-wrap: wrap !important; gap: 6px !important; padding: 10px 14px !important; }
    /* Control bar — wrap on small screens */
    .fw-control-bar {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    /* Dashboard header — hide subtitle text */
    .dash-header-subtitle {
        display: none !important;
    }
    /* Wave signal panel beside chart — stack it */
    .fw-signal-panel {
        width: 100% !important;
        max-height: none !important;
    }
}

/* ── P0 Redesign — toast notifications ─────────────────────────────────────── */
@keyframes fw-toast-fade {
  0%   { opacity: 0; transform: translateY(-8px); }
  10%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

.fw-toast {
  max-width: 360px;
}

/* Accordion header hover */
[id*="fw-acc-header"]:hover {
  background-color: rgba(255,255,255,0.04) !important;
}

/* Dcc.Clipboard styled to match action buttons */
#fw-share-clip::before {
  content: "📤 Share";
}

/* ── P0 Redesign — full-screen analysis overlay ──────────────────────────── */

/* Wave bar loader — 5 bars pulsing like a mini Elliott Wave chart */
@keyframes fw-bar-pulse {
  0%, 100% { transform: scaleY(0.15); opacity: 0.4; }
  50%       { transform: scaleY(1);    opacity: 1;   }
}

.fw-wave-loader {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 40px;
}

.fw-wave-loader span {
  display: block;
  width: 5px;
  height: 40px;
  border-radius: 3px;
  transform-origin: bottom;
  animation: fw-bar-pulse 1.1s ease-in-out infinite;
}

.fw-wave-loader span:nth-child(1) { background: #16e0a8; animation-delay: 0s;    }
.fw-wave-loader span:nth-child(2) { background: #1ac9a0; animation-delay: 0.12s; }
.fw-wave-loader span:nth-child(3) { background: #f5c451; animation-delay: 0.24s; }
.fw-wave-loader span:nth-child(4) { background: #1ac9a0; animation-delay: 0.36s; }
.fw-wave-loader span:nth-child(5) { background: #16e0a8; animation-delay: 0.48s; }

#fw-analyzing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 23, 0.86);
  backdrop-filter: blur(4px);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}

/* ── Analysis progress bar ────────────────────────────────────────────────── */
.fw-progress-track {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
}

.fw-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #16e0a8 0%, #1ac9a0 50%, #f5c451 100%);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  /* Smooth width transitions as the JS interval ticks */
  transition: width 0.25s ease-out;
}

/* Shimmer overlay — a bright stripe that sweeps left→right on repeat */
@keyframes fw-progress-shimmer {
  0%   { transform: translateX(-200%); }
  100% { transform: translateX(600%); }
}

.fw-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.28) 50%,
    transparent 100%);
  animation: fw-progress-shimmer 2.2s ease-in-out infinite;
}

/* ── Guest blur wall — shown over groups 3+4 for unauthenticated users ──── */
.guest-blur-wrapper {
  position: relative;
  pointer-events: none;   /* blurred content cannot be clicked through */
}
.guest-blur-overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(11, 14, 23, 0.72);
  border-radius: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;    /* overlay itself is interactive */
}

/* ── Guest gate modal — shown when free-analysis limit is reached ─────── */
#guest-gate-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 23, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99998;
  align-items: center;
  justify-content: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE — modern redesign
   ══════════════════════════════════════════════════════════════════════════ */
.lp {
  --lp-teal:#16e0a8; --lp-teal2:#0fb88a; --lp-gold:#f5c451;
  --lp-ink:#e8edf6; --lp-mut:#8b96ab; --lp-border:rgba(255,255,255,0.08);
  --lp-panel:rgba(20,26,38,0.55);
  --lp-green:#22c98a; --lp-amber:#f5b942; --lp-red:#f06363;
  position:relative; min-height:100vh; overflow-x:hidden;
  background:#080a10; color:var(--lp-ink);
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.lp-mono { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }

/* ── Aurora background ──────────────────────────────────────────────────────
   Blobs are position:fixed and INSIDE the viewport so they're always visible.
   Each has its own drift keyframe so they move independently (not in sync).  */
.lp-aurora { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.lp-blob   { position:absolute; border-radius:50%; filter:blur(130px); }

/* Teal — left-center, large */
.lp-b1 {
  width:900px; height:900px;
  background:radial-gradient(circle, rgba(22,224,168,.55), transparent 65%);
  top:0%; left:-12%;
  animation: lp-drift-a 20s ease-in-out infinite;
}
/* Gold — top-right */
.lp-b2 {
  width:750px; height:750px;
  background:radial-gradient(circle, rgba(245,196,81,.42), transparent 65%);
  top:-8%; right:-8%;
  animation: lp-drift-b 26s ease-in-out infinite;
}
/* Blue — lower-center */
.lp-b3 {
  width:820px; height:820px;
  background:radial-gradient(circle, rgba(37,99,235,.35), transparent 65%);
  top:50%; left:18%;
  animation: lp-drift-c 32s ease-in-out infinite;
}
/* Purple — mid-right (new) */
.lp-b4 {
  width:600px; height:600px;
  background:radial-gradient(circle, rgba(139,92,246,.3), transparent 65%);
  top:30%; right:-5%;
  animation: lp-drift-d 28s ease-in-out infinite;
}

/* Each blob drifts on a unique path so they don't move in lockstep */
@keyframes lp-drift-a {
  0%,100% { transform:translate(0px,   0px)   scale(1);    }
  30%      { transform:translate(90px, -70px)  scale(1.12); }
  60%      { transform:translate(50px,  90px)  scale(0.93); }
}
@keyframes lp-drift-b {
  0%,100% { transform:translate(0px,    0px)   scale(1);    }
  35%      { transform:translate(-80px,  60px)  scale(1.08); }
  70%      { transform:translate(-40px, -80px)  scale(0.96); }
}
@keyframes lp-drift-c {
  0%,100% { transform:translate(0px,    0px)   scale(1);    }
  40%      { transform:translate(70px,  -50px)  scale(1.1);  }
  75%      { transform:translate(-60px,  60px)  scale(0.92); }
}
@keyframes lp-drift-d {
  0%,100% { transform:translate(0px,    0px)   scale(1);    }
  45%      { transform:translate(-90px,  70px)  scale(1.06); }
  80%      { transform:translate(50px,  -60px)  scale(0.97); }
}
.lp-content { position:relative; z-index:2; }
.lp-wrap { max-width:1180px; margin:0 auto; padding:0 28px; }

/* Nav */
.lp-nav { position:sticky; top:0; z-index:50; backdrop-filter:blur(16px);
  background:rgba(8,10,16,.55); border-bottom:1px solid var(--lp-border); }
.lp-navin { max-width:1180px; margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; }
.lp-brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:-.02em; }
.lp-navlinks { display:flex; gap:28px; align-items:center; }
.lp-navlinks a { color:var(--lp-mut); text-decoration:none; font-size:14px; font-weight:500; transition:.2s; }
.lp-navlinks a:hover { color:var(--lp-ink); }
/* "How it works" link — explicit class so media-query display:none on generic <a> can't hide it */
.lp-hiw-link { color:var(--lp-mut) !important; text-decoration:none !important; font-size:14px !important;
  font-weight:500 !important; transition:.2s !important; display:inline !important; }
.lp-hiw-link:hover { color:var(--lp-ink) !important; }
.lp-btn { font-family:inherit; font-weight:600; border:none; cursor:pointer; border-radius:11px;
  transition:.22s; text-decoration:none; display:inline-block; text-align:center; }
.lp-btn-ghost { background:transparent; color:var(--lp-ink); border:1px solid var(--lp-border); padding:9px 16px; font-size:14px; }
.lp-btn-ghost:hover { border-color:var(--lp-teal); color:var(--lp-teal); }
.lp-btn-primary { background:linear-gradient(135deg,var(--lp-teal),var(--lp-teal2)); color:#04140e;
  padding:10px 18px; font-size:14px; box-shadow:0 6px 24px -6px rgba(22,224,168,.6); }
.lp-btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 34px -6px rgba(22,224,168,.75); }
.lp-btn-lg { padding:14px 26px; font-size:15.5px; border-radius:13px; }

/* Ticker tape */
.lp-tape { border-bottom:1px solid var(--lp-border); background:rgba(13,17,25,.5);
  overflow:hidden; white-space:nowrap; position:relative; z-index:2; }
/* width:max-content ensures the track is never clipped; animation starts flush-left */
.lp-tape-track { display:inline-flex; align-items:center; width:max-content;
  padding:9px 0; animation:lp-scroll 42s linear infinite; will-change:transform; }
.lp-tape-item { display:inline-flex; align-items:center; gap:8px; margin:0 28px;
  font-size:13px; flex-shrink:0; }
/* separator dot between items */
.lp-tape-item + .lp-tape-item::before {
  content:"·"; color:var(--lp-border); margin-right:28px; font-size:16px; flex-shrink:0;
}
.lp-tape .t { color:var(--lp-mut); font-weight:600; }
.lp-tape .v.buy { color:var(--lp-green); } .lp-tape .v.trim { color:var(--lp-amber); } .lp-tape .v.avoid { color:var(--lp-red); }
@keyframes lp-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Hero */
.lp-hero { display:grid; grid-template-columns:1fr 1.05fr; gap:40px; align-items:center; padding:70px 0 60px; }
.lp-pill { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600;
  color:var(--lp-teal); background:rgba(22,224,168,.1); border:1px solid rgba(22,224,168,.25);
  padding:6px 13px; border-radius:100px; margin-bottom:22px; }
.lp-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--lp-teal); box-shadow:0 0 10px var(--lp-teal); }
.lp-tagline { font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--lp-ink); margin:12px 0 8px; line-height:1.2; }
.lp-h1 { font-size:60px; line-height:1.02; letter-spacing:-.035em; font-weight:800; margin:0 0 20px; }
.lp-h1 .grad { background:linear-gradient(110deg,var(--lp-teal),var(--lp-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.lp-sub { font-size:18px; color:var(--lp-mut); line-height:1.55; max-width:480px; margin:0 0 30px; }
.lp-sub b { color:var(--lp-ink); }
.lp-cta-row { display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.lp-micro { font-size:13px; color:var(--lp-mut); margin-top:16px; display:flex; gap:18px; flex-wrap:wrap; }
.lp-micro span { display:flex; align-items:center; gap:6px; }
.lp-check { color:var(--lp-teal); }

/* Hero product shot */
.lp-shot { position:relative; perspective:1600px; }
.lp-shotcard { transform:rotateY(-13deg) rotateX(5deg); border-radius:18px; border:1px solid var(--lp-border);
  background:linear-gradient(160deg,rgba(26,33,48,.9),rgba(14,18,28,.95)); overflow:hidden;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.04); transition:.5s; }
.lp-shot:hover .lp-shotcard { transform:rotateY(-7deg) rotateX(3deg); }
.lp-shothead { display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid var(--lp-border); }
.lp-verdict { font-size:13px; font-weight:800; color:#04140e; background:var(--lp-amber); padding:4px 11px; border-radius:7px; letter-spacing:.02em; }
.lp-shottk { font-weight:700; font-size:15px; }
.lp-shotgrade { margin-left:auto; font-size:12px; color:var(--lp-mut); }
.lp-chart { height:215px; position:relative; }
.lp-chart-img { position:absolute; inset:0; width:100%; height:100%; }
.lp-lbl { position:absolute; font-size:9px; font-weight:700; padding:2px 5px; border-radius:4px; z-index:2; }
.lp-shotstats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--lp-border); }
.lp-st { padding:12px 14px; border-right:1px solid var(--lp-border); }
.lp-st:last-child { border-right:none; }
.lp-st .k { font-size:10px; color:var(--lp-mut); text-transform:uppercase; letter-spacing:.08em; }
.lp-st .v { font-size:17px; font-weight:700; margin-top:3px; }

/* Proof bar */
.lp-proofbar { display:flex; align-items:center; gap:34px; justify-content:center; padding:8px 0 50px; flex-wrap:wrap; }
.lp-proofbar .lab { font-size:12px; color:var(--lp-mut); text-transform:uppercase; letter-spacing:.12em; }
.lp-proofbar .name { font-size:15px; font-weight:700; color:#aeb8c9; opacity:.8; }

/* Section heading */
.lp-sechead { text-align:center; margin:30px 0 34px; }
.lp-sechead .tag { font-size:12.5px; font-weight:700; color:var(--lp-teal); text-transform:uppercase; letter-spacing:.14em; }
.lp-sechead h2 { font-size:38px; font-weight:800; letter-spacing:-.03em; margin:10px 0 0; }
.lp-sechead p { color:var(--lp-mut); font-size:16px; margin:10px 0 0; }

/* Bento */
.lp-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:172px; gap:16px; padding-bottom:70px; }
.lp-tile { border:1px solid var(--lp-border); border-radius:18px; padding:22px; position:relative; overflow:hidden;
  background:var(--lp-panel); backdrop-filter:blur(10px); transition:.28s; }
.lp-tile:hover { border-color:rgba(22,224,168,.35); transform:translateY(-3px); }
.lp-tile h3 { font-size:17px; font-weight:700; letter-spacing:-.01em; margin:0; }
.lp-tile p { font-size:13.5px; color:var(--lp-mut); margin:8px 0 0; line-height:1.5; }
.lp-tile .big { font-size:46px; font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--lp-teal),var(--lp-gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.lp-span2 { grid-column:span 2; } .lp-span2r { grid-row:span 2; }
.lp-glow { position:absolute; width:200px; height:200px; border-radius:50%; filter:blur(70px); opacity:.22; }
.lp-ico { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-size:18px;
  background:rgba(22,224,168,.12); border:1px solid rgba(22,224,168,.25); margin-bottom:14px; }
.lp-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.lp-chip { font-size:12px; font-weight:600; padding:5px 11px; border-radius:8px; border:1px solid var(--lp-border); color:#c2cbd9; }
.lp-chip.g { border-color:rgba(34,201,138,.3); color:var(--lp-green); background:rgba(34,201,138,.08); }
.lp-chip.a { border-color:rgba(245,185,66,.3); color:var(--lp-amber); background:rgba(245,185,66,.08); }
.lp-mini-verdicts { display:flex; gap:10px; margin-top:16px; }
.lp-mv { flex:1; text-align:center; padding:11px 0; border-radius:11px; font-weight:800; font-size:14px; }
.lp-mv.buy { background:rgba(34,201,138,.12); color:var(--lp-green); border:1px solid rgba(34,201,138,.3); }
.lp-mv.hold { background:rgba(139,150,171,.1); color:var(--lp-mut); border:1px solid var(--lp-border); }
.lp-mv.trim { background:rgba(245,185,66,.12); color:var(--lp-amber); border:1px solid rgba(245,185,66,.3); }
.lp-mv.avoid { background:rgba(240,99,99,.12); color:var(--lp-red); border:1px solid rgba(240,99,99,.3); }
.lp-minichart-box { margin-top:18px; height:120px; border-radius:12px; border:1px solid var(--lp-border);
  position:relative; overflow:hidden; background:rgba(8,11,17,.5); }

/* Footer */
.lp-footer { border-top:1px solid var(--lp-border); padding:30px 0; text-align:center; color:var(--lp-mut); font-size:13px; }

/* Login link in nav (button styled as link) */
.lp-loginlink { background:none; border:none; cursor:pointer; font-family:inherit;
  color:var(--lp-mut); font-size:14px; font-weight:500; padding:0; transition:.2s; }
.lp-loginlink:hover { color:var(--lp-ink); }

/* Login modal */
.lp-login-modal { display:none; position:fixed; inset:0; z-index:1000;
  align-items:center; justify-content:center; padding:20px; }
.lp-login-backdrop { position:absolute; inset:0; background:rgba(6,8,13,.72);
  backdrop-filter:blur(6px); cursor:pointer; animation:lp-fade .2s ease; }
.lp-login-card { position:relative; z-index:1; width:100%; max-width:392px;
  background:linear-gradient(165deg,rgba(24,30,44,.92),rgba(14,18,28,.96));
  border:1px solid var(--lp-border); border-radius:20px; padding:34px 30px 28px;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.04);
  animation:lp-pop .24s cubic-bezier(.2,.9,.3,1.2); }
.lp-login-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--lp-teal),var(--lp-gold)); border-radius:20px 20px 0 0; }
@keyframes lp-fade { from { opacity:0; } to { opacity:1; } }
@keyframes lp-pop { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
.lp-login-x { position:absolute; top:14px; right:16px; background:none; border:none;
  color:var(--lp-mut); font-size:16px; cursor:pointer; line-height:1; padding:4px; transition:.2s; }
.lp-login-x:hover { color:var(--lp-ink); }
.lp-login-head { text-align:center; margin-bottom:24px; }
.lp-login-head img { margin-bottom:10px; }
.lp-login-title { font-size:21px; font-weight:800; letter-spacing:-.02em; margin:0; color:var(--lp-ink); }
.lp-login-sub { font-size:13px; color:var(--lp-mut); margin:5px 0 0; }
.lp-field { margin-bottom:15px; }
.lp-flabel { display:block; font-size:11px; font-weight:600; color:var(--lp-mut);
  text-transform:uppercase; letter-spacing:.05em; margin-bottom:7px; }
.lp-finput { width:100%; box-sizing:border-box; height:46px; padding:12px 14px;
  background: #080b11;
  background: rgba(8,11,17,.95);
  color: #e8edf6 !important;
  -webkit-text-fill-color: #e8edf6 !important;
  -webkit-appearance: none;
  caret-color: #16e0a8;
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px; font-family:inherit; font-size:14px; outline:none; transition:.18s; }
.lp-finput::placeholder { color:#5b6577; -webkit-text-fill-color:#5b6577; }
.lp-finput:-webkit-autofill,
.lp-finput:-webkit-autofill:hover,
.lp-finput:-webkit-autofill:focus {
  -webkit-text-fill-color: #e8edf6 !important;
  -webkit-box-shadow: 0 0 0 1000px #080b11 inset !important;
  caret-color: #16e0a8 !important;
  transition: background-color 9999s ease-in-out 0s;
}
.lp-finput:focus { border-color:var(--lp-teal); box-shadow:0 0 0 3px rgba(22,224,168,.15); }
.lp-forgot { text-align:right; margin-bottom:16px; }
.lp-forgot a { color:var(--lp-mut); font-size:12px; text-decoration:none; }
.lp-forgot a:hover { color:var(--lp-teal); }
.lp-login-err { color:var(--lp-red); font-size:13px; margin-bottom:12px;
  background:rgba(240,99,99,.08); border:1px solid rgba(240,99,99,.22);
  border-radius:8px; padding:10px 12px; }
.lp-login-submit { width:100%; padding:13px; font-size:15px; border-radius:10px; }
.lp-login-foot { text-align:center; color:var(--lp-mut); font-size:13px; margin-top:20px;
  border-top:1px solid var(--lp-border); padding-top:18px; }
.lp-login-foot a { color:var(--lp-teal); text-decoration:none; font-weight:600; }
.lp-switch { background:none; border:none; cursor:pointer; font-family:inherit; font-size:13px;
  color:var(--lp-teal); font-weight:600; padding:0; }
.lp-switch:hover { text-decoration:underline; }
/* Auth modal wrapper scrolls if a tall form (register) exceeds the viewport */
.lp-login-modal { overflow-y:auto; }

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — modern redesign (post-login)
   ══════════════════════════════════════════════════════════════════════════ */
.hp {
  --hp-teal:#16e0a8; --hp-teal2:#0fb88a; --hp-gold:#f5c451;
  --hp-ink:#e8edf6; --hp-mut:#8b96ab; --hp-border:rgba(255,255,255,0.08);
  --hp-card:rgba(17,22,33,0.66);
  --hp-green:#22c98a; --hp-amber:#f5b942; --hp-red:#f06363;
  position:relative; min-height:100%;
  overflow-x: hidden;
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  background:
    radial-gradient(820px 480px at 8% -14%, rgba(22,224,168,0.20), transparent 62%),
    radial-gradient(760px 440px at 96% -10%, rgba(90,141,238,0.15), transparent 60%),
    radial-gradient(620px 360px at 58% -18%, rgba(245,196,81,0.08), transparent 58%);
}
.hp-mono { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.hp-wrap { max-width:1180px; margin:0 auto; padding:36px 28px 80px; }
.hp-up { color:var(--hp-green); } .hp-down { color:var(--hp-red); }

/* Greeting */
.hp-greet { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--hp-ink); }
.hp-greet .name { background:linear-gradient(110deg,var(--hp-teal),var(--hp-gold));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hp-pulse-line { font-size:14px; color:var(--hp-mut); margin-top:6px; margin-bottom:4px; }
.hp-pulse-line b { color:var(--hp-green); }

/* Command search bar (returning: wide; first-time: big/centered)
   Use a solid dark colour (not just rgba variable) so the box never
   appears white when CSS variables fail to scope correctly (Safari private). */
.hp-search {
  display:flex; align-items:center; gap:10px; margin:24px 0 36px;
  background: #111621;                         /* solid fallback */
  background: var(--hp-card, #111621);         /* variable with solid fallback */
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px; padding:7px 7px 7px 16px; transition:.2s;
  box-shadow:0 16px 50px -28px rgba(0,0,0,.8);
}
.hp-search:focus-within {
  border-color:#16e0a8;
  box-shadow:0 0 0 4px rgba(22,224,168,.14),0 16px 50px -28px rgba(0,0,0,.8);
}
.hp-search .ic { font-size:17px; opacity:.7; }

/* Input — explicit colours so browser can never override with white/black */
.hp-search input {
  flex:1; height:44px;
  background: #111621 !important;     /* explicit dark — never transparent (Safari renders grey) */
  -webkit-appearance: none;           /* strip Safari native styling */
  border:none !important; outline:none;
  color: #e8edf6 !important;          /* explicit hex — never via variable */
  -webkit-text-fill-color: #e8edf6 !important;   /* Safari text fill */
  caret-color: #16e0a8 !important;    /* teal cursor */
  font-family:inherit; font-size:16px; font-weight:500;
  padding:0 6px !important; box-shadow:none !important; box-sizing:border-box;
}
.hp-search input::placeholder { color:#8b96ab; -webkit-text-fill-color:#8b96ab; }

/* Autofill — use inset box-shadow trick (works in Chrome + Safari) */
.hp-search input:-webkit-autofill,
.hp-search input:-webkit-autofill:hover,
.hp-search input:-webkit-autofill:focus,
.hp-search input:-webkit-autofill:active {
  -webkit-text-fill-color: #e8edf6 !important;
  -webkit-box-shadow: 0 0 0 1000px #111621 inset !important;
  caret-color: #16e0a8 !important;
  transition: background-color 9999s ease-in-out 0s;
}
.hp-go { font-family:inherit; font-weight:800; font-size:15px; border:none; cursor:pointer; border-radius:10px;
  height:44px; padding:0 26px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; flex:0 0 auto;
  background:linear-gradient(135deg,var(--hp-teal),var(--hp-teal2)); color:#04140e; }
.hp-go:hover { filter:brightness(1.05); }
.hp-search.big { max-width:600px; margin:52px auto 32px; padding:9px 9px 9px 18px; }
.hp-search.big input { height:50px; font-size:18px; }
.hp-search.big .hp-go { height:50px; padding:0 28px; font-size:16px; }

/* ── Autocomplete wrapper + dropdown ─────────────────────────────────────── */
.hp-search-wrap { position: relative; }

.hp-suggestions:empty { display: none; }
.hp-sug-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #161b27;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  overflow: hidden;
  z-index: 999;
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.6);
  animation: fadeSlideDown .15s ease;
}
.hp-sug-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 16px;
  background: transparent; border: none; cursor: pointer;
  text-align: left; transition: background .1s;
}
.hp-sug-item:hover, .hp-sug-item:focus { background: rgba(22,224,168,0.07); outline: none; }
.hp-sug-item + .hp-sug-item { border-top: 1px solid rgba(255,255,255,0.05); }
.sug-tk {
  font-size: 13px; font-weight: 800; color: #e8edf6;
  min-width: 52px; font-family: 'JetBrains Mono', monospace;
}
.sug-nm { font-size: 13px; color: #8b96ab; font-weight: 500; }

/* First-time hero */
.hp-hero { text-align:center; padding:54px 0 26px; }
.hp-pill { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--hp-teal);
  background:rgba(22,224,168,.1); border:1px solid rgba(22,224,168,.25); padding:6px 13px; border-radius:100px; margin-bottom:18px; }
.hp-pill .dot { width:7px; height:7px; border-radius:50%; background:var(--hp-teal); box-shadow:0 0 10px var(--hp-teal); }
.hp-h1 { font-size:36px; font-weight:800; letter-spacing:-.03em; line-height:1.1; color:var(--hp-ink); margin:0; }
.hp-h1 .grad { background:linear-gradient(110deg,var(--hp-teal),var(--hp-gold)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hp-steps { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.hp-step-i { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#aeb8c9; }
.hp-step-i .num { width:20px; height:20px; border-radius:50%; background:rgba(22,224,168,.12); border:1px solid rgba(22,224,168,.3);
  color:var(--hp-teal); font-size:11px; font-weight:800; display:grid; place-items:center; }
.hp-steps .arr { color:#4b5563; font-size:14px; }
.hp-examples { margin-top:18px; font-size:13.5px; color:var(--hp-mut); display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; }
.hp-ex { padding:5px 12px; border-radius:9px; border:1px solid var(--hp-border); background:var(--hp-card);
  color:var(--hp-ink); font-weight:600; font-size:13px; cursor:pointer; transition:.2s; }
.hp-ex:hover { border-color:rgba(22,224,168,.35); color:var(--hp-teal); }

/* Section header */
.hp-sec { display:flex; align-items:center; gap:10px; justify-content:space-between;
  margin:44px 0 18px; padding-left: 12px; border-left: 3px solid rgba(255,255,255,0.08); }
.hp-sec h2 { font-size:17px; font-weight:700; color:var(--hp-ink); margin:0; flex-shrink:0; }
.hp-sec .meta { font-size:12px; color:var(--hp-mut); flex-shrink:0; }

/* Per-section accent colours on the left border */
.hp-sec.sec-setups  { border-left-color: #16e0a8; }   /* teal  — opportunity */
.hp-sec.sec-earn    { border-left-color: #f5c451; }   /* gold  — event risk  */
.hp-sec.sec-watch   { border-left-color: #42a5f5; }   /* blue  — your picks  */
.hp-sec.sec-market  { border-left-color: #ab47bc; }   /* purple — macro      */
.hp-sec.sec-recent  { border-left-color: rgba(255,255,255,0.15); }
.hp-tally { display:flex; gap:8px; }
.hp-tally span { font-size:12px; font-weight:700; padding:3px 9px; border-radius:7px; }
.hp-t-buy { color:var(--hp-green); background:rgba(34,201,138,.12); }
.hp-t-hold { color:var(--hp-mut); background:rgba(139,150,171,.12); }
.hp-t-trim { color:var(--hp-amber); background:rgba(245,185,66,.12); }
.hp-t-avoid { color:var(--hp-red); background:rgba(240,99,99,.12); }

/* Market pulse */
.hp-pulse { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.hp-pcard { background:var(--hp-card); backdrop-filter:blur(10px); border:1px solid var(--hp-border); border-radius:14px; padding:13px 16px; }
.hp-pcard .k { font-size:11px; color:var(--hp-mut); text-transform:uppercase; letter-spacing:.07em; }
.hp-pcard .v { font-size:20px; font-weight:800; margin-top:4px; color:var(--hp-ink); }
.hp-pcard .chg { font-size:12.5px; font-weight:600; margin-top:2px; }

/* Watchlist grid + cards (cards are <button> with pattern id) */
.hp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.hp-grid-2x2 { grid-template-columns:repeat(2,1fr) !important; }
.hp-wcard { text-align:left; font-family:inherit; background:var(--hp-card); backdrop-filter:blur(10px);
  border:1px solid var(--hp-border); border-left:4px solid var(--hp-mut); border-radius:16px; padding:15px 17px;
  cursor:pointer; transition:.2s; color:var(--hp-ink); display:flex; flex-direction:column; gap:9px; min-height:118px; }
.hp-wcard:hover { transform:translateY(-3px); border-color:rgba(22,224,168,.3); }
.hp-wcard.v-buy { border-left-color:var(--hp-green); }
.hp-wcard.v-hold { border-left-color:var(--hp-mut); }
.hp-wcard.v-trim { border-left-color:var(--hp-amber); }
.hp-wcard.v-avoid { border-left-color:var(--hp-red); }
.hp-wc-top { display:flex; align-items:flex-start; justify-content:space-between; }
.hp-wc-tk { font-size:18px; font-weight:800; letter-spacing:-.01em; }
.hp-wc-price { font-size:12.5px; color:var(--hp-mut); margin-top:1px; }
.hp-badge { font-size:11px; font-weight:800; padding:4px 10px; border-radius:8px; letter-spacing:.02em; }
.hp-b-buy { color:#04140e; background:var(--hp-green); }
.hp-b-hold { color:var(--hp-ink); background:rgba(139,150,171,.2); border:1px solid var(--hp-border); }
.hp-b-trim { color:#1a1205; background:var(--hp-amber); }
.hp-b-avoid { color:#fff; background:var(--hp-red); }
.hp-wc-wave { font-size:12px; color:#aeb8c9; }
.hp-wc-reason { font-size:12.5px; color:var(--hp-mut); line-height:1.45; min-height:34px; }
.hp-wc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; font-size:11px; color:#5b6577; }

/* Starter (not-yet-analyzed) card */
.hp-starter { text-align:left; font-family:inherit; background:var(--hp-card); backdrop-filter:blur(10px);
  border:1px solid var(--hp-border); border-radius:14px; padding:15px 16px; cursor:pointer; transition:.2s;
  color:var(--hp-ink); display:flex; flex-direction:column; gap:6px; min-height:96px; }
.hp-starter:hover { border-color:rgba(22,224,168,.3); transform:translateY(-2px); }
.hp-starter .run { font-size:12px; font-weight:700; color:var(--hp-teal); margin-top:auto; }
.hp-starter .lbl { font-size:11.5px; color:var(--hp-mut); }

/* Recently analyzed chips */
.hp-chips { display:flex; flex-wrap:wrap; gap:9px; }
.hp-chip { font-family:inherit; display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  padding:8px 13px; border-radius:10px; border:1px solid var(--hp-border); background:var(--hp-card); color:var(--hp-ink); cursor:pointer; transition:.2s; }
.hp-chip:hover { border-color:rgba(22,224,168,.3); }
.hp-chip .ago { font-size:11px; color:#5b6577; font-weight:400; }

/* ── How It Works aurora promo banner ──────────────────────────────────────── */
.hp-hiw-ban {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  margin-top: 18px;     /* little space below the greeting */
  margin-bottom: 0;     /* gap to search bar handled by search margin-top */
  background: linear-gradient(135deg,
    rgba(20,184,166,.30) 0%,
    rgba(99,102,241,.24) 55%,
    rgba(168,85,247,.18) 100%);
  border: 1px solid rgba(20,184,166,.50);
  box-shadow: 0 0 32px rgba(20,184,166,.12), inset 0 1px 0 rgba(255,255,255,.06);
}
/* decorative radial glow in the top-right corner */
.hp-hiw-ban-glow {
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20,184,166,.28) 0%, transparent 70%);
  pointer-events: none;
}
.hp-hiw-ban-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  flex-wrap: wrap;
}
.hp-hiw-ban-left { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.hp-hiw-ban-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #e2e8f0;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.hp-hiw-ban-steps {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #c8cdd8;
}
.hp-hiw-ban-step { display: flex; align-items: center; gap: 5px; }
.hp-hiw-ban-icon { font-size: 14px; }
.hp-hiw-ban-arr { color: rgba(20,184,166,.65); font-size: 12px; }
.hp-hiw-ban-cta {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(20,184,166,.22);
  border: 1px solid rgba(20,184,166,.65);
  border-radius: 8px;
  color: #5eead4;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}
.hp-hiw-ban-cta:hover {
  background: rgba(20,184,166,.40);
  border-color: rgba(20,184,166,.95);
  color: #fff;
}
@media (max-width: 520px) {
  .hp-hiw-ban-steps { display: none; }
  .hp-hiw-ban-body { justify-content: flex-start; gap: 10px; }
}

/* Returning view — give greeting some top breathing room (no wrapper needed) */
.hp-wrap > .hp-greet:first-child,
.hp-wrap > .hp-hiw-ban + .hp-greet { padding-top: 20px; }

/* Small "Full methodology →" link under the first-time hero search bar */
.hp-hiw-meta-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: #5b6577;
  text-decoration: none;
  transition: color .15s;
}
.hp-hiw-meta-link:hover { color: #16e0a8; }

/* ── Compact watchlist card (4-across single row) ───────────────────────── */
.hp-ccard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 24px 22px 22px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  min-height: 110px;
  transition: border-color .15s, background .15s;
}
.hp-ccard.v-buy   { border-color: rgba(34,201,138,.25); }
.hp-ccard.v-hold  { border-color: rgba(245,196,81,.20); }
.hp-ccard.v-trim  { border-color: rgba(240,99,99,.20); }
.hp-ccard.v-avoid { border-color: rgba(240,99,99,.25); }
.hp-ccard:hover   { background: rgba(255,255,255,.07); border-color: rgba(22,224,168,.32); }
/* Stale (not-yet-analyzed) variant */
.hp-ccard-stale {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.hp-cc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hp-cc-tk {
  font-size: 22px;
  font-weight: 800;
  color: #e2e8f0;
  letter-spacing: -.02em;
  line-height: 1;
}
.hp-cc-reason {
  font-size: 12px;
  color: #8b96ab;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: break-word;
}
.hp-cc-wave {
  font-size: 10.5px;
  font-weight: 700;
  color: rgba(22,224,168,.7);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hp-cc-pending { font-size: 11px; color: #5b6577; }

/* ── 4-column single-row watchlist grid ─────────────────────────────────── */
.hp-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* Earnings empty state */
.hp-earn-empty {
  font-size: 13px;
  color: #5b6577;
  padding: 14px 0 4px;
}

@media (max-width:860px) {
  .hp-grid { grid-template-columns:repeat(2,1fr); }
  .hp-pulse { grid-template-columns:repeat(2,1fr); }
  .hp-h1 { font-size:28px; }
  .hp-grid-4 { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:520px) {
  .hp-grid, .hp-pulse { grid-template-columns:1fr; }
  .hp-grid-4 { grid-template-columns: repeat(2,1fr); }
}

/* Show-all watchlist button */
.hp-show-all-btn {
  display: block; width: 100%; margin-top: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 10px;
  color: var(--hp-mut); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center; transition: .15s;
}
.hp-show-all-btn:hover { background: rgba(255,255,255,0.08); color: var(--hp-ink); }

/* Responsive */
@media (max-width:860px) {
  .lp-hero { grid-template-columns:1fr; gap:34px; padding:46px 0 40px; }
  .lp-h1 { font-size:42px; }
  .lp-shot { perspective:none; }
  .lp-shotcard { transform:none; }
  .lp-shot:hover .lp-shotcard { transform:none; }
  .lp-bento { grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .lp-span2, .lp-span2r { grid-column:span 2; grid-row:auto; }
  .lp-navlinks a { display:none; }
  .lp-sechead h2 { font-size:30px; }
}
@media (max-width:520px) {
  .lp-bento { grid-template-columns:1fr; }
  .lp-span2 { grid-column:span 1; }
  .lp-h1 { font-size:36px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD V2 — Verdict-First Story (post-analysis results panel)
   Scoped under .fwd. Reuses the .hp / .lp design tokens (teal/gold glass).
   ══════════════════════════════════════════════════════════════════════════ */
.fwd {
  --fwd-teal:#16e0a8; --fwd-teal2:#0fb88a; --fwd-gold:#f5c451;
  --fwd-ink:#e8edf6; --fwd-mut:#8b96ab; --fwd-border:rgba(255,255,255,0.08);
  --fwd-card:rgba(17,22,33,0.66);
  --fwd-green:#22c98a; --fwd-amber:#f5b942; --fwd-red:#f06363; --fwd-blue:#5a8dee;
  position:relative; min-height:calc(100vh - 49px);
  font-family:'Inter Tight','Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(820px 480px at 8% -14%, rgba(22,224,168,0.18), transparent 62%),
    radial-gradient(760px 440px at 96% -10%, rgba(90,141,238,0.13), transparent 60%),
    radial-gradient(620px 360px at 58% -18%, rgba(245,196,81,0.07), transparent 58%);
}
.fwd-mono { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.fwd-wrap { max-width:1180px; margin:0 auto; padding:18px 28px 60px; }

/* ── Mobile UX ──────────────────────────────────────────────────────────────
   All overrides use !important to beat Dash's inline style props.          */
@media (max-width: 600px) {
  /* Framework tiles: stack to 1 column */
  .fwd-tile-grid { grid-template-columns: 1fr !important; }

  /* Tighter page padding on phones */
  .fwd-wrap { padding: 10px 12px 40px !important; }

  /* Ticker inputs: let them grow to fill available space */
  .chart-ticker-input { width: 100% !important; min-width: 80px !important; }
  .fw-ticker-input    { width: 110px !important; }
}
.fwd-card { background:var(--fwd-card); backdrop-filter:blur(12px);
  border:1px solid var(--fwd-border); border-radius:18px;
  box-shadow:0 16px 50px -28px rgba(0,0,0,.8);
  padding:20px 22px; }

/* Verdict colour discipline */
.fwd-buy   { --v:var(--fwd-green); }
.fwd-hold  { --v:var(--fwd-blue); }
.fwd-trim  { --v:var(--fwd-amber); }
.fwd-avoid { --v:var(--fwd-red); }

/* ── HERO VERDICT BAND ─────────────────────────────────────────────────── */
.fwd-hero { padding:28px 30px; position:relative; overflow:hidden; margin-bottom:16px; }
.fwd-hero .fwd-glow { position:absolute; width:340px; height:340px; border-radius:50%;
  filter:blur(90px); opacity:.16; top:-150px; right:-60px; background:var(--v,var(--fwd-amber)); }
.fwd-htop { display:flex; align-items:center; gap:18px; position:relative; z-index:1; }
.fwd-badge { font-weight:900; letter-spacing:-.02em; border-radius:14px; line-height:1.02;
  display:inline-block; font-size:48px; padding:8px 26px;
  color:var(--v); background:color-mix(in srgb, var(--v) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--v) 38%, transparent);
  box-shadow:0 0 40px -8px color-mix(in srgb, var(--v) 50%, transparent); }
.fwd-tk { font-size:28px; font-weight:800; color:var(--fwd-ink); line-height:1.05; }
.fwd-nm { font-size:13px; color:var(--fwd-mut); margin-top:2px; }
.fwd-score { margin-left:auto; text-align:right; }
.fwd-score .p { font-size:26px; font-weight:800; color:var(--v); }
.fwd-score .c { font-size:12.5px; color:var(--fwd-mut); font-weight:600; margin-top:2px; }
.fwd-mid { display:grid; grid-template-columns:1.4fr 1fr; gap:28px; margin-top:20px;
  align-items:center; position:relative; z-index:1; }
.fwd-reco { font-size:16px; line-height:1.55; color:#cdd6e3;
  padding-left:13px; border-left:3px solid var(--v); }
.fwd-reco b { color:var(--fwd-ink); }
.fwd-conf { display:flex; align-items:center; gap:12px; margin-top:16px; }
.fwd-conf .lab { font-size:12.5px; color:var(--fwd-mut); }
.fwd-conf .pct { font-size:13.5px; font-weight:700; color:var(--fwd-ink); }
.fwd-confbar { flex:1; height:8px; border-radius:100px; background:rgba(255,255,255,.07); overflow:hidden; }
.fwd-conffill { height:100%; border-radius:100px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--v) 70%, transparent), var(--v)); }
.fwd-pivots { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.fwd-piv { padding:11px 12px; border-radius:12px; background:rgba(255,255,255,.03); border:1px solid var(--fwd-border); }
.fwd-piv .k { font-size:10px; color:var(--fwd-mut); text-transform:uppercase; letter-spacing:.07em; }
.fwd-piv .v { font-size:17px; font-weight:800; margin-top:4px; color:var(--fwd-ink); }
.fwd-actions { display:flex; gap:8px; margin-top:18px; }
.fwd-act { font-family:inherit; font-weight:600; font-size:12.5px; padding:9px 14px; border-radius:10px;
  cursor:pointer; background:rgba(255,255,255,.04); border:1px solid var(--fwd-border); color:var(--fwd-ink); transition:.18s; }
.fwd-act:hover { border-color:rgba(22,224,168,.4); }
.fwd-act.pri { background:linear-gradient(135deg,var(--fwd-teal),var(--fwd-teal2)); color:#04140e; border:none; }

/* ── WHY ROW ───────────────────────────────────────────────────────────── */
.fwd-eyebrow { font-size:11px; font-weight:700; color:var(--fwd-mut); letter-spacing:.1em;
  text-transform:uppercase; margin:0 0 10px 2px; }
.fwd-why { display:flex; flex-wrap:wrap; gap:9px; margin-bottom:0; }
.fwd-reason { display:inline-flex; align-items:center; gap:9px; padding:8px 14px; border-radius:10px;
  border:1px solid var(--fwd-border); background:var(--fwd-card); backdrop-filter:blur(10px); }
.fwd-reason .ic { width:8px; height:8px; border-radius:50%; flex:0 0 auto;
  box-shadow:0 0 8px color-mix(in srgb, currentColor 70%, transparent); }
.fwd-reason.r .ic { background:var(--fwd-red); color:var(--fwd-red); }
.fwd-reason.a .ic { background:var(--fwd-amber); color:var(--fwd-amber); }
.fwd-reason.g .ic { background:var(--fwd-green); color:var(--fwd-green); }
.fwd-reason.i .ic { background:var(--fwd-mut); color:var(--fwd-mut); }
.fwd-reason .tx { font-size:13px; font-weight:600; color:var(--fwd-ink); white-space:nowrap; }

/* ── SUPPORTING EVIDENCE — chart band ──────────────────────────────────── */
.fwd-chartcard { overflow:hidden; margin-bottom:8px; }
.fwd-chead { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid var(--fwd-border); flex-wrap:wrap; }
.fwd-chead .tt { font-weight:700; font-size:14.5px; color:var(--fwd-ink); }
.fwd-beta-chip { font-size:10.5px; font-weight:700; color:var(--fwd-amber);
  background:rgba(245,185,66,.12); border:1px solid rgba(245,185,66,.3);
  padding:3px 9px; border-radius:7px; letter-spacing:.02em; }
.fwd-evi-note { font-size:11.5px; color:var(--fwd-mut); margin:8px 2px 18px; }
.fwd-l2 { margin-top:10px; }

/* Wave context chips in verdict tile */
.fwd-wchip-row { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 4px; }
.fwd-wchip {
  font-size:11px; font-weight:700; padding:3px 9px;
  border-radius:6px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12); color:#c8cdd8;
  letter-spacing:.04em; text-transform:uppercase;
}
.fwd-wchip-bull { background:rgba(34,201,138,.12); border-color:rgba(34,201,138,.3); color:#22c98a; }
.fwd-wchip-bear { background:rgba(240,99,99,.12); border-color:rgba(240,99,99,.3); color:#f06363; }
.fwd-wchip-neutral { background:rgba(245,196,81,.1); border-color:rgba(245,196,81,.25); color:#f5c451; }

/* ── PROOF — 13-framework group cards (accordions) ─────────────────────── */
.fwd-proof-head { display:flex; justify-content:space-between; align-items:center; margin:4px 0 12px; }
.fwd-proof-h { font-size:16px; font-weight:700; color:var(--fwd-ink); }
.fwd-proof-hint { font-size:11.5px; color:var(--fwd-mut); font-style:italic; }
.fwd-grp { border:1px solid var(--fwd-border); border-radius:14px; background:var(--fwd-card);
  backdrop-filter:blur(10px); margin-bottom:12px; overflow:hidden; }
.fwd-grphead { display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer;
  user-select:none; border-left:3px solid var(--g,var(--fwd-mut)); transition:.15s; }
.fwd-grphead:hover { background:rgba(255,255,255,.03); }
.fwd-grphead .arr { color:var(--fwd-mut); font-size:10px; width:12px; display:inline-block; }
.fwd-grphead .gname { font-size:14.5px; font-weight:700; color:var(--fwd-ink); }
.fwd-grphead .gsum { font-size:12px; color:var(--fwd-mut); }
.fwd-gscore { margin-left:auto; font-size:13px; font-weight:700; padding:4px 11px; border-radius:9px;
  font-family:'JetBrains Mono',monospace; color:var(--g); background:color-mix(in srgb, var(--g) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--g) 40%, transparent); }

@media (max-width:900px) {
  .fwd-mid { grid-template-columns:1fr 1fr; }
  .fwd-badge { font-size:38px; }
}
@media (max-width:560px) {
  .fwd-mid, .fwd-pivots { grid-template-columns:1fr; }
  .fwd-score { margin-left:0; text-align:left; }
}

/* ── News + Analyst Research two-column grid → single column on mobile ────── */
.fwd-news-analyst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 0;
}
@media (max-width: 700px) {
  .fwd-news-analyst-grid {
    grid-template-columns: 1fr !important;
  }
  /* Analyst research: stack bull/bear columns vertically */
  .fwd-bull-bear-cols {
    flex-direction: column !important;
    gap: 10px !important;
  }
  /* News card: tighten the headline text */
  .fwd-news-headline {
    font-size: 11px !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* Analyst research card: slightly smaller body text */
  .fwd-analyst-card-body {
    font-size: 12px !important;
  }
}

/* ── How It Works page animations ──────────────────────────────────────────── */
@keyframes hiw-fadeup {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes hiw-fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hiw-gradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
@keyframes hiw-pulse {
  0%,100% { opacity: 1;   transform: scale(1);    }
  50%      { opacity: 0.7; transform: scale(0.97); }
}
@keyframes hiw-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
.hiw-hero-title {
  background: linear-gradient(-45deg, #26a69a, #2962ff, #9c5ff5, #ffd54f);
  background-size: 400% 400%;
  animation: hiw-gradient 7s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hiw-step-card {
  opacity: 0;
  animation: hiw-fadeup 0.65s ease forwards;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hiw-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(38,166,154,0.18) !important;
}
.hiw-step-card:nth-child(1) { animation-delay: 0.10s; }
.hiw-step-card:nth-child(2) { animation-delay: 0.28s; }
.hiw-step-card:nth-child(3) { animation-delay: 0.46s; }
.hiw-layer-card {
  opacity: 0;
  animation: hiw-fadeup 0.45s ease forwards;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hiw-layer-card:hover {
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(38,166,154,0.55) !important;
  box-shadow: 0 8px 24px rgba(38,166,154,0.12) !important;
}
.hiw-arrow-pulse { animation: hiw-pulse 2.4s ease-in-out infinite; }
.hiw-section-enter { opacity: 0; animation: hiw-fadein 0.7s ease 0.15s forwards; }
.hiw-num-badge     { animation: hiw-pulse 3s ease-in-out infinite; }

/* ── How It Works tabs (override Dash default chrome) ───────────────────────── */
#hiw-tabs { border-bottom: none !important; }
#hiw-tabs .tab-container { padding: 10px 32px 0 !important; background: transparent !important; }
#hiw-tabs > .tab-bar    { border-bottom: none !important; background: transparent !important; }

/* ── How It Works — Launch App button hover ─────────────────────────────────── */
#hiw-launch-btn:hover,
a[href="/"]:has(span):hover {
  background: linear-gradient(135deg, rgba(38,166,154,0.22), rgba(38,166,154,0.10)) !important;
  border-color: rgba(38,166,154,0.85) !important;
  box-shadow: 0 4px 20px rgba(38,166,154,0.30) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPACT MARKET BAR  (replaces the 4-card Today's Market grid)
   ══════════════════════════════════════════════════════════════════════════ */

.hp-mbar {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.hp-mbar-pill {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px;
}
.hp-mbar-pill .k {
  color: var(--hp-mut); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
.hp-mbar-sep { color: var(--hp-border); font-size: 11px; }

@media (max-width: 760px) { .hp-mbar { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   SECTOR PERFORMANCE HEATMAP
   ══════════════════════════════════════════════════════════════════════════ */

.hp-sector-wrap { margin-top: 44px; margin-bottom: 4px; }
/* Portfolio CTA block — space above so it doesn't touch the watchlist tiles */
.hp-sec-block { margin-top: 28px; margin-bottom: 4px; }

/* Each heatmap row is a self-contained block: tile grid + its own panel slot */
.hp-heatmap-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 4px;
}

/* True heatmap grid — 6 columns on desktop, wraps on smaller screens.
   Color intensity is baked inline by Python (rgba with alpha ∝ magnitude). */
.hp-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.hp-heat-tile:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

/* Panel slot sits directly below its own row's tile grid */
.hp-panel-slot {
  min-height: 0;
  overflow: hidden;
}
.hp-panel-slot:empty {
  display: none;
}

@media (max-width: 900px) {
  .hp-heatmap-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 580px) {
  .hp-heatmap-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTOR MOVERS PANEL  (expands below the clicked tile's row)
   ══════════════════════════════════════════════════════════════════════════ */

.hp-movers-panel {
  background: rgba(17,22,33,0.7);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 8px;
  animation: fadeSlideDown .22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top center;
}
@keyframes fadeSlideDown {
  from { opacity:0; transform: scaleY(0.85) translateY(-8px); }
  to   { opacity:1; transform: scaleY(1)    translateY(0);    }
}
.hp-movers-title {
  font-size: 13px; font-weight: 700; color: var(--hp-mut);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}
.hp-movers-cols {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.hp-movers-cols > div { flex: 0 0 auto; min-width: 160px; }
.hp-movers-cols h4 { font-size: 11px; font-weight: 700; color: var(--hp-mut);
  text-transform: uppercase; letter-spacing: .05em; margin: 0 0 8px; }
.hp-mover-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px; white-space: nowrap;
}
.hp-mover-row:last-child { border-bottom: none; }
.hp-mover-tk { font-weight: 700; color: var(--hp-ink); min-width: 44px; }
.hp-mover-price { color: var(--hp-mut); font-size: 11px; }
.hp-mover-pct { font-weight: 700; font-size: 13px; margin-left: 4px; }
.hp-mover-up   { color: #22c98a; }
.hp-mover-dn   { color: #f06363; }

/* ══════════════════════════════════════════════════════════════════════════
   TOP SETUPS GRID
   ══════════════════════════════════════════════════════════════════════════ */

/* Reuses hp-wcard base — just adds a subtle teal glow to distinguish setups */
.hp-setup {
  border-left: 3px solid rgba(22,224,168,.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   UPCOMING EARNINGS STRIP
   ══════════════════════════════════════════════════════════════════════════ */

.hp-earn-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.hp-earn-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid var(--hp-border);
  background: var(--hp-card);
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color .15s, transform .15s, background .15s;
  font-family: inherit;
}
.hp-earn-item:hover {
  transform: translateY(-1px);
  border-color: rgba(22,224,168,.4);
  background: rgba(22,224,168,.05);
}
.hp-earn-item .tk  { font-weight: 800; color: var(--hp-ink); }
.hp-earn-item .dt  { color: var(--hp-mut); font-size: 12px; }

/* Amber highlight when earnings ≤ 3 days away */
.hp-earn-soon {
  border-color: rgba(245,185,66,.4) !important;
  background: rgba(245,185,66,.05) !important;
}
.hp-earn-soon .dt { color: #f5b942; }

/* ── Dashboard topnav — hide webkit scrollbar on the links row ──────────── */
#dash-topnav > div::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   DASHBOARD TOPNAV — Mobile responsive
   ══════════════════════════════════════════════════════════════════════════ */

.dash-topnav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

/* Tablet / small laptop: tighten spacing */
@media (max-width: 768px) {
  .dash-topnav {
    padding: 8px 14px !important;
    gap: 4px !important;
  }
  .dash-topnav-links {
    gap: 2px;
    margin-left: 4px;
  }
  .dash-topnav-links a {
    font-size: 12px !important;
    padding: 4px 7px !important;
  }
  .dash-topnav-hiw {
    display: none !important;
  }
  .dash-topnav-subtitle {
    display: none !important;
  }
  .dash-topnav-user {
    display: none !important;
  }
}

/* Phone: further reduce — hide username, abbreviate if needed */
@media (max-width: 520px) {
  .dash-topnav {
    padding: 8px 12px !important;
  }
  .dash-topnav-links a {
    font-size: 11.5px !important;
    padding: 3px 6px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTFOLIO FORM — Mobile responsive (5-col grid → stacked)
   ══════════════════════════════════════════════════════════════════════════ */

/* Tablet: compress to 2+2+button layout */
@media (max-width: 700px) {
  .pf-form-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  /* "Add holding" button spans full width at bottom */
  .pf-form-grid > *:last-child {
    grid-column: 1 / -1;
    width: 100% !important;
    height: 44px !important;
  }
}

/* Phone: single column */
@media (max-width: 480px) {
  .pf-form-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .pf-form-grid > * {
    grid-column: 1 !important;
  }
  .pf-form-grid > *:last-child {
    width: 100% !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   HOME PAGE — Mobile tweaks
   ══════════════════════════════════════════════════════════════════════════ */

/* Prevent horizontal overflow on narrow screens */
@media (max-width: 520px) {
  .hp-wrap {
    padding: 20px 14px 60px !important;
  }
  .hp-pulse {
    gap: 8px !important;
  }
  .hp-pcard {
    padding: 12px 14px !important;
  }
  /* Search bar — prevent iOS zoom (font-size ≥ 16px) */
  .hp-search input {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDING PAGE — CRUSTDATA-INSPIRED UPGRADES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Animated gradient on hero heading ─────────────────────────────────── */
.lp-h1 .grad {
  background: linear-gradient(110deg, var(--lp-teal), var(--lp-gold), var(--lp-teal));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: lp-grad-shift 4s linear infinite;
}
@keyframes lp-grad-shift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── 2. Bento tile entrance animations ────────────────────────────────────── */
@keyframes lp-fadein-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-tile {
  animation: lp-fadein-up .55s cubic-bezier(.22,1,.36,1) both;
}
.lp-tile:nth-child(1) { animation-delay: .05s; }
.lp-tile:nth-child(2) { animation-delay: .13s; }
.lp-tile:nth-child(3) { animation-delay: .20s; }
.lp-tile:nth-child(4) { animation-delay: .27s; }
.lp-tile:nth-child(5) { animation-delay: .34s; }
.lp-tile:nth-child(6) { animation-delay: .41s; }

/* ── 3. Stats bar ──────────────────────────────────────────────────────────── */
.lp-statsbar {
  display: flex; align-items: stretch; justify-content: center;
  gap: 0; border: 1px solid var(--lp-border); border-radius: 18px;
  margin: 0 0 52px; overflow: hidden;
  background: rgba(14,20,32,.6); backdrop-filter: blur(12px);
}
.lp-stat {
  flex: 1; padding: 22px 28px; text-align: center;
  border-right: 1px solid var(--lp-border);
  position: relative;
}
.lp-stat:last-child { border-right: none; }
.lp-stat-n {
  font-size: 36px; font-weight: 800; letter-spacing: -.04em;
  line-height: 1; display: block;
  background: linear-gradient(135deg, var(--lp-teal), var(--lp-gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lp-stat-l {
  font-size: 12px; color: var(--lp-mut); font-weight: 500;
  text-transform: uppercase; letter-spacing: .1em; margin-top: 6px; display: block;
}

/* ── 4. Live signal feed (in bento tile) ──────────────────────────────────── */
.lp-feed-wrap {
  height: 148px; overflow: hidden; margin-top: 14px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}
.lp-feed-track {
  display: flex; flex-direction: column; gap: 8px;
  animation: lp-feed-scroll 12s linear infinite;
}
@keyframes lp-feed-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.lp-feed-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--lp-border);
  font-size: 12.5px; flex-shrink: 0;
}
.lp-feed-tk  { font-weight: 700; color: var(--lp-ink); min-width: 38px; }
.lp-feed-vrd {
  font-size: 10.5px; font-weight: 800; padding: 2px 8px;
  border-radius: 6px; letter-spacing: .04em;
}
.lp-feed-vrd.buy  { background: rgba(34,201,138,.15); color: var(--lp-green);  border: 1px solid rgba(34,201,138,.3); }
.lp-feed-vrd.hold { background: rgba(139,150,171,.1);  color: var(--lp-mut);   border: 1px solid var(--lp-border); }
.lp-feed-vrd.trim { background: rgba(245,185,66,.12); color: var(--lp-amber); border: 1px solid rgba(245,185,66,.3); }
.lp-feed-vrd.avoid{ background: rgba(240,99,99,.12);  color: var(--lp-red);   border: 1px solid rgba(240,99,99,.3); }
.lp-feed-sc  { color: var(--lp-mut); margin-left: auto; font-size: 11.5px; font-weight: 600; }
.lp-feed-age { color: var(--lp-mut); font-size: 11px; }
.lp-feed-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lp-teal);
  box-shadow: 0 0 6px var(--lp-teal); flex-shrink: 0; }

/* ── 5. Network section ───────────────────────────────────────────────────── */
.lp-netsec {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, transparent 0%, #04080f 8%, #04080f 92%, transparent 100%);
  padding: 72px 0 80px; margin: 0;
}
.lp-netsec::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 75% 50%, rgba(99,102,241,.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 50%, rgba(22,224,168,.05) 0%, transparent 70%);
}
.lp-netsvg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .55; pointer-events: none;
  object-fit: cover;
}
.lp-edge {
  stroke: rgba(99,102,241,.35); stroke-width: .8; fill: none;
  stroke-dasharray: 6 4;
  animation: lp-dash 3s linear infinite;
}
.lp-edge.f { animation-duration: 4.5s; stroke: rgba(22,224,168,.25); }
.lp-edge.s { animation-duration: 6s;   stroke: rgba(245,196,81,.2); animation-direction: reverse; }
@keyframes lp-dash { to { stroke-dashoffset: -20; } }

.lp-node {
  fill: rgba(99,102,241,.7);
  animation: lp-node-pulse 3s ease-in-out infinite;
}
.lp-node.g { fill: rgba(22,224,168,.7); animation-duration: 4s; }
.lp-node.y { fill: rgba(245,196,81,.6); animation-duration: 5s; animation-delay: -1.5s; }
.lp-node.lg { fill: rgba(99,102,241,.3); r: 1.5; }
@keyframes lp-node-pulse {
  0%,100% { opacity: .4; r: 3; }
  50%      { opacity: 1;  r: 4.5; }
}

/* Network section content */
.lp-netsec-inner {
  position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 28px;
}
.lp-netsec-head { margin-bottom: 48px; }
.lp-netsec-head .tag {
  font-size: 12px; font-weight: 700; color: var(--lp-teal);
  text-transform: uppercase; letter-spacing: .14em;
}
.lp-netsec-head h2 {
  font-size: 42px; font-weight: 800; letter-spacing: -.035em;
  margin: 10px 0 12px; line-height: 1.08;
}
.lp-netsec-head p { font-size: 16px; color: var(--lp-mut); max-width: 520px; }

.lp-use-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.lp-use-card {
  background: rgba(12,18,30,.7); border: 1px solid var(--lp-border);
  border-radius: 16px; padding: 22px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  backdrop-filter: blur(8px);
}
.lp-use-card:hover {
  border-color: rgba(22,224,168,.3);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5), 0 0 0 1px rgba(22,224,168,.08);
}
.lp-use-icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid;
  place-items: center; font-size: 19px; margin-bottom: 14px;
  background: rgba(255,255,255,.05); border: 1px solid var(--lp-border);
}
.lp-use-card h4 { font-size: 15px; font-weight: 700; margin: 0 0 7px; letter-spacing: -.01em; }
.lp-use-card p  { font-size: 13px; color: var(--lp-mut); margin: 0; line-height: 1.55; }

/* ── 6. Announcement bar ─────────────────────────────────────────────────── */
.lp-topbar {
  background: linear-gradient(90deg, rgba(22,224,168,.1), rgba(245,196,81,.08), rgba(22,224,168,.1));
  border-bottom: 1px solid rgba(22,224,168,.15);
  text-align: center; padding: 9px 20px; font-size: 13px; font-weight: 500;
  color: var(--lp-ink); position: relative; z-index: 60;
}
.lp-topbar a { color: var(--lp-teal); text-decoration: none; font-weight: 700; margin-left: 10px; }
.lp-topbar a:hover { text-decoration: underline; }
.lp-topbar .lp-new-badge {
  display: inline-block; font-size: 9px; font-weight: 800;
  background: var(--lp-teal); color: #04140e;
  padding: 2px 6px; border-radius: 5px; margin-right: 8px;
  letter-spacing: .06em; vertical-align: middle;
}

/* ── 7. Pill animation: pulsing dot ─────────────────────────────────────── */
.lp-pill .dot {
  animation: lp-dot-pulse 2s ease-in-out infinite;
}
@keyframes lp-dot-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(22,224,168,.7); }
  50%      { box-shadow: 0 0 0 5px rgba(22,224,168,.0); }
}

/* ── 8. Bento tile: shimmer border on hover ─────────────────────────────── */
.lp-tile {
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.lp-tile:hover {
  box-shadow: 0 20px 50px -15px rgba(0,0,0,.6), 0 0 0 1px rgba(22,224,168,.12);
}

/* ── 9. CTA button shimmer ───────────────────────────────────────────────── */
.lp-btn-primary {
  position: relative; overflow: hidden;
}
.lp-btn-primary::after {
  content: ""; position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: lp-shimmer 3s linear infinite;
}
@keyframes lp-shimmer {
  0%   { left: -60%; }
  100% { left: 120%; }
}