/* =========================================================================
   ThynkGrowth Labs — shared styles
   Site chrome (nav, footer, theme toggle, tokens) is copied from the main
   site so Labs matches it exactly. Labs tool components are scoped under
   .labs so they never collide with the site's own .btn / .wrap rules.
   ========================================================================= */

/* ---------- site design tokens (dark default) ---------- */
:root{
  --statband:#1b1329;--statline:rgba(255,255,255,.07);
  --elev:#261d3f;--elevband:#1f1735;--elevline:rgba(255,255,255,.20);--elevline2:rgba(255,255,255,.10);
  --sheen:rgba(255,255,255,.03);--shadowc:rgba(0,0,0,.35);
  --ok:#4ade80;--okline:rgba(74,222,128,.4);--okbg:rgba(74,222,128,.05);
  --patop:.035;--logofilter:brightness(0) invert(1);
  --purple:#802bff;--purple-2:#a25bff;--purple-soft:rgba(128,43,255,.11);--purple-line:rgba(128,43,255,.36);
  --bg:#171023;--band:#1b1329;--card:#1e162e;--card-2:#271d3b;
  --fg:#ffffff;--muted:#a89fbd;--muted-2:#776d8f;
  --line:rgba(255,255,255,.07);--line-strong:rgba(255,255,255,.15);
  --glow:rgba(128,43,255,.18);--nav-bg:rgba(23,16,35,.72);--foot-bg:#120c1d;
  --display:'Creato Display','Montserrat',sans-serif;--body:'Montserrat',sans-serif;--ui:'Inter',sans-serif;
  /* Labs-only tokens layered on top */
  --text:var(--fg);--accent:var(--purple);--accent-ink:#c4a3ff;
  --capri:#00BFFF;--amber:#ffb454;--red:#ff6b81;
  --surface:var(--card);--sunk:#0e0917;--dim:var(--muted-2);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset;
}

/* ---------- light theme: explicit toggle ---------- */
html[data-theme="light"]{
  --bg:#faf9fd;--band:#f2ecfd;--card:#ffffff;--card-2:#f5f2fc;
  --fg:#171023;--muted:#4d4463;--muted-2:#8b829f;
  --line:rgba(23,16,35,.09);--line-strong:rgba(23,16,35,.18);
  --glow:rgba(128,43,255,.24);--nav-bg:rgba(250,249,253,.85);--foot-bg:#f1eef9;
  --purple-2:#6f1fe8;
  --statband:linear-gradient(100deg,#f0e7ff,#f9f4ff);--statline:rgba(23,16,35,.08);
  --elev:#ffffff;--elevband:#f1eef9;--elevline:rgba(23,16,35,.16);--elevline2:rgba(23,16,35,.08);
  --sheen:rgba(23,16,35,.015);--shadowc:rgba(23,16,35,.10);
  --ok:#16a34a;--okline:rgba(22,163,74,.5);--okbg:rgba(22,163,74,.06);
  --patop:.05;--logofilter:none;
  --accent-ink:#6a1fd8;--capri:#0090c4;--amber:#b06f00;--red:#d63a52;--sunk:#f2eefb;--shadow:none;
}

/* ---------- light theme: system default ---------- */
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]){
    --bg:#faf9fd;--band:#f2ecfd;--card:#ffffff;--card-2:#f5f2fc;
    --fg:#171023;--muted:#4d4463;--muted-2:#8b829f;
    --line:rgba(23,16,35,.09);--line-strong:rgba(23,16,35,.18);
    --glow:rgba(128,43,255,.24);--nav-bg:rgba(250,249,253,.85);--foot-bg:#f1eef9;
    --purple-2:#6f1fe8;
    --statband:linear-gradient(100deg,#f0e7ff,#f9f4ff);--statline:rgba(23,16,35,.08);
    --elev:#ffffff;--elevband:#f1eef9;--elevline:rgba(23,16,35,.16);--elevline2:rgba(23,16,35,.08);
    --sheen:rgba(23,16,35,.015);--shadowc:rgba(23,16,35,.10);
    --ok:#16a34a;--okline:rgba(22,163,74,.5);--okbg:rgba(22,163,74,.06);
    --patop:.05;--logofilter:none;
    --accent-ink:#6a1fd8;--capri:#0090c4;--amber:#b06f00;--red:#d63a52;--sunk:#f2eefb;--shadow:none;
  }
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;font-synthesis:none}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--purple);color:#fff}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.14}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}

/* ---------- buttons (site) ---------- */
.btn{font-family:var(--ui);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;padding:15px 28px;border-radius:9px;transition:background .15s,border-color .15s,color .15s,transform .15s;cursor:pointer;border:none}
.btn-primary{background:var(--purple);color:#fff}
.btn-primary:hover{background:#6f1fe8;transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--purple);color:var(--purple)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--purple);outline-offset:3px}

/* ---------- nav (site) ---------- */
nav{position:sticky;top:0;z-index:60;background:var(--nav-bg)!important;backdrop-filter:blur(16px);border-bottom:1px solid transparent;border-bottom-color:var(--line)!important;transition:border-color .25s,background .25s}
nav.scrolled{background:rgba(23,16,35,.92)!important;border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav-links{display:flex;gap:36px;font-family:var(--ui);font-size:13.5px;font-weight:500;color:var(--muted)}
.nav-links a{padding:6px 0;border-bottom:2px solid transparent;transition:color .15s}
.nav-links a:hover{color:var(--fg)}
.nav-links a.active{color:var(--fg);border-bottom-color:var(--purple)}
.nav-cta{font-size:13.5px;padding:10px 22px}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:8px;-webkit-tap-highlight-color:transparent}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--fg);margin:5px 0;border-radius:2px;transition:transform .28s ease,opacity .2s ease}
@media(max-width:820px){
  .nav-inner{flex-wrap:nowrap}
  .nav-cta{margin-left:auto}
  .nav-toggle{display:inline-flex;flex-direction:column;order:99}
  .nav-links{display:flex!important;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 16px 34px rgba(0,0,0,.28);max-height:0;overflow:hidden;transition:max-height .32s ease;padding:0 20px;z-index:70}
  nav.open .nav-links{max-height:82vh;padding:4px 20px 14px}
  .nav-links a{padding:15px 2px;border-top:1px solid var(--line);font-size:15.5px;width:100%;display:block}
  .nav-links a:first-child{border-top:0}
  nav.open .nav-toggle span:nth-child(1){transform:translateY(12px) rotate(45deg)}
  nav.open .nav-toggle span:nth-child(2){opacity:0}
  nav.open .nav-toggle span:nth-child(3){transform:translateY(-12px) rotate(-45deg)}
}
@media(max-width:400px){.nav-cta{padding:9px 14px;font-size:12.5px}}

