:root{--primary:#1aa99a;--primary2:#0ea5e9;--bg:#eef2f7;--shadow:0 18px 50px rgba(2,6,23,.12);--radius:26px}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:min(980px,100%);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.panel{padding:42px 46px;display:flex;flex-direction:column;justify-content:center}
.panel.brand{background:linear-gradient(135deg,var(--primary),#10b981);color:#fff;position:relative;overflow:hidden}
.panel.brand::after{content:'';position:absolute;right:-60px;top:-60px;width:260px;height:260px;border-radius:56px;background:rgba(255,255,255,.14);transform:rotate(20deg)}
.brand h1{font-size:44px;margin:0 0 14px;letter-spacing:-.02em}
.brand p{opacity:.9;line-height:1.5;margin:0 0 18px}
.brand .btn-outline{border:2px solid rgba(255,255,255,.85);color:#fff;background:transparent;padding:10px 18px;border-radius:999px;font-weight:800;cursor:pointer;align-self:flex-start}
.brand .btn-outline:hover{border-color:#fff}

.form h2{font-size:34px;margin:0 0 12px;color:#0f172a}
.form .hint{color:#6b7280;margin:0 0 22px}
.logo-row{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.logo-row img{width:34px;height:34px;border-radius:10px;background:#e6fffb;padding:7px}
.logo-row .name{font-weight:900;color:#0f172a}

.input{display:flex;align-items:center;gap:10px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:14px;padding:12px 14px;margin:10px 0}
.input input{border:none;outline:none;background:transparent;width:100%;font-size:14px}
.input svg{width:18px;height:18px;opacity:.7}

.row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.link{color:#64748b;text-decoration:none;font-weight:700;font-size:13px}
.link:hover{color:#0f172a}

.btn{margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:999px;padding:11px 18px;font-weight:900;cursor:pointer;font-size:13px}
.btn-primary{background:transparent;border:2px solid var(--primary);color:#0f172a;box-shadow:0 10px 20px rgba(26,169,154,.16)}
.btn-primary:hover{background:rgba(26,169,154,.08)}

.small{font-size:12px;color:#94a3b8;margin-top:14px}

/* Toggle */
.auth-card.swap{grid-template-columns:1fr 1fr}
.auth-card.swap .panel.brand{order:1}
.auth-card.swap .panel.form{order:2}

@media (max-width: 900px){
  .auth-card{grid-template-columns:1fr}
  .panel.brand{order:1}
  .panel.form{order:2}
  .brand h1{font-size:36px}
}