:root{--primary:#007BFF;--primary-hover:#0069D9;--success:#28A745;--success-hover:#218838;--info:#17A2B8;--info-hover:#138496;--warning:#FFC107;--warning-hover:#E0A800;--danger:#DC3545;--danger-hover:#C82333;--light:#F8F9FA;--dark:#343A40;--gray-100:#F8F9FA;--gray-200:#E9ECEF;--gray-300:#DEE2E6;--gray-400:#CED4DA;--gray-500:#ADB5BD;--gray-600:#6C757D;--gray-700:#495057;--gray-800:#343A40;--gray-900:#212529;--paper:#ffffff;--ink:#212529;--muted:#6C757D;--radius:22px;--shadow:0 22px 48px rgba(0,0,0,.12)}*{box-sizing:border-box}body{color:var(--ink);background:radial-gradient(1400px 800px at -10% -10%,#fff 0%,#f4f6f9 45%,var(--gray-100) 100%)}.auth-wrap.center{min-height:100vh;display:grid;place-items:center;padding:24px 16px}.branding{display:flex;align-items:center;gap:12px;margin-bottom:12px;justify-content:center;opacity:0;animation:fadeDown .6s .1s ease both}.brand-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,var(--dark),var(--primary));box-shadow:0 10px 22px #007bff2e}.brand-text .brand-date{display:block;color:var(--muted);font-size:13px}.auth-card{width:min(1024px,96vw);display:grid;grid-template-columns:1.1fr .9fr;gap:0;overflow:hidden;border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.05);opacity:0;transform:translateY(18px) scale(.98)}.auth-card.enter{animation:riseIn .65s .15s cubic-bezier(.2,.7,.2,1) both}.side-illustration{position:relative;min-height:520px;background:#0d0f12}.side-illustration img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform-origin:center;animation:kenburns 18s ease-in-out both infinite alternate}.side-illustration .overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(120deg,rgba(0,0,0,.55),rgba(0,0,0,.25) 55%,rgba(0,0,0,.65))}.caption{position:absolute;left:22px;right:22px;bottom:20px;color:#fff}.caption h2{margin:0 0 4px;font-size:clamp(18px,2.8vw,22px);font-weight:700}.caption .ref{margin:0;opacity:.9;font-size:13px}.side-form{padding:28px}.side-form h1{margin:0 0 4px;font-size:clamp(24px,4.4vw,36px)}.side-form .subtitle{margin:0 0 16px;color:var(--muted)}.field{margin-bottom:14px}.field label{display:block;font-weight:600;margin-bottom:6px;color:var(--dark)}.input-wrap{position:relative;display:flex;align-items:center;gap:8px;border:1px solid var(--gray-300);border-radius:12px;background:#fff;padding:10px 12px;transition:border .15s ease,box-shadow .15s ease}.input-wrap:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px #007bff14}.input-wrap i{color:var(--gray-600)}.input-wrap input{flex:1 1 auto;border:none;outline:none;background:transparent;color:var(--ink)}.toggle-pass{border:none;background:transparent;color:var(--gray-600);cursor:pointer;width:34px;height:34px;border-radius:8px}.toggle-pass:hover{background:rgba(0,0,0,.04)}.error-msg{display:block;margin-top:6px;color:var(--danger);font-size:13px}.alert-auth{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;background:#fff5f5;border:1px solid #f5c2c7;color:#8a1c1c;border-radius:12px;padding:10px 12px}.options{display:flex;align-items:center;justify-content:space-between;margin:4px 0 12px}.check{display:flex;align-items:center;gap:8px;cursor:pointer}.link-muted{color:var(--gray-600);text-decoration:none}.link-muted:hover{color:var(--dark)}.btn-auth{position:relative;width:100%;border:none;border-radius:12px;padding:12px 14px;background:linear-gradient(135deg,var(--primary),#0056B3);color:#fff;font-weight:800;letter-spacing:.3px;box-shadow:0 16px 32px #007bff40;cursor:pointer;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}.btn-auth:hover{background:linear-gradient(135deg,var(--primary-hover),#0050a8)}.btn-auth:active{transform:translateY(1px)}.btn-auth[disabled]{opacity:.8;cursor:wait}.spinner{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;display:none;animation:spin .8s linear infinite}.btn-auth.loading .spinner{display:block}.btn-auth.loading .btn-label{opacity:0}.footer-note{margin-top:10px;color:var(--muted);text-align:center}@keyframes kenburns{0%{transform:scale(1) translate(0)}to{transform:scale(1.06) translate(-2%,-1.5%)}}@keyframes riseIn{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}@media (max-width: 980px){.auth-card{grid-template-columns:1fr}.side-illustration{min-height:240px}}.mini-actions{display:flex;justify-content:center;margin:6px 0 12px;opacity:0;animation:fadeDown .5s .05s ease both}.btn-back{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;text-decoration:none;background:#ffffff;color:var(--primary);border:1px solid var(--gray-300);box-shadow:0 10px 22px #0000000f;font-weight:700;transition:background .15s ease,box-shadow .15s ease,transform .1s ease}.btn-back:hover{background:var(--gray-100);box-shadow:0 14px 28px #0000001a;transform:translateY(-1px)}.btn-back i{font-size:14px}@media (max-width: 980px){.auth-card{grid-template-columns:1fr;width:100%;border-radius:18px}.side-illustration{min-height:240px;order:-1}.side-form{padding:28px 24px}}@media (max-width: 600px){.auth-wrap.center{padding:16px 10px}.auth-card{box-shadow:none;border:none;width:100%}.side-form{padding:20px 18px}.branding{flex-direction:column;gap:4px;text-align:center}.btn-back{padding:8px 12px;font-size:14px}.field label{font-size:14px}.input-wrap{padding:9px 10px;border-radius:10px}.btn-auth{padding:11px 12px;font-size:15px;border-radius:10px}.footer-note{font-size:13px}}
