:root {
--bg-main: #f4f6f9;
--bg-card: #ffffff;

--text-main: #182230;
--text-secondary: #687586;
--text-muted: #98a2b3;

--border: #dfe4ea;
--border-focus: #8da4bd;

--accent: #315d86;
--accent-dark: #274d71;

--error: #c83d45;
--error-bg: #fff4f4;

--shadow:
    0 24px 60px rgba(28, 43, 58, 0.09),
    0 4px 14px rgba(28, 43, 58, 0.04);

--radius-card: 18px;
--radius-input: 10px;


}

* {
  box-sizing: border-box;
  }

html {
min-height: 100%;
}

body {
min-height: 100vh;
margin: 0;


font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

color: var(--text-main);
background:
    radial-gradient(
        circle at 50% 0%,
        rgba(49, 93, 134, 0.055),
        transparent 38%
    ),
    var(--bg-main);

-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;


}

button,
input {
font: inherit;
}

button {
border: 0;
}

.page {
width: 100%;
min-height: 100vh;


display: flex;
align-items: center;
justify-content: center;

padding: 40px 20px;


}

.login-card {
width: 100%;
max-width: 430px;


padding: 42px 44px 30px;

background: var(--bg-card);
border: 1px solid rgba(220, 226, 233, 0.9);
border-radius: var(--radius-card);

box-shadow: var(--shadow);


}

/* ------------------------------
BRAND
------------------------------ */

.brand {
display: flex;
align-items: center;
gap: 15px;


margin-bottom: 38px;


}

.brand-mark {
width: 48px;
height: 48px;


flex: 0 0 48px;

display: flex;
align-items: center;
justify-content: center;

color: #315d86;

background: #edf3f8;
border: 1px solid #dce7f0;
border-radius: 12px;


}

.brand-mark svg {
width: 28px;
height: 28px;
}

.brand-text {
min-width: 0;
}

.brand-text h1 {
margin: 0;


font-size: 18px;
line-height: 1.28;
font-weight: 650;
letter-spacing: -0.2px;


}

.brand-text p {
margin: 5px 0 0;


color: var(--text-secondary);

font-size: 12px;
line-height: 1.35;


}

/* ------------------------------
HEADER
------------------------------ */

.login-header {
margin-bottom: 27px;
}

.login-header h2 {
margin: 0;


font-size: 25px;
line-height: 1.25;
font-weight: 650;
letter-spacing: -0.4px;


}

.login-header p {
max-width: 340px;


margin: 8px 0 0;

color: var(--text-secondary);

font-size: 13px;
line-height: 1.5;


}

/* ------------------------------
FORM
------------------------------ */

.login-form {
width: 100%;
}

.field {
margin-bottom: 19px;
}

.field label {
display: block;


margin: 0 0 7px 1px;

color: #344054;

font-size: 13px;
line-height: 1.3;
font-weight: 600;


}

.input-wrapper {
position: relative;
width: 100%;
}

.input-icon {
position: absolute;
top: 50%;
left: 14px;


width: 20px;
height: 20px;

color: #8b97a6;

transform: translateY(-50%);
pointer-events: none;

transition: color 0.15s ease;


}

.input-wrapper input {
display: block;


width: 100%;
height: 48px;

padding: 0 45px 0 44px;

color: var(--text-main);
background: #fff;

border: 1px solid var(--border);
border-radius: var(--radius-input);

outline: none;

font-size: 14px;
line-height: 48px;

transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;


}

.input-wrapper input::placeholder {
color: #a0a9b5;
}

.input-wrapper input:hover {
border-color: #cbd3dc;
}

.input-wrapper input:focus {
border-color: var(--border-focus);


box-shadow:
    0 0 0 3px rgba(49, 93, 134, 0.09);


}

.input-wrapper:focus-within .input-icon {
color: var(--accent);
}

/* ------------------------------
PASSWORD TOGGLE
------------------------------ */

.password-toggle {
position: absolute;
top: 50%;
right: 10px;


width: 32px;
height: 32px;

display: flex;
align-items: center;
justify-content: center;

padding: 0;

color: #8995a3;
background: transparent;

border-radius: 7px;

cursor: pointer;

transform: translateY(-50%);

transition:
    color 0.15s ease,
    background 0.15s ease;


}

