:root{
  /* FlowMap Brand — Deep ocean + data teal */
  --bg:#050c12;--bg2:#07111a;--bg3:#0d1c26;--bg4:#142030;
  --card:#0a1820;--card2:#0f2130;
  --b:rgba(0,210,180,0.12);--b2:rgba(0,210,180,0.05);
  /* Primary: teal-to-cyan — "the flow" */
  --acc:#00c4a0;--acc2:#00e5c0;--acc3:#7fffd4;
  /* Secondary: deep blue accent */
  --acc-b:#0ea5c8;--acc-b2:#38d4f0;
  /* Data colors */
  --brd:rgba(0,196,160,.12);
  --gr:#00e676;--rd:#ff4d6d;--yl:#ffb300;--cy:#00d4ff;--pu:#b388ff;
  --gr2:rgba(0,230,118,0.1);--rd2:rgba(255,77,109,0.1);--yl2:rgba(255,179,0,0.1);--cy2:rgba(0,212,255,0.1);
  --t:#e0f4f0;--t2:#6b9fa8;--t3:#4a7a88;
  --M:'Space Mono',monospace;--S:'DM Sans',sans-serif;--D:'Syne',sans-serif;
  /* Glow variables */
  --glow-acc:rgba(0,196,160,0.2);
  --glow-blue:rgba(14,165,200,0.15);
}

/* ========================================================================
   🎨 THEME SYSTEM — Quantum Mint (default) | Bloomberg | Polar | Tokyo Neon
   Semantic colors (--gr/--rd/--yl/--cy) preserve meaning across all themes.
   ======================================================================== */

/* Quantum Mint — same as :root, made explicit so the picker can show it. */
[data-theme="quantum"]{
  --bg:#050c12;--bg2:#07111a;--bg3:#0d1c26;--bg4:#142030;
  --card:#0a1820;--card2:#0f2130;
  --b:rgba(0,210,180,0.12);--b2:rgba(0,210,180,0.05);
  --acc:#00c4a0;--acc2:#00e5c0;--acc3:#7fffd4;
  --acc-b:#0ea5c8;--acc-b2:#38d4f0;
  --brd:rgba(0,196,160,.12);
  --t:#e0f4f0;--t2:#6b9fa8;--t3:#4a7a88;
  --glow-acc:rgba(0,196,160,0.22);
  --glow-blue:rgba(14,165,200,0.15);
}

/* Bloomberg Terminal — black + amber + cyan. Wall-Street legend. */
[data-theme="bloomberg"]{
  --bg:#0a0805;--bg2:#0f0d08;--bg3:#15110a;--bg4:#1c1810;
  --card:#100c06;--card2:#181308;
  --b:rgba(255,176,32,.14);--b2:rgba(255,176,32,.05);
  --acc:#ffa500;--acc2:#ffb840;--acc3:#ffd166;
  --acc-b:#00d4ff;--acc-b2:#5be3ff;
  --brd:rgba(255,176,32,.16);
  --t:#ffe8c0;--t2:#a08560;--t3:#705c40;
  --glow-acc:rgba(255,176,32,.26);
  --glow-blue:rgba(0,212,255,.18);
}

/* Polar Aurora — light base + aurora violet/teal accents. Daytime. */
[data-theme="polar"]{
  --bg:#fafdff;--bg2:#f3f8fc;--bg3:#eaf2f8;--bg4:#dfe9f1;
  --card:#ffffff;--card2:#f7fbfd;
  --b:rgba(91,141,184,.18);--b2:rgba(91,141,184,.07);
  --acc:#5b8db8;--acc2:#7fb0d8;--acc3:#a4ccea;
  --acc-b:#7b5fa8;--acc-b2:#9d7bce;
  --brd:rgba(91,141,184,.18);
  /* WCAG AA-friendly semantic colors for light surfaces (≥4.5:1 vs --bg) */
  --gr:#007a3d;--rd:#c41a3f;--yl:#a86800;--cy:#007fa8;--pu:#6020e0;
  --gr2:rgba(0,122,61,.10);--rd2:rgba(196,26,63,.10);
  --yl2:rgba(168,104,0,.10);--cy2:rgba(0,127,168,.10);
  --t:#1a2733;--t2:#5a6d80;--t3:#8398aa;
  --glow-acc:rgba(91,141,184,.18);
  --glow-blue:rgba(123,95,168,.14);
}

