:root{
    --bg:#0b1e3b;
    --bg-2:#0e284f;
    --panel:#ffffff;
    --panel-2:#f6f8fb;
    --text:#0b1e3b;
    --muted:#5b6b86;
    --accent:#1b4dd9;
    --accent-2:#0f38a8;
    --ring: rgba(27,77,217,.25);
    --border:#e7ecf5;
    --ok:#14b8a6;
    --err:#e11d48;
    --shadow: 0 20px 50px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    color:var(--text); background:linear-gradient(120deg,var(--bg),var(--bg-2));
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.page{
    display:grid; grid-template-columns: 540px 1fr; min-height:100vh;
}

.panel{
    background:var(--panel); padding:48px;
    display:flex; flex-direction:column; justify-content:center; gap:32px;
}

.hero{
    position:relative; overflow:hidden;
    display:flex; align-items:center; padding:64px; color:#eaf0ff;
}
.hero:before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(1200px 600px at 60% 40%, rgba(33,86,207,.35), transparent 60%),
    radial-gradient(600px 300px at 20% 70%, rgba(72,121,255,.25), transparent 60%);
}
.hero-glow{
    position:absolute; inset:-20% -10% -10% -10%;
    background:conic-gradient(from 180deg, rgba(18,45,118,.35), transparent 40%),
    radial-gradient(800px 800px at 80% 10%, rgba(255,255,255,.06), transparent 40%);
    filter: blur(40px);
}
.hero-copy{ position:relative; max-width:620px; z-index:1;}
.hero-copy h2{ font-size:40px; margin:0 0 12px; font-weight:700 }
.hero-copy p{ font-size:18px; line-height:1.6; color:#c9d6ff; margin:0 }

.brand{ text-align:left }
.logo{
    width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
    font-weight:800; font-size:20px; letter-spacing:.5px;
    color:#fff; background:linear-gradient(135deg,var(--accent),#264dff);
    box-shadow: 0 10px 24px rgba(27,77,217,.35);
    margin-bottom:14px;
}
.title{ font-size:24px; margin:0 0 6px; font-weight:700; color:var(--text) }
.subtitle{ margin:0; color:var(--muted); font-size:14.5px }

.card{
    background:var(--panel-2); border:1px solid var(--border);
    border-radius:16px; padding:28px; box-shadow: 0 8px 30px rgba(11,30,59,.06);
}
.card-title{ margin:0 0 18px; font-size:18px; font-weight:700 }

.field{ margin-bottom:16px }
.label{ display:block; font-weight:600; font-size:13px; margin-bottom:8px; color:var(--text) }

.control{ position:relative }
.with-icon .input{ padding-left:44px }
.with-icon .icon{
    position:absolute; left:12px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#7b8ead;
}
.with-icon-right .input{ padding-right:44px }
.icon-btn{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; display:grid; place-items:center;
    border:none; background:transparent; padding:0; cursor:pointer; color:#7b8ead;
}
.icon-btn:hover{ color:var(--accent) }

.i{ width:20px; height:20px; fill:currentColor }

.input{
    width:100%; height:48px; border-radius:12px; border:1px solid var(--border);
    padding:0 14px; font-size:15px; background:#fff; color:var(--text);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.input::placeholder{ color:#98a5bd }
.input:focus{
    outline:none; border-color:var(--accent);
    box-shadow: 0 0 0 4px var(--ring);
}
.input:invalid[focused="true"]{ border-color:var(--err); box-shadow:0 0 0 4px rgba(225,29,72,.15) }

.btn-primary{
    width:100%; height:48px; border-radius:12px; border:0; cursor:pointer;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff; font-weight:700; font-size:15px; letter-spacing:.2px;
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    box-shadow: 0 10px 24px rgba(27,77,217,.25);
    transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow: 0 16px 28px rgba(27,77,217,.28) }
.btn-primary:disabled{ opacity:.7; cursor:not-allowed; transform:none; box-shadow:none }

.spinner{
    width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(255,255,255,.55); border-top-color:transparent;
    display:none; animation: spin .8s linear infinite;
}
.is-loading .spinner{ display:inline-block }

.msg{ margin-top:12px; min-height:20px; font-size:14px }
.msg.ok{ color:var(--ok) }
.msg.err{ color:var(--err) }
.footer{ margin-top:8px; color:#7a88a6; font-size:12.5px }

@keyframes spin{ to{ transform: rotate(360deg) } }

@media (max-width: 980px){
    .page{ grid-template-columns: 1fr; }
    .hero{ display:none }
    .panel{ min-height:100vh }
}