/* MagoZap — telas de entrada e cadastro */
:root{
  --ink:#0A0F1C;--ink-2:#111A2E;--ink-3:#1B2740;--emerald:#10B981;--emerald-2:#34D399;
  --emerald-dk:#059669;--paper:#fff;--text:#0A0F1C;--text-2:#475569;--line:#E2E8F0;
  --text-inv-2:#9FB0C9;--line-dk:rgba(255,255,255,.10);
  --font-disp:'Bricolage Grotesque',system-ui,sans-serif;--font-body:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--text);background:var(--ink);
  min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
a{color:inherit;text-decoration:none}

/* Painel lateral (marca) */
.aside{position:relative;overflow:hidden;padding:48px;color:#E9EEF7;
  background:radial-gradient(900px 500px at 30% -10%,rgba(16,185,129,.22),transparent 60%),var(--ink);
  display:flex;flex-direction:column;justify-content:space-between}
.aside::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent 85%)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-disp);font-weight:800;font-size:1.4rem;color:#fff;position:relative;z-index:2}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--emerald),var(--emerald-dk));display:grid;place-items:center;color:#04231A}
.aside-mid{position:relative;z-index:2}
.aside-mid h2{font-family:var(--font-disp);font-size:2.1rem;line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0 0 16px}
.aside-mid p{color:var(--text-inv-2);max-width:38ch;font-size:1.05rem}
.aside-list{list-style:none;padding:0;margin:24px 0 0}
.aside-list li{display:flex;gap:10px;padding:8px 0;color:#CBD6E8}
.aside-list .c{color:var(--emerald-2)}
.aside-foot{position:relative;z-index:2;color:var(--text-inv-2);font-size:.85rem}

/* Formulário */
.main{background:var(--paper);display:flex;align-items:center;justify-content:center;padding:40px}
.card{width:100%;max-width:420px}
.card h1{font-family:var(--font-disp);font-size:1.8rem;letter-spacing:-.02em;margin:0 0 6px}
.card .sub{color:var(--text-2);margin:0 0 26px}
.campo{margin-bottom:16px}
.campo label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.campo input{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:11px;font-size:1rem;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.campo input:focus{outline:none;border-color:var(--emerald);box-shadow:0 0 0 4px rgba(16,185,129,.12)}
.linha{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{width:100%;border:0;cursor:pointer;font-family:inherit;font-weight:600;font-size:1.02rem;
  padding:15px;border-radius:11px;background:var(--emerald);color:#04231A;transition:transform .15s,background .15s;margin-top:6px}
.btn:hover{transform:translateY(-2px);background:var(--emerald-2)}
.alt{text-align:center;margin-top:22px;color:var(--text-2);font-size:.95rem}
.alt a{color:var(--emerald-dk);font-weight:600}
.voltar{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:.9rem;margin-bottom:24px}
.voltar:hover{color:var(--emerald-dk)}

/* alertas */
.alert{padding:12px 15px;border-radius:11px;font-size:.92rem;margin-bottom:18px}
.alert-danger{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA}
.alert-success{background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0}
.termos{font-size:.82rem;color:var(--text-2);margin-top:14px;text-align:center}

@media (max-width:860px){
  body{grid-template-columns:1fr}
  .aside{display:none}
  .main{min-height:100vh}
}