/* ============================================================
   Elza A.I. — Design System (Apple / Glassmorphism / VisionOS)
   ============================================================ */
:root{
  --bg-0:#05060a; --bg-1:#0a0e16; --bg-2:#0f1622;
  --glass: rgba(255,255,255,.055);
  --glass-2: rgba(255,255,255,.08);
  --glass-3: rgba(255,255,255,.12);
  --stroke: rgba(255,255,255,.10);
  --stroke-2: rgba(255,255,255,.16);
  --text:#eef1f6;
  --text-dim: rgba(238,241,246,.64);
  --text-faint: rgba(238,241,246,.40);
  --accent:#0A84FF;
  --accent-soft: rgba(10,132,255,.16);
  --cyan:#3dd7e6;
  --ok:#34d399; --warn:#f5b94a; --danger:#ff6b6b;
  --r-lg:24px; --r-md:18px; --r-sm:14px; --r-xs:12px; --pill:999px;
  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --shadow-sm: 0 8px 28px rgba(0,0,0,.35);
  --ease: cubic-bezier(.22,.61,.36,1);
  --font: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Inter,Roboto,system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg-0);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-weight:400;
  letter-spacing:-0.01em;
}
a{color:inherit}
button{font-family:inherit}
::selection{background:rgba(61,215,230,.3)}

/* ---- Fundo vivo (vídeo + camadas) ---- */
.elza-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  radial-gradient(1100px 760px at 72% -8%, #16314e 0%, transparent 55%),
  radial-gradient(900px 700px at 10% 110%, #102033 0%, transparent 55%),
  var(--bg-0);}
.elza-bg video,.elza-bg img.bgimg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;filter:saturate(1.05) contrast(1.02);
}
.elza-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg, rgba(5,6,10,.35) 0%, rgba(5,6,10,.55) 55%, rgba(5,6,10,.82) 100%);}
.elza-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:linear-gradient(var(--stroke) 1px,transparent 1px),linear-gradient(90deg,var(--stroke) 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(70% 60% at 50% 30%,#000 0%,transparent 80%);}

/* ---- Vidro ---- */
.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(1.4);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--stroke);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.glass-soft{
  background:var(--glass);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--stroke);
}

/* ---- Botões ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid var(--stroke-2);background:var(--glass-2);color:var(--text);
  border-radius:var(--pill);padding:12px 20px;font-size:15px;font-weight:500;
  cursor:pointer;transition:all .22s var(--ease);backdrop-filter:blur(10px);
}
.btn:hover{background:var(--glass-3);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 8px 24px rgba(10,132,255,.4)}
.btn-primary:hover{background:#2a96ff;box-shadow:0 10px 30px rgba(10,132,255,.5)}
.btn-ghost{background:transparent;border-color:var(--stroke)}

/* ---- Inputs ---- */
.field{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--stroke);
  border-radius:var(--r-sm);padding:13px 15px;color:var(--text);font-size:15px;
  transition:all .22s var(--ease);outline:none;
}
.field::placeholder{color:var(--text-faint)}
.field:focus{border-color:rgba(10,132,255,.6);box-shadow:0 0 0 4px var(--accent-soft);background:rgba(255,255,255,.06)}
.label{display:block;font-size:12.5px;color:var(--text-dim);margin:0 0 7px 2px;font-weight:500}

/* ---- Util ---- */
.center-screen{min-height:100dvh;display:grid;place-items:center;padding:24px}
.muted{color:var(--text-dim)}
.faint{color:var(--text-faint)}
.row{display:flex;gap:12px}
.col{display:flex;flex-direction:column}
.fade-up{animation:fadeUp .5s var(--ease) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}