@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap');

:root {
  font-family: 'Golos Text', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
  --page: #101713;
  --surface: #18221d;
  --text: #ecf4ed;
  --muted: #9eb0a3;
  --line: #34473a;
  --accent: #83d9b5;
  --accent-ink: #003d2a;
  --wash: #202e26;
  --mtrl-sys-color-primary: #83d9b5;
  --mtrl-sys-color-on-primary: #003d2a;
  --mtrl-sys-color-surface: #101713;
  --mtrl-sys-color-on-surface: #ecf4ed;
  --mtrl-sys-color-outline: #879c8d;
  --mtrl-loading-indicator-color: var(--accent);
  --mtrl-ref-typeface-brand: 'Golos Text', sans-serif;
  --mtrl-ref-typeface-plain: 'Golos Text', sans-serif;
  background: var(--page);
  color: var(--text);
}

:root[data-theme-mode='light'] {
  color-scheme: light;
  --page: #f7faf7;
  --surface: #ffffff;
  --text: #17251c;
  --muted: #617267;
  --line: #d5e4d7;
  --accent: #006b50;
  --accent-ink: #ffffff;
  --wash: #edf5ee;
  --mtrl-sys-color-primary: #006b50;
  --mtrl-sys-color-on-primary: #ffffff;
  --mtrl-sys-color-surface: #f7faf7;
  --mtrl-sys-color-on-surface: #17251c;
  --mtrl-sys-color-outline: #758879;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; overflow-x: hidden; }
body { margin: 0; min-width: 320px; overflow-y: hidden; }
button, input { font: inherit; }
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded'; font-weight: 400; font-style: normal;
  font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased;
}

.login-screen {
  position: relative; height: 100svh; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 0 clamp(24px, 5vw, 76px); background: var(--page); color: var(--text);
  transition: background-color .25s ease, color .25s ease;
}
.screen-header, .login-content, .screen-footer { position: relative; z-index: 1; }
.screen-header { height: 76px; display: flex; align-items: center; justify-content: space-between; }
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img { display: block; width: 74px; height: 32px; object-fit: contain; }
:root[data-theme-mode='dark'] .wordmark img { filter: brightness(2.2) saturate(.7); }
.theme-toggle { transition: filter .25s ease, transform .25s ease; }
.theme-toggle:hover { filter: brightness(1.15); transform: rotate(12deg); }
.theme-toggle .material-symbols-rounded { font-size: 20px; }
.login-content { display: grid; place-items: center start; width: 100%; min-height: 0; margin: 0 auto; padding-left: clamp(0px, 2vw, 24px); }
.login-wrap { width: min(100%, 360px); margin: 0; padding: 32px 0 54px; }
.login-heading { margin-bottom: 30px; }
.login-heading h1 { margin: 0 0 8px; color: var(--text); font: 600 clamp(30px, 3.3vw, 43px)/1.16 'Golos Text', sans-serif; letter-spacing: -1.5px; }
.login-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.login-form { display: grid; gap: 15px; }
.login-form .mtrl-text-field { display: flex; width: 100%; border-radius: 12px; background: color-mix(in srgb, var(--surface) 44%, transparent); transition: background-color .28s ease, box-shadow .28s ease; }
.login-form .mtrl-text-field:hover { background: color-mix(in srgb, var(--surface) 78%, var(--accent) 4%); }
.login-form .mtrl-text-field:focus-within { background: color-mix(in srgb, var(--surface) 86%, var(--accent) 8%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.login-form .mtrl-text-field__input { min-height: 56px; }
.submit-button { position: relative; min-width: 140px; margin-top: 8px; }
.button-loader { display: none; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); pointer-events: none; }
.submit-button.is-loading .mtrl-button__text { visibility: hidden; }
.submit-button.is-loading .button-loader { display: inline-flex; }
.form-message { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--mtrl-sys-color-error-container); color: var(--mtrl-sys-color-on-error-container); font-size: 13px; line-height: 1.45; }
.form-message[hidden] { display: none; }
.form-message .material-symbols-rounded { flex: 0 0 auto; margin-top: 1px; font-size: 19px; }
.security-note { margin: 20px 0 0; display: flex; align-items: center; justify-content: flex-start; gap: 7px; color: var(--muted); font-size: 11px; }
.security-note .material-symbols-rounded { font-size: 15px; }
.screen-footer { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }

.preloader { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
.preloader.is-visible { opacity: 1; visibility: visible; }
.preloader-inner { display: grid; place-items: center; }
.preloader .full-loader { color: var(--accent); }

.login-screen.is-entering .wordmark,
.login-screen.is-entering .theme-toggle,
.login-screen.is-entering .login-heading,
.login-screen.is-entering #login-field,
.login-screen.is-entering #password-field,
.login-screen.is-entering #submit-button,
.login-screen.is-entering .security-note,
.login-screen.is-entering .screen-footer { opacity: 0; }
.login-screen:not(.is-entering) .wordmark { animation: enter-left .62s cubic-bezier(.17,.95,.2,1.18) both; }
.login-screen:not(.is-entering) .theme-toggle { animation: enter-right .62s .07s cubic-bezier(.17,.95,.2,1.18) both; }
.login-screen:not(.is-entering) .login-heading { animation: enter-left .7s .12s cubic-bezier(.17,.95,.2,1.18) both; }
.login-screen:not(.is-entering) #login-field { animation: enter-left .7s .2s cubic-bezier(.17,.95,.2,1.18) both; }
.login-screen:not(.is-entering) #password-field { animation: enter-right .7s .29s cubic-bezier(.17,.95,.2,1.18) both; }
.login-screen:not(.is-entering) #submit-button { animation: enter-up .7s .38s cubic-bezier(.17,.95,.2,1.18) both; }
.login-screen:not(.is-entering) .security-note { animation: enter-up .7s .46s cubic-bezier(.17,.95,.2,1.18) both; }
.login-screen:not(.is-entering) .screen-footer { animation: enter-up .7s .53s cubic-bezier(.17,.95,.2,1.18) both; }
@keyframes enter-left { 0% { opacity: 0; transform: translateX(-52px) scale(.96); } 72% { opacity: 1; transform: translateX(4px) scale(1.012); } 100% { opacity: 1; transform: none; } }
@keyframes enter-right { 0% { opacity: 0; transform: translateX(52px) scale(.96); } 72% { opacity: 1; transform: translateX(-4px) scale(1.012); } 100% { opacity: 1; transform: none; } }
@keyframes enter-up { 0% { opacity: 0; transform: translateY(42px) scale(.97); } 72% { opacity: 1; transform: translateY(-4px) scale(1.012); } 100% { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .login-screen { padding-inline: 22px; }
  .screen-header { height: 68px; }
  .login-wrap { padding: 36px 0 50px; }
  .screen-footer { font-size: 10px; }
}
@media (max-width: 700px) { .login-content { place-items: center; padding-left: 0; } }
@media (max-height: 610px) { body { overflow-y: auto; } .login-screen { height: auto; min-height: 100svh; overflow: visible; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .login-screen.is-entering .wordmark, .login-screen.is-entering .theme-toggle, .login-screen.is-entering .login-heading, .login-screen.is-entering #login-field, .login-screen.is-entering #password-field, .login-screen.is-entering #submit-button, .login-screen.is-entering .security-note, .login-screen.is-entering .screen-footer { opacity: 1; }
}