/* Utopia type/space: viewport 360-1440, base 16-18, ratio 1.2.
 * https://utopia.fyi/type/calculator?c=360,16,1.2,1440,18,1.2,4,1,
 * https://utopia.fyi/space/calculator?c=360,16,1.2,1440,18,1.2,4,1,
 * Tokens calculated with the Utopia linear interpolation and rounded space steps.
 * Scope deliberately limited to #login; application themes remain independent. */
@font-face { font-family: 'Temugo Grotesk'; src: url('../vendor/fonts/space-grotesk.ttf') format('truetype'); font-weight: 300 700; font-style: normal; font-display: swap; }
#login {
  --login-text: clamp(1.00000rem, 0.95833rem + 0.18519vw, 1.12500rem);
  --login-small: clamp(0.83333rem, 0.79861rem + 0.15432vw, 0.93750rem);
  --login-brand: clamp(2.07360rem, 1.98720rem + 0.38400vw, 2.33280rem);
  --login-xs: clamp(0.75000rem, 0.70833rem + 0.18519vw, 0.87500rem);
  --login-s: clamp(1.00000rem, 0.95833rem + 0.18519vw, 1.12500rem);
  --login-m: clamp(1.50000rem, 1.43750rem + 0.27778vw, 1.68750rem);
  --login-l: clamp(2.00000rem, 1.91667rem + 0.37037vw, 2.25000rem);
  --login-xl: clamp(3.00000rem, 2.87500rem + 0.55556vw, 3.37500rem);
  --amber: #21d4a3; --amber-dim: #20a783; --text: #ecf0ef; --muted: #929e9a;
  --field: #141918; --panel-2: #1c2421; --line: #303a36; --red: #ff9494;
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  background-color: #0a1014;
  background-image: url('../login-field.svg'),
    radial-gradient(ellipse at 4% 69%, #17322f 0%, transparent 46%),
    radial-gradient(ellipse at 97% 38%, #192b36 0%, transparent 46%);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--text); color-scheme: dark; font-size: var(--login-text);
  font-family: 'Temugo Grotesk', 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
#login .login-toolbar {
  flex: none; display: flex; justify-content: flex-end;
  padding: var(--login-m) var(--login-l); min-height: 80px; z-index: 2;
}
#login .login-language { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; }
#login .login-language > svg { position: absolute; inset: 0; margin: auto; pointer-events: none; z-index: 1; color: #d2dcd7; width: 19px; height: 19px; }
#login .login-language > span, #login .login-language .select-caption, #login .login-language .select-caret { display: none; }
#login .login-language :is(.select-trigger,select) { position: absolute; inset: 0; width: 100%; min-width: 0; height: 100%; padding: 0; border: 1px solid #4b5552; border-radius: 50%; color: transparent; background: #18201f; }
#login .login-language .select-trigger:hover { background: #29332f; border-color: #819389; }
#login .login-main {
  flex: 1; display: flex; min-height: min-content;
  padding: var(--login-m) var(--login-m) max(var(--login-xl), 10vh);
}
#login .login-card {
  width: min(100%, 350px); margin: auto; padding: 0; gap: 0;
  background: transparent; border: none; text-align: left;
}
#login .login-brand {
  display: flex; align-items: center; justify-content: center;
  gap: 2px; margin: 0 0 var(--login-l);
}
#login .login-brand img:first-child { width: 84px; height: 56px; object-fit: contain; mix-blend-mode: screen; flex: none; }
#login .login-wordmark { display: block; width: clamp(9.5rem, 8.9rem + 2.5vw, 11.25rem); height: auto; flex: none; }
#login .login-label { display: block; font-size: var(--login-small); font-weight: 500; line-height: 1.5; margin-bottom: 8px; color: #cdd6d2; }
#login .login-field { margin-bottom: var(--login-m); }
#login .login-field input { height: 50px; padding: 12px 44px 12px 40px; border: 1px solid var(--line); border-radius: 8px; background: #131918; color: #ecf0ef; font: 400 16px/1.5 system-ui, sans-serif; transition: border-color 140ms, box-shadow 140ms; }
#login .login-field input:hover { border-color: #52665d; }
#login .login-field input:focus { border-color: #21d4a3; outline: none; box-shadow: 0 0 0 3px #21d4a31c; }
#login .login-field-icon { left: 14px; color: #83968d; }
#login .login-password-toggle { right: 3px; color: #83968d; }
#login #login-btn {
  width: 100%; min-height: 50px; border-radius: 8px; border: 1px solid #dce6dc;
  background: #b5e5d6; color: #12221b; font: 600 15px/1.5 'Temugo Grotesk', 'Segoe UI', 'Microsoft YaHei', sans-serif;
  box-shadow: 0 1px 0 #ffffff20 inset; transition: background 140ms, box-shadow 140ms;
}
#login #login-btn:hover:not(:disabled) { background: #e3f3e8; box-shadow: 0 0 24px #21d4a314; }
#login #login-btn:focus-visible, #login button:focus-visible { outline: 2px solid #8ff4d8; outline-offset: 4px; }
#login #login-btn:disabled { opacity: .55; cursor: wait; }
#login .login-error { color: var(--red); font-size: var(--login-small); margin-top: var(--login-s); text-align: left; }
#login .login-error:empty { display: none; }
@media (max-width: 480px) {
  #login .login-toolbar { padding: var(--login-s); min-height: 64px; }
  #login .login-main { padding-bottom: var(--login-xl); }
}
@media (max-height: 560px) {
  #login .login-main { padding-top: var(--login-s); padding-bottom: var(--login-l); }
  #login .login-brand { margin-bottom: var(--login-s); }
}
@media (prefers-reduced-motion: reduce) { #login *, #login *::before, #login *::after { transition: none !important; animation: none !important; } }