/* ==========================================================================
   Reality Store — Design System
   Dark + Verde  |  fundo dot-grid com halo esmeralda
   ========================================================================== */

:root{
  /* superficies */
  --bg:            #030806;
  --bg-2:          #060d0a;
  --surface:       rgba(255,255,255,.030);
  --surface-2:     rgba(255,255,255,.055);
  --surface-solid: #0a1310;
  --stroke:        rgba(255,255,255,.075);
  --stroke-2:      rgba(255,255,255,.14);

  /* marca */
  --green:         #12E29A;
  --green-2:       #37F5B4;
  --green-deep:    #067a53;
  --green-glow:    rgba(18,226,154,.30);
  --green-soft:    rgba(18,226,154,.10);

  /* texto */
  --text:          #EAF6F1;
  --text-2:        #9DB3AB;
  --text-3:        #607a71;

  /* estados */
  --danger:        #FF5C7A;
  --warn:          #FFB648;
  --info:          #58A6FF;
  --purple:        #A78BFA;

  /* metrica */
  --radius:        18px;
  --radius-sm:     12px;
  --radius-lg:     26px;
  --shadow:        0 24px 60px -20px rgba(0,0,0,.85);
  --shadow-green:  0 18px 50px -18px rgba(18,226,154,.45);
  --ease:          cubic-bezier(.22,.9,.3,1);

  --font:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display:  'Sora', var(--font);
  --maxw:          1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; font-family:var(--font); color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  line-height:1.6; overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; }
::selection{ background:var(--green); color:#032018; }

/* ---------- FUNDO: dot-grid + halo verde (usado na index e no app) ------- */
.bg-canvas{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(140,255,214,.10) 1px, transparent 0);
  background-size:26px 26px;
  background-position:-13px -13px;
}
.bg-canvas::before{
  content:''; position:absolute; top:-320px; left:-260px; width:1100px; height:1000px;
  background:radial-gradient(closest-side, rgba(16,190,130,.42), rgba(9,90,64,.16) 45%, transparent 72%);
  filter:blur(20px);
}
.bg-canvas::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 70% at 50% 0%,  transparent 30%, rgba(3,8,6,.55) 78%, var(--bg) 100%),
    radial-gradient(80% 60% at 90% 110%, rgba(10,80,58,.22), transparent 70%);
}

/* ------------------------------ TIPOGRAFIA ------------------------------ */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.13; letter-spacing:-.025em; margin:0 0 .5em; }
h1{ font-size:clamp(2.3rem, 5.4vw, 4rem); }
h2{ font-size:clamp(1.8rem, 3.6vw, 2.85rem); }
h3{ font-size:clamp(1.15rem, 1.7vw, 1.4rem); }
p{ margin:0 0 1rem; color:var(--text-2); }
.lead{ font-size:clamp(1.02rem,1.35vw,1.2rem); color:var(--text-2); max-width:62ch; }
.gradient-text{
  background:linear-gradient(96deg,var(--green-2) 0%, var(--green) 42%, #9BFFDA 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ------------------------------ LAYOUT ---------------------------------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.section{ padding:clamp(64px,9vw,120px) 0; position:relative; }
.center{ text-align:center; }
.stack-sm > * + *{ margin-top:.5rem; }

/* ------------------------------ BOTOES ---------------------------------- */
.btn{
  --btn-bg:var(--surface-2);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  padding:.82em 1.5em; border-radius:999px; font-weight:600; font-size:.95rem;
  background:var(--btn-bg); border:1px solid var(--stroke-2); color:var(--text);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s;
  white-space:nowrap; letter-spacing:-.01em;
}
.btn:hover{ transform:translateY(-2px); border-color:rgba(18,226,154,.45); }
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:linear-gradient(135deg,var(--green-2),var(--green) 55%, #0BC488);
  color:#022019; border-color:transparent; font-weight:700;
  box-shadow:var(--shadow-green);
}
.btn-primary:hover{ box-shadow:0 22px 60px -16px rgba(18,226,154,.65); }
.btn-ghost{ background:transparent; }
.btn-lg{ padding:1.02em 2em; font-size:1.02rem; }
.btn-sm{ padding:.5em .95em; font-size:.83rem; border-radius:10px; }
.btn-block{ width:100%; }
.btn-danger{ background:rgba(255,92,122,.12); border-color:rgba(255,92,122,.35); color:#FF9DB0; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* ------------------------------- LOGO ----------------------------------- */
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800;
  font-size:1.22rem; letter-spacing:-.03em; }
.logo-mark{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--green-2),#0BB57E);
  box-shadow:0 8px 22px -8px var(--green-glow);
}
.logo-mark svg{ width:19px; height:19px; }
.logo-mark img{ width:100%; height:100%; border-radius:inherit; display:block; }
.logo-mark.animated{
  background:#04100C; border:1px solid rgba(18,226,154,.35); padding:0; overflow:hidden;
  box-shadow:0 8px 22px -10px var(--green-glow);
}

/* ------------------------------ CARDS ----------------------------------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--stroke); border-radius:var(--radius);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  position:relative; overflow:hidden;
}
.card-pad{ padding:26px; }
.glow-border{
  position:relative;
}
.glow-border::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(140deg, rgba(18,226,154,.55), transparent 45%, rgba(18,226,154,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}

/* ------------------------------ PILLS ----------------------------------- */
.pill{
  display:inline-flex; align-items:center; gap:.5em; padding:.42em 1em;
  border-radius:999px; font-size:.8rem; font-weight:600; letter-spacing:.01em;
  background:var(--green-soft); border:1px solid rgba(18,226,154,.25); color:var(--green-2);
}
.dot-live{ width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 0 var(--green-glow); animation:pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(18,226,154,.55); }
  70%{ box-shadow:0 0 0 9px rgba(18,226,154,0); }
  100%{ box-shadow:0 0 0 0 rgba(18,226,154,0); }
}