/* Tokyo Neon — deep purple-blue + magenta + electric cyan. Cyberpunk. */
[data-theme="tokyo"]{
  --bg:#06051a;--bg2:#0c0a25;--bg3:#141033;--bg4:#1c1740;
  --card:#0e0c2a;--card2:#161236;
  --b:rgba(255,46,200,.16);--b2:rgba(255,46,200,.06);
  --acc:#ff2ec8;--acc2:#ff6ad5;--acc3:#ffa0e0;
  --acc-b:#00f0ff;--acc-b2:#5af5ff;
  --brd:rgba(255,46,200,.18);
  --t:#f0e8ff;--t2:#9080c0;--t3:#5d4d8a;
  --glow-acc:rgba(255,46,200,.30);
  --glow-blue:rgba(0,240,255,.22);
}

/* Phantom Black — pure pitch black + platinum/silver. Maximum depth. */
[data-theme="phantom"]{
  --bg:#000000;--bg2:#050505;--bg3:#0a0a0a;--bg4:#111111;
  --card:#060606;--card2:#0d0d0d;
  --b:rgba(255,255,255,.08);--b2:rgba(255,255,255,.04);
  --acc:#c0c0c0;--acc2:#e8e8e8;--acc3:#ffffff;
  --acc-b:#7a7a7a;--acc-b2:#a0a0a0;
  --brd:rgba(255,255,255,.10);
  --t:#f0f0f0;--t2:#888888;--t3:#555555;
  --glow-acc:rgba(255,255,255,.15);
  --glow-blue:rgba(180,180,180,.12);
}

/* Obsidian Gold — deepest black + warm 24K gold. Luxury terminal. */
[data-theme="obsidian"]{
  --bg:#040301;--bg2:#0a0805;--bg3:#100c08;--bg4:#1a140a;
  --card:#0a0703;--card2:#13100a;
  --b:rgba(212,175,55,.13);--b2:rgba(212,175,55,.05);
  --acc:#d4af37;--acc2:#f0c850;--acc3:#ffd96a;
  --acc-b:#b8860b;--acc-b2:#daa520;
  --brd:rgba(212,175,55,.16);
  --t:#f5e8c8;--t2:#8a7550;--t3:#5a4a30;
  --glow-acc:rgba(212,175,55,.22);
  --glow-blue:rgba(184,134,11,.16);
}

/* Midnight Abyss — deepest navy-black + electric blue. Quiet power. */
[data-theme="abyss"]{
  --bg:#02030a;--bg2:#050714;--bg3:#0a0f20;--bg4:#11182f;
  --card:#060a18;--card2:#0c1224;
  --b:rgba(77,127,255,.13);--b2:rgba(77,127,255,.05);
  --acc:#4d7fff;--acc2:#6a95ff;--acc3:#8db1ff;
  --acc-b:#1a4dcc;--acc-b2:#3366e0;
  --brd:rgba(77,127,255,.16);
  --t:#d8e4ff;--t2:#5570a0;--t3:#354968;
  --glow-acc:rgba(77,127,255,.22);
  --glow-blue:rgba(26,77,204,.16);
}

/* Pearl Cream — warm cream + soft caramel + coral. Boutique daytime. */
[data-theme="pearl"]{
  --bg:#fbf7f0;--bg2:#f5efe4;--bg3:#ede5d4;--bg4:#e3d8c0;
  --card:#ffffff;--card2:#faf5ec;
  --b:rgba(168,124,80,.18);--b2:rgba(168,124,80,.07);
  --acc:#c87d4a;--acc2:#e09968;--acc3:#f0b88c;
  --acc-b:#a85b3a;--acc-b2:#cc7755;
  --brd:rgba(168,124,80,.20);
  --gr:#1a7a3a;--rd:#c41a3f;--yl:#a06800;--cy:#1a6b8a;--pu:#6020e0;
  --gr2:rgba(26,122,58,.10);--rd2:rgba(196,26,63,.10);
  --yl2:rgba(160,104,0,.10);--cy2:rgba(26,107,138,.10);
  --t:#3a2818;--t2:#7a5d3a;--t3:#a0876a;
  --glow-acc:rgba(200,125,74,.18);
  --glow-blue:rgba(168,91,58,.14);
}

/* Sakura Mist — light pink + soft lavender. Romantic spring. */
[data-theme="sakura"]{
  --bg:#fff5f8;--bg2:#fbedf3;--bg3:#f5e0eb;--bg4:#ecd0e0;
  --card:#ffffff;--card2:#fdf3f7;
  --b:rgba(216,108,158,.18);--b2:rgba(216,108,158,.07);
  --acc:#d86c9e;--acc2:#e890b7;--acc3:#f0b3cf;
  --acc-b:#9a5ed4;--acc-b2:#b681e0;
  --brd:rgba(216,108,158,.20);
  --gr:#1a8050;--rd:#c41a4f;--yl:#a86800;--cy:#1a7aa8;--pu:#7c1add;
  --gr2:rgba(26,128,80,.10);--rd2:rgba(196,26,79,.10);
  --yl2:rgba(168,104,0,.10);--cy2:rgba(26,122,168,.10);
  --t:#3d1a2e;--t2:#7a4a68;--t3:#aa7a95;
  --glow-acc:rgba(216,108,158,.20);
  --glow-blue:rgba(154,94,212,.16);
}

/* Mint Paper — off-white + sage + sky. Fresh, focused, calm. */
[data-theme="paper"]{
  --bg:#f6faf7;--bg2:#eef5f0;--bg3:#e3ede6;--bg4:#d3e2d8;
  --card:#ffffff;--card2:#f4faf6;
  --b:rgba(80,140,110,.16);--b2:rgba(80,140,110,.06);
  --acc:#4a9b6e;--acc2:#6dbb8b;--acc3:#95d4ad;
  --acc-b:#3d8aa8;--acc-b2:#5fa9c4;
  --brd:rgba(80,140,110,.18);
  --gr:#1a7a3d;--rd:#c41a3f;--yl:#a86800;--cy:#0a78a0;--pu:#6020e0;
  --gr2:rgba(26,122,61,.10);--rd2:rgba(196,26,63,.10);
  --yl2:rgba(168,104,0,.10);--cy2:rgba(10,120,160,.10);
  --t:#1a3326;--t2:#4a6a58;--t3:#7a948a;
  --glow-acc:rgba(74,155,110,.18);
  --glow-blue:rgba(61,138,168,.14);
}

/* ========================================================================
   ✨ INTERACTIVE LAYER — works across all themes
   ======================================================================== */

/* Smooth theme transitions (only when actively morphing — avoid lag elsewhere). */
html.theme-morphing,

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{font-family:var(--S);background:var(--bg);color:var(--t);font-size:13px;overflow-x:hidden;}


.up{color:var(--gr)!important;} .dn{color:var(--rd)!important;} .nu{color:var(--t2)!important;}
.M{font-family:var(--M)!important;} .hide{display:none!important;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}