.password-toggle:hover {
color: #516170;
background: #f2f4f7;
}

.password-toggle:focus-visible {
outline: 2px solid rgba(49, 93, 134, 0.35);
outline-offset: 1px;
}

.eye-icon {
width: 19px;
height: 19px;
}

.eye-closed {
display: none;
}

.password-toggle.visible .eye-open {
display: none;
}

.password-toggle.visible .eye-closed {
display: block;
}

/* ------------------------------
ERROR
------------------------------ */

.error-message {
display: flex;
align-items: center;
gap: 9px;


min-height: 0;

margin: -3px 0 14px;
padding: 0;

color: var(--error);

font-size: 12.5px;
line-height: 1.4;

opacity: 0;
visibility: hidden;

transform: translateY(-4px);

transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s ease;


}

.error-message svg {
width: 18px;
height: 18px;


flex: 0 0 18px;


}

.error-message.visible {
min-height: 18px;


opacity: 1;
visibility: visible;

transform: translateY(0);


}

.login-form.has-error input {
border-color: #e2a1a5;
background: #fffdfd;
}

.login-form.has-error input:focus {
border-color: var(--error);


box-shadow:
    0 0 0 3px rgba(200, 61, 69, 0.08);


}

/* ------------------------------
LOGIN BUTTON
------------------------------ */

.login-button {
position: relative;


width: 100%;
height: 48px;

display: flex;
align-items: center;
justify-content: center;

padding: 0 18px;

color: #fff;
background: var(--accent);

border-radius: var(--radius-input);

cursor: pointer;

font-size: 14px;
font-weight: 600;

transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;


}

.login-button:hover {
background: var(--accent-dark);


box-shadow:
    0 5px 14px rgba(39, 77, 113, 0.18);


}

.login-button:active {
transform: translateY(1px);
}

.login-button:focus-visible {
outline: 2px solid rgba(49, 93, 134, 0.35);
outline-offset: 3px;
}

.login-button:disabled {
cursor: default;
opacity: 0.82;
}

.button-loader {
position: absolute;


display: none;
align-items: center;
justify-content: center;

gap: 4px;


}

.button-loader span {
width: 5px;
height: 5px;


display: block;

background: currentColor;
border-radius: 50%;

animation: loading-dot 1s infinite ease-in-out;

}

.button-loader span:nth-child(2) {
animation-delay: 0.14s;
}

.button-loader span:nth-child(3) {
animation-delay: 0.28s;
}

.login-button.loading .button-text {
visibility: hidden;
}

.login-button.loading .button-loader {
display: flex;
}

@keyframes loading-dot {
0%,
60%,
100% {
opacity: 0.35;
transform: translateY(0);
}

30% {
    opacity: 1;
    transform: translateY(-2px);
}

}

/* ------------------------------
SECURITY NOTE
------------------------------ */

.security-note {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;

margin-top: 22px;

color: var(--text-muted);

font-size: 11.5px;
line-height: 1.4;

}

.security-note svg {
width: 16px;
height: 16px;

flex: 0 0 16px;

}

/* ------------------------------
FOOTER
------------------------------ */

footer {
margin-top: 25px;
padding-top: 20px;

border-top: 1px solid #edf0f3;

text-align: center;

color: #a0a8b3;

font-size: 10.5px;
line-height: 1.4;

}

/* ------------------------------
MOBILE
------------------------------ */

@media (max-width: 520px) {
.page {
align-items: flex-start;

    padding: 24px 14px;
}

.login-card {
    max-width: 430px;

    padding: 30px 24px 24px;

    border-radius: 15px;
}

.brand {
    margin-bottom: 31px;
}

.brand-mark {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
}

.brand-text h1 {
    font-size: 17px;
}

.login-header h2 {
    font-size: 23px;
}

}

@media (max-width: 350px) {
.login-card {
padding: 26px 18px 22px;
}

.brand {
    gap: 11px;
}

.brand-mark {
    width: 41px;
    height: 41px;
    flex-basis: 41px;
}

.brand-text h1 {
    font-size: 16px;
}

}

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