/* ============================================================
   nexus.css — Design System NexusHub (compartilhado)
   Usado por: landing, auth, app, admin.
   ============================================================ */
:root{
  --bg:#02040a; --bg2:#040810;
  --surface:rgba(10,16,35,0.8); --surface2:rgba(15,22,45,0.9);
  --border:rgba(80,140,255,0.1); --border-glow:rgba(80,140,255,0.35);
  --accent:#4f8fff; --accent2:#00d4ff; --accent3:#a855f7; --accent4:#f472b6;
  --gold:#f59e0b; --green:#10b981; --red:#ef4444;
  --text:#e8edf7; --muted:#5a6a8a; --muted2:#8895b0;
  --font-display:'Syne',sans-serif;
  --font-body:'Space Grotesk',sans-serif;
  --font-mono:'DM Mono','Courier New',monospace;
  --planner:#a855f7; --coder:#10b981; --reviewer:#f472b6;
  --writer:#4f8fff; --quick:#f59e0b; --builder:#00d4ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg); color:var(--text); font:16px/1.65 var(--font-body)}

/* ---- fundo: rede plexus + orbs ---- */
.bg-layer{position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden}
#plexus{position:absolute; inset:0; width:100%; height:100%; opacity:.5}
.orb{position:absolute; border-radius:50%; filter:blur(30px)}
.orb.a{top:-140px; left:-100px; width:440px; height:440px;
  background:radial-gradient(circle, rgba(79,143,255,0.14), transparent 70%)}
.orb.b{top:-80px; right:-120px; width:400px; height:400px;
  background:radial-gradient(circle, rgba(168,85,247,0.11), transparent 70%)}
.orb.c{bottom:-160px; left:30%; width:520px; height:520px;
  background:radial-gradient(circle, rgba(0,212,255,0.07), transparent 70%)}

/* ---- tipografia / marca ---- */
.mark{
  font-family:var(--font-display); font-weight:800; letter-spacing:.2px;
  background:linear-gradient(100deg,var(--accent2) 0%,var(--accent) 30%,
    var(--accent3) 62%,var(--accent4) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mark .diamond{-webkit-text-fill-color:var(--accent4); color:var(--accent4)}
.gradient-text{
  background:linear-gradient(100deg,var(--accent2),var(--accent) 40%,var(--accent3),var(--accent4));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
h1,h2,h3{font-family:var(--font-display)}

/* ---- botões ---- */
.btn{font:inherit; font-weight:600; cursor:pointer; border-radius:12px; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .2s, box-shadow .3s, border-color .25s, background .25s; border:none}
.btn-primary{padding:13px 26px; color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 24px rgba(79,143,255,0.3), 0 4px 16px rgba(0,0,0,0.3)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 44px rgba(0,212,255,0.5)}
.btn-ghost{padding:12px 24px; color:var(--text);
  background:rgba(79,143,255,0.05); border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--border-glow); background:rgba(79,143,255,0.09); transform:translateY(-2px)}
.btn-block{width:100%}
.btn:focus-visible{outline:2px solid var(--accent2); outline-offset:2px}

/* ---- cartões de vidro ---- */
.glass{background:var(--surface); border:1px solid var(--border);
  backdrop-filter:blur(24px) saturate(180%); -webkit-backdrop-filter:blur(24px); border-radius:20px}

/* ---- badge ---- */
.badge{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:100px;
  border:1px solid var(--border-glow); background:rgba(79,143,255,0.06);
  font-size:13px; color:var(--muted2); letter-spacing:.4px}
.badge b{color:var(--text); font-weight:600}
.badge-dot{width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);box-shadow:0 0 8px var(--green)}
  50%{opacity:.65;transform:scale(1.35);box-shadow:0 0 16px var(--green)}}

/* ---- formulários ---- */
label{display:block; font-size:13px; color:var(--muted2); margin:0 0 6px; letter-spacing:.3px}
input,textarea,select{width:100%; background:rgba(2,4,10,0.6); border:1px solid var(--border);
  color:var(--text); font:inherit; padding:13px 15px; border-radius:12px; outline:none;
  transition:border-color .25s, box-shadow .25s}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:focus,textarea:focus,select:focus{border-color:var(--border-glow);
  box-shadow:0 0 0 3px rgba(79,143,255,0.1)}

/* ---- utilidades ---- */
.muted{color:var(--muted2)}
.dim{color:var(--muted)}
.center{text-align:center}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}