/* ==========================================================================
   Pingr landing page – Final Polish (Glow Restore, Height Match, Universal Ambient)
   ========================================================================== */

:root{
  --nav-h:50px; --wrap:1080px;
  --bg0:#02040a; --bg1:#050810; --nav:#0b1b34;
  --text:rgba(255,255,255,0.96); --muted:rgba(255,255,255,0.7); --accent:#4fe2ff;
  --glass-top:rgba(255,255,255,0.08); --glass-bot:rgba(255,255,255,0.02); --stroke:rgba(255,255,255,0.12);
  /* Colors */
  --cyan:#4fe2ff; --blue:#4a86ff; --violet:#a05cff; --azure-glow:#00c3ff; --azure:#38bdff;
  --orange: #ff9f43; 
  --shadow:0 22px 70px rgba(0,0,0,0.8);
  --font-main:'Inter',system-ui,-apple-system,sans-serif;
  
  /* --- NEON NOIR PALETTE (Signal Room) --- */
  --void: #050505;
  --matte: #0F0F0F;
  --surface: #161616;
  --border-neon: rgba(255, 255, 255, 0.08);
  
  /* Rarity Glows */
  --gold: #FFD700;
  --whale: #3B82F6;
  --cluster: #10B981;
  --risk: #EF4444;

  /* Dashboard Specific */
  --dash-bg: #0A0C10; /* Pure Charcoal */
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; background: var(--bg0);}
body{zoom:0.8;margin:0;color:var(--text);font-family:var(--font-main);background:var(--bg0);overflow-x:hidden !important;line-height:1.5; width: 125vw; min-height: 125vh;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;transition:color 0.2s;}
button{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0;}

/* ── MOBILE ZOOM RESET — cancels the desktop zoom hack on small screens ── */
@media (max-width: 768px) {
  body {
    zoom: 1;
    width: 100%;
    min-height: 100vh;
  }
  #loader-overlay, .loader-overlay {
    width: 100vw !important;
    height: 100vh !important;
  }
}

.wrap{width:min(var(--wrap),calc(100% - 40px));margin:0 auto;}

.skip{position:absolute;left:12px;top:12px;padding:10px 12px;background:#fff;color:#000;z-index:999;transform:translateY(-150%);}
.skip:focus{transform:translateY(0);}

.srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* --- Scroll Animation Classes --- */
.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s cubic-bezier(0.2,0.8,0.2,1);}
.reveal.active{opacity:1;transform:translateY(0);}

/* --- Top Bar --- */
.topbar{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;background:rgba(11,27,52,0.85);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.05);transition:transform 0.3s ease-in-out;}
.topbar--hidden{transform:translateY(-100%);}
.topbar__inner{height:100%;display:flex;align-items:center;justify-content:space-between;}
.brandImg{height:auto;max-height:100px;width:auto;display:block;}
.topnav{display:flex;gap:32px;font-size:14px;font-weight:500;color:var(--muted);}
.topnav a:hover,.nav-btn-login:hover{color:var(--accent);}

/* --- Panel Basics --- */
.panel{position:relative;isolation:isolate;min-height:90vh;padding:80px 0;display:grid;place-items:center;}

/* === AMBIENT "STEPPED" GRADIENTS (For Landing Page) === */
.ambient-step{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:0.7;mix-blend-mode:screen;}
.ambient-light{animation:driftAmbient 20s ease-in-out infinite alternate;}
@keyframes driftAmbient{0%{transform:translate(0,0) scale(1);}100%{transform:translate(20px,-20px) scale(1.05);}}

.hero-blob{background:radial-gradient(circle at 50% 10%,rgba(79,226,255,0.25) 0%,rgba(79,226,255,0.1) 25%,rgba(79,226,255,0.02) 50%,transparent 50.1%);}
.engine-blob{background:radial-gradient(circle at 20% 50%,rgba(160,92,255,0.2) 0%,rgba(160,92,255,0.08) 30%,rgba(160,92,255,0.01) 60%,transparent 60.1%);}
.built-blob{background:radial-gradient(circle at 80% 70%,rgba(74,134,255,0.2) 0%,rgba(74,134,255,0.08) 30%,rgba(74,134,255,0.01) 60%,transparent 60.1%);}
.verified-blob{background:radial-gradient(circle at 90% 20%,rgba(0,195,255,0.15) 0%,rgba(0,195,255,0.05) 30%,transparent 60%);}
.footer-blob{background:radial-gradient(circle at 10% 90%,rgba(160,92,255,0.15) 0%,rgba(160,92,255,0.05) 30%,transparent 60%);}

.glass-box{background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01));border:1px solid var(--stroke);border-radius:24px;box-shadow:var(--shadow),inset 0 0 20px rgba(255,255,255,0.02);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.glass{background:linear-gradient(180deg,var(--glass-top),var(--glass-bot));border:1px solid var(--stroke);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(20px);}

/* --- Hero Section --- */
.hero{text-align:center;overflow:hidden;}
.hero__inner{position:relative;z-index:10;}
.h1{margin:0;font-weight:800;font-size:clamp(42px,5vw,64px);line-height:1.1;letter-spacing:-1px;text-shadow:0 10px 40px rgba(0,0,0,0.9);}
.sub{margin:20px auto 0;max-width:600px;font-size:16px;color:var(--muted);}
.hero__arc{position:absolute;left:0;width:100%;height:240px;z-index:-1;pointer-events:none;}
.arc-pulse{stroke-dasharray:300 1200;stroke-dashoffset:1500;animation:pulseMove 3s linear infinite;opacity:1;will-change:stroke-dashoffset;}
@keyframes pulseMove{to{stroke-dashoffset:0;}}