/* ============================
   AUTH PAGE
============================ */
#auth{min-height:100vh;display:flex;background:var(--bg);position:relative;overflow:hidden;}
.auth-stars{position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 15% 25%, rgba(0,230,118,0.2) 0%, transparent 100%),
  radial-gradient(1px 1px at 55% 65%, rgba(0,196,160,0.15) 0%, transparent 100%),
  radial-gradient(1px 1px at 78% 18%, rgba(0,212,255,0.18) 0%, transparent 100%),
  radial-gradient(2px 2px at 35% 78%, rgba(0,196,160,0.1) 0%, transparent 100%),
  radial-gradient(1px 1px at 90% 50%, rgba(0,229,192,0.12) 0%, transparent 100%),
  radial-gradient(1px 1px at 42% 42%, rgba(255,255,255,0.06) 0%, transparent 100%);}
/* Animated data flow particles */
.auth-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.auth-particles::before{content:'';position:absolute;width:1px;height:80px;background:linear-gradient(transparent,var(--acc2),transparent);left:20%;top:-80px;animation:particleFall 4s linear infinite;}
.auth-particles::after{content:'';position:absolute;width:1px;height:60px;background:linear-gradient(transparent,var(--cy),transparent);left:70%;top:-60px;animation:particleFall 6s linear infinite 2s;}
@keyframes iconShimmer{0%{left:-100%}60%,100%{left:200%}}
@keyframes particleFall{0%{top:-80px;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100vh;opacity:0}}
@keyframes taglineCycle{0%,80%{opacity:1}90%,100%{opacity:0}}
.auth-glow{position:absolute;width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(0,196,160,0.1) 0%,rgba(0,165,200,0.05) 40%,transparent 65%);top:-250px;right:-180px;pointer-events:none;animation:glowBreath 6s ease-in-out infinite;}
.auth-glow2{position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,0.08) 0%,transparent 60%);bottom:-100px;left:80px;pointer-events:none;animation:glowBreath 8s ease-in-out infinite 3s;}
@keyframes glowBreath{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.auth-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,196,160,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,196,160,0.04) 1px,transparent 1px);background-size:48px 48px;}
/* Flowing chart lines in background */
.auth-chart-bg{position:absolute;bottom:0;left:0;right:0;height:55%;opacity:.07;pointer-events:none;}

/* Split layout like Unusual Whales */
.auth-wrap{display:grid;grid-template-columns:1fr 520px;width:100%;min-height:100vh;position:relative;z-index:2;}
.auth-left{display:flex;flex-direction:column;justify-content:space-between;padding:44px 60px;border-right:1px solid var(--b);overflow:hidden;}
.auth-right{display:flex;align-items:center;justify-content:center;padding:40px;background:rgba(11,11,22,.6);min-height:100vh;}
.auth-logo{display:flex;align-items:center;gap:10px;font-family:var(--D);font-size:20px;font-weight:800;letter-spacing:-.5px;}

.auth-hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:50px 0 30px;}