/* ---------- footer (site) ---------- */
footer{border-top:1px solid var(--line);padding:64px 0 36px;background:var(--foot-bg)}
html[data-theme="light"] footer{background:linear-gradient(180deg,#f2ecfd,#ece3fc)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.foot-brand p{color:var(--muted);font-family:var(--ui);font-size:13px;margin-top:14px;max-width:280px}
.foot h4{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px}
.foot a{display:block;font-family:var(--ui);font-size:13.5px;color:var(--muted);padding:5px 0}
.foot a:hover{color:var(--fg)}
.foot-bottom{border-top:1px solid var(--line);padding-top:28px;display:flex;justify-content:space-between;align-items:center;font-family:var(--ui);font-size:12.5px;color:var(--muted-2);flex-wrap:wrap;gap:12px}
.foot-bottom a{color:var(--muted-2)}
.foot-bottom a:hover{color:var(--fg)}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}

/* ---------- theme toggle (site, floating) ---------- */
.theme-toggle{position:fixed;right:22px;bottom:22px;z-index:70;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:var(--card);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 34px var(--shadowc);transition:color .2s,border-color .2s,transform .15s}
.theme-toggle:hover{color:var(--fg);border-color:var(--purple-line);transform:translateY(-2px)}
@media(max-width:820px){.theme-toggle{bottom:16px;right:16px;width:42px;height:42px}}
.theme-toggle svg{width:17px;height:17px}
.tt-moon{display:none}
html[data-theme="light"] .tt-sun{display:none}
html[data-theme="light"] .tt-moon{display:inline-flex}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]) .tt-sun{display:none}
  html:not([data-theme="dark"]) .tt-moon{display:inline-flex}
}

/* ---------- logo swap (site) ---------- */
img.lg-light{display:none!important}
html[data-theme="light"] img.lg-dark{display:none!important}
html[data-theme="light"] img.lg-light{display:block!important}
@media (prefers-color-scheme: light){
  html:not([data-theme="dark"]) img.lg-dark{display:none!important}
  html:not([data-theme="dark"]) img.lg-light{display:block!important}
}
.logo{display:inline-flex;align-items:center}

/* =========================================================================
   Labs tool components — scoped under .labs
   ========================================================================= */
.labs a{color:var(--capri)}
.labs :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.labs .wrap{max-width:700px;margin:0 auto;padding:42px 22px 70px}
.labs .wrap.wide{max-width:900px}

.labs .btn{background:var(--accent);color:#fff;border:0;text-decoration:none;font:inherit;font-family:var(--ui);font-weight:600;font-size:14px;padding:12px 22px;border-radius:9px;display:inline-block;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.labs .btn:hover{background:#8f45ff}
.labs .btn:disabled{opacity:.55;cursor:not-allowed}
.labs .btn.q{background:none;border:1px solid var(--line);color:var(--muted);font-weight:500;font-size:13px;padding:8px 14px}
.labs .btn.q:hover{border-color:var(--accent);color:var(--fg);background:none}
.labs .btn.wide{width:100%;padding:14px;text-align:center}

.labs input,.labs textarea,.labs select{width:100%;background:var(--sunk);border:1px solid var(--line);color:var(--fg);border-radius:10px;padding:11px 13px;font:inherit;font-family:var(--ui);font-size:14.5px}
.labs input::placeholder,.labs textarea::placeholder{color:var(--dim)}
.labs label{display:block;font-family:var(--ui);font-size:13px;color:var(--muted);margin-bottom:7px}

.labs .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}

/* gate */
.labs .gate{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(10,6,18,.82);backdrop-filter:blur(7px)}
html[data-theme="light"] .labs .gate{background:rgba(23,16,35,.4)}
@media (prefers-color-scheme: light){html:not([data-theme="dark"]) .labs .gate{background:rgba(23,16,35,.4)}}
.labs .gate.on{display:flex}
.labs .gate-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:30px;max-width:400px;width:100%}
.labs .gate-card .glogo{height:24px;width:auto;margin-bottom:16px;display:block}
.labs .gate-card h2{margin:0 0 8px;font-family:var(--display);font-size:21px;font-weight:700;letter-spacing:-.02em}
.labs .gate-card p.g{margin:0 0 22px;color:var(--muted);font-size:14px}
.labs .gate-card .f{margin-bottom:13px}
.labs .gate-err{color:var(--red);font-size:13px;margin:0 0 12px;display:none}
.labs .gate-fine{font-size:12px;color:var(--dim);margin:14px 0 0;text-align:center;line-height:1.6}
.labs .locked{filter:blur(5px);pointer-events:none;user-select:none}