.heroCard{width:min(640px,92vw);min-height:380px;margin:60px auto 0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;background:rgba(2,4,10,0.6);border:1px solid rgba(255,255,255,0.15);box-shadow:0 30px 80px rgba(0,0,0,0.8),inset 0 0 60px rgba(79,226,255,0.05);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:28px;position:relative;z-index:20;}
.heroCard__whaleBox{width:150px;height:130px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;position:relative;z-index:30;background:radial-gradient(circle,rgba(2,4,10,1) 20%,rgba(2,4,10,0) 80%);}
.heroCard__whaleBox img{width:auto;height:auto;max-height:100%;filter:drop-shadow(0 0 25px rgba(79,226,255,0.4));}
.heroCard__whaleBox:empty::after,.heroCard__whaleBox img[src=""]{content:"🐳";font-size:80px;filter:drop-shadow(0 0 15px cyan);}
.heroCard__label{font-size:11px;font-weight:700;letter-spacing:2.5px;color:rgba(255,255,255,0.7);margin-bottom:30px;text-transform:uppercase;text-shadow:0 0 10px rgba(79,226,255,0.4);}
.heroCard__actions{display:flex;justify-content:center;gap:16px;width:100%;}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:12px;font-size:13px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;border:1px solid rgba(255,255,255,0.2);transition:0.2s;cursor:pointer;text-decoration:none;}
.btn:hover{transform:translateY(-2px);filter:brightness(1.2);box-shadow:0 10px 20px -10px rgba(0,0,0,0.5);}
.btn--cyan{background:linear-gradient(90deg,#1b3a4b,#204ecf);color:#fff;border-color:#4fe2ff;}
.btn--violet{background:linear-gradient(90deg,#3a206e,#5a30b5);color:#fff;border-color:#a05cff;}
.btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;filter:grayscale(1);}

/* --- Engine Section --- */
.engine__inner{text-align:center;}
.engineGlow{position:relative;width:300px;height:250px;margin:0 auto 20px;pointer-events:none;}
@keyframes beamPulse{0%,100%{opacity:0.6;height:180px;}50%{opacity:0.9;height:190px;}}
.engineGlow__beam{position:absolute;left:50%;bottom:50%;width:6px;height:180px;transform:translateX(-50%);background:linear-gradient(to top,var(--azure-glow),transparent);opacity:0.8;animation:beamPulse 5s ease-in-out infinite;}
@keyframes corePulse{0%,100%{box-shadow:0 0 20px 10px #fff,0 0 60px 30px var(--azure-glow);transform:translate(-50%,-50%) scale(1);}50%{box-shadow:0 0 30px 15px #fff,0 0 80px 40px var(--azure-glow);transform:translate(-50%,-50%) scale(1.1);}}
.engineGlow__core{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);background:#fff;border-radius:50%;box-shadow:0 0 20px 10px #fff,0 0 60px 30px var(--azure-glow);z-index:5;animation:corePulse 5s ease-in-out infinite;}
.engineGlow__circle{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;border:none;z-index:1;}
.c1{width:50px;height:50px;background:rgba(0,195,255,0.35);} .c2{width:120px;height:120px;background:rgba(0,195,255,0.15);} .c3{width:200px;height:200px;background:rgba(0,195,255,0.05);} .c4{width:300px;height:300px;background:rgba(0,195,255,0.02);}

.engineCopy{margin:0 auto 30px;max-width:700px;font-size:clamp(20px,3vw,28px);line-height:1.4;color:var(--muted);}
.engineCopy strong{color:#fff;font-weight:700;text-shadow:0 0 20px var(--azure-glow);}
.engineStats{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;}
.engineStat{font-size:clamp(18px,2vw,24px);font-weight:700;color:#fff;text-shadow:0 0 15px #fff,0 0 30px var(--azure-glow);}

/* --- Verified Stats --- */
.verified__inner{text-align:center;width:100%;}
.h2{font-size:32px;font-weight:700;margin-bottom:50px;color:#e0e0e0;}
.verifiedCards{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:900px;margin:0 auto;}
.statCard{text-align:left;padding:40px;position:relative;background:rgba(15,20,30,0.7);min-height:320px;display:flex;flex-direction:column;justify-content:center;z-index:1;}
.statCard::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:24px;border:1px solid rgba(255,255,255,0.08);background:rgba(15,20,30,0.4);transform:translate(0,12px) scale(0.96);transition:transform 0.3s ease;}
.statCard::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:24px;border:1px solid rgba(255,255,255,0.04);background:rgba(15,20,30,0.2);transform:translate(0,24px) scale(0.92);transition:transform 0.3s ease;}
.statCard:hover::before{transform:translate(0,16px) scale(0.96);}
.statCard:hover::after{transform:translate(0,32px) scale(0.92);}
.statIcon{position:absolute;top:20px;right:20px;font-size:24px;opacity:0.5;}
.statCard__big{font-size:clamp(80px,8vw,110px);font-weight:800;line-height:1;margin-bottom:10px;background:linear-gradient(135deg,#a0f0ff 0%,#4a86ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 25px rgba(74,134,255,0.7));}
.statCard__text{font-size:16px;line-height:1.5;color:rgba(255,255,255,0.7);}
.fine{font-size:10px;color:rgba(255,255,255,0.3);margin-top:50px;}

/* --- Built-In --- */
.built__inner{text-align:center;width:100%;}
.hBig{font-size:50px;font-weight:800;margin-bottom:50px;color:#9ca3af;text-shadow:none;}
.builtGlow{color:#fff;text-shadow:0 0 20px rgba(255,255,255,0.6);}
.builtGrid{display:grid;gap:20px;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;max-width:1000px;margin:0 auto;}
.tile{background:linear-gradient(145deg,#0f131a,#05070a);border:1px solid rgba(255,255,255,0.1);border-radius:20px;overflow:hidden;position:relative;transition:transform 0.3s ease,border-color 0.3s ease;display:flex;align-items:center;justify-content:center;}
.tile:hover{transform:translateY(-5px);border-color:rgba(255,255,255,0.3);box-shadow:0 10px 30px rgba(0,0,0,0.5);}
.tile--a{grid-column:1 / span 2;grid-row:1;} .tile--b{grid-column:3 / span 1;grid-row:1;} .tile--c{grid-column:4 / span 1;grid-row:1 / span 2;} .tile--d{grid-column:1 / span 1;grid-row:2;} .tile--e{grid-column:2 / span 2;grid-row:2;}
.tile img{width:100%;height:100%;object-fit:cover;padding:0;opacity:1;transition:0.3s;}
.tile:hover img{transform:scale(1.05);}
.tileLabel{position:absolute;top:25px;left:0;right:0;margin:0 auto;text-align:center;z-index:2;color:rgba(255,255,255,0.95);font-size:16px;font-weight:700;text-shadow:0 2px 5px rgba(0,0,0,0.7);pointer-events:none;}
.label--top{top:25px;} .label--bottom{top:auto;bottom:25px;}

/* --- Alerts Section --- */
.alerts{padding:0;min-height:90vh;overflow:hidden;display:flex;align-items:center;}
.alerts__bg{position:absolute;inset:0;z-index:0;}
.alerts__bg img{width:100%;height:100%;object-fit:cover;opacity:0.4;}
.alerts__bg{background:linear-gradient(to right,#000,#0a0f18);}
.alerts__ambient{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(120px);opacity:0.4;}
.b1{width:600px;height:600px;background:var(--blue);top:-200px;left:-200px;}
.b2{width:500px;height:500px;background:var(--violet);bottom:-150px;right:-150px;}
.alerts__inner{position:relative;z-index:3;width:100%;display:flex;align-items:center;justify-content:center;gap:100px;}
.phoneStage{flex:0 0 auto;display:flex;justify-content:flex-end;perspective:1000px;padding:20px 0;}
.phone-tilt-wrapper{transition:transform 0.1s ease-out;transform-style:preserve-3d;}

.iphone-frame{width:320px;height:580px;padding:18px;background:linear-gradient(135deg,#e1e9f0 0%,#ffffff 45%,#ffffff 55%,#cfdbe6 100%);border-radius:50px;box-shadow:inset 0 0 4px 2px rgba(200,230,255,0.5),inset 0 0 0 6px #eaeff5,0 0 0 2px #b0c0d0,0 30px 60px rgba(0,0,0,0.8);position:relative;box-sizing:border-box;}
.btn-side{position:absolute;background:#ccd5e0;border-radius:2px 0 0 2px;box-shadow:inset -1px 0 2px rgba(0,0,0,0.2);}
.btn-silent{top:100px;left:-3px;width:3px;height:30px;}
.btn-vol-up{top:150px;left:-3px;width:3px;height:60px;}
.btn-vol-down{top:220px;left:-3px;width:3px;height:60px;}
.btn-power{top:180px;right:-3px;width:3px;height:90px;border-radius:0 2px 2px 0;}
.iphone-notch-container{position:absolute;top:18px;left:0;right:0;height:30px;display:flex;justify-content:center;z-index:10;pointer-events:none;}
.iphone-notch{width:130px;height:100%;background:#000;border-bottom-left-radius:16px;border-bottom-right-radius:16px;display:flex;align-items:center;justify-content:center;gap:8px;}
.camera-dot{width:8px;height:8px;background:#222;border-radius:50%;box-shadow:inset 0 0 2px #555;}
.speaker-grill{width:40px;height:4px;background:#222;border-radius:2px;}
.iphone-screen{width:100%;height:100%;background:#000;border-radius:35px;overflow:hidden;position:relative;border:4px solid #000;display:flex;align-items:center;justify-content:center;}
.iphone-screen img{width:96%;height:auto;max-height:98%;object-fit:contain;border-radius:12px;box-shadow:0 0 30px rgba(0,0,0,0.5);}

.about{flex:1;max-width:550px;min-width:500px;padding:60px;height:580px;display:flex;flex-direction:column;justify-content:center;}
.about__title{font-size:36px;font-weight:700;margin-bottom:24px;color:#fff;display:flex;align-items:center;gap:12px;}
.title-icon{color:var(--accent);}
.about__text.lead{font-size:22px;line-height:1.6;color:var(--muted);margin-bottom:32px;}
.about__features{display:flex;flex-direction:column;gap:24px;}
.feature-item{display:flex;align-items:flex-start;gap:16px;}
.feature-icon{font-size:30px;flex-shrink:0;padding-top:2px;}
.feature-item p{margin:0;font-size:18px;line-height:1.5;color:var(--muted);}
.feature-item strong{color:#fff;font-weight:600;}

.footer{padding-top:100px;padding-bottom:160px;background:#02040a;display:flex;justify-content:center;}
.footer__arc{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;opacity:0.5;}
.footerCols{display:flex;justify-content:center;gap:120px;text-align:center;width:100%;max-width:var(--wrap);position:relative;z-index:5;}
.footerCol{display:flex;flex-direction:column;gap:15px;align-items:center;}
.footerCol a,.footerCol button{color:#666;font-size:14px;font-weight:500;text-align:center;}
.footerCol a:hover,.footerCol button:hover{color:#fff;}

/* --- FULL PAGE AUTH MODAL --- */
.modal{border:none;padding:0;background:black;position:fixed;top:0;left:0;right:0;bottom:0;width:125vw;height:125vh;max-width:none;max-height:none;margin:0;opacity:0;transition:opacity 0.4s ease;overflow:hidden;}
.modal[open]{opacity:1;}
.modal::backdrop{background:black;}

.solid-box{background:#0b0d14;border:1px solid var(--stroke);border-radius:24px;box-shadow:0 40px 100px rgba(0,0,0,0.9),inset 0 0 0 1px rgba(255,255,255,0.05);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:10;padding:40px;width:min(700px,90vw);display:flex;flex-direction:column;align-items:center;margin:0;}

.modal__close{position:absolute;top:25px;right:30px;font-size:32px;color:var(--muted);cursor:pointer;}
.modal__close:hover{color:#fff;}

.auth-switch{position:relative;display:flex;background:rgba(255,255,255,0.05);border-radius:30px;padding:4px;margin-bottom:30px;border:1px solid var(--stroke);width:240px;}
.auth-switch__bg{position:absolute;top:4px;left:4px;bottom:4px;width:50%;background:var(--accent);border-radius:25px;transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1);opacity:0.2;}
.auth-switch__btn{flex:1;position:relative;z-index:2;font-size:14px;font-weight:600;color:var(--muted);padding:10px 0;transition:color 0.3s;}
.auth-switch__btn.active{color:#fff;text-shadow:0 0 10px rgba(79,226,255,0.6);}
.auth-switch.signup-mode .auth-switch__bg{transform:translateX(100%);background:var(--violet);}
.auth-switch.signup-mode .auth-switch__btn.active{text-shadow:0 0 10px rgba(160,92,255,0.6);}

.modal__content{width:100%;max-width:500px;transition:opacity 0.3s ease;}
.modal__title{font-size:32px;margin:0 0 10px;color:#fff;}
.modal__sub{font-size:16px;color:var(--muted);margin:0 0 30px;}
.modal__form{display:flex;flex-direction:column;gap:18px;width:100%;}
.input-group input{width:100%;height:54px;background:rgba(0,0,0,0.3);border:1px solid var(--stroke);border-radius:10px;padding:0 18px;color:#fff;outline:none;transition:0.2s;font-size:16px;}
.input-group input:focus{border-color:var(--accent);background:rgba(0,0,0,0.5);}
.signup-only{overflow:hidden;max-height:400px;opacity:1;transition:all 0.4s ease;}
.signup-only.hidden{max-height:0;opacity:0;margin:0;padding:0;border:none;}
.terms-label{font-size:13px;color:var(--muted);margin:0 0 8px;text-align:left;}
.terms-box{height:140px;background:rgba(0,0,0,0.5);border:1px solid var(--stroke);border-radius:10px;padding:12px;overflow-y:scroll;text-align:left;font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:12px;}
.terms-box p{margin-bottom:10px;}
.terms-box::-webkit-scrollbar{width:4px;}
.terms-box::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px;}
.terms-check{display:flex;align-items:center;gap:12px;cursor:pointer;text-align:left;margin-bottom:8px;}
.terms-check input{display:none;}
.check-box{width:20px;height:20px;border:1px solid var(--muted);border-radius:5px;background:rgba(255,255,255,0.05);display:flex;align-items:center;justify-content:center;transition:0.2s;}
.terms-check input:checked + .check-box{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(79,226,255,0.4);}
.terms-check input:checked + .check-box::after{content:"✔";color:#000;font-size:14px;font-weight:bold;}
.check-text{font-size:13px;color:var(--text);}
.modal__btn{width:100%;margin-top:15px;height:54px;font-size:16px;}

.modal-background-orbs{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.orb-wrapper{position:absolute;animation:moveX linear infinite alternate;}
.orb-inner{width:22px;height:22px;border-radius:50%;opacity:0.6;box-shadow:0 0 10px currentColor;mix-blend-mode:screen;animation:moveY ease-in-out infinite alternate;}
@keyframes moveX{from{transform:translateX(0);}to{transform:translateX(var(--distX));}}
@keyframes moveY{from{transform:translateY(0);}to{transform:translateY(var(--distY));}}

.orb-cyan{color:var(--cyan);background:var(--cyan);}
.orb-purple{color:var(--violet);background:var(--violet);}
.orb-white{color:#f3fdff;background:#f3fdff;}

@media (max-width:900px){
  .about{padding:30px;height:auto;}
  .iphone-frame{width:300px;height:580px;}
}
@media (max-width:800px){
  .verifiedCards{grid-template-columns:1fr;}
  .builtGrid{grid-template-columns:1fr;grid-auto-rows:240px;}
  .tile--a,.tile--b,.tile--c,.tile--d,.tile--e{grid-column:span 1;grid-row:auto;}
}

/* ==========================================================================
   PRICING, TEXT PAGES, & SIGNAL ROOM
   ========================================================================== */
.pricing-page{padding-top:100px;min-height:100vh;position:relative;overflow-x:hidden;}
.pricing-header{text-align:center;margin-bottom:60px;position:relative;z-index:2;}
.pricing-h1{font-size:clamp(36px,5vw,56px);font-weight:800;letter-spacing:-1px;margin-bottom:15px;}
.pricing-sub{font-size:18px;color:var(--muted);max-width:500px;margin:0 auto 40px;}
.billing-toggle{display:inline-flex;align-items:center;gap:12px;background:rgba(255,255,255,0.05);padding:6px 8px;border-radius:30px;border:1px solid var(--stroke);cursor:pointer;transition:0.2s;}
.billing-opt{font-size:13px;font-weight:600;color:var(--muted);transition:0.3s;}
.billing-opt.active{color:#fff;text-shadow:0 0 10px rgba(255,255,255,0.4);}
.toggle-switch{width:44px;height:24px;background:rgba(79,226,255,0.2);border-radius:20px;position:relative;transition:0.3s;border:1px solid rgba(79,226,255,0.4);}
.toggle-switch::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:0.3s cubic-bezier(0.4,0.0,0.2,1);box-shadow:0 2px 4px rgba(0,0,0,0.3);}
.billing-toggle.yearly-mode .toggle-switch{background:var(--accent);}
.billing-toggle.yearly-mode .toggle-switch::after{transform:translateX(20px);}
.billing-toggle.yearly-mode .opt-monthly{color:var(--muted);text-shadow:none;}
.billing-toggle.yearly-mode .opt-yearly{color:#fff;text-shadow:0 0 10px rgba(255,255,255,0.4);}
.save-badge{font-size:10px;background:rgba(160,92,255,0.2);color:var(--violet);padding:2px 6px;border-radius:4px;margin-left:4px;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1100px;margin:0 auto 80px;}
.price-card{background:rgba(11,15,23,0.7);border:1px solid var(--stroke);border-radius:20px;padding:32px;display:flex;flex-direction:column;position:relative;transition:transform 0.3s ease,border-color 0.3s ease;backdrop-filter:blur(10px);}
.price-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,0.2);box-shadow:0 20px 40px rgba(0,0,0,0.4);}
.price-card.popular{border-color:var(--accent);background:linear-gradient(180deg,rgba(79,226,255,0.05),rgba(11,15,23,0.9));box-shadow:0 0 30px rgba(79,226,255,0.1);}
.pop-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--accent);color:#000;font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;letter-spacing:0.5px;}
.price-card.investor{border-color:rgba(255,215,0,0.3);}
.text-gold{background:linear-gradient(135deg,#ffd700,#ffaa00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 20px rgba(255,215,0,0.2);}
.card-header{margin-bottom:24px;text-align:center;border-bottom:1px solid rgba(255,255,255,0.05);padding-bottom:24px;}
.tier-name{font-size:18px;font-weight:600;margin:0 0 10px;color:#fff;}
.tier-price{font-size:42px;font-weight:800;color:#fff;letter-spacing:-1px;}
.per-month{font-size:14px;color:var(--muted);font-weight:500;}
.tier-desc{font-size:13px;color:var(--muted);margin-top:10px;}
.billing-note{transition:opacity 0.3s;}
.btn--full{width:100%;margin-bottom:30px;}
.btn--outline{border:1px solid var(--stroke);color:#fff;background:transparent;}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,0.05);}
.feature-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px;text-align:left;}
.feature-list li{font-size:14px;color:var(--text);display:flex;align-items:flex-start;gap:10px;line-height:1.4;}
.feature-list li.disabled{color:rgba(255,255,255,0.3);}
.check{color:var(--accent);font-weight:bold;}
.cross{color:rgba(255,255,255,0.2);}
.faq-section{max-width:800px;text-align:center;margin-bottom:100px;}
.faq-title{font-size:28px;margin-bottom:40px;}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;text-align:left;}
.faq-item h4{color:#fff;margin:0 0 10px;font-size:16px;}
.faq-item p{color:var(--muted);font-size:14px;line-height:1.6;margin:0;}
.pricing-footer{margin-top:60px;border-top:1px solid rgba(255,255,255,0.05);padding-top:30px;font-size:12px;color:#555;line-height:1.6;}
.pricing-footer a{color:#777;text-decoration:underline;}
.price-blob-1{top:-30%;left:50%;transform:translateX(-50%);width:80%;height:60%;opacity:0.3;}
.referral-banner{background:linear-gradient(90deg,rgba(160,92,255,0.15),rgba(79,226,255,0.1));border:1px solid rgba(160,92,255,0.3);border-radius:12px;padding:16px 24px;display:flex;align-items:center;gap:16px;max-width:800px;margin:0 auto 50px;text-align:left;backdrop-filter:blur(10px);}
.ref-icon{font-size:24px;}
.ref-text{display:flex;flex-direction:column;gap:4px;}
.ref-text strong{color:#fff;font-size:15px;}
.ref-sub{font-size:13px;color:var(--muted);}
.modal-success-view{text-align:center;padding:20px 0;animation:fadeIn 0.5s ease;}
.success-icon{font-size:48px;margin-bottom:20px;display:block;}
.success-title{font-size:24px;font-weight:700;color:#fff;margin-bottom:10px;}
.success-sub{color:var(--muted);margin-bottom:30px;font-size:14px;}
.referral-box{background:rgba(255,255,255,0.05);border:1px dashed var(--accent);border-radius:10px;padding:15px;margin-bottom:25px;}
.referral-box p{margin:0;font-size:13px;color:#ddd;}
.referral-highlight{color:var(--accent);font-weight:700;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* --- THE SIGNAL ROOM (PING OF THE WEEK) --- */
body.potw-body { background-color: var(--void); font-family: 'Inter', sans-serif; overflow-x: hidden; min-height: 100vh; }
.aurora-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.4; animation: float 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1); }
.blob-1 { top: -10%; left: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%); }
.blob-2 { bottom: -10%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(255, 215, 0, 0.1), transparent 70%); animation-delay: -5s; }
.blob-3 { top: 40%; left: 40%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(16, 185, 129, 0.05), transparent 70%); animation-delay: -10s; }
@keyframes float { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(50px, 20px) scale(1.1); } }
.potw-wrap { max-width: 1200px; margin: 0 auto; padding: 120px 20px 80px; perspective: 1200px; }
.potw-header { text-align: center; margin-bottom: 4rem; }
.potw-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(180deg, #fff 0%, #666 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; }
.potw-meta { display: flex; justify-content: center; gap: 20px; font-family: 'Roboto Mono', monospace; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.live-indicator { display: flex; align-items: center; gap: 8px; color: var(--risk); }
.pulse-dot { width: 6px; height: 6px; background: var(--risk); border-radius: 50%; box-shadow: 0 0 10px var(--risk); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0.4; } }
.card-wrapper { position: relative; width: 300px; aspect-ratio: 2.5 / 3.8; perspective: 1000px; margin: 0 auto; transition: transform 0.1s; }
.hero-wrapper { width: 340px; }
.trading-card { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: rotateY(180deg); opacity: 0; animation: flipIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes flipIn { 0%{opacity:0; transform: rotateY(180deg) translateY(50px);} 100% {opacity:1; transform: rotateY(0deg) translateY(0);} }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 16px; border: 1px solid var(--border-neon); background: var(--matte); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8); overflow: hidden; }
.card-back { transform: rotateY(180deg); background: #080808; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 15px 15px; }
.card-face-inner { height: 100%; display: flex; flex-direction: column; }
.card-top { padding: 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-neon); background: rgba(255,255,255,0.01); }
.ticker-main { font-weight: 800; font-size: 1.4rem; color: #fff; letter-spacing: -1px; }
.score-badge { font-family: 'Roboto Mono'; font-size: 0.75rem; background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border-neon); }
.card-visual { height: 160px; border-bottom: 1px solid var(--border-neon); position: relative; background: #000; overflow: hidden; }
.card-details { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 12px; }
.det-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--muted); border-bottom: 1px dashed rgba(255,255,255,0.05); padding-bottom: 8px; }
.det-row:last-child { border: none; }
.det-val { color: #fff; font-weight: 600; font-family: 'Roboto Mono'; }
.card-bot { padding: 12px 16px; background: rgba(255,255,255,0.02); border-top: 1px solid var(--border-neon); font-size: 0.7rem; color: #666; line-height: 1.4; min-height: 50px;}

/* Generative Art */
.art-gold { perspective: 600px; display: flex; align-items: center; justify-content: center; height: 100%; background: radial-gradient(circle, rgba(255, 215, 0, 0.05), transparent 60%); }
.diamond-assembly { position: relative; width: 60px; height: 60px; transform-style: preserve-3d; animation: spin3D 8s linear infinite; }
.card-wrapper:hover .diamond-assembly { animation-duration: 2s; }
.face { position: absolute; width: 60px; height: 60px; background: rgba(255, 215, 0, 0.05); border: 1px solid rgba(255, 215, 0, 0.6); box-shadow: 0 0 15px rgba(255, 215, 0, 0.1); }
.f1 { transform: rotateY(0deg) translateZ(30px); } .f2 { transform: rotateY(90deg) translateZ(30px); }
.f3 { transform: rotateY(180deg) translateZ(30px); } .f4 { transform: rotateY(-90deg) translateZ(30px); }
.f5 { transform: rotateX(90deg) translateZ(30px); } .f6 { transform: rotateX(-90deg) translateZ(30px); }
@keyframes spin3D { 0% { transform: rotateX(0) rotateY(0); } 100% { transform: rotateX(360deg) rotateY(360deg); } }

/* WHALE: Sonar */
.art-whale { display: flex; align-items: center; justify-content: center; height: 100%; background: radial-gradient(circle, rgba(59, 130, 246, 0.05), transparent 70%); }
.sonar-ring { position: absolute; border: 1px solid var(--whale); border-radius: 50%; opacity: 0; animation: sonarWave 3s infinite linear; }
.s1 { animation-delay: 0s; } .s2 { animation-delay: 1s; } .s3 { animation-delay: 2s; }
@keyframes sonarWave { 0% { width: 10px; height: 10px; opacity: 0.8; border-width: 2px; } 100% { width: 140px; height: 140px; opacity: 0; border-width: 0px; } }

/* CLUSTER: Neural Net */
.art-cluster { display: flex; align-items: center; justify-content: center; height: 100%; background: radial-gradient(circle, rgba(16, 185, 129, 0.05), transparent 70%); }
.node-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; transform: rotate(45deg); }
.node { width: 6px; height: 6px; background: var(--cluster); border-radius: 50%; box-shadow: 0 0 10px var(--cluster); animation: pulseNode 2s infinite alternate; }
.n1{animation-delay:0s;} .n2{animation-delay:0.2s;} .n3{animation-delay:0.4s;} .n4{animation-delay:0.6s;} .n5{animation-delay:0.8s;}
@keyframes pulseNode { 0% { transform: scale(1); opacity: 0.3; } 100% { transform: scale(1.5); opacity: 1; } }

/* RISK: Glitch */
.art-risk { display: flex; align-items: center; justify-content: center; height: 100%; background: radial-gradient(circle, rgba(239, 68, 68, 0.05), transparent 70%); overflow: hidden; }
.glitch-bar { width: 80%; height: 2px; background: var(--risk); box-shadow: 0 0 10px var(--risk); position: relative; }
.glitch-bar::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--risk); animation: glitchAnim 2s infinite steps(2); }
@keyframes glitchAnim { 0% { transform: translate(0, 0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(5px, -5px); } 60% { transform: translate(-5px, 0); } 100% { transform: translate(0, 0); } }

/* Filter Bar & Grid */
.filter-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 3rem; flex-wrap: wrap; }
.filter-pill { background: var(--surface); border: 1px solid var(--border-neon); color: var(--muted); padding: 8px 16px; border-radius: 20px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 6px; }
.filter-pill:hover { border-color: #fff; color: #fff; }
.filter-pill.active { background: #fff; color: #000; font-weight: 600; border-color: #fff; }
.feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2.5rem; margin-top: 2rem; justify-items: center; }

/* Holographic Sheen */
.sheen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 55%, transparent 60%); z-index: 10; pointer-events: none; opacity: 0; transition: opacity 0.3s; mix-blend-mode: overlay; }
.card-wrapper:hover .sheen { opacity: 1; }

/* ==========================================================================
   FINAL POLISH: MODAL ANIMATIONS & DYNAMIC POTW THEMES
   ========================================================================== */

#tradeModal {
    background: rgba(0, 0, 0, 0.6) !important; 
    backdrop-filter: blur(8px) !important;
    opacity: 0;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

#tradeModal.active {
    opacity: 1;
    backdrop-filter: blur(12px) !important; 
}

.trade-modal-content {
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
}

#tradeModal.active .trade-modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* --- DYNAMIC PINGRHUE ENGINE --- */

/* 1. Base Variables for the entire card */
.glass-hero.theme-gold { --theme-color: #FFD700; --theme-shadow: rgba(255, 215, 0, 0.4); }
.glass-hero.theme-blue { --theme-color: #4fe2ff; --theme-shadow: rgba(79, 226, 255, 0.4); } /* Whale */
.glass-hero.theme-green { --theme-color: #10B981; --theme-shadow: rgba(16, 185, 129, 0.4); } /* Cluster */
.glass-hero.theme-red { --theme-color: #EF4444; --theme-shadow: rgba(239, 68, 68, 0.4); } /* Penny */
.glass-hero.theme-orange { --theme-color: #ff9f43; --theme-shadow: rgba(255, 159, 67, 0.4); } /* Basic */
.glass-hero.theme-docked { --theme-color: #ffffff; --theme-shadow: rgba(255, 255, 255, 0.4); border-color: rgba(255,255,255,0.3) !important; }
.theme-basic { --theme-color: #ff9f43; --theme-shadow: rgba(255, 159, 67, 0.4); }

/* 2. Hero Card Base (PINGRHUE Border Outline) */
.glass-hero {
  --theme-color: #4fe2ff; 
  --theme-shadow: rgba(79, 226, 255, 0.4);
  display: flex; align-items: center; gap: 50px;
  background: rgba(15, 20, 30, 0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: 24px; padding: 50px;
  border: 2px solid var(--theme-color) !important;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5), 0 0 40px var(--theme-shadow), inset 0 0 30px var(--theme-shadow) !important;
  margin-bottom: 80px;
  transition: all 0.5s ease;
  min-height: 420px;
}

/* Image Glow */
.hero-visual { flex: 0 0 40%; display: flex; justify-content: center; }
.wireframe-img { width: 100%; max-width: 300px; filter: drop-shadow(0 0 20px var(--theme-shadow)); animation: wireframePulse 4s ease-in-out infinite alternate; transition: filter 0.5s ease; }
@keyframes wireframePulse { 
    0% { filter: drop-shadow(0 0 15px var(--theme-shadow)); transform: scale(1); } 
    100% { filter: drop-shadow(0 0 35px var(--theme-color)); transform: scale(1.02); } 
}

.hero-content { flex: 1; display: flex; flex-direction: column; }

/* --- Hero Dropdown Styling --- */
.hero-label-wrap {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px;
    font-size: 14px; font-weight: 600; letter-spacing: 2px;
    color: var(--theme-color); transition: color 0.5s ease;
}
.glass-hero:not(.docked-mode) .hero-label-wrap { justify-content: flex-start; }

.select-wrapper { position: relative; display: inline-block; }
.hero-select {
    appearance: none; -webkit-appearance: none;
    background: transparent; border: none; color: inherit;
    font-family: inherit; font-size: inherit; font-weight: 700;
    letter-spacing: 2px; text-transform: uppercase;
    padding-right: 20px; cursor: pointer; outline: none;
    text-shadow: 0 0 10px var(--theme-shadow);
    border-bottom: 2px solid transparent; transition: all 0.3s ease;
}
.hero-select:hover { border-bottom-color: currentColor; opacity: 0.8; }
.select-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-55%); font-size: 10px; pointer-events: none; }
.hero-select option { background-color: #0b0d14; color: #fff; padding: 10px; font-weight: 600; text-shadow: none; }
.hero-select option[disabled] { color: #666; font-style: italic; }

/* Docked State Overrides & Styling */
.glass-hero.docked-mode .hero-visual { display: none; }
.glass-hero.docked-mode .hero-content { align-items: center; justify-content: center; width: 100%; text-align: center; }

#whalesDockedState {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 15px;
}
#whalesDockedState img {
    width: 110%; max-width: 500px; height: auto; opacity: 0.9; margin-bottom: 10px;
    filter: drop-shadow(0 0 40px rgba(255,255,255,0.25));
}
#whalesDockedState h2 { margin: 0 0 12px 0; font-size: 32px; color: #fff; letter-spacing: -0.5px; }
#whalesDockedState p { color: var(--muted); margin: 0 0 30px 0; max-width: 450px; font-size: 15px; line-height: 1.6; }

/* Target Text Elements */
.hero-ticker { font-size: 80px; font-weight: 800; line-height: 1; margin-bottom: 30px; letter-spacing: -1px; color: var(--theme-color); text-shadow: 0 0 25px var(--theme-shadow); transition: all 0.5s ease; }

.hero-data-grid { display: grid; grid-template-columns: auto 1fr; gap: 15px 30px; margin-bottom: 35px; width: 100%; }
.data-label { font-size: 14px; color: rgba(255,255,255,0.5); text-transform: uppercase; font-weight: 500; align-self: center; }

/* 3. Stats Data */
.data-value { font-size: 20px; font-weight: 700; text-align: right; color: #fff; }
.mono-val { font-family: 'Roboto Mono', monospace; }

/* 4. Score and Value */
.glass-hero .accent-val { 
    color: var(--theme-color) !important; 
    text-shadow: 0 0 15px var(--theme-shadow) !important; 
    transition: all 0.5s ease; 
}

/* 5. View Signal Button */
.status-badge { 
    display: inline-block; text-align: center; padding: 14px 0; 
    background: rgba(0,0,0,0.4) !important; 
    border: 1px solid var(--theme-color) !important; 
    color: var(--theme-color) !important; 
    font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 14px; border-radius: 8px; 
    box-shadow: inset 0 0 15px var(--theme-shadow), 0 0 15px var(--theme-shadow) !important; 
    transition: all 0.5s ease; cursor: pointer; width: 100%; 
}
.status-badge:hover { 
    background: var(--theme-color) !important; 
    color: #000 !important; 
    box-shadow: 0 0 25px var(--theme-color) !important; 
}

/* =========================================
   HOT SIGNALS GRID: "PIPING HOT" EDITION
   ========================================= */
.recent-section h3 { font-size: 22px; color: rgba(255,255,255,0.8); margin-bottom: 30px; font-weight: 700; letter-spacing: 1px; display: flex; align-items: center; gap: 10px; }
.recent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

/* The Card Base */
.recent-card { 
    position: relative; overflow: hidden;
    background: rgba(15, 20, 30, 0.5); backdrop-filter: blur(16px); 
    border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; 
    padding: 35px 40px; display: flex; align-items: center; gap: 30px; 
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    cursor: pointer; box-shadow: 0 10px 30px rgba(0,0,0,0.2); 
}

.recent-card::before {
    content: ""; position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-20deg); transition: left 0.7s ease; z-index: 10; pointer-events: none;
}
.recent-card:hover::before { left: 150%; }

@keyframes thermalPulse {
    0% { box-shadow: inset 0 0 10px transparent, 0 10px 30px rgba(0,0,0,0.2); }
    50% { box-shadow: inset 0 0 30px var(--theme-shadow), 0 20px 50px var(--theme-shadow); border-color: var(--theme-color); }
    100% { box-shadow: inset 0 0 10px transparent, 0 10px 30px rgba(0,0,0,0.2); }
}
.recent-card:hover { transform: translateY(-5px); background: rgba(15, 20, 30, 0.9); animation: thermalPulse 2s infinite; }

.sizzle-layer { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.3s; }
.recent-card:hover .sizzle-layer { opacity: 1; }
.particle { position: absolute; bottom: -10px; width: 3px; height: 3px; background: var(--theme-color); border-radius: 50%; filter: blur(1px); animation: floatUp 2s infinite ease-in; opacity: 0; }
.p1 { left: 20%; animation-duration: 2.2s; animation-delay: 0.1s; }
.p2 { left: 50%; width: 4px; height: 4px; animation-duration: 1.8s; animation-delay: 0.4s; }
.p3 { left: 80%; animation-duration: 2.5s; animation-delay: 0.2s; }
.p4 { left: 35%; width: 2px; height: 2px; animation-duration: 1.5s; animation-delay: 0.7s; }
@keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-80px) scale(0); opacity: 0; } }

.recent-visual { position: relative; z-index: 2; }
.recent-visual img { width: 110px; opacity: 0.9; transition: transform 0.4s ease; filter: drop-shadow(0 0 10px var(--theme-shadow)); }
.recent-card:hover .recent-visual img { transform: scale(1.1) translateY(-5px); filter: drop-shadow(0 0 25px var(--theme-color)); }

.recent-info { flex: 1; position: relative; z-index: 2; }

.fresh-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--theme-color); letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase; background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--theme-shadow); box-shadow: 0 0 15px rgba(0,0,0,0.5); }
.fresh-pulse { width: 6px; height: 6px; background: var(--theme-color); border-radius: 50%; box-shadow: 0 0 10px var(--theme-color); animation: urgentBlink 1s infinite; }
@keyframes urgentBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.8); } }

.recent-score { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 2px; display: block; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.recent-ticker { font-size: 32px; font-weight: 800; letter-spacing: -1px; color: var(--theme-color); text-shadow: 0 0 15px var(--theme-shadow); line-height: 1; }

.heat-container { margin-top: 14px; }
.heat-label { font-size: 9px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; display: flex; justify-content: space-between; font-weight: 700;}
.heat-bg { width: 100%; height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; position: relative; }
.heat-fill { height: 100%; background: var(--theme-color); border-radius: 2px; box-shadow: 0 0 15px var(--theme-color); transition: width 1.5s cubic-bezier(0.2, 0.8, 0.2, 1); width: 0%; }

/* Apply Grid Theme Variables directly to the borders too */
.theme-blue { --theme-color: #4fe2ff; --theme-shadow: rgba(79, 226, 255, 0.4); border-color: rgba(79, 226, 255, 0.15); } 
.theme-red { --theme-color: #EF4444; --theme-shadow: rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 0.15); } 
.theme-green { --theme-color: #10B981; --theme-shadow: rgba(16, 185, 129, 0.4); border-color: rgba(16, 185, 129, 0.15); } 
.theme-orange { --theme-color: #ff9f43; --theme-shadow: rgba(255, 159, 67, 0.4); border-color: rgba(255, 159, 67, 0.15); } 
.theme-gold { --theme-color: #FFD700; --theme-shadow: rgba(255, 215, 0, 0.4); border-color: rgba(255, 215, 0, 0.15); } 

@media (max-width: 768px) { 
    .glass-hero { flex-direction: column; text-align: center; gap: 30px; padding: 30px; } 
    .hero-data-grid { grid-template-columns: 1fr; gap: 10px; } 
    .data-value { text-align: center; } 
    .recent-grid { grid-template-columns: 1fr; }
    .recent-card { padding: 25px; flex-direction: column; text-align: center; }
}

@keyframes pulseDormant {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* --- FIX FOR POTW LOADER CENTERING --- */
#loader-overlay, .loader-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* ==========================================================================
   THE SPATIAL TERMINAL (ECLIPSE HUD) - THE APPLE LEDGER
   ========================================================================== */

/* 1. Dashboard Base (Pure Charcoal) */
.pingr-dash-body {
    background-color: var(--dash-bg); 
    color: #fff;
    font-family: 'Inter', sans-serif;
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 2. AMBIENT MESH LIGHTING (The Aurora) */
#ambient-mesh {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background: var(--dash-bg);
}
.mesh-light {
    position: absolute;
    border-radius: 50%;
    filter: blur(180px); /* Extreme blur makes it look like ambient lighting */
    opacity: 0.25; /* Very subtle and inconspicuous */
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mesh-cyan {
    width: 60vw; height: 60vw;
    background: var(--cyan);
    top: -15vh; left: -10vw;
}
.mesh-purple {
    width: 70vw; height: 70vw;
    background: var(--violet);
    bottom: -20vh; right: -10vw;
}

/* Ensure UI stays entirely above the orbs */
.spatial-core, .archive-header {
    position: relative;
    z-index: 10; 
}

/* 3. Command Island */
.command-island {
    position: fixed; top: 25px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 1200px;
    background: rgba(13, 15, 18, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(0,0,0,0.8);
    border-radius: 100px; padding: 10px 30px; display: flex; align-items: center; justify-content: space-between;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8);
    z-index: 100000 !important;
    transition: max-width 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s cubic-bezier(0.4,0,0.2,1), width 0.4s cubic-bezier(0.4,0,0.2,1);
}
/* When not on feed — shrink to a minimal logo + bell pill */
.command-island.island-minimal {
    max-width: 280px;
    padding: 10px 20px;
    width: auto;
}
.island-search {
    display: flex; align-items: center; gap: 10px; flex: 1; margin: 0 30px;
    color: var(--muted);
    transition: opacity 0.3s ease, max-width 0.35s ease, margin 0.35s ease;
    overflow: hidden; max-width: 600px;
}
.island-minimal .island-search { opacity: 0; max-width: 0; margin: 0; pointer-events: none; }
.island-search input { background: transparent; border: none; color: #fff; font-family: 'Inter', sans-serif; font-size: 13px; width: 100%; outline: none; }
.island-search input::placeholder { color: rgba(255,255,255,0.3); }

/* Color-Coded Filters */
.island-filters { display: flex; background: rgba(0,0,0,0.4); padding: 4px; border-radius: 30px; border-top: 1px solid rgba(0,0,0,0.8); border-bottom: 1px solid rgba(255,255,255,0.05); transition: opacity 0.3s ease, max-width 0.35s cubic-bezier(0.4,0,0.2,1), margin 0.35s ease, padding 0.35s ease; overflow: hidden; max-width: 900px; }
.island-filters.filters-hidden { opacity: 0; max-width: 0; margin: 0; padding: 0; pointer-events: none; }
.island-btn-hot { background: linear-gradient(135deg, rgba(255, 159, 67, 0.15), rgba(255, 69, 58, 0.15)); border: 1px solid rgba(255, 159, 67, 0.4); color: var(--orange); padding: 8px 16px; border-radius: 20px; font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(255, 159, 67, 0.1); max-width: 200px; overflow: hidden; opacity: 1; }
.island-btn-hot.filters-hidden { max-width: 0; opacity: 0; padding: 0; margin: 0; border: none; pointer-events: none; }
.island-pill { padding: 6px 16px; border-radius: 20px; font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono', monospace; cursor: pointer; color: rgba(255,255,255,0.5); transition: 0.3s; text-transform: uppercase; white-space: nowrap; }
.island-pill:hover { color: #fff; }
.island-pill.active[data-filter="all"] { background: rgba(255,255,255,0.1); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.island-pill[data-filter="whale"].active { background: rgba(74, 134, 255, 0.2); color: var(--blue); border-color: var(--blue); }
.island-pill[data-filter="cluster"].active { background: rgba(16, 185, 129, 0.2); color: var(--cluster); border-color: var(--cluster); }
.island-pill[data-filter="basic"].active { background: rgba(255, 159, 67, 0.2); color: var(--orange); border-color: var(--orange); }
.island-pill[data-filter="penny"].active { background: rgba(239, 68, 68, 0.2); color: var(--risk); border-color: var(--risk); }
.island-pill[data-filter="golden"].locked-pill { color: var(--gold); opacity: 0.7; cursor: not-allowed; display: flex; align-items: center; gap: 6px; }
.island-pill[data-filter="golden"].locked-pill:hover { opacity: 1; background: rgba(255, 215, 0, 0.1); }

.island-status { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--cluster); display: flex; align-items: center; gap: 6px; padding-left: 20px; font-weight: 800; }

.island-btn-hot {
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.15), rgba(255, 69, 58, 0.15));
    border: 1px solid rgba(255, 159, 67, 0.4);
    color: var(--orange);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 159, 67, 0.1);
}
.island-btn-hot:hover {
    background: linear-gradient(135deg, rgba(255, 159, 67, 0.25), rgba(255, 69, 58, 0.25));
    color: #fff;
    border-color: #ff9f43;
    box-shadow: 0 0 20px rgba(255, 159, 67, 0.25);
    transform: translateY(-1px);
}

/* 4. Core Layout (Centered Column) */
.spatial-core { max-width: 1400px; margin: 0 auto; padding: 120px 20px 160px 20px; transition: padding-top 0.35s ease; }
.spatial-core.no-filter-bar { padding-top: 100px; }
.dash-view { display: none; animation: fadeInPage 0.4s ease forwards; }
.dash-view.active { display: block; }
@keyframes fadeInPage { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

.archive-layout {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

.archive-header {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 20px;
}
.archive-title {
    font-size: clamp(48px, 6vw, 72px); /* Much bigger and responsive */
    font-weight: 800;
    letter-spacing: -2px; /* Tighter tracking for a premium look */
    margin: 0 0 10px 0;
    background: linear-gradient(180deg, #ffffff 0%, #888888 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)); /* Adds depth */
}
.archive-sub {
    font-size: 16px;
    color: var(--muted);
    margin: 0;
}

/* 5. THE INFINITE LEDGER (MATTE DATA BLADES) */
.firehose-monolith { display: flex; flex-direction: column; padding-bottom: 200px; }

/* Update the container to act as a "box" for the threads */
.data-blade {
    position: relative;
    padding: 24px 20px 24px 45px; /* Added room on the left */
    margin-bottom: 8px;
    background: #12141a;
    border-radius: 4px;
    transition: all 0.3s ease;
    overflow: hidden; /* THIS KILLS THE LONG STRING THREADS */
}

/* Fix the vertical 'Filing' line so it stays inside the blade */
.data-blade::before {
    content: "";
    position: absolute;
    left: 15px; /* Position inside the left padding */
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 10px;
    background: currentColor; /* Inherits the row color automatically */
}

.data-blade:hover {
    background: #1a1d24; 
    transform: translateX(4px);
    box-shadow: -5px 10px 30px rgba(0,0,0,0.5);
}

/* Re-lock the lanes so Ticker, Value, and Score never overlap */
.blade-header {
    display: grid;
    grid-template-columns: 1fr 1fr 120px; 
    align-items: center;
    gap: 20px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Ensure the right-hand column (Score/Time) stays pinned to the right */
.pc-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Keeps score/time right-aligned */
    justify-content: center;
    text-align: right;
    min-width: 120px;
}

.pc-left { display: flex; flex-direction: column; gap: 4px; }
.pc-ticker { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.5px; }
.pc-comp { font-size: 13px; color: var(--muted); }

.pc-mid { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.pc-val { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: #fff; }
.pc-tag { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 4px; background: transparent; border: 1px solid rgba(255,255,255,0.1); }

.pc-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }

/* The Expanding Intelligence Dossier */
.blade-expansion {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
    background: #0d0f14; /* Inset darker charcoal */
    border-radius: 8px;
    margin: 0;
    border: 1px solid transparent;
}

.data-blade:hover .blade-expansion {
    max-height: 600px; 
    opacity: 1;
    margin-top: 20px;
    border-color: rgba(255,255,255,0.05);
}

.expansion-content {
    padding: 25px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.expansion-text {
    flex: 1;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
    line-height: 1.7;
}

.expansion-ai-label {
    font-size: 11px;
    color: var(--cyan);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-dot { width: 6px; height: 6px; background: var(--cyan); border-radius: 50%; }

.expansion-chart-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

.expansion-chart-btn:hover {
    background: var(--cyan);
    color: #000;
    border-color: var(--cyan);
}

/* Blade Color Accents */
.data-blade.row-whale { color: var(--blue); }
.data-blade.row-whale .pc-tag { color: var(--blue); border-color: rgba(74, 134, 255, 0.3); }
.data-blade.row-whale .pc-val { color: var(--blue); }
.data-blade.row-whale .ai-dot { background: var(--blue); }
.data-blade.row-whale .expansion-ai-label { color: var(--blue); }

.data-blade.row-cluster { color: var(--cluster); }
.data-blade.row-cluster .pc-tag { color: var(--cluster); border-color: rgba(16, 185, 129, 0.3); }
.data-blade.row-cluster .pc-val { color: var(--cluster); }
.data-blade.row-cluster .ai-dot { background: var(--cluster); }
.data-blade.row-cluster .expansion-ai-label { color: var(--cluster); }

.data-blade.row-penny { color: var(--risk); }
.data-blade.row-penny .pc-tag { color: var(--risk); border-color: rgba(239, 68, 68, 0.3); }
.data-blade.row-penny .pc-val { color: var(--risk); }
.data-blade.row-penny .ai-dot { background: var(--risk); }
.data-blade.row-penny .expansion-ai-label { color: var(--risk); }

.data-blade.row-golden { color: var(--gold); }
.data-blade.row-golden .pc-tag { color: var(--gold); border-color: rgba(255, 215, 0, 0.3); }
.data-blade.row-golden .pc-val { color: var(--gold); text-shadow: 0 0 10px rgba(255,215,0,0.3); }
.data-blade.row-golden .ai-dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.data-blade.row-golden .expansion-ai-label { color: var(--gold); }

.data-blade.row-basic { color: var(--orange); }
.data-blade.row-basic .pc-tag { color: var(--orange); border-color: rgba(255, 159, 67, 0.3); }

/* Make the new Score button look sick */
.pc-btn {
    color: inherit !important; 
    text-shadow: 0 0 15px currentColor;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    font-size: 20px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.pc-btn span {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.5;
    text-shadow: none;
}

.data-blade.row-redacted { border-left-color: #333; filter: grayscale(1); opacity: 0.5; cursor: not-allowed; }
.data-blade.row-redacted:hover .blade-expansion { max-height: 0; opacity: 0; padding: 0; border: none; margin: 0; } 

/* 6. THE ORGANIC PAYWALL FADE */
.abyss-paywall {
    position: relative;
    margin-top: -180px; 
    height: 450px;
    background: linear-gradient(to bottom, transparent, var(--dash-bg) 50%, var(--dash-bg) 100%);
    display: flex;
    align-items: flex-end; 
    justify-content: center;
    padding-bottom: 60px; 
    z-index: 10;
}
.abyss-terminal {
    text-align: center;
    padding: 50px 40px;
    width: 100%;
    max-width: 480px;
    background: #090c14; 
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-top: 3px solid #D4AF37;
    border-radius: 12px;
    box-shadow: 0 40px 80px rgba(0,0,0,0.9), inset 0 0 30px rgba(212, 175, 55, 0.05);
}
.abyss-title { color: #fff; font-size: 24px; font-weight: 800; margin: 0 0 10px; }
.abyss-desc { color: var(--muted); font-size: 14px; margin-bottom: 30px; line-height: 1.6; max-width: 500px; margin-left: auto; margin-right: auto; }
.btn-gold-abyss {
    background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
    color: #000;
    padding: 16px 30px;
    border-radius: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s;
    text-decoration: none;
    display: block;
    width: 100%;
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}
.btn-gold-abyss:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4); }

/* 7. MASTER DOCK (BOTTOM NAVIGATION) */
.dash-footer-bar { position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); z-index: 99999; }
.floating-dock { background: rgba(13, 15, 18, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 100px; padding: 8px 16px; display: flex; gap: 15px; border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(0,0,0,0.8); box-shadow: 0 20px 40px rgba(0,0,0,0.8); }
.dock-item { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); transition: 0.3s; cursor: pointer; background: transparent; border: 1px solid transparent; }
.dock-item:hover { color: #fff; background: rgba(255,255,255,0.05); transform: translateY(-3px); }
.dock-item.active { color: var(--cyan); background: rgba(79, 226, 255, 0.1); border-color: rgba(79, 226, 255, 0.2); }

/* Dashboard Pages & Routing */
.page-header { margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 20px; margin-top: 20px; }
.page-title { font-size: 32px; font-weight: 800; letter-spacing: -1px; margin: 0 0 10px 0; color: #fff; }
.page-sub { color: var(--muted); font-size: 15px; margin: 0; }
.dash-search { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; outline: none; }
.dash-search:focus { border-color: var(--cyan); }

/* Radar (Watchlist) Components */
.radar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
.radar-card {
    background: rgba(22, 28, 40, 0.85); border: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(0,0,0,0.6);
    border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 15px;
    backdrop-filter: blur(16px); transition: 0.3s ease; box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}
.radar-card:hover { transform: translateY(-3px); background: rgba(28, 35, 50, 0.95); }
.radar-card-header { display: flex; justify-content: space-between; align-items: center; }
.radar-ticker { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -1px; }
.radar-remove { background: none; border: none; color: var(--muted); font-size: 20px; cursor: pointer; transition: 0.3s; line-height: 1; }
.radar-remove:hover { color: var(--risk); transform: scale(1.2); }
.radar-status { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); text-transform: uppercase; font-weight: 700; letter-spacing: 1px; }

/* Vault View */
.vault-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; margin-bottom: 15px; }
.v-stat-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5); }
.v-label { font-size: 11px; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; font-weight: 600; }
.v-value { font-size: 24px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: #fff; }
.v-hold-card { background: rgba(15,20,30,0.8); border: 1px solid rgba(255,215,0,0.2); border-left: 3px solid var(--gold); border-radius: 6px; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.v-hold-left { display: flex; flex-direction: column; gap: 4px; }
.v-hold-ticker { font-size: 18px; font-weight: 800; color: #fff; }
.v-hold-size { font-size: 14px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.v-hold-right { text-align: right; display: flex; flex-direction: column; gap: 6px; align-items: flex-end;}
.v-hold-days { font-size: 12px; font-weight: 700; color: var(--cyan); }
.v-hold-bar-bg { width: 120px; height: 6px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.v-hold-bar-fill { height: 100%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

/* =========================================
   POTW REDESIGN: SLIDESHOW & CENTRALIZED HERO
   ========================================= */

/* New Warm, Inviting Font for the Main Title */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;800&display=swap');

.potw-main-header {
    text-align: center;
    /* Tightened from 40px to 20px to connect the title and box better */
    margin-bottom: 20px;
}

.potw-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 800;
    letter-spacing: -1px;
    margin: 0;
    text-transform: uppercase;
    transition: color 0.5s ease, text-shadow 0.5s ease;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Dynamically glows based on JS state */
.potw-main-title[class*="theme-"] {
    color: var(--theme-color);
    text-shadow: 0 0 35px var(--theme-shadow), 0 0 15px rgba(255,255,255,0.2);
}
.potw-main-title.theme-docked {
    color: #fff;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Carousel Wrapper (Places Arrows Outside) */
.hero-carousel-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px; 
    max-width: 1050px;
    margin: 0 auto 80px auto;
    position: relative;
}

/* Centralized and shortened hero box */
.glass-hero {
    flex: 1;
    max-width: 850px; 
    position: relative;
    padding: 40px 50px; 
    min-height: 360px; /* Shortened */
    overflow: hidden; 
    margin-bottom: 0 !important; /* Margin handled by wrapper */
}

/* Sleek White Navigation Arrows */
.carousel-arrow {
    background: transparent;
    border: none;
    color: #ffffff; 
    opacity: 0.5;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}

.carousel-arrow svg {
    width: 48px;
    height: 48px;
    transition: transform 0.3s ease;
}

.carousel-arrow:hover {
    opacity: 1;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.8));
}

.arrow-left:hover svg { transform: translateX(-6px) scale(1.1); }
.arrow-right:hover svg { transform: translateX(6px) scale(1.1); }

/* Slide Container */
.hero-slide-container {
    display: flex;
    align-items: center;
    gap: 50px;
    width: 100%;
    height: 100%;
}

.hero-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* PERFECTLY CENTERED CONTENT */
}

/* --- Slide Animations --- */
.slide-out-left { opacity: 0; transform: translateX(-50px); transition: all 0.3s ease; }
.slide-out-right { opacity: 0; transform: translateX(50px); transition: all 0.3s ease; }
.slide-in-from-right { animation: slideInRight 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.slide-in-from-left { animation: slideInLeft 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Locked Overlay Inside Card */
.locked-slide-state {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15;
    background: rgba(15, 20, 30, 0.8);
    backdrop-filter: blur(12px); 
    text-align: center;
    animation: fadeIn 0.3s ease;
}

.lock-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    max-width: 400px;
    padding: 30px;
}
.golden-lock-icon { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.5)); margin-bottom: 10px; }
.locked-slide-state h3 { color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; margin: 0; }
.locked-slide-state p { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0 0 15px 0; }

.btn-gold-solid {
    background: linear-gradient(135deg, #FFD700 0%, #B8860B 100%);
    color: #000; font-weight: 800; padding: 12px 30px; border-radius: 8px; text-transform: uppercase; letter-spacing: 1px; border: none; box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2); transition: all 0.2s; text-decoration: none; display: inline-block;
}
.btn-gold-solid:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(212, 175, 55, 0.4); color: #000; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .hero-carousel-wrapper { display: block; position: relative; }
    .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); }
    .arrow-left { left: 0; }
    .arrow-right { right: 0; }
    .glass-hero { padding: 40px 20px; }
}
/* ==========================================================================
   SIGNAL SOCIAL BAR & TOAST NOTIFICATIONS
   ========================================================================== */
.signal-social-bar {
  display: flex; justify-content: center; align-items: center; gap: 2.5rem;
  margin-top: 1.5rem; padding: 1rem 0 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  width: 100%;
}

.social-btn {
  background: none; border: none; color: #666; 
  display: flex; align-items: center; gap: 0.5rem;
  font-family: 'Roboto Mono', monospace; font-size: 0.9rem; font-weight: 500;
  cursor: pointer; transition: all 0.3s ease;
}

.social-btn svg { width: 22px; height: 22px; transition: all 0.3s ease; }

.social-btn:hover { color: var(--theme-color); }
.social-btn:hover svg { filter: drop-shadow(0 0 8px var(--theme-shadow)); transform: translateY(-2px); }

.social-btn.active { color: var(--theme-color); }
.social-btn.active svg {
  fill: var(--theme-shadow); stroke: var(--theme-color);
  filter: drop-shadow(0 0 12px var(--theme-shadow));
}

.toast {
  position: fixed; bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(10, 15, 20, 0.95); border: 1px solid #00d4ff; color: #fff;
  padding: 12px 24px; border-radius: 8px; font-family: 'Inter', sans-serif;
  font-size: 0.9rem; box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
  opacity: 0; pointer-events: none;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 10000;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast-classified {
  color: #00d4ff; font-family: 'Roboto Mono', monospace; font-size: 0.8rem;
  display: block; margin-top: 4px;
}
/* ==========================================================================
   COMMENT SECTION & TIER TAGS
   ========================================================================== */
.comment-item {
    display: flex; flex-direction: column; gap: 6px;
    background: rgba(255,255,255,0.02); padding: 16px;
    border-radius: 10px; border-left: 2px solid var(--theme-color);
    animation: fadeIn 0.3s ease forwards;
}
.comment-header { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.comment-user { color: #fff; font-weight: 700; letter-spacing: 0.5px; }

/* Tier Tags */
.tier-tag { 
    font-family: 'JetBrains Mono', monospace; font-size: 9px; 
    font-weight: 800; padding: 2px 8px; border-radius: 4px; 
    letter-spacing: 1px; text-transform: uppercase;
}
.tier-free { background: rgba(255,255,255,0.05); color: #aaa; border: 1px solid rgba(255,255,255,0.1); }
.tier-pro { background: rgba(79, 226, 255, 0.1); color: var(--cyan); border: 1px solid rgba(79, 226, 255, 0.3); box-shadow: 0 0 10px rgba(79, 226, 255, 0.2); }
.tier-investor { background: rgba(255, 215, 0, 0.1); color: var(--gold); border: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 0 10px rgba(255, 215, 0, 0.2); }

.comment-time { color: var(--muted); font-size: 11px; margin-left: auto; }
.comment-text { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 1.6; }

/* Input Area */
.comment-input-wrap { display: flex; gap: 12px; width: 100%; }
.comment-input { 
    flex: 1; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); 
    color: #fff; padding: 14px; border-radius: 8px; font-family: 'Inter', sans-serif; 
    resize: none; outline: none; transition: 0.3s; font-size: 14px;
}
.comment-input:focus { border-color: var(--theme-color); box-shadow: 0 0 15px var(--theme-shadow); }
.comment-submit { 
    background: var(--theme-color); color: #000; font-weight: 800; 
    border: none; padding: 0 24px; border-radius: 8px; cursor: pointer; 
    transition: 0.3s; text-transform: uppercase; font-size: 13px; letter-spacing: 1px;
}
.comment-submit:hover { filter: brightness(1.2); box-shadow: 0 0 20px var(--theme-shadow); }

/* Login Prompt */
.login-prompt-msg { 
    text-align: center; padding: 20px; background: rgba(255,255,255,0.02); 
    border-radius: 8px; border: 1px dashed rgba(255,255,255,0.2); 
}
.login-prompt-msg p { color: var(--muted); font-size: 14px; margin: 0 0 15px 0; }
/* ==========================================================================
   AUTH MODAL - STEP 2 SURVEY
   ========================================================================== */
.skip-btn {
    position: absolute;
    top: -10px;
    right: 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.skip-btn:hover {
    color: #fff;
}

.survey-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.survey-opt {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.survey-opt:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--cyan);
    color: #fff;
    transform: translateY(-2px);
}
/* ===== FIX POTW STACKING / CENTERING (force one-by-one) ===== */

#potw-preview.potwPreview.centered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

#potw-preview .potwPreview__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  /* ensures consistent spacing between each item */
  gap: 14px !important;
}

#potw-preview .potwPreview__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;
}

#potw-preview .potwPreview__title,
#potw-preview .potwPreview__sub,
#potw-preview .potwPreview__foot {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* keep image centered + prevent weird float/inline alignment */
#potw-preview .potwPreview__visual {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  margin: 0 !important;
}

#potw-preview .potwPreview__visual img {
  display: block !important;
  margin: 0 auto !important;
}

/* keep CTA centered */
#potw-preview .potwPreview__cta {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 !important;
}
/* ===== POTW – Centered, Slightly Smaller, Glow Preserved ===== */

#potw-preview.potwPreview.centered{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Vertical stack */
#potw-preview .potwPreview__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  gap: 10px;              /* slightly tighter */
  max-width: 900px;       /* scale whole section down slightly */
}

/* Header scaling down slightly */
#potw-preview .potwPreview__title{
  font-size: clamp(1.9rem, 2.2vw, 2.3rem);
}

#potw-preview .potwPreview__sub{
  font-size: .9rem;
  opacity: .85;
}

/* Image container */
#potw-preview .potwPreview__visual{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  margin: 6px 0;
}

/* SCALE IMAGE DOWN SLIGHTLY */
#potw-preview .potwPreview__visual img{
  width: 82%;              /* smaller than before */
  max-width: 760px;
  height:auto;
  display:block;

  /* Restore rich glow */
  filter:
    drop-shadow(0 18px 46px rgba(79,226,255,.34))
    drop-shadow(0 0 28px rgba(79,226,255,.22));
}

/* Restore bloom under card */
#potw-preview .potwPreview__visual::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  width:85%;
  height:130px;

  background: radial-gradient(
    ellipse at center,
    rgba(79,226,255,.55) 0%,
    rgba(79,226,255,.28) 40%,
    transparent 72%
  );

  filter: blur(36px);
  opacity:.8;
  pointer-events:none;
  z-index:1;

  animation: potwBloomPulse 4s ease-in-out infinite;
}

/* Slightly calmer pulse */
@keyframes potwBloomPulse{
  0%   { opacity:.6; transform:translateX(-50%) scale(.98); }
  50%  { opacity:1;  transform:translateX(-50%) scale(1.05); }
  100% { opacity:.6; transform:translateX(-50%) scale(.98); }
}

/* CTA centered cleanly */
#potw-preview .potwPreview__cta{
  display:flex;
  justify-content:center;
  margin-top:4px;
}
/* ==========================================
   MINI LEGAL – Tight Pro Tip Capsule
   ========================================== */

.legal-mini{
  padding: 20px 0; /* ~20px from sections above/below */
}

.legal-mini__inner{
  display: flex;
  justify-content: center;
}

.legal-mini__box{
  display: flex;
  align-items: center;      /* whale + text centered vertically */
  gap: 14px;                /* MUCH less spacing */

  max-width: 1050px;
  width: 100%;

  padding: 14px 18px;       /* tighter box */
  border-radius: 14px;

  background: rgba(18,26,40,.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(79,226,255,.18);

  box-shadow:
    0 0 26px rgba(79,226,255,.07),
    inset 0 0 18px rgba(79,226,255,.05);
}

.legal-mini__whale{
  flex: 0 0 64px;           /* whale lives inside box */
  display: flex;
  align-items: center;
  justify-content: center;
}

.legal-mini__whale img{
  width: 64px;
  height: auto;
  opacity: .9;
  filter: drop-shadow(0 0 12px rgba(79,226,255,.28));
}

/* Text sizing: title → end cohesive + compact */
.legal-mini__content{
  flex: 1;
  min-width: 0;
}

.legal-mini__title{
  font-size: .98rem;
  font-weight: 600;
  margin: 0 0 6px;
}

.legal-mini__p{
  font-size: .80rem;
  line-height: 1.5;
  color: rgba(255,255,255,.74);
  margin: 0 0 6px;
}

.legal-mini__p:last-child{
  margin-bottom: 0;
}

.legal-mini__highlight{
  color: #4fe2ff;
  font-weight: 500;
}

/* Mobile */
@media (max-width: 900px){
  .legal-mini__box{
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .legal-mini__whale{
    flex: 0 0 auto;
  }
}
/* --- CONFIDENCE SECTION (Redesigned) --- */
      .confidence-section {
          max-width: 800px;
          margin: 0 auto 6rem;
          padding: 0 1rem;
          position: relative;
          z-index: 2;
          text-align: center;
      }
      .confidence-header { margin-bottom: 2.5rem; }
      .confidence-header .lead-text { font-size: 1.25rem; color: #ccc; font-weight: 500; margin-top: 0.8rem; }
      
      .confidence-body p { color: #a0a0a0; font-size: 1.1rem; line-height: 1.8; margin-bottom: 1.5rem; }
      
      .math-principles {
          margin: 3.5rem 0;
          font-family: 'Roboto Mono', monospace;
          color: #D4AF37;
          font-size: 1.15rem;
          line-height: 2.2;
          letter-spacing: 0.5px;
      }
      
      .warning-block {
          margin-top: 3.5rem;
          padding-top: 3.5rem;
          border-top: 1px solid rgba(255,255,255,0.05);
      }
      .warning-text { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 1.2rem; }
      
      .final-statement { 
          color: #D4AF37; 
          font-weight: 700; 
          font-size: 1.3rem; 
          margin-top: 2.5rem; 
          letter-spacing: 0.5px;
          text-transform: uppercase;
      }
      /* ==========================================
         TIKTOK-STYLE SOCIAL UI PHYSICS & DRAWER
         ========================================== */
      /* Spring animations for Like & Save */
      @keyframes springPop {
        0% { transform: scale(1); }
        50% { transform: scale(0.6); }
        70% { transform: scale(1.3); }
        100% { transform: scale(1); }
      }
      .social-btn { transition: color 0.3s ease; }
      .social-btn.active svg { animation: springPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
      .btn-like.active { color: #EF4444 !important; }
      .btn-like.active svg { fill: #EF4444; stroke: #EF4444; }
      .btn-save.active { color: #FFD700 !important; }
      .btn-save.active svg { fill: #FFD700; stroke: #FFD700; }

      /* Bottom Sheet Drawer */
      .bottom-sheet-overlay {
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
        background: rgba(0,0,0,0.6); backdrop-filter: blur(6px);
        z-index: 999998; opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
      }
      .bottom-sheet-overlay.active { opacity: 1; pointer-events: auto; }
      
      .comments-drawer {
        position: fixed; bottom: 0; left: 0; width: 100%; height: 75vh;
        background: rgba(15, 20, 30, 0.95); backdrop-filter: blur(20px);
        border-top-left-radius: 24px; border-top-right-radius: 24px;
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 999999; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.32, 1, 0.23, 1);
        display: flex; flex-direction: column;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
      }
      /* Desktop sizing constraint for the drawer */
      @media (min-width: 768px) {
        .comments-drawer { width: 500px; left: 50%; margin-left: -250px; }
      }
      .comments-drawer.active { transform: translateY(0); }
      
      .drawer-header { padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; }
      .drawer-handle { width: 40px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 2px; margin: 0 auto 15px auto; }
      .drawer-title { margin: 0; font-size: 16px; font-weight: 800; color: #fff; }
      .drawer-close { position: absolute; right: 20px; top: 15px; background: none; border: none; color: rgba(255,255,255,0.6); font-size: 28px; cursor: pointer; transition: color 0.2s; }
      .drawer-close:hover { color: #fff; }
      
      .drawer-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
      
      .comment-item { display: flex; flex-direction: column; gap: 6px; animation: slideIn 0.3s ease; }
      @keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
      .comment-header { display: flex; align-items: center; gap: 8px; font-size: 13px; }
      .comment-user { font-weight: 700; color: #fff; }
      .comment-time { color: rgba(255,255,255,0.4); font-size: 11px; font-weight: 500; }
      .comment-text { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5; word-wrap: break-word; }
      .comment-actions { display: flex; gap: 12px; margin-top: 2px; }
      .comment-action-btn { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; transition: color 0.2s; }
      .comment-action-btn:hover { color: #fff; }
      .comment-action-btn.delete-btn:hover { color: #EF4444; }
      
      .drawer-footer { padding: 15px 20px 25px 20px; border-top: 1px solid rgba(255,255,255,0.05); background: rgba(10, 15, 25, 0.98); }
      .comment-input-wrap { display: flex; gap: 10px; align-items: flex-end; background: rgba(255,255,255,0.05); padding: 8px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); transition: border 0.3s; }
      .comment-input-wrap:focus-within { border-color: rgba(255,255,255,0.3); }
      .comment-input { flex: 1; background: transparent; border: none; color: #fff; font-family: inherit; font-size: 14px; resize: none; outline: none; padding: 6px 0; max-height: 100px; }
      .comment-submit { background: #fff; color: #000; border: none; padding: 8px 16px; border-radius: 16px; font-weight: 700; cursor: pointer; transition: transform 0.2s, background 0.2s; font-size: 13px; }
      .comment-submit:active { transform: scale(0.95); }
      .comment-submit.edit-mode { background: #FFD700; }
      /* ==========================================
   AUTH UI UPGRADES (EYE ICON & ERRORS)
   ========================================== */
.password-group { position: relative; }
.toggle-password { 
    position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--muted); cursor: pointer;
    padding: 0; display: flex; align-items: center; justify-content: center;
    transition: color 0.2s;
}
.toggle-password:hover { color: #fff; }
.toggle-password svg { width: 18px; height: 18px; }

.forgot-pass-link { font-size: 12px; color: var(--muted); text-decoration: none; transition: color 0.2s; }
.forgot-pass-link:hover { color: var(--cyan); text-shadow: 0 0 8px rgba(79, 226, 255, 0.4); }
.login-only { display: block; }
.signup-mode .login-only { display: none; }

.auth-master-error {
    color: var(--risk); font-size: 13px; text-align: center;
    min-height: 18px; font-weight: 600; margin-top: 10px;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.auth-master-error.active { opacity: 1; pointer-events: auto; }
/* ==========================================
   AUTH MODAL PERFECT SQUARE & SAFE ZONES
   ========================================== */
.solid-box {
    width: min(540px, 90vw) !important; /* Widened for a more spacious, square feel */
    padding: 45px 50px 50px 50px !important; /* Deep padding so contents never hug the edges */
    max-height: calc(100vh - 100px) !important; /* Guarantees a 50px gap at the top and bottom of the screen */
    height: auto !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    overflow-y: auto !important; /* Fallback scroll ONLY if the screen is tiny */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Ensure inner wrappers take full width */
#authStep1, #authStep2 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal__content {
    width: 100% !important;
    max-width: none !important;
}

/* Center the top toggle switch */
.auth-switch {
    margin: 0 auto 30px auto !important; 
}

/* Smooth spacing between inputs */
.modal__form {
    gap: 15px !important;
    width: 100%;
    margin: 0 !important;
}

/* Bigger, bolder inputs */
.input-group input {
    height: 52px !important;
    font-size: 15px !important;
}

/* Heroic submit button */
.modal__btn {
    height: 56px !important;
    margin-top: 15px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

/* Text hierarchy alignments */
.modal__title {
    font-size: 32px !important;
    margin-bottom: 6px !important;
    text-align: left;
}
.modal__sub {
    font-size: 15px !important;
    margin-bottom: 25px !important;
    text-align: left;
}

/* Hide default browser scrollbar for aesthetics */
.solid-box::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.auth-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    width: 100%;
}
.auth-progress-steps {
    display: flex;
    align-items: center;
    gap: 0;
}
.auth-step-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    transition: 0.3s;
}
.auth-step-num {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 800;
    color: var(--muted);
    transition: 0.3s;
}
.auth-step-lbl {
    font-size: 11px; font-weight: 600;
    color: var(--muted); letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: 0.3s;
}
.auth-step-line {
    width: 32px; height: 1px;
    background: rgba(255,255,255,0.1);
}
.auth-step-pill.active {
    border-color: rgba(79,226,255,0.3);
    background: rgba(79,226,255,0.07);
}
.auth-step-pill.active .auth-step-num {
    background: var(--cyan);
    color: #000;
    box-shadow: 0 0 10px rgba(79,226,255,0.5);
}
.auth-step-pill.active .auth-step-lbl { color: var(--cyan); }
.auth-step-pill.done .auth-step-num { background: rgba(16,185,129,0.8); color: #fff; }
.auth-step-pill.done .auth-step-lbl { color: #10b981; }

/* Password strength bar */
.auth-pwd-bar {
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 5px;
}
.auth-pwd-fill {
    height: 100%; width: 0%;
    border-radius: 3px;
    transition: width 0.3s, background 0.3s;
}
.auth-pwd-label {
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.5px;
    font-family: 'JetBrains Mono', monospace;
}

/* Custom checkboxes */
.terms-container { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.auth-check-row {
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; position: relative;
}
.auth-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check-box {
    width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px;
    border-radius: 5px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.3);
    transition: 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.auth-check-box::after {
    content: ''; width: 5px; height: 9px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: 0.15s;
}
.auth-checkbox:checked + .auth-check-box {
    background: var(--cyan); border-color: var(--cyan);
    box-shadow: 0 0 8px rgba(79,226,255,0.4);
}
.auth-checkbox:checked + .auth-check-box::after {
    border-color: #000;
}
.auth-check-text { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.5; }

/* Referral input accent */
#referralCode {
    letter-spacing: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px !important;
    text-transform: uppercase;
}
#referralCode::placeholder { letter-spacing: 0; text-transform: none; font-family: 'Inter', sans-serif; }

/* \u2500\u2500 PLAN CARDS (Step 2) \u2500\u2500 */
.auth-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 100%;
}
.auth-plan-card {
    position: relative;
    background: rgba(13,17,25,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px 16px;
    cursor: pointer;
    transition: 0.25s;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}
.auth-plan-card:hover {
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-2px);
    background: rgba(20,26,38,0.9);
}
.auth-plan-card.selected {
    border-color: rgba(79,226,255,0.5);
    background: rgba(79,226,255,0.06);
    box-shadow: 0 0 20px rgba(79,226,255,0.1);
}
.auth-plan-card--pro.selected {
    border-color: rgba(79,226,255,0.5);
    box-shadow: 0 0 24px rgba(79,226,255,0.15);
}
.auth-plan-card--investor.selected {
    border-color: rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.05);
    box-shadow: 0 0 24px rgba(255,215,0,0.12);
}
.auth-plan-popular {
    position: absolute;
    top: -1px; left: 50%; transform: translateX(-50%);
    background: var(--cyan);
    color: #000;
    font-size: 9px; font-weight: 800;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 0 0 8px 8px;
    white-space: nowrap;
}
.auth-plan-top { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.auth-plan-name { font-size: 17px; font-weight: 800; color: #fff; }
.auth-plan-price { font-size: 22px; font-weight: 800; color: #fff; font-family: 'JetBrains Mono', monospace; }
.auth-plan-price span { font-size: 12px; font-weight: 500; color: var(--muted); }
.auth-plan-perks {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 5px;
    flex: 1;
}
.auth-plan-perks li {
    font-size: 11px; color: rgba(255,255,255,0.7);
    padding-left: 12px;
    position: relative;
    line-height: 1.4;
}
.auth-plan-perks li::before {
    content: '\u2713';
    position: absolute; left: 0;
    color: #10b981; font-size: 10px; font-weight: 800;
}
.auth-plan-perks li.muted { color: rgba(255,255,255,0.25); }
.auth-plan-perks li.muted::before { content: ''; }
.auth-plan-select-btn {
    font-size: 11px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; padding: 8px;
    text-align: center; color: var(--muted);
    transition: 0.2s;
}
.auth-plan-card.selected .auth-plan-select-btn {
    background: rgba(79,226,255,0.1);
    border-color: rgba(79,226,255,0.4);
    color: var(--cyan);
}
.auth-plan-card--investor.selected .auth-plan-select-btn

/* =============================================================
   PINGR \u2014 PROFILE & SETTINGS v2.0
   ============================================================= */

/* Hero card at top */
.prof-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 20, 30, 0.55);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 20px;
    padding: 32px 36px;
    margin-bottom: 24px;
    backdrop-filter: blur(20px);
    gap: 24px;
    flex-wrap: wrap;
}
.prof-hero-left { display: flex; align-items: center; gap: 24px; }
.prof-avatar-wrap {
    position: relative; width: 100px; height: 100px; border-radius: 50%;
    background: rgba(10,14,20,0.8); border: 2px solid var(--cyan);
    box-shadow: 0 0 28px rgba(79,226,255,0.18);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0; overflow: hidden; transition: box-shadow 0.3s;
}
.prof-avatar-wrap:hover { box-shadow: 0 0 40px rgba(79,226,255,0.35); }
.prof-avatar-wrap:hover .prof-avatar-overlay { opacity: 1; }
.prof-avatar-overlay {
    position: absolute; inset: 0; background: rgba(0,0,0,0.65); border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; opacity: 0; transition: opacity 0.25s; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
}
.prof-handle { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.5px; font-family: 'JetBrains Mono', monospace; }
.prof-tier-badge {
    display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: 100px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    background: rgba(79,226,255,0.1); border: 1px solid rgba(79,226,255,0.3); color: var(--cyan);
}
.prof-tier-badge.tier-investor { background: rgba(255,215,0,0.1); border-color: rgba(255,215,0,0.3); color: var(--gold); }
.prof-tier-badge.tier-free { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: var(--muted); }
.prof-meta { font-size: 12px; color: var(--muted); margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
.prof-hero-stats { display: flex; align-items: center; gap: 0; }
.prof-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 28px; }
.prof-stat-val { font-size: 28px; font-weight: 800; color: #fff; font-family: 'JetBrains Mono', monospace; line-height: 1; }
.prof-stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; white-space: nowrap; }
.prof-stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

/* Tab nav */
.prof-tab-nav {
    display: flex; gap: 4px; margin-bottom: 24px;
    background: rgba(0,0,0,0.3); padding: 5px; border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.05); width: fit-content;
}
.prof-tab {
    display: flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: 10px;
    font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: 0.2s;
    letter-spacing: 0.3px; border: 1px solid transparent; background: transparent;
}
.prof-tab:hover { color: #fff; background: rgba(255,255,255,0.04); }
.prof-tab.active { background: rgba(79,226,255,0.1); color: var(--cyan); border-color: rgba(79,226,255,0.2); }
.prof-tab-panel { display: none; }
.prof-tab-panel.active { display: block; }

/* Section cards */
.prof-section-card {
    background: rgba(13, 17, 25, 0.6); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; padding: 30px 32px; margin-bottom: 18px; backdrop-filter: blur(12px);
}
.prof-section-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; font-family: 'JetBrains Mono', monospace; }
.prof-divider { height: 1px; background: rgba(255,255,255,0.05); margin: 24px 0; }

/* Form fields */
.prof-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prof-field { display: flex; flex-direction: column; gap: 8px; }
.prof-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.prof-input {
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; padding: 12px 16px;
    outline: none; transition: 0.2s; width: 100%; box-sizing: border-box;
}
.prof-input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79,226,255,0.08); }
.prof-textarea {
    background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
    color: #fff; font-family: 'Inter', sans-serif; font-size: 14px; padding: 12px 16px;
    outline: none; transition: 0.2s; width: 100%; resize: none; box-sizing: border-box; line-height: 1.6;
}
.prof-textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79,226,255,0.08); }
.prof-char-count { font-size: 11px; color: var(--muted); text-align: right; margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
.prof-save-feedback { font-size: 12px; font-weight: 600; color: var(--cluster); font-family: 'JetBrains Mono', monospace; opacity: 0; transition: opacity 0.3s; }
.prof-save-feedback.visible { opacity: 1; }
.prof-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prof-plan-info { display: flex; flex-direction: column; gap: 5px; }
.prof-plan-name { font-size: 20px; font-weight: 800; color: #fff; }
.prof-plan-desc { font-size: 13px; color: var(--muted); }

/* Password eye toggle */
.prof-input-eye { position: relative; display: flex; align-items: center; }
.prof-input-eye .prof-input { padding-right: 44px; }
.prof-eye-btn { position: absolute; right: 14px; background: none; border: none; color: var(--muted); cursor: pointer; padding: 0; display: flex; align-items: center; transition: color 0.2s; }
.prof-eye-btn:hover { color: #fff; }

/* Password strength */
.prof-pwd-strength { height: 4px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.prof-pwd-strength-fill { height: 100%; border-radius: 4px; transition: width 0.3s, background 0.3s; width: 0%; }
.prof-pwd-strength-label { font-size: 11px; font-weight: 600; margin-top: 6px; letter-spacing: 1px; font-family: 'JetBrains Mono', monospace; }

/* Notification toggles */
.prof-toggle-list { display: flex; flex-direction: column; gap: 0; }
.prof-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.prof-toggle-row:last-child { border-bottom: none; }
.prof-toggle-info { display: flex; flex-direction: column; gap: 3px; }
.prof-toggle-name { font-size: 14px; font-weight: 600; color: #fff; }
.prof-toggle-desc { font-size: 12px; color: var(--muted); }
.prof-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.prof-switch input { opacity: 0; width: 0; height: 0; }
.prof-switch-track { position: absolute; inset: 0; background: rgba(255,255,255,0.1); border-radius: 13px; cursor: pointer; transition: 0.3s; border: 1px solid rgba(255,255,255,0.1); }
.prof-switch-track::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: rgba(255,255,255,0.5); border-radius: 50%; transition: 0.3s; }
.prof-switch input:checked + .prof-switch-track { background: rgba(79,226,255,0.25); border-color: var(--cyan); box-shadow: 0 0 10px rgba(79,226,255,0.2); }
.prof-switch input:checked + .prof-switch-track::before { transform: translateX(20px); background: var(--cyan); }

/* Conviction slider */
.prof-slider-wrap { position: relative; }
.prof-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: rgba(255,255,255,0.1); outline: none; cursor: pointer; }
.prof-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cyan); border: 2px solid #fff; box-shadow: 0 0 10px rgba(79,226,255,0.5); cursor: pointer; transition: box-shadow 0.2s; }
.prof-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 20px rgba(79,226,255,0.8); }
.prof-slider-labels { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.prof-slider-live { font-size: 14px; font-weight: 800; color: var(--cyan); background: rgba(79,226,255,0.1); border: 1px solid rgba(79,226,255,0.25); padding: 2px 10px; border-radius: 6px; }

/* Subscription */
.prof-sub-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.prof-sub-left { display: flex; flex-direction: column; gap: 6px; }
.prof-sub-name { font-size: 20px; font-weight: 800; color: #fff; }
.prof-sub-price { font-size: 13px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.prof-sub-perks { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.prof-sub-perk { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,0.75); }
.prof-sub-perk::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }

/* Activity */
.prof-activity-trade { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.prof-activity-trade:last-child { border-bottom: none; }
.prof-activity-ticker { font-size: 16px; font-weight: 800; color: #fff; font-family: 'JetBrains Mono', monospace; }
.prof-activity-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.prof-activity-score { font-size: 13px; font-weight: 700; color: var(--cyan); font-family: 'JetBrains Mono', monospace; }
.prof-empty-state { text-align: center; padding: 48px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.prof-empty-state p { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.prof-account-details { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.prof-detail-block { display: flex; flex-direction: column; gap: 5px; }
.prof-detail-key { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; }
.prof-detail-val { font-size: 14px; font-weight: 600; color: #fff; font-family: 'JetBrains Mono', monospace; }
.prof-danger-card { border-color: rgba(239,68,68,0.15); }

/* =============================================================
   PINGR \u2014 SUPPORT DRAWER (TikTok-style slide-up)
   ============================================================= */

.support-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 999990;
    opacity: 0; pointer-events: none;
    transition: opacity 0.35s ease;
}
.support-overlay.active { opacity: 1; pointer-events: auto; }

.support-drawer {
    position: fixed;
    bottom: 0; left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 560px;
    background: rgba(11, 14, 20, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(79,226,255,0.15);
    border-left: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    border-radius: 24px 24px 0 0;
    z-index: 999995;
    box-shadow: 0 -20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(79,226,255,0.05);
    transition: transform 0.42s cubic-bezier(0.32, 1, 0.23, 1);
    max-height: 90vh;
    overflow-y: auto;
}
.support-drawer::-webkit-scrollbar { width: 0; }
.support-drawer.active {
    transform: translateX(-50%) translateY(0);
}

.support-handle-bar {
    display: flex; justify-content: center;
    padding: 14px 0 6px;
}
.support-handle {
    width: 40px; height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

.support-drawer-inner {
    padding: 10px 32px 40px;
}

.support-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.support-header-left {
    display: flex; align-items: center; gap: 14px;
}
.support-icon {
    width: 42px; height: 42px;
    background: rgba(79,226,255,0.1);
    border: 1px solid rgba(79,226,255,0.2);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 16px rgba(79,226,255,0.1);
}
.support-title {
    font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.3px;
}
.support-sub {
    font-size: 12px; color: var(--muted); margin-top: 2px;
}
.support-close {
    font-size: 28px; color: var(--muted); cursor: pointer;
    background: none; border: none;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s;
    line-height: 1;
}
.support-close:hover { color: #fff; background: rgba(255,255,255,0.06); }

.support-email-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(79,226,255,0.07);
    border: 1px solid rgba(79,226,255,0.2);
    color: var(--cyan);
    font-size: 12px; font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    padding: 6px 14px; border-radius: 100px;
    margin-bottom: 24px;
    letter-spacing: 0.3px;
}

/* Auth gate */
.support-auth-gate {
    text-align: center;
    padding: 32px 20px 20px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.support-auth-gate p {
    color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0;
}

/* From row */
.support-from-row {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    display: flex; align-items: center; gap: 10px;
    font-size: 13px;
}
.support-from-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; color: var(--muted);
    text-transform: uppercase; flex-shrink: 0;
}
.support-from-val {
    color: #fff; font-family: 'JetBrains Mono', monospace;
    font-size: 13px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Fields */
.support-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.support-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase;
}
.support-select {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 12px 16px;
    outline: none;
    transition: 0.2s;
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.support-select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79,226,255,0.08); }
.support-select option { background: #0b0d14; color: #fff; }

.support-textarea {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 12px 16px;
    outline: none;
    transition: 0.2s;
    width: 100%;
    resize: none;
    box-sizing: border-box;
    line-height: 1.6;
}
.support-textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(79,226,255,0.08); }
.support-char-count {
    font-size: 11px; color: var(--muted);
    text-align: right; margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.support-send-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Feedback states */
.support-feedback {
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
    animation: supportFeedbackIn 0.3s ease forwards;
}
@keyframes supportFeedbackIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.support-feedback.success {
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    color: #10b981;
}
.support-feedback.error {
.support-feedback.error {
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--risk);
}


/* =============================================================
   PINGR v4.2 — QUANT ACCORDION + SOLD TAGS + 10b5-1 TAGS
   ============================================================= */

.score-accordion {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}
.score-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(255,255,255,0.03);
    border: none;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    user-select: none;
    width: 100%;
}
.score-accordion-trigger:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
}
.score-accordion-trigger.open {
    color: var(--cyan);
    background: rgba(79,226,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.accordion-chevron {
    transform: rotate(180deg);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
}
.score-accordion-trigger.open .accordion-chevron {
    transform: rotate(0deg);
}
.score-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 20px;
}
.score-accordion-body.open {
    max-height: 420px;
}

.tag-sold {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35);
    color: #ef4444; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
    padding: 3px 10px; border-radius: 100px; text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    animation: soldPulse 2s ease-in-out infinite;
}
@keyframes soldPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50%       { box-shadow: 0 0 12px 2px rgba(239,68,68,0.2); }
}
.tag-10b5 {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
    color: #f59e0b; font-size: 10px; font-weight: 800; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 100px; text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
}
.blade-sold-tag {
    display: none; align-items: center; gap: 4px;
    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
    color: #ef4444; font-size: 9px; font-weight: 800; letter-spacing: 1px;
    padding: 2px 8px; border-radius: 100px; text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace; margin-top: 4px; white-space: nowrap;
}
.tag-10b5-blade {
    display: inline-flex; align-items: center;
    background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2);
    color: #f59e0b; font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
    padding: 2px 7px; border-radius: 100px;
    font-family: 'JetBrains Mono', monospace; margin-top: 4px; white-space: nowrap;
}

/* v4.2: Tag row in pc-mid (category + sold + 10b5-1 side by side) */
.pc-tags-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.pc-tags-row .pc-tag { margin: 0; }
.pc-tags-row .blade-sold-tag { margin-top: 0; }
.pc-tags-row .tag-10b5-blade { margin-top: 0; }

/* v4.2: Expansion sale row */
.expansion-sale-row {
    display: none;
    font-size: 13px;
    margin-top: 10px;
    line-height: 1.7;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Sector preference pills ── */
.sector-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: 0.2s;
    user-select: none;
}
.sector-pill:hover {
    border-color: rgba(79,226,255,0.4);
    color: #fff;
}
.sector-pill input[type="checkbox"] {
    accent-color: var(--cyan);
    width: 14px;
    height: 14px;
    cursor: pointer;
}
.sector-pill:has(input:checked) {
    background: rgba(79,226,255,0.08);
    border-color: rgba(79,226,255,0.4);
    color: var(--cyan);
}

/* ── Digest time select ── */
#digestTimePicker option {
    background: #0d1117;
    color: #fff;
}
/* =========================================================================
   PINGR — What Is Pingr + How It Works Carousel
   Paste this at the bottom of style.css
========================================================================= */

/* ── WHAT IS PINGR SECTION ── */
/* ── WHAT IS PINGR SECTION ── */
.what-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 100px 40px;
}

.what-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

/* Big radial wash from centre — the "room light" */
.what-ambient::after {
  content: '';
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(0,195,255,0.13) 0%,
    rgba(0,195,255,0.07) 25%,
    rgba(56,189,255,0.03) 50%,
    transparent 70%);
  animation: ambientBreath 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes ambientBreath {
  0%   { opacity: 0.7; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 1;   transform: translate(-50%,-50%) scale(1.12); }
}

/* Glow wrapper — top centre of section, scaled down */
.what-centre-glow {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%) scale(0.55);
  transform-origin: top center;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
}

/* Zero gravity floating orbs */
.what-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  animation: orbFloat linear infinite;
}
.what-orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle at 40% 40%,
    rgba(56,189,255,0.18) 0%,
    rgba(56,189,255,0.08) 40%,
    transparent 70%);
  top: -10%; left: -8%;
  animation-duration: 22s;
  animation-delay: 0s;
}
.what-orb-2 {
  width: 360px; height: 360px;
  background: radial-gradient(circle at 60% 50%,
    rgba(74,134,255,0.14) 0%,
    rgba(74,134,255,0.06) 45%,
    transparent 70%);
  top: 40%; right: -5%;
  animation-duration: 28s;
  animation-delay: -8s;
}
.what-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle at 50% 50%,
    rgba(56,189,255,0.12) 0%,
    rgba(56,189,255,0.04) 50%,
    transparent 70%);
  bottom: 5%; left: 30%;
  animation-duration: 18s;
  animation-delay: -4s;
}
.what-orb-4 {
  width: 220px; height: 220px;
  background: radial-gradient(circle at 50% 50%,
    rgba(160,92,255,0.10) 0%,
    rgba(160,92,255,0.03) 50%,
    transparent 70%);
  top: 20%; left: 55%;
  animation-duration: 24s;
  animation-delay: -12s;
}

@keyframes orbFloat {
  0%   { opacity: 0;    transform: translate(0px, 0px) scale(1); }
  10%  { opacity: 1; }
  25%  { transform: translate(18px, -22px) scale(1.04); }
  50%  { transform: translate(-14px, 28px) scale(0.97); }
  75%  { transform: translate(22px, 12px) scale(1.03); }
  90%  { opacity: 1; }
  100% { opacity: 0;    transform: translate(0px, 0px) scale(1); }
}

/* Compact two column — text and image balanced in height */
.what-inner {
  position: relative; z-index: 1;
  width: min(960px, 100%);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}

/* Left: copy */
.what-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.what-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 3px;
  text-transform: uppercase; color: rgba(56,189,255,0.8);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.what-eyebrow::before {
  content: ''; display: block; width: 24px; height: 1px;
  background: rgba(56,189,255,0.4);
}

.what-title {
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.4px;
  color: #fff;
  margin-bottom: 18px;
  text-align: left;
  max-width: 380px;
}

/* Thin azure divider */
.what-divider {
  width: 32px; height: 1px;
  background: rgba(56,189,255,0.35);
  margin-bottom: 20px;
}

.what-body {
  text-align: left;
  max-width: 380px;
}

.what-body .punch {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  letter-spacing: -0.1px;
  line-height: 1.75;
  margin-bottom: 12px;
}

.what-body .supporting {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.28);
  line-height: 1.85;
  letter-spacing: 0.1px;
}

/* Right: dashboard image — fixed width, matches text column height */
.what-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 340px;
  flex-shrink: 0;
}

/* Glow behind image */
.what-visual::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(ellipse at center, rgba(56,189,255,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Fade edges */
.what-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 75%, rgba(2,4,10,0.9) 100%),
    linear-gradient(to bottom, rgba(2,4,10,0.6) 0%, transparent 15%, transparent 80%, rgba(2,4,10,0.95) 100%),
    linear-gradient(to left, transparent 90%, rgba(2,4,10,0.4) 100%);
  pointer-events: none;
  z-index: 2;
  border-radius: 12px;
}

.what-img {
  position: relative;
  z-index: 1;
  width: 340px;
  border-radius: 12px;
  border: 1px solid rgba(56,189,255,0.14);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.7),
    0 0 0 1px rgba(255,255,255,0.03);
  transform: perspective(800px) rotateY(-5deg) rotateX(1deg);
  transition: transform 0.5s ease;
}
.what-img:hover {
  transform: perspective(800px) rotateY(-2deg) rotateX(0deg);
}

@media (max-width: 800px) {
  .what-inner { grid-template-columns: 1fr; gap: 40px; }
  .what-visual { display: none; }
  .what-copy { align-items: center; text-align: center; }
  .what-title, .what-body { text-align: center; }
  .what-eyebrow { justify-content: center; }
}

/*
  FIRST PASS: outer is 8 × 100vh (1 pinned + 7 scroll steps).
  JS watches scrollY, maps it to step 0-6, advances cards.
  Once step 6 is reached, everComplete = true.
  After that, outer shrinks to just 100vh (no scroll travel)
  and horizontal swipe/scroll on the section loops the cards.
*/
#conveyorOuter {
  height: calc(1 * 100vh + 7 * 40vh);
  position: relative;
}
#conveyorOuter.completed {
  height: 100vh;
}

#conveyorInner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.conveyor-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  transition: background 0.7s ease;
}

.conveyor-eyebrow {
  position: relative; z-index: 10; font-size: 11px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.3);
  margin-bottom: 36px; display: flex; align-items: center; gap: 12px;
}
.conveyor-eyebrow::before, .conveyor-eyebrow::after {
  content: ''; display: block; width: 32px; height: 1px; background: rgba(255,255,255,0.15);
}

.conveyor-track {
  position: relative; z-index: 10; width: 100%; height: 480px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px;
}

.conv-card {
  position: absolute; width: 420px; height: 420px; border-radius: 28px;
  background: var(--card);
  border: 1px solid rgba(56,189,255,0.28);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 36px 36px 30px; overflow: hidden;
  transition:
    transform    0.6s cubic-bezier(0.25,0.46,0.45,0.94),
    opacity      0.6s cubic-bezier(0.25,0.46,0.45,0.94),
    filter       0.6s cubic-bezier(0.25,0.46,0.45,0.94),
    box-shadow   0.6s ease;
  will-change: transform, opacity, filter; user-select: none;
}
.conv-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 28px;
  background: radial-gradient(ellipse at 50% -10%, rgba(56,189,255,0.08) 0%, transparent 55%);
  pointer-events: none;
}

.conv-card.state-active {
  transform: translateX(0) scale(1) translateZ(0px);
  opacity: 1; filter: brightness(1);
  border-color: rgba(56,189,255,0.55);
  box-shadow: 0 0 0 1px rgba(56,189,255,0.1), 0 30px 80px rgba(0,0,0,0.8), 0 0 50px rgba(56,189,255,0.15);
  z-index: 10;
}
.conv-card.state-prev {
  transform: translateX(-330px) scale(0.87) translateZ(-100px) rotateY(9deg);
  opacity: 0.6; filter: brightness(0.55);
  border-color: rgba(56,189,255,0.14); box-shadow: none; z-index: 5;
}
.conv-card.state-prev-far {
  transform: translateX(-560px) scale(0.74) translateZ(-220px) rotateY(14deg);
  opacity: 0.25; filter: brightness(0.3);
  border-color: rgba(56,189,255,0.07); box-shadow: none; z-index: 2;
}
.conv-card.state-next {
  transform: translateX(330px) scale(0.87) translateZ(-100px) rotateY(-9deg);
  opacity: 0.6; filter: brightness(0.55);
  border-color: rgba(56,189,255,0.14); box-shadow: none; z-index: 5;
}
.conv-card.state-next-far {
  transform: translateX(560px) scale(0.74) translateZ(-220px) rotateY(-14deg);
  opacity: 0.25; filter: brightness(0.3);
  border-color: rgba(56,189,255,0.07); box-shadow: none; z-index: 2;
}
.conv-card.state-hidden {
  transform: translateX(900px) scale(0.65);
  opacity: 0; pointer-events: none; z-index: 0; transition: none;
}
.conv-card.state-hidden-left {
  transform: translateX(-900px) scale(0.65);
  opacity: 0; pointer-events: none; z-index: 0; transition: none;
}

.card-stage {
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--azure);
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 14px; align-self: flex-start;
  text-shadow: 0 0 12px rgba(56,189,255,0.4);
}
.card-title {
  font-size: clamp(22px, 2.4vw, 27px); font-weight: 800;
  line-height: 1.2; letter-spacing: -0.5px; color: #e8f4ff;
  text-align: center; margin-bottom: 20px; flex-shrink: 0;
}
.card-image-wrap {
  width: 100%; flex: 1; border-radius: 14px;
  overflow: hidden; background: rgba(10,15,30,0.8);
}
.card-image-wrap img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  border-radius: 14px; display: block;
}

.conveyor-pips {
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 8px; margin-top: 28px;
}
.pip {
  height: 2px; width: 26px; border-radius: 2px; background: rgba(56,189,255,0.15);
  transition: width 0.4s cubic-bezier(0.25,0.46,0.45,0.94), background 0.4s ease, box-shadow 0.4s ease;
  cursor: pointer;
}
.pip.active { width: 52px; background: var(--azure); box-shadow: 0 0 12px rgba(56,189,255,0.6); }
.pip.done   { background: rgba(56,189,255,0.35); }

.conveyor-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 10; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.22); display: flex; align-items: center; gap: 8px;
  transition: opacity 0.6s ease; white-space: nowrap;
  animation: hintPulse 2.5s ease-in-out infinite;
}
@keyframes hintPulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.conveyor-hint.hidden { opacity: 0 !important; animation: none; pointer-events: none; }
.hint-arrow {
  width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
/* ═══════════════════════════════════════════════
   ALPACA FUND ACCESS SECTION
   ═══════════════════════════════════════════════ */
.alpaca-section {
  margin-top: 36px;
  border-top: 1px solid rgba(255,215,0,0.12);
  padding-top: 32px;
}

.alpaca-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.alpaca-header-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.alpaca-logo-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,215,0,0.08);
  border: 1px solid rgba(255,215,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.alpaca-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 4px;
  letter-spacing: -0.2px;
}
.alpaca-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
  max-width: 380px;
}
.alpaca-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.35);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.alpaca-status-pill.connected {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.25);
  color: #10b981;
}
.alpaca-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s ease;
}
.alpaca-status-pill.connected .alpaca-status-dot {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16,185,129,0.8);
  animation: livePulse 2s ease-in-out infinite;
}

/* How it works strip */
.alpaca-how-strip {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255,215,0,0.03);
  border: 1px solid rgba(255,215,0,0.08);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.alpaca-how-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  flex: 1;
  min-width: 180px;
}
.alpaca-how-item a.alpaca-link {
  color: var(--gold);
  text-decoration: none;
}
.alpaca-how-item a.alpaca-link:hover { text-decoration: underline; }
.alpaca-how-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,215,0,0.5);
  flex-shrink: 0;
}
.alpaca-how-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,215,0,0.1);
  flex-shrink: 0;
}

/* Form */
.alpaca-form { display: flex; flex-direction: column; }
.alpaca-field-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.alpaca-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}
.alpaca-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.35);
  font-family: 'JetBrains Mono', monospace;
}
.alpaca-input {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,215,0,0.15);
  color: #fff;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
  transition: border-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}
.alpaca-input:focus {
  border-color: rgba(255,215,0,0.4);
  box-shadow: 0 0 0 3px rgba(255,215,0,0.05);
}
.alpaca-select { cursor: pointer; }
.alpaca-select option { background: #0a0c10; }

.alpaca-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  line-height: 1.6;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}
.alpaca-disclaimer svg { flex-shrink: 0; margin-top: 1px; }

.alpaca-btn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  flex-wrap: wrap;
}
.alpaca-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,165,0,0.1));
  border: 1px solid rgba(255,215,0,0.35);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.25s ease;
}
.alpaca-connect-btn:hover {
  background: linear-gradient(135deg, rgba(255,215,0,0.22), rgba(255,165,0,0.15));
  border-color: rgba(255,215,0,0.6);
  box-shadow: 0 0 20px rgba(255,215,0,0.15);
  transform: translateY(-1px);
}
.alpaca-connect-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.alpaca-feedback {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.3s ease;
}
.alpaca-feedback.success { color: #10b981; }
.alpaca-feedback.error { color: var(--risk); }

/* Connected state */
.alpaca-connected-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  background: rgba(16,185,129,0.05);
  border: 1px solid rgba(16,185,129,0.15);
  border-radius: 12px;
  flex-wrap: wrap;
}
.alpaca-connected-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.alpaca-connected-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}
.alpaca-disconnect-btn {
  padding: 8px 18px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.3);
  color: var(--risk);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.alpaca-disconnect-btn:hover {
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.5);
}

/* ==========================================================================
   MOBILE — Landing Page (index.html)
   Handles the hero, conveyor, what-section, topbar, and floating pill
   for screens ≤ 768px. The zoom hack is already cancelled above.
   ========================================================================== */

@media (max-width: 768px) {

  /* ── Topbar ────────────────────────────────────────────────────────────── */
  .topbar { width: 100vw; max-width: 100vw; }
  .topbar__inner { padding: 0 14px; }
  .topnav a:not(.nav-btn-login):not(.open-modal) { display: none; }
  .nav-btn-login { font-size: 11px; padding: 6px 12px; }

  /* ── Hero ──────────────────────────────────────────────────────────────── */
  .hero { padding: 80px 20px 60px; }
  .h1 { font-size: clamp(34px, 9vw, 52px); letter-spacing: -1px; }
  .sub { font-size: 15px; padding: 0 10px; }
  .heroCard { padding: 28px 20px; min-height: auto; }
  .heroCard__actions { flex-direction: column; gap: 10px; }
  .heroCard__actions .btn { width: 100%; }

  /* ── What section ──────────────────────────────────────────────────────── */
  .what-section { padding: 60px 20px; }
  .what-inner { grid-template-columns: 1fr; gap: 32px; }
  .what-visual { display: none; }
  .what-title { font-size: clamp(28px, 8vw, 40px); letter-spacing: -1px; max-width: 100%; }
  .what-body .punch { font-size: 15px; }
  .what-cta { font-size: 11px; padding: 12px 20px; }

  /* ── Conveyor ──────────────────────────────────────────────────────────── */
  .conveyor-track { height: 340px; perspective: 900px; }
  .conv-card {
    width: min(320px, 88vw);
    height: 340px;
    padding: 24px 20px 20px;
    border-radius: 20px;
  }
  .conv-card.state-prev  { transform: translateX(-240px) scale(0.88) translateZ(-80px) rotateY(8deg); }
  .conv-card.state-next  { transform: translateX(240px)  scale(0.88) translateZ(-80px) rotateY(-8deg); }
  .conv-card.state-prev-far { transform: translateX(-400px) scale(0.74) translateZ(-180px) rotateY(12deg); }
  .conv-card.state-next-far { transform: translateX(400px)  scale(0.74) translateZ(-180px) rotateY(-12deg); }
  .card-title { font-size: clamp(20px, 5vw, 26px); }

  /* ── Credibility strip ─────────────────────────────────────────────────── */
  .credStrip { flex-wrap: wrap; gap: 14px; padding: 16px 20px; justify-content: center; }
  .cred-divider { display: none; }

  /* ── Floating pill CTA ─────────────────────────────────────────────────── */
  #floatingCta { bottom: 20px; width: calc(100% - 32px); left: 16px; transform: none; }
  #floatingCta.visible { transform: none; }
  .floating-pill { width: 100%; justify-content: center; border-radius: 14px; font-size: 13px; }

  /* ── Auth modal ────────────────────────────────────────────────────────── */
  #authModal.modal {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  #authModal .solid-box {
    width: 100vw;
    max-width: 100vw;
    border-radius: 24px 24px 0 0;
    padding: 24px 20px 40px;
    max-height: 92vh;
    overflow-y: auto;
    position: relative;
    transform: none;
    margin: 0;
  }
  #authModal .modal__title { font-size: 22px; }
  #authModal .modal__sub   { font-size: 13px; }
  #authModal .modal__btn   { height: 50px; font-size: 14px; width: 100%; }
  #authModal .input-group input { height: 50px; font-size: 15px; }
  #authModal .auth-plan-grid { grid-template-columns: 1fr !important; gap: 10px; }
  #authModal .survey-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  #authModal .survey-opt { padding: 12px 8px; font-size: 12px; }

  /* ── General sections ──────────────────────────────────────────────────── */
  .panel { padding: 60px 0; min-height: auto; }
  .wrap { width: calc(100% - 28px); }

  /* ── Alerts section — stack phone and text vertically ──────────────────── */
  .alerts { min-height: auto; padding: 60px 0; }
  .alerts__inner {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    padding: 0 20px;
  }

  /* Hide the phone mockup on mobile — it's decoration, not content */
  .phoneStage { display: none; }

  /* About the alerts article — full width */
  .about {
    width: 100%;
    padding: 24px 20px;
    border-radius: 20px;
    box-sizing: border-box;
  }
  .about__title { font-size: 22px; margin-bottom: 16px; }
  .about__text.lead { font-size: 16px; margin-bottom: 20px; }
  .about__features { gap: 16px; }
  .feature-item { gap: 12px; }
  .feature-item p { font-size: 14px; line-height: 1.5; }

  /* ── Built grid — single column ────────────────────────────────────────── */
  .builtGrid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: 200px !important;
    gap: 12px !important;
    padding: 0 20px;
  }
  .tile--a, .tile--b, .tile--c, .tile--d, .tile--e {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }

  /* ── Verified cards — single column ────────────────────────────────────── */
  .verifiedCards { grid-template-columns: 1fr; gap: 16px; padding: 0 20px; }

  /* ── Legal mini section ─────────────────────────────────────────────────── */
  .legal-mini__box {
    flex-direction: column !important;
    text-align: center;
    gap: 16px;
    padding: 24px 20px;
  }
  .legal-mini__whale { margin: 0 auto; }
  .legal-mini__content { text-align: left; }
  .legal-mini__title { font-size: 20px; }

  /* ── Footer — stack columns vertically ─────────────────────────────────── */
  .footer { padding: 60px 0 40px; min-height: auto; }
  .footer__arc { display: none; } /* arc looks broken on narrow screens */
  .footerCols {
    flex-direction: column;
    gap: 32px;
    align-items: center;
    padding: 0 20px;
  }
  .footerCol { gap: 12px; }
  .footerCol a,
  .footerCol button { font-size: 15px; color: rgba(255,255,255,0.5); }
  /* Left-align the social column like the others */
  .footerCol--right { align-items: center; }

} /* end @media 768px */

@media (max-width: 375px) {
  .h1 { font-size: 30px; }
  .conv-card { width: 92vw; height: 310px; }
  .floating-pill { font-size: 11px; }
}
/* ── Pingr Snackbar ── */
#pingr-snackbar {
    position: fixed;
    bottom: 96px; /* sits above the dock */
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 999999;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-radius: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    max-width: calc(100vw - 48px);
    white-space: normal;
    text-align: center;
}
#pingr-snackbar.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
#pingr-snackbar.snack-success {
    background: #0f1a14;
    border: 1px solid rgba(16,185,129,0.35);
    color: #fff;
}
#pingr-snackbar.snack-error {
    background: #1a0f0f;
    border: 1px solid rgba(239,68,68,0.35);
    color: #fff;
}
#pingr-snackbar.snack-warning {
    background: #1a160a;
    border: 1px solid rgba(245,158,11,0.35);
    color: #fff;
}
.snack-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 900;
}
.snack-success .snack-icon { background: #10b981; color: #000; }
.snack-error   .snack-icon { background: #ef4444; color: #fff; }
.snack-warning .snack-icon { background: #f59e0b; color: #000; }
.snack-msg { flex: 1; line-height: 1.4; }
.snack-action {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #4fe2ff;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity 0.15s;
}
.snack-action:hover { opacity: 0.75; }
/* ═══════════════════════════════════════════════════════════════════════
   CASHED OUT — blade state for fully-exited insider positions
   
   When the backend confirms an insider has sold >=90% of a position, the
   script.js sales-batch handler stamps `data-cashed-out="true"` on the
   blade root and injects a .cashed-out-chip into the tags row. This
   styles both pieces. The philosophy: a buy blade whose position has
   been fully exited is historical record, not active signal. The blade
   should visually step back — slight desaturation, softened borders —
   without disappearing. The chip tells the story in one line:
       ◎ CASHED OUT · +42% · HELD 8mo
   ═══════════════════════════════════════════════════════════════════════ */

/* Blade-level state — subtle visual step-back.
   We don't grey it out completely because the trade history still matters
   (especially on insider profiles). The cue is soft: a desaturated row
   that still reads, still hovers, but no longer looks like an active
   signal to act on. */
.data-blade[data-cashed-out="true"] {
    filter: saturate(0.55) brightness(0.88);
    opacity: 0.82;
    transition: filter 0.25s ease, opacity 0.25s ease, background 0.3s ease;
}
.data-blade[data-cashed-out="true"]:hover {
    filter: saturate(0.9) brightness(0.96);
    opacity: 1;
    /* Hover restores the blade's full color — invites investigation without
       demanding attention at rest. */
}
/* The left-gutter colour-rail softens too, so the blade reads as
   "closed chapter" even with a glance. */
.data-blade[data-cashed-out="true"]::before {
    opacity: 0.45;
}

/* The chip itself — monospaced, understated, reads like a stamp.
   Not cyan (that's conviction) and not red (that's danger). A cool
   slate-grey that telegraphs "this is in the past" without screaming. */
.cashed-out-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    cursor: default;
    transition: all 0.2s ease;
}
.cashed-out-chip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

/* The diamond mark — ◎ — kept at the chip's own colour but rendered with
   a hairline glow so it reads as the anchor of the stamp. */
.cashed-out-chip .coc-mark {
    font-size: 10px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.7);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
    transform: translateY(-0.5px);
}

/* Each internal fragment (label / ROI / held) is a separate span so the
   ROI colour can be overridden inline by the script (green if profit,
   red if loss, neutral if unknown) without breaking the chip's palette. */
.cashed-out-chip .coc-label {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 800;
}
.cashed-out-chip .coc-sep {
    color: rgba(255, 255, 255, 0.22);
    font-weight: 400;
}
.cashed-out-chip .coc-roi {
    /* Colour is set inline by script.js — green/red/neutral. We keep the
       weight and size locked here so the chip's rhythm stays consistent. */
    font-weight: 900;
}
.cashed-out-chip .coc-held {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    letter-spacing: 1px;
}

/* Mobile polish — the chip stays compact rather than breaking layout on
   narrow blades. Tags row already wraps, so we just tighten the chip. */
@media (max-width: 640px) {
    .cashed-out-chip {
        font-size: 8.5px;
        padding: 2px 8px;
        gap: 5px;
    }
    .cashed-out-chip .coc-mark { font-size: 9px; }
}