@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0D1117;--ink2:#161C25;--ink3:#1E2632;--line:#273040;--line2:#3a4558;
  --paper:#F4F5F0;--card:#FCFCFA;--line-l:#E3E5DD;
  --lime:#C8FF4D;--lav:#B7AEFF;--violet:#4A3BD0;--coral:#FF7A5C;
  --lime-t:#C8FF4D;--lav-t:#B7AEFF;--coral-t:#FF7A5C;
  --on:#0D1117;
  --mut:#A9B4C2;--mut-l:#4B5563;
  --glass:rgba(255,255,255,.03);--glass2:rgba(255,255,255,.08);
  --side:#0A0E13;--colbg:#11161E;--colover:#141d14;
  --hm0:#1E2632;--hm1:#4d6a1f;--hm2:#8fd12f;
  --shadow:rgba(0,0,0,.6);
  --topbg:rgba(13,17,23,.8);--tabbg:rgba(13,17,23,.88);--grid:#232b37;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
/* ---------- modo claro ---------- */
html[data-theme="light"]{
  --ink:#F3F4EE;--ink2:#FFFFFF;--ink3:#ECEEE6;--line:#DFE2D8;--line2:#C5CABB;
  --paper:#12161D;--card:#FFFFFF;
  --lime-t:#4E7A00;--lav-t:#5546D6;--coral-t:#D2462A;
  --mut:#5E6878;
  --glass:rgba(13,17,23,.02);--glass2:rgba(13,17,23,.06);
  --side:#FFFFFF;--colbg:#EDEFE7;--colover:#EEF8D9;
  --hm0:#E4E7DE;--hm1:#D7F0A0;--hm2:#A6DB3A;
  --shadow:rgba(30,40,20,.14);
  --topbg:rgba(243,244,238,.82);--tabbg:rgba(255,255,255,.92);--grid:#E4E7DE;
  color-scheme:light;
}
html{transition:background-color .3s}
body{transition:background-color .35s var(--ease),color .35s var(--ease)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Sora','Inter',sans-serif;letter-spacing:-.025em;line-height:1.08;font-weight:600}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
img,svg{display:block}
.ic{flex:none}
.wrap{width:min(1200px,92vw);margin:0 auto}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;border-radius:999px;font-weight:600;font-size:15px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,border-color .25s;white-space:nowrap}
.btn.sm{padding:10px 18px;font-size:14px}
.btn.lg{padding:18px 30px;font-size:16px}
.btn-lime{background:var(--lime);color:var(--on)}
.btn-lime:hover{box-shadow:0 14px 34px -8px rgba(200,255,77,.55);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);background:var(--glass)}
.btn-ghost:hover{background:var(--glass2);border-color:var(--line2)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(13,17,23,.5)}
.btn-lav{background:var(--lav);color:var(--on)}
.btn:disabled{opacity:.6;cursor:wait}

.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.chip-lime{background:var(--lime);color:var(--on)}
.chip-lav{background:#E6E3FF;color:var(--violet)}
.chip-dark{background:var(--ink2);border:1px solid var(--line);color:var(--paper)}
.dot-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lime);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(200,255,77,.7)}70%{box-shadow:0 0 0 10px rgba(200,255,77,0)}100%{box-shadow:0 0 0 0 rgba(200,255,77,0)}}

.logo{display:inline-flex;align-items:center;gap:10px;font-family:'Sora','Inter',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.04em}
.logo-mark{display:inline-block;width:30px;height:30px;flex:none}
.logo-mark svg{width:100%;height:100%;display:block;overflow:visible}
.logo:hover .logo-mark svg{transform:rotate(-30deg);transition:transform .6s var(--ease)}
.logo-mark svg{transition:transform .6s var(--ease)}

.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mut);font-weight:500}
.field input,.field select,.field textarea{background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--paper);font-size:16px;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime-t);outline:none;box-shadow:0 0 0 4px rgba(200,255,77,.12)}
.field.err input{border-color:var(--coral-t)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

.toast-wrap{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:1000;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:10px;background:var(--ink2);color:var(--paper);border:1px solid var(--line);padding:14px 18px;border-radius:16px;box-shadow:0 20px 40px -12px rgba(0,0,0,.5);font-size:14px;max-width:380px;animation:tin .5s var(--ease)}
.toast.lime{background:var(--lime);color:var(--on);border-color:transparent}
.toast.out{animation:tout .5s var(--ease) forwards}
@keyframes tin{from{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes tout{to{opacity:0;transform:translateY(12px)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:1001}

input:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
::selection{background:var(--lime);color:var(--on)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}

/* botão de tema */
.theme-t{display:inline-flex;align-items:center;gap:8px;padding:6px;border-radius:999px;background:var(--ink);border:1px solid var(--line);cursor:pointer;position:relative}
.theme-t span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--mut);transition:.3s var(--ease);position:relative;z-index:1}
.theme-t::before{content:'';position:absolute;top:5px;left:5px;width:32px;height:32px;border-radius:50%;background:var(--lime);transition:transform .45s cubic-bezier(.5,1.6,.4,1)}
html[data-theme="light"] .theme-t::before{transform:translateX(38px)}
.theme-t span.on{color:var(--on)}