/* ------------------------------ FORMS ----------------------------------- */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.8rem; font-weight:600; color:var(--text-2); margin-bottom:6px; letter-spacing:.01em; }
.input, select.input, textarea.input{
  width:100%; padding:.85em 1em; border-radius:var(--radius-sm);
  background:rgba(0,0,0,.35); border:1px solid var(--stroke-2); color:var(--text);
  transition:border-color .2s, box-shadow .2s, background .2s; outline:none;
}
.input::placeholder{ color:#4d6960; }
.input:focus{ border-color:var(--green); box-shadow:0 0 0 3px rgba(18,226,154,.14); background:rgba(0,0,0,.5); }
.input:disabled{ opacity:.7; }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312E29A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8em center; background-size:16px; padding-right:2.4em; }
.hint{ font-size:.76rem; color:var(--text-3); margin-top:5px; }
.hint b{ color:var(--green); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:520px){ .form-row{ grid-template-columns:1fr; } }

/* interruptor de login (email <-> usuario) */
.switcher{
  display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:rgba(0,0,0,.4); border:1px solid var(--stroke); border-radius:999px; margin-bottom:18px;
}
.switcher button{
  padding:.6em; border-radius:999px; font-size:.85rem; font-weight:600; color:var(--text-2);
  transition:.25s var(--ease);
}
.switcher button.on{ background:linear-gradient(135deg,var(--green-2),var(--green)); color:#022019; }

/* ------------------------------ MODAL ----------------------------------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  padding:20px; background:rgba(2,7,5,.78); backdrop-filter:blur(9px);
  opacity:0; transition:opacity .28s var(--ease);
}
.modal-backdrop.open{ display:flex; opacity:1; }
.modal{
  width:100%; max-width:440px; max-height:92vh; overflow-y:auto;
  background:linear-gradient(180deg,#08120e, #050c09);
  border:1px solid var(--stroke-2); border-radius:var(--radius-lg);
  padding:32px; box-shadow:var(--shadow); position:relative;
  transform:translateY(18px) scale(.97); transition:transform .32s var(--ease);
}
.modal-backdrop.open .modal{ transform:none; }
.modal::before{
  content:''; position:absolute; inset:0 0 auto; height:170px; border-radius:inherit;
  background:radial-gradient(80% 100% at 50% 0%, rgba(18,226,154,.16), transparent 70%);
  pointer-events:none;
}
.modal h3{ margin-bottom:.2em; }
.modal .sub{ font-size:.88rem; color:var(--text-2); margin-bottom:22px; }
.modal-close{
  position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:50%;
  background:var(--surface-2); color:var(--text-2); display:grid; place-items:center; font-size:1.1rem;
  transition:.2s;
}
.modal-close:hover{ background:rgba(255,92,122,.16); color:#FF9DB0; }
.modal-foot{ margin-top:16px; text-align:center; font-size:.85rem; color:var(--text-3); }
.modal-foot a{ color:var(--green); font-weight:600; }

/* mensagens */
.alert{ padding:.8em 1em; border-radius:var(--radius-sm); font-size:.86rem; margin-bottom:14px; display:none; }
.alert.show{ display:block; }
.alert-error{ background:rgba(255,92,122,.12); border:1px solid rgba(255,92,122,.3); color:#FFB3C1; }
.alert-ok{ background:var(--green-soft); border:1px solid rgba(18,226,154,.3); color:var(--green-2); }

/* toast */
#toast-wrap{ position:fixed; right:20px; bottom:20px; z-index:400; display:flex; flex-direction:column; gap:10px; }
.toast{
  padding:13px 18px; border-radius:14px; font-size:.88rem; font-weight:500;
  background:#0b1a15; border:1px solid var(--stroke-2); box-shadow:var(--shadow);
  animation:slideIn .3s var(--ease); max-width:340px;
}
.toast.ok{ border-color:rgba(18,226,154,.45); color:var(--green-2); }
.toast.err{ border-color:rgba(255,92,122,.45); color:#FFB3C1; }
@keyframes slideIn{ from{ opacity:0; transform:translateX(28px); } }

/* utilidades */
.spinner{
  width:16px; height:16px; border-radius:50%; border:2px solid rgba(2,32,25,.35);
  border-top-color:#022019; animation:spin .7s linear infinite; display:inline-block;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }