:root {
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: #17243b;
    background: #f4f7fb;
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.login-shell { display: grid; grid-template-columns: minmax(400px, 48%) 1fr; min-height: 100vh; min-height: 100dvh; }
.brand-panel {
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    overflow: hidden; padding: clamp(32px, 5vw, 72px); color: #fff;
    background: linear-gradient(145deg, #172554 5%, #3046a5 60%, #4f46e5 100%);
}
.brand-panel::before, .brand-panel::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
.brand-panel::before { width: 680px; height: 680px; right: -390px; top: -260px; }
.brand-panel::after { width: 590px; height: 590px; left: -320px; bottom: -360px; background: rgba(255,255,255,.035); }
.brand-mark, .mobile-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 800; letter-spacing: .08em; }
.brand-symbol { display: inline-grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px; background: rgba(255,255,255,.17); font-size: 22px; }
.brand-content { position: relative; z-index: 1; max-width: 570px; margin: 90px 0; }
.brand-eyebrow, .section-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .17em; }
.brand-eyebrow { color: #c7d2fe; }
.brand-content h1 { max-width: 550px; margin: 20px 0 22px; font-size: clamp(38px, 4.4vw, 65px); line-height: 1.1; letter-spacing: -.045em; }
.brand-content p { max-width: 450px; margin: 0; color: #dbe4ff; font-size: 17px; line-height: 1.7; }
.brand-feature { display: flex; align-items: center; gap: 10px; margin-top: 38px; color: #e5eaff; font-size: 14px; }
.brand-feature i { color: #a5f3fc; font-size: 20px; }
.brand-footer { position: relative; z-index: 1; margin: 0; color: #c7d2fe; font-size: 12px; }
.form-panel { display: grid; place-items: center; padding: 40px 32px; }
.form-wrap { width: min(100%, 424px); }
.mobile-brand { display: none; color: #263f9d; }
.mobile-brand .brand-symbol { color: #fff; background: #3549ae; }
.section-eyebrow { color: #4f46e5; }
.form-heading h2 { margin: 13px 0 9px; font-size: clamp(30px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.2; }
.form-heading p { margin: 0; color: #64748b; font-size: 15px; line-height: 1.5; }
.login-form { margin-top: 33px; }
.field + .field { margin-top: 21px; }
.field label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 700; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > i { position: absolute; left: 17px; color: #8390a5; font-size: 19px; pointer-events: none; }
.input-wrap input { width: 100%; height: 55px; padding: 0 48px; border: 1px solid #d8e0ec; border-radius: 12px; outline: none; color: #17243b; background: #fff; transition: border-color .18s, box-shadow .18s; }
.input-wrap input::placeholder { color: #94a0b1; }
.input-wrap input:hover { border-color: #a9b8d2; }
.input-wrap input:focus { border-color: #4f46e5; box-shadow: 0 0 0 4px rgba(79,70,229,.13); }
.password-wrap input { padding-right: 60px; }
.password-toggle { position: absolute; right: 7px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 9px; color: #64748b; background: transparent; cursor: pointer; font-size: 20px; }
.password-toggle:hover { color: #3549ae; background: #eef1fb; }
.password-toggle:focus-visible, .submit-button:focus-visible { outline: 3px solid #a5b4fc; outline-offset: 3px; }
.submit-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 55px; margin-top: 29px; border: 0; border-radius: 12px; color: #fff; background: #4046b4; box-shadow: 0 10px 23px rgba(64,70,180,.2); font-weight: 700; cursor: pointer; transition: background .18s, transform .18s, box-shadow .18s; }
.submit-button:hover { background: #303792; transform: translateY(-1px); box-shadow: 0 14px 26px rgba(64,70,180,.24); }
.form-help { margin: 28px 0 0; color: #69778d; font-size: 13px; line-height: 1.5; text-align: center; }
.notice { display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px; margin-top: 26px; border: 1px solid; border-radius: 11px; font-size: 13px; line-height: 1.5; }
.notice i { flex: 0 0 auto; font-size: 17px; }
.notice-error { color: #9f2736; border-color: #fecdd3; background: #fff1f2; }
.notice-success { color: #166c4b; border-color: #a7f3d0; background: #ecfdf5; }
.notice-warning { color: #875b10; border-color: #fde68a; background: #fffbeb; }
.notice + .login-form { margin-top: 25px; }
@media (max-width: 800px) {
    .login-shell { display: block; }
    .brand-panel { display: none; }
    .form-panel { min-height: 100vh; min-height: 100dvh; padding: 32px 24px; }
    .mobile-brand { display: flex; margin-bottom: clamp(55px, 11vh, 105px); }
}
@media (max-width: 420px) {
    .form-panel { align-items: start; padding: 27px 21px; }
    .mobile-brand { margin-bottom: 65px; }
    .form-heading h2 { font-size: 31px; }
}
@media (prefers-reduced-motion: reduce) {
    .input-wrap input, .submit-button { transition: none; }
}