.login-page {
    color-scheme: light;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #10152e;
    background: #f7fbfc;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

.login-page, .login-page * { box-sizing: border-box; }
.login-page button, .login-page input { font: inherit; }
.login-page button, .login-page summary, .login-page input[type="checkbox"] { cursor: pointer; }
.login-page button:focus-visible, .login-page summary:focus-visible, .login-page input:focus-visible {
    outline: 3px solid #137b69;
    outline-offset: 4px;
}

.login-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
}

.login-photo {
    position: absolute;
    z-index: -2;
    inset: 0 0 0 43%;
    background: #087c83 url('../img/login/phone-repair.jpg') center center / cover no-repeat;
}

.login-page::before, .login-page::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    clip-path: polygon(0 0, 58.35% 0, 43.45% 100%, 0 100%);
}

.login-page::before { background: #efb52b; }
.login-page::after {
    background: linear-gradient(122deg, #fbfdfe 0%, #f4f9fb 56%, #eaf3f6 100%);
    clip-path: polygon(0 0, calc(58.35% - 4px) 0, calc(43.45% - 4px) 100%, 0 100%);
}

.login-panel {
    display: flex;
    align-items: center;
    width: 53.3%;
    min-height: 100vh;
    min-height: 100svh;
    padding: 64px 0;
}

.login-content { width: 54.6%; min-width: 0; max-width: 420px; margin-left: 22.75%; }
.login-brand { margin-bottom: 32px; }
.login-logo { position: relative; width: 334px; max-width: 100%; aspect-ratio: 2000 / 454; overflow: hidden; }
.login-logo img {
    display: block;
    position: absolute;
    top: -60.13%;
    width: 100%;
    height: auto;
    filter: brightness(0) saturate(100%) invert(18%) sepia(29%) saturate(1181%) hue-rotate(117deg) brightness(91%) contrast(98%);
}
.login-intro { margin-bottom: 30px; }
.login-intro h1 { margin: 0 0 10px; color: #10152e; font-size: clamp(26px, 2vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -.8px; }
.login-intro p { margin: 0; color: #637696; font-size: 15px; line-height: 1.6; letter-spacing: normal; }
.login-field + .login-field { margin-top: 20px; }
.login-field > label { display: block; margin: 0 0 8px; color: #10152e; font-size: 14px; font-weight: 600; line-height: 1.4; }
.login-input-wrap { position: relative; }
.login-input-wrap input {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 46px;
    border: 1.5px solid #d2ddee;
    border-radius: 8px;
    background: rgba(255, 255, 255, .85);
    color: #10152e;
    font-size: 14px;
    transition: border-color .15s, box-shadow .15s;
}
.login-input-wrap input::placeholder { color: #6a7d9e; opacity: 1; }
.login-input-wrap input:focus { outline: none; border-color: #137b69; box-shadow: 0 0 0 3px rgb(19 123 105 / 12%); }
.login-input-wrap input[aria-invalid="true"] { border-color: #b83232; }
.login-input-icon { position: absolute; left: 15px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #344b6d; pointer-events: none; }
.login-password-toggle { position: absolute; top: 1px; right: 3px; display: grid; place-items: center; width: 44px; height: 44px; padding: 12px; border: 0; border-radius: 6px; background: transparent; color: #344b6d; }
.login-password-toggle[hidden] { display: none; }
.login-password-toggle:hover { background: #eaf3f1; }
.login-password-toggle svg { width: 20px; height: 20px; }
.login-eye-slash { display: none; }
.login-password-toggle[aria-pressed="true"] .login-eye-slash { display: block; }
.login-error { margin: 8px 0 0; color: #aa2929; font-size: 14px; line-height: 1.5; }
.login-options { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; margin: 20px 0 24px; font-size: 13px; line-height: 22px; }
.login-remember { display: flex; align-items: center; gap: 9px; margin: 0; color: #10152e; font-size: inherit; font-weight: 400; cursor: pointer; }
.login-remember input { appearance: none; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; border: 1.5px solid #aebfda; border-radius: 5px; background: #fff; }
.login-remember input:checked { background: #08624f; border-color: #08624f; }
.login-remember input:checked::after { content: ""; display: block; width: 6px; height: 10px; margin: 2px 0 0 6px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.login-recovery { margin-left: auto; text-align: right; max-width: 100%; }
.login-recovery summary { color: #064b3b; text-decoration: underline; text-underline-offset: 2px; list-style: none; }
.login-recovery summary::-webkit-details-marker { display: none; }
.login-recovery p { max-width: 280px; margin: 10px 0 0; color: #637696; font-size: 14px; line-height: 1.5; text-align: left; }
.login-page .login-submit { position: relative; width: 100%; min-height: 48px; padding: 13px 48px; border: 0; border-radius: 8px; background: linear-gradient(110deg, #08745e, #032d23); box-shadow: 0 10px 24px rgb(6 62 50 / 12%); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; text-transform: uppercase; transition: box-shadow .15s, filter .15s; }
.login-submit:hover { filter: brightness(1.1); box-shadow: 0 12px 28px rgb(6 62 50 / 20%); }
.login-submit svg { position: absolute; right: 20px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); }

@media (min-width: 1600px) {
    .login-content { transform: translateY(-10px); }
}

@media (max-width: 1199px) {
    .login-content { width: 70%; margin-left: 13%; }
    .login-remember { gap: 8px; }
}

@media (max-width: 767px) {
    .login-page::before, .login-page::after { display: none; }
    .login-photo { display: none; }
    .login-page { background: linear-gradient(135deg, #fbfdfe, #edf5f7); }
    .login-panel { width: 100%; padding: 40px 24px; }
    .login-content { width: 100%; max-width: 420px; margin: 0 auto; }
    .login-brand { margin-bottom: 30px; }
    .login-logo { width: 300px; }
    .login-intro { margin-bottom: 28px; }
    .login-intro h1 { font-size: 28px; }
    .login-input-wrap input { font-size: 16px; }
}

@media (max-width: 359px) {
    .login-panel { padding: 32px 20px; }
    .login-intro h1 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-page *, .login-page *::before, .login-page *::after { transition: none !important; }
}