:root{ --kd-accent:#ff5a1f; --kd-accent-2:#ff8a4d; --kd-accent-soft:#fff1ec; --kd-ink:#1f2733; --kd-muted:#6b7280; --kd-faint:#9aa3af; --kd-line:#e6e8ec; --kd-bg:#f4f6f8; --kd-surface:#fff; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:Inter,system-ui,sans-serif; color:var(--kd-ink); }
.auth-wrap{ display:flex; min-height:100vh; }
/* Left brand panel */
.auth-brand{ flex:1.05; position:relative; overflow:hidden; background:linear-gradient(140deg,#ff7a3c 0%,var(--kd-accent) 55%,#e8480f 100%); color:#fff; padding:3.2rem 3rem; display:flex; flex-direction:column; }
.auth-brand:before{ content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.08); top:-160px; right:-120px; }
.auth-brand:after{ content:""; position:absolute; width:360px; height:360px; border-radius:50%; background:rgba(255,255,255,.07); bottom:-130px; left:-90px; }
.auth-brand .logo{ display:flex; align-items:center; gap:.7rem; font-weight:700; font-size:1.4rem; letter-spacing:.5px; position:relative; z-index:1; }
.auth-brand .logo .mark{ width:46px; height:46px; border-radius:13px; background:#fff; color:var(--kd-accent); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; }
.auth-brand .logo small{ display:block; font-size:11px; font-weight:500; letter-spacing:1.5px; opacity:.85; }
.auth-brand .hero{ margin:auto 0; position:relative; z-index:1; }
.auth-brand .hero h1{ font-size:2.3rem; line-height:1.18; font-weight:700; margin:0 0 1rem; max-width:460px; }
.auth-brand .hero p{ font-size:1.02rem; opacity:.92; max-width:430px; line-height:1.6; margin:0 0 2rem; }
.auth-brand .feat{ display:flex; align-items:center; gap:.7rem; margin:.7rem 0; font-size:.95rem; opacity:.95; }
.auth-brand .feat i{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:13px; }
.auth-brand .foot{ position:relative; z-index:1; font-size:12.5px; opacity:.8; }
/* Right form side */
.auth-main{ flex:1; background:var(--kd-bg); display:flex; align-items:center; justify-content:center; padding:2rem; }
.auth-card{ width:100%; max-width:410px; background:var(--kd-surface); border:1px solid var(--kd-line); border-radius:18px; box-shadow:0 18px 50px rgba(16,24,40,.10); padding:2.6rem 2.4rem; }
.auth-card .eyebrow{ font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--kd-accent); }
.auth-card h2{ margin:.35rem 0 .3rem; font-size:1.7rem; font-weight:700; }
.auth-card .sub{ color:var(--kd-muted); font-size:14px; margin-bottom:1.7rem; }
.fld{ margin-bottom:1.1rem; }
.fld label{ display:block; font-size:12.5px; font-weight:600; color:var(--kd-muted); margin-bottom:.4rem; }
.inp{ display:flex; align-items:center; border:1px solid var(--kd-line); border-radius:11px; background:#fcfcfd; padding:0 .9rem; transition:border-color .15s, box-shadow .15s; }
.inp:focus-within{ border-color:var(--kd-accent); box-shadow:0 0 0 3px var(--kd-accent-soft); background:#fff; }
.inp i{ color:var(--kd-faint); font-size:15px; }
.inp input{ flex:1; border:0; outline:0; background:transparent; padding:.85rem .7rem; font-family:inherit; font-size:14.5px; color:var(--kd-ink); }
.inp .toggle{ cursor:pointer; }
.row-between{ display:flex; align-items:center; justify-content:space-between; margin:.2rem 0 1.5rem; }
.check{ display:flex; align-items:center; gap:.5rem; font-size:13.5px; color:var(--kd-muted); cursor:pointer; }
.check input{ width:16px; height:16px; accent-color:var(--kd-accent); }
.link{ color:var(--kd-accent); font-size:13.5px; font-weight:600; text-decoration:none; }
.link:hover{ text-decoration:underline; }
.btn-accent{ width:100%; border:0; border-radius:11px; background:linear-gradient(135deg,var(--kd-accent-2),var(--kd-accent)); color:#fff; font-family:inherit; font-weight:600; font-size:15px; padding:.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.5rem; box-shadow:0 8px 20px rgba(255,90,31,.28); transition:filter .12s; }
.btn-accent:hover{ filter:brightness(.97); }
.btn-ghost{ width:100%; border:1px solid var(--kd-line); border-radius:11px; background:#fff; color:var(--kd-muted); font-family:inherit; font-weight:600; font-size:14.5px; padding:.8rem; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:.7rem; text-decoration:none; }
.btn-ghost:hover{ border-color:var(--kd-accent); color:var(--kd-accent); }
.auth-note{ font-size:11px; color:#b34a1f; background:var(--kd-accent-soft); border-radius:8px; padding:.5rem .7rem; margin-bottom:1.4rem; }
.hint{ font-size:12px; color:var(--kd-faint); margin-top:-.5rem; margin-bottom:1.1rem; }
@media (max-width:880px){ .auth-brand{ display:none; } }

/* live: validation/flash messages inside the form card */
.auth-card .alert{ font-size:13px; border-radius:9px; padding:.6rem .85rem; margin-bottom:1.1rem; }
.auth-card ul.alert{ list-style:none; padding-left:0; margin-bottom:1.1rem; }
.auth-card ul.alert li{ margin:.12rem 0; }