:root { --font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ink: #202a42; --muted: #6e7a92; --purple: #695de2; --purple-soft: #efedff; --line: #dde2ec; --surface: #ffffff; --control-height-md: 44px; --radius-sm: 9px; --radius-md: 14px; --radius-lg: 20px; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--ink); background: #eef1f7; font-family: var(--font-family); }
.login-page { display: grid; place-items: center; padding: 28px; }
.login-shell { width: min(100%, 476px); }
.login-panel { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 24px 60px rgba(25,36,67,.12); }
.login-brand { display: flex; align-items: center; gap: 9px; color: #27324e; font-size: 20px; letter-spacing: -.5px; }
.login-mark { display: flex; align-items: end; gap: 3px; height: 22px; }
.login-mark i { display: block; width: 6px; border-radius: 4px; background: #c2bcff; transform: skewY(-24deg); }.login-mark i:nth-child(1) { height: 12px; }.login-mark i:nth-child(2) { height: 22px; background: #887ded; }.login-mark i:nth-child(3) { height: 16px; background: #e8a37e; }
.login-heading { margin: 32px 0 22px; }.login-heading > span { color: #665bd1; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.login-heading h1 { margin: 7px 0 6px; color: #232d45; font-size: 28px; letter-spacing: -.9px; }.login-heading p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
#loginForm { display: grid; gap: 16px; }.login-panel label { display: grid; gap: 7px; color: #4d5970; font-size: 13px; font-weight: 750; }.login-panel input { width: 100%; min-height: var(--control-height-md); padding: 0 12px; color: #28334d; border: 1px solid #cfd6e3; border-radius: var(--radius-sm); background: #f8f9fc; font: inherit; font-size: 15px; outline: 0; }.login-panel input:focus { border-color: #887ded; background: #fff; box-shadow: 0 0 0 3px #eeecff; }
.login-submit { min-height: var(--control-height-md); margin-top: 6px; color: #fff; border: 0; border-radius: var(--radius-sm); background: var(--purple); box-shadow: 0 8px 16px rgba(105,93,226,.2); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }.login-submit:hover { background: #5e51d0; }.login-submit:focus-visible { outline: 3px solid #b3acf6; outline-offset: 2px; }.login-submit:disabled { cursor: wait; opacity: .65; }
.login-feedback { margin: -4px 0 0; padding: 10px 11px; color: #9b3f4d; border: 1px solid #f0cbd0; border-radius: var(--radius-sm); background: #fff6f7; font-size: 13px; line-height: 1.4; }.login-security { margin: 23px 0 0; color: #788398; font-size: 12px; line-height: 1.45; text-align: center; }
@media (max-width: 520px) { .login-page { padding: 16px; }.login-panel { padding: 26px 22px; }.login-heading { margin-top: 27px; }.login-heading h1 { font-size: 25px; } }