.auth-h1{font-family:var(--D);font-size:50px;font-weight:800;line-height:1.04;letter-spacing:-2.2px;margin-bottom:18px;}
.auth-h1 em{font-style:normal;background:linear-gradient(125deg,var(--acc2),var(--cy),var(--acc3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.auth-desc{font-size:14px;color:var(--t2);line-height:1.75;max-width:400px;margin-bottom:38px;}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--b);border-radius:12px;overflow:hidden;}
.kpi{flex:1;padding:13px 16px;border-right:1px solid var(--b);}
.kpi:last-child{border-right:none;}
.kn{font-family:var(--M);font-size:18px;font-weight:700;color:var(--acc2);}
.kl{font-size:9px;color:var(--t3);letter-spacing:.5px;margin-top:3px;}
.auth-tag{display:inline-flex;align-items:center;gap:7px;background:rgba(0,196,160,.1);border:1px solid rgba(0,196,160,.25);border-radius:20px;padding:5px 13px;font-size:10px;color:var(--acc2);letter-spacing:.8px;margin-bottom:22px;width:fit-content;}
.auth-tag .dot{width:5px;height:5px;border-radius:50%;background:var(--gr);animation:blink 1.8s infinite;}
.tk-inner{display:flex;gap:30px;width:max-content;animation:belt 22s linear infinite;}
.tk-belt{overflow:hidden;border-top:1px solid var(--b2);padding:9px 0;margin-top:36px;}
.ti{display:flex;gap:6px;align-items:center;white-space:nowrap;font-family:var(--M);font-size:10px;}
.ti-s{color:var(--t3);}

/* RIGHT SIDE - Sign In form (like Unusual Whales exactly) */
.auth-form-wrap{width:100%;max-width:400px;}
.auth-signin-title{font-family:var(--D);font-size:28px;font-weight:800;text-align:center;margin-bottom:28px;letter-spacing:-.5px;}
.auth-form{animation:fadeUp .5s ease;}

/* Signup side message (shown when on signup tab) */
.auth-right-msg{text-align:center;padding:30px;}
.auth-right-msg h2{font-family:var(--D);font-size:28px;font-weight:800;letter-spacing:-.5px;margin-bottom:16px;}
.auth-right-msg p{font-size:14px;color:var(--t2);line-height:1.7;max-width:320px;margin:0 auto 28px;}

/* Buttons */
.btn-social{width:100%;padding:11px 16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--t);font-family:var(--S);font-size:13px;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;margin-bottom:10px;}
.btn-social:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);}
.or-row{display:flex;align-items:center;gap:12px;margin:16px 0;}
.or-row hr{flex:1;border:none;border-top:1px solid rgba(255,255,255,.1);}
.or-row span{font-size:11px;color:var(--t3);}
.f-group{margin-bottom:14px;}
.f-group label{display:block;font-size:11px;color:var(--t2);letter-spacing:.5px;font-weight:500;margin-bottom:6px;}
.f-inp{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:12px 14px;color:var(--t);font-family:var(--S);font-size:13px;outline:none;transition:all .2s;}
.f-inp:focus{border-color:var(--acc);background:rgba(0,196,160,.05);}
.f-inp::placeholder{color:var(--t3);}
.f-inp option{background:var(--bg3);}
.btn-main{width:100%;padding:13px;background:linear-gradient(135deg,var(--acc),var(--acc-b));border:none;border-radius:8px;color:#fff;font-family:var(--S);font-size:14px;font-weight:700;cursor:pointer;transition:all .22s;box-shadow:0 4px 20px rgba(0,196,160,.35);}
.btn-main:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(0,196,160,.5);}
.btn-main-teal{background:linear-gradient(135deg,var(--acc-b),var(--acc));box-shadow:0 4px 20px rgba(14,165,200,.35);}
.btn-main-teal:hover{box-shadow:0 6px 28px rgba(14,165,200,.5);}
.forgot{display:block;text-align:center;margin-top:14px;font-size:12px;color:var(--t3);cursor:pointer;transition:color .2s;}
.forgot:hover{color:var(--t2);}
.auth-tabs{display:flex;gap:4px;background:var(--bg3);border-radius:9px;padding:3px;margin-bottom:24px;}
.at{flex:1;padding:9px;border:none;background:none;color:var(--t3);font-family:var(--S);font-size:13px;font-weight:500;border-radius:7px;cursor:pointer;transition:all .2s;}
.at.on{background:var(--card2);color:var(--t);}
.auth-footer{font-size:11px;color:var(--t3);text-align:center;margin-top:16px;}
.auth-footer a{color:var(--acc2);text-decoration:none;}

::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(0,196,160,.2);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:rgba(0,196,160,.35);}

@media(max-width:900px){
  .auth-wrap{grid-template-columns:1fr;}
  .auth-left{display:none;}
  .auth-right{min-height:100vh;background:var(--bg);}

}
/* Mobile phone */
@media(max-width:600px){

  .auth-h1{font-size:36px;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}

}