:root {
    color-scheme: light;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #F1F4F9;
    color: #29384d;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    --muted: #66768b;
    --line: #e5eaf1;
    --blue: #1769AA;
    --navy: #153b64;
}

* { box-sizing: border-box; }

html { min-height: 100%; overflow-x: clip; overflow-y: auto; }

body {
    min-width: 320px;
    margin: 0;
    background: #F1F4F9;
}

body::before {
    position: fixed;
    inset: 0;
    background-image: linear-gradient(rgba(36, 67, 105, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(36, 67, 105, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(to bottom, black, transparent 88%);
    content: '';
    pointer-events: none;
}

.page-shell { position: relative; display: grid; height: auto; min-height: 100svh; align-content: safe center; justify-items: center; padding: clamp(20px, 5svh, 48px) 20px 24px; }
.login-card { width: min(100%, 460px); border: 1px solid rgba(28, 58, 91, .08); border-radius: 20px; background: #fff; box-shadow: 0 26px 70px rgba(28, 48, 75, .14), 0 4px 14px rgba(28, 48, 75, .045); }
.card-header { position: relative; isolation: isolate; overflow: hidden; padding: clamp(27px, 5vw, 36px) clamp(24px, 8vw, 42px) 30px; border-radius: 19px 19px 0 0; background: linear-gradient(128deg, #1769AA 0%, #205f98 50%, #243f68 100%); color: #fff; }
.card-header::after { position: absolute; z-index: -1; top: -110px; right: -85px; width: 270px; height: 270px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.13), rgba(255,255,255,0) 68%); box-shadow: 0 0 0 28px rgba(255,255,255,.035), 0 0 0 58px rgba(255,255,255,.025); content: ''; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; background: rgba(255,255,255,.12); color: #fff; font: 800 18px 'Segoe UI', Arial, sans-serif; }
.brand-name { color: #fff; font: 700 12px 'Segoe UI', Arial, sans-serif; letter-spacing: .12em; }
.brand-name span { color: rgba(255,255,255,.76); font-weight: 500; }
.intro { margin-top: 32px; }
.eyebrow { margin: 0 0 10px; color: #c9e4ff; font-size: 10px; font-weight: 700; letter-spacing: .17em; }
h1 { margin: 0; color: #fff; font: 700 27px/1.3 'Segoe UI', Arial, sans-serif; letter-spacing: -.025em; }
.subtitle { margin: 9px 0 0; color: rgba(255,255,255,.83); font-size: 14px; line-height: 1.55; }
.card-body { padding: 27px clamp(24px, 8vw, 42px) 25px; background: #fff; }
.demo-notice { display: flex; gap: 12px; padding: 13px 14px; border: 1px solid #dce8f5; border-radius: 8px; background: #f5f8fc; }
.notice-icon { flex: 0 0 19px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #8daed1; border-radius: 50%; color: #28649b; font: 600 12px 'Segoe UI', Arial, sans-serif; }
.demo-notice p { margin: 0; color: #52657c; font-size: 12px; line-height: 1.55; }
.demo-notice strong { color: #234a72; font-weight: 700; }
.login-form { margin-top: 23px; }
.field + .field { margin-top: 17px; }
.field label { display: block; margin-bottom: 8px; color: #293d57; font-size: 13px; font-weight: 600; }
.label-row { display: flex; align-items: center; justify-content: space-between; }
.label-row label { margin-bottom: 8px; }
.field-hint { margin-bottom: 8px; color: #77869a; font-size: 11px; }
.field input { width: 100%; min-width: 0; height: 47px; padding: 0 13px; border: 1px solid #d8e0e9; border-radius: 8px; outline: none; background: #fff; color: #26364b; font: 14px 'Segoe UI', Arial, sans-serif; transition: border-color .18s, box-shadow .18s; }
.field input::placeholder { color: #8996a6; }
.field input:focus { border-color: #5794ca; box-shadow: 0 0 0 3px rgba(23, 105, 170, .12); }
.field input:focus-visible, .submit-button:focus-visible, .brand:focus-visible { outline: 3px solid rgba(23, 105, 170, .28); outline-offset: 3px; }
.submit-button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 22px; padding: 0 15px; border: 1px solid #1769AA; border-radius: 8px; background: linear-gradient(110deg, #1769AA, #1f78bd); color: #fff; font: 600 14px 'Segoe UI', Arial, sans-serif; cursor: default; box-shadow: 0 5px 12px rgba(23, 105, 170, .2); transition: box-shadow .18s, filter .18s; }
.submit-button:hover { filter: brightness(1.04); box-shadow: 0 7px 16px rgba(23, 105, 170, .24); }
.button-arrow { font-size: 19px; line-height: 1; }
.form-note { margin: 9px 0 0; color: #748297; font-size: 11px; text-align: center; }
.card-footer { display: flex; align-items: center; gap: 8px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); color: #68788c; font-size: 11px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #48a982; box-shadow: 0 0 0 3px rgba(72, 169, 130, .12); }
.footer-version { margin-left: auto; color: #8793a2; font-size: 10px; letter-spacing: .08em; }
.page-caption { margin: 18px 0 0; color: #738197; font-size: 11px; text-align: center; }

@media (max-width: 520px) {
    .page-shell { padding: 24px 15px; }
    .login-card { border-radius: 16px; }
    .card-header { padding: 27px 25px 25px; }
    .card-body { padding: 23px 25px 21px; }
    .intro { margin-top: 28px; }
    h1 { font-size: 24px; }
}

@media (max-width: 360px) {
    .page-shell { padding-inline: 11px; }
    .card-header { padding-inline: 20px; }
    .card-body { padding-inline: 20px; }
    h1 { font-size: 22px; }
    .card-footer { font-size: 10px; }
}

@media (max-height: 760px) {
    .page-shell { align-content: start; padding-block: clamp(10px, 2.5svh, 20px); }
    .card-header { padding-block: clamp(17px, 3.8svh, 28px) clamp(16px, 3.2svh, 24px); }
    .intro { margin-top: clamp(16px, 2.8svh, 25px); }
    .card-body { padding-block: clamp(15px, 3svh, 24px); }
    .demo-notice { padding-block: clamp(9px, 1.7svh, 13px); }
    .login-form { margin-top: clamp(15px, 2.8svh, 22px); }
    .field + .field { margin-top: clamp(11px, 2.1svh, 16px); }
    .field label, .label-row label { margin-bottom: clamp(5px, 1svh, 8px); }
    .field-hint { margin-bottom: clamp(5px, 1svh, 8px); }
    .field input { height: clamp(43px, 6svh, 47px); }
    .submit-button { min-height: clamp(44px, 6.2svh, 48px); margin-top: clamp(16px, 2.6svh, 22px); }
    .card-footer { margin-top: clamp(16px, 2.8svh, 23px); padding-top: clamp(12px, 2svh, 17px); }
    .page-caption { margin-top: clamp(12px, 2.2svh, 18px); }
}

@media (max-height: 520px) {
    .page-shell { padding-block: 8px; }
    .card-header { padding-block: 14px; }
    .intro { margin-top: 13px; }
    .eyebrow { margin-bottom: 6px; }
    .subtitle { margin-top: 5px; }
    .card-body { padding-block: 12px; }
    .demo-notice { padding-block: 8px; }
    .login-form { margin-top: 12px; }
    .field + .field { margin-top: 9px; }
    .field input { height: 43px; }
    .submit-button { min-height: 44px; margin-top: 13px; }
    .form-note { margin-top: 5px; }
    .card-footer { margin-top: 12px; padding-top: 10px; }
    .page-caption { margin-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}