/*
 * 登录页样式 —— 全站唯一不在 Vue SPA 里的页面（模板见 web/server.go 的 loginHTML）。
 * 设计来源：Penpot 文件 pt-tools / 页面 G Cockpit / 画板 43「登录」。
 *
 * ① 的调色板是 web/frontend/src/styles/theme.scss 同名区块的逐字副本。登录页在
 * SPA 之外，拿不到 Vite 编译出来的那份 CSS，只能自己带一份；两份不允许漂移，
 * web/login_theme_test.go 会逐个 token 比对，改了一边测试就红。
 *
 * 明暗与配色由 <head> 里的内联脚本决定：它读 SPA 存在 localStorage 的
 * theme / theme-style，auto 时看 prefers-color-scheme，然后往 <html> 上挂
 * dark|light 与 data-theme-style —— 与 stores/theme.ts 的 watch 落到 DOM 上的
 * 结果一致，所以登录页和主界面永远是同一套观感。
 */

/* ===========================================================================
 * ① 与 SPA 共用的令牌
 * 结构度量只取登录页用到的子集（可以是子集，值必须相同）；
 * 调色板 8 套（4 配色 × 明暗）逐字复制，键与值都必须完全一致。
 * =========================================================================== */
:root {
  --pt-fz-body: 13px;
  --pt-fz-sm: 12px;
  --pt-fz-label: 11px;
  --pt-lh-tight: 1.25;
  --pt-lh-body: 1.45;

  --pt-font-family:
    "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Roboto, sans-serif;

  --pt-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 调色板 · Cockpit（G，默认） --- */
html.light,
html.light[data-theme-style="cockpit"] {
  --pt-canvas: #f2f4f7;
  --pt-surface: #ffffff;
  --pt-raised: #ffffff;
  --pt-hover: #edf0f4;
  --pt-border: #dde2e9;
  --pt-border-strong: #c3cad4;

  --pt-chrome: #171a1f;
  --pt-chrome-raised: #21252c;
  --pt-chrome-border: #2c313a;
  --pt-chrome-t1: #e8ebef;
  --pt-chrome-t2: #99a0ac;
  --pt-chrome-p: #12a6c2;
  --pt-shell-bg: #ffffff;
  --pt-shell-raised: #edf0f4;
  --pt-shell-border: #dde2e9;
  --pt-shell-t1: #10141a;
  --pt-shell-t2: #4e5765;
  --pt-shell-p: #0a6a7c;

  --pt-t1: #10141a;
  --pt-t2: #4e5765;
  --pt-t3: #636c7b;
  --pt-t4: #aeb6c2;

  --pt-p: #007189;
  --pt-p-hover: #00809b;
  --pt-p-active: #00627a;
  --pt-on-p: #ffffff;

  --pt-ok: #00773a;
  --pt-warn: #995700;
  --pt-dang: #b32318;
  --pt-info: #1260d7;

  --pt-kpi-1: #1361d8;
  --pt-kpi-2: #0e8345;
  --pt-kpi-3: #7a5af8;
  --pt-kpi-4: #a5620a;

  --pt-r-sm: 4px;
  --pt-r-md: 6px;
  --pt-r-lg: 8px;
}

html.dark,
html.dark[data-theme-style="cockpit"] {
  --pt-canvas: #171a1f;
  --pt-surface: #21252c;
  --pt-raised: #2a2f39;
  --pt-hover: #2c313a;
  --pt-border: #2c313a;
  --pt-border-strong: #3b434f;

  --pt-chrome: #12151a;
  --pt-chrome-raised: #21252c;
  --pt-chrome-border: #2c313a;
  --pt-chrome-t1: #e8ebef;
  --pt-chrome-t2: #99a0ac;
  --pt-chrome-p: #12a6c2;
  --pt-shell-bg: #12151a;
  --pt-shell-raised: #21252c;
  --pt-shell-border: #2c313a;
  --pt-shell-t1: #e8ebef;
  --pt-shell-t2: #99a0ac;
  --pt-shell-p: #12a6c2;

  --pt-t1: #e8ebef;
  --pt-t2: #a8afbb;
  --pt-t3: #929aa8;
  --pt-t4: #5f6774;

  --pt-p: #3abcd9;
  --pt-p-hover: #22bcd8;
  --pt-p-active: #269bb4;
  --pt-on-p: #052a33;

  --pt-ok: #34c77b;
  --pt-warn: #e0a32e;
  --pt-dang: #ff8b81;
  --pt-info: #6eb1ff;

  --pt-kpi-1: #5b9df9;
  --pt-kpi-2: #34c77b;
  --pt-kpi-3: #a78bfa;
  --pt-kpi-4: #e0a32e;

  --pt-r-sm: 4px;
  --pt-r-md: 6px;
  --pt-r-lg: 8px;
}

/* --- 调色板 · Atlas（E） --- */
html.light[data-theme-style="atlas"] {
  --pt-canvas: #f7f8fa;
  --pt-surface: #ffffff;
  --pt-raised: #ffffff;
  --pt-hover: #f4f5f8;
  --pt-border: #e4e6ec;
  --pt-border-strong: #cfd3dc;

  --pt-chrome: #1b1d26;
  --pt-chrome-raised: #262933;
  --pt-chrome-border: #32353f;
  --pt-chrome-t1: #eceef4;
  --pt-chrome-t2: #9aa0af;
  --pt-chrome-p: #a78bfa;
  --pt-shell-bg: #ffffff;
  --pt-shell-raised: #f4f5f8;
  --pt-shell-border: #e4e6ec;
  --pt-shell-t1: #14161c;
  --pt-shell-t2: #565d6d;
  --pt-shell-p: #6d28d9;

  --pt-t1: #14161c;
  --pt-t2: #565d6d;
  --pt-t3: #6a6f7d;
  --pt-t4: #b4b9c4;

  --pt-p: #7c3aed;
  --pt-p-hover: #8555ef;
  --pt-p-active: #6d28d9;
  --pt-on-p: #ffffff;

  --pt-ok: #067647;
  --pt-warn: #b14300;
  --pt-dang: #b42318;
  --pt-info: #175cd3;

  --pt-kpi-1: #2563eb;
  --pt-kpi-2: #059669;
  --pt-kpi-3: #7c3aed;
  --pt-kpi-4: #d97706;

  --pt-r-sm: 6px;
  --pt-r-md: 8px;
  --pt-r-lg: 12px;
}

html.dark[data-theme-style="atlas"] {
  --pt-canvas: #0e0f14;
  --pt-surface: #171a21;
  --pt-raised: #1e2129;
  --pt-hover: #23262f;
  --pt-border: #262a33;
  --pt-border-strong: #363b47;

  --pt-chrome: #0a0b0f;
  --pt-chrome-raised: #1e2129;
  --pt-chrome-border: #2a2e38;
  --pt-chrome-t1: #f4f5f8;
  --pt-chrome-t2: #a9b0be;
  --pt-chrome-p: #a78bfa;
  --pt-shell-bg: #0a0b0f;
  --pt-shell-raised: #1e2129;
  --pt-shell-border: #2a2e38;
  --pt-shell-t1: #f4f5f8;
  --pt-shell-t2: #a9b0be;
  --pt-shell-p: #a78bfa;

  --pt-t1: #f4f5f8;
  --pt-t2: #a9b0be;
  --pt-t3: #888f9e;
  --pt-t4: #565d6b;

  --pt-p: #a78bfa;
  --pt-p-hover: #bfa6ff;
  --pt-p-active: #9163fd;
  --pt-on-p: #1b0f35;

  --pt-ok: #34c77b;
  --pt-warn: #e8b33a;
  --pt-dang: #f2726a;
  --pt-info: #5b9df9;

  --pt-kpi-1: #60a5fa;
  --pt-kpi-2: #34d399;
  --pt-kpi-3: #a78bfa;
  --pt-kpi-4: #fbbf24;

  --pt-r-sm: 6px;
  --pt-r-md: 8px;
  --pt-r-lg: 12px;
}

/* --- 调色板 · Deck（D） --- */
html.dark[data-theme-style="deck"] {
  --pt-canvas: #0a0a0b;
  --pt-surface: #121214;
  --pt-raised: #18181b;
  --pt-hover: #1d1d21;
  --pt-border: #202024;
  --pt-border-strong: #2e2e34;

  --pt-chrome: #08080a;
  --pt-chrome-raised: #18181b;
  --pt-chrome-border: #202024;
  --pt-chrome-t1: #fafafa;
  --pt-chrome-t2: #9b9ba3;
  --pt-chrome-p: #fafafa;
  --pt-shell-bg: #08080a;
  --pt-shell-raised: #18181b;
  --pt-shell-border: #202024;
  --pt-shell-t1: #fafafa;
  --pt-shell-t2: #9b9ba3;
  --pt-shell-p: #fafafa;

  --pt-t1: #fafafa;
  --pt-t2: #9b9ba3;
  --pt-t3: #86868e;
  --pt-t4: #47474e;

  --pt-p: #fafafa;
  --pt-p-hover: #ffffff;
  --pt-p-active: #e4e4e7;
  --pt-on-p: #0a0a0b;

  --pt-ok: #3fcf7f;
  --pt-warn: #e8b33a;
  --pt-dang: #f26d6d;
  --pt-info: #5b9df9;

  --pt-kpi-1: #5b9df9;
  --pt-kpi-2: #3fcf7f;
  --pt-kpi-3: #a78bfa;
  --pt-kpi-4: #e8b33a;

  --pt-r-sm: 6px;
  --pt-r-md: 8px;
  --pt-r-lg: 10px;
}

html.light[data-theme-style="deck"] {
  --pt-canvas: #fafafa;
  --pt-surface: #ffffff;
  --pt-raised: #ffffff;
  --pt-hover: #f4f4f5;
  --pt-border: #e4e4e7;
  --pt-border-strong: #d0d0d5;

  --pt-chrome: #18181b;
  --pt-chrome-raised: #27272a;
  --pt-chrome-border: #35353a;
  --pt-chrome-t1: #fafafa;
  --pt-chrome-t2: #a1a1aa;
  --pt-chrome-p: #fafafa;
  --pt-shell-bg: #ffffff;
  --pt-shell-raised: #f4f4f5;
  --pt-shell-border: #e4e4e7;
  --pt-shell-t1: #0a0a0b;
  --pt-shell-t2: #52525b;
  --pt-shell-p: #18181b;

  --pt-t1: #0a0a0b;
  --pt-t2: #52525b;
  --pt-t3: #6d6d76;
  --pt-t4: #a1a1aa;

  --pt-p: #18181b;
  --pt-p-hover: #27272a;
  --pt-p-active: #09090b;
  --pt-on-p: #fafafa;

  --pt-ok: #067647;
  --pt-warn: #b14300;
  --pt-dang: #b42318;
  --pt-info: #175cd3;

  --pt-kpi-1: #2563eb;
  --pt-kpi-2: #059669;
  --pt-kpi-3: #7c3aed;
  --pt-kpi-4: #d97706;

  --pt-r-sm: 6px;
  --pt-r-md: 8px;
  --pt-r-lg: 10px;
}

/* --- 调色板 · Halo（F） --- */
html.dark[data-theme-style="halo"] {
  --pt-canvas: #100e0c;
  --pt-surface: #1a1714;
  --pt-raised: #241f1b;
  --pt-hover: #2b2521;
  --pt-border: #2a2521;
  --pt-border-strong: #3a332d;

  --pt-chrome: #16120f;
  --pt-chrome-raised: #241f1b;
  --pt-chrome-border: #2a2521;
  --pt-chrome-t1: #f6f1eb;
  --pt-chrome-t2: #b3a79b;
  --pt-chrome-p: #ff8a4c;
  --pt-shell-bg: #16120f;
  --pt-shell-raised: #241f1b;
  --pt-shell-border: #2a2521;
  --pt-shell-t1: #f6f1eb;
  --pt-shell-t2: #b3a79b;
  --pt-shell-p: #ff8a4c;

  --pt-t1: #f6f1eb;
  --pt-t2: #b3a79b;
  --pt-t3: #998c80;
  --pt-t4: #5c5249;

  --pt-p: #ff8a4c;
  --pt-p-hover: #ffa271;
  --pt-p-active: #e5713a;
  --pt-on-p: #17110c;

  --pt-ok: #5bd08a;
  --pt-warn: #eab308;
  --pt-dang: #ff617b;
  --pt-info: #6ab8ff;

  --pt-kpi-1: #6ab8ff;
  --pt-kpi-2: #5bd08a;
  --pt-kpi-3: #ff8a4c;
  --pt-kpi-4: #eab308;

  --pt-r-sm: 10px;
  --pt-r-md: 14px;
  --pt-r-lg: 20px;
}

html.light[data-theme-style="halo"] {
  --pt-canvas: #fbf8f5;
  --pt-surface: #ffffff;
  --pt-raised: #ffffff;
  --pt-hover: #f5efe9;
  --pt-border: #eae0d6;
  --pt-border-strong: #d8caba;

  --pt-chrome: #241f1b;
  --pt-chrome-raised: #332c26;
  --pt-chrome-border: #3f372f;
  --pt-chrome-t1: #f6f1eb;
  --pt-chrome-t2: #b3a79b;
  --pt-chrome-p: #e5713a;
  --pt-shell-bg: #ffffff;
  --pt-shell-raised: #f5efe9;
  --pt-shell-border: #eae0d6;
  --pt-shell-t1: #221a13;
  --pt-shell-t2: #6b5a4b;
  --pt-shell-p: #9e4611;

  --pt-t1: #221a13;
  --pt-t2: #6b5a4b;
  --pt-t3: #7a6959;
  --pt-t4: #c0b0a0;

  --pt-p: #b24300;
  --pt-p-hover: #c35213;
  --pt-p-active: #a13300;
  --pt-on-p: #ffffff;

  --pt-ok: #067647;
  --pt-warn: #975900;
  --pt-dang: #bc2f4a;
  --pt-info: #1469b1;

  --pt-kpi-1: #2563eb;
  --pt-kpi-2: #059669;
  --pt-kpi-3: #d2601f;
  --pt-kpi-4: #b45309;

  --pt-r-sm: 10px;
  --pt-r-md: 14px;
  --pt-r-lg: 20px;
}

/* ===========================================================================
 * ② 桌面布局（画板 43）：左 600 深色品牌栏 + 右侧 400 宽卡片
 * 品牌栏在 8 套配色里都是深色 chrome，所以它内部的文字一律走 chrome token，
 * 不能用 --pt-t1/--pt-t3 —— 浅色模式下那是深灰，会变成深底深字。
 * =========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Chrome 的 UA 样式表只让 HTML 元素的 hidden 生效，内联 SVG 上的 hidden 形同虚设，
 * 所以得自己写一条 —— 否则眼睛/闭眼两个图标会一起堆在密码框里，
 * 提示框里的 circle-alert 与 triangle-alert 也会同时出现。 */
svg[hidden] {
  display: none;
}

html {
  height: 100%;
}

body.login-page {
  height: 100%;
  margin: 0;
  font-family: var(--pt-font-family);
  font-size: var(--pt-fz-body);
  line-height: var(--pt-lh-body);
  color: var(--pt-t1);
  letter-spacing: 0;
  background: var(--pt-canvas);
  -webkit-font-smoothing: antialiased;
}

.login-layout {
  display: grid;
  grid-template-columns: clamp(420px, 42vw, 600px) minmax(0, 1fr);
  min-height: 100%;
}

.login-brand {
  display: flex;
  flex-direction: column;
  padding: 116px 64px 64px;
  color: var(--pt-chrome-t1);
  background: var(--pt-chrome);
  border-right: 1px solid var(--pt-chrome-border);
}

/* 字标是 docs/brand.md 给「需要出现产品名的地方（登录页…）」指定的变体，自带
 * #0B1220 底板，规则要求「不要再套一层背景」，所以这里只给宽度不加任何底色；
 * 方标（两个变体）只在移动端露出 */
.login-brand__mark {
  display: block;
  width: 232px;
  height: auto;
}

.login-brand__badge {
  display: none;
}

.login-brand__tagline {
  margin: 24px 0 0;
  font-size: 15px;
  color: var(--pt-chrome-t2);
}

.login-brand__features {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin: 122px 0 0;
  padding: 0;
  list-style: none;
}

.login-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.login-feature__tile {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--pt-chrome-t1);
  background: var(--pt-chrome-raised);
  border-radius: var(--pt-r-md);
}

.login-feature__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: var(--pt-lh-tight);
}

.login-feature__desc {
  margin: 5px 0 0;
  font-size: var(--pt-fz-sm);
  color: var(--pt-chrome-t2);
}

/* auto 把页脚顶到栏底：画板上它在 y=944，正是 1024 减去 64 内边距的位置 */
.login-brand__foot {
  margin: auto 0 0;
  font-size: var(--pt-fz-sm);
  color: var(--pt-chrome-t2);
}

.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}

.login-card {
  width: 400px;
  max-width: 100%;
  padding: 32px;
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-r-lg);
}

.login-eyebrow {
  margin: 0;
  font-size: var(--pt-fz-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--pt-t4);
}

.login-title {
  margin: 8px 0 0;
  font-size: 24px;
  font-weight: 700;
  line-height: var(--pt-lh-tight);
  color: var(--pt-t1);
}

.login-subtitle {
  margin: 6px 0 0;
  font-size: var(--pt-fz-body);
  color: var(--pt-t3);
}

/* ---------------------------------------------------------------------------
 * 失败态：卡内联，替换旧模板里的两处 alert()
 * 画板给了两种：#b32318 circle-alert（凭据错）、#a5620a triangle-alert（用户不存在），
 * 这里按 --pt-dang / --pt-warn 取，换配色也跟着走。
 * ------------------------------------------------------------------------- */
.login-alert {
  --login-alert-c: var(--pt-dang);

  display: none;
  gap: 10px;
  align-items: flex-start;
  margin-top: 20px;
  padding: 11px 12px;
  font-size: var(--pt-fz-body);
  font-weight: 600;
  color: var(--login-alert-c);
  background: color-mix(in srgb, var(--login-alert-c) 10%, transparent);
  border-left: 3px solid var(--login-alert-c);
  border-radius: 0 var(--pt-r-lg) var(--pt-r-lg) 0;
}

.login-alert.is-open {
  display: flex;
}

.login-alert--warn {
  --login-alert-c: var(--pt-warn);
}

.login-alert__icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: var(--pt-fz-sm);
  font-weight: 500;
  color: var(--pt-t2);
}

.login-label__req {
  margin-left: 2px;
  font-weight: 600;
  color: var(--pt-dang);
}

.login-input {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input__icon {
  position: absolute;
  left: 10px;
  display: block;
  color: var(--pt-t3);
  pointer-events: none;
}

.login-input input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 33px;
  font-family: inherit;
  font-size: var(--pt-fz-body);
  color: var(--pt-t1);
  background: var(--pt-surface);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-r-md);
  outline: none;
  transition:
    border-color var(--pt-transition-fast),
    box-shadow var(--pt-transition-fast);
}

.login-input input::placeholder {
  color: var(--pt-t4);
}

.login-input input:hover {
  border-color: var(--pt-border-strong);
}

.login-input input:focus {
  border-color: var(--pt-p);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pt-p) 18%, transparent);
}

.login-input--pass input {
  padding-right: 38px;
}

.login-reveal {
  position: absolute;
  right: 5px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--pt-t3);
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--pt-r-sm);
}

.login-reveal:hover {
  color: var(--pt-t1);
  background: var(--pt-hover);
}

.login-reveal:focus-visible {
  outline: 2px solid var(--pt-p);
  outline-offset: 1px;
}

.login-button {
  height: 44px;
  margin-top: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--pt-on-p);
  cursor: pointer;
  background: var(--pt-p);
  border: 0;
  border-radius: var(--pt-r-md);
  transition: background var(--pt-transition-fast);
}

.login-button:hover:not(:disabled) {
  background: var(--pt-p-hover);
}

.login-button:active:not(:disabled) {
  background: var(--pt-p-active);
}

.login-button:disabled {
  cursor: progress;
  opacity: 0.72;
}

.login-button:focus-visible {
  outline: 2px solid var(--pt-p);
  outline-offset: 2px;
}

.login-foot {
  margin: 20px 0 0;
  padding-top: 16px;
  font-size: var(--pt-fz-label);
  line-height: var(--pt-lh-body);
  color: var(--pt-t3);
  border-top: 1px solid var(--pt-border);
}

/* 品牌栏在 1180 以下先收内边距，再到 900 整体换成单列 */
@media (max-width: 1180px) {
  .login-brand {
    padding: 72px 40px 40px;
  }

  .login-brand__features {
    gap: 32px;
    margin-top: 72px;
  }
}

/* ===========================================================================
 * ③ 移动端（画板 43 的 375×812 版）
 * 品牌栏收成一个居中的方标 + 底部版本行，标题与副标题交给卡片承担
 * （画板把它们画在卡片外，这里放进卡片内，好处是全文档只有一个 h1）。
 * display: contents 让品牌栏的孩子直接参与外层 flex，页脚才能落到屏底。
 * =========================================================================== */
@media (max-width: 900px) {
  .login-layout {
    display: flex;
    flex-direction: column;
    padding-bottom: max(34px, env(safe-area-inset-bottom));
  }

  .login-brand {
    display: contents;
  }

  .login-brand__mark,
  .login-brand__tagline,
  .login-brand__features {
    display: none;
  }

  /* 方标这里落在 --pt-canvas 上，按 docs/brand.md「判断标准是表面明暗」选变体：
     浅色画布用自带底板的彩色版，深色画布用单色版并取该表面的主文字色。
     底板圆角写在 SVG 里（rx=204.8，即 20%），不要再叠 CSS border-radius。 */
  .login-brand__badge {
    width: 52px;
    height: 52px;
    margin: 44px auto 0;
  }

  html.light .login-brand__badge--plated,
  html.dark .login-brand__badge--mono {
    display: block;
  }

  .login-brand__badge--mono {
    color: var(--pt-t1);
  }

  .login-brand__foot {
    order: 1;
    margin: auto 20px 0;
    font-size: var(--pt-fz-label);
    color: var(--pt-t3);
    text-align: center;
  }

  .login-main {
    padding: 24px 20px 20px;
    align-items: flex-start;
  }

  /* 单列布局一路用到 900，卡片不能真的拉满：768 的平板上 728 宽的输入框会让
     标签与右边缘离得太远，读不成一组。420 是画板 43 桌面版 400 卡片的同量级。 */
  .login-card {
    width: 100%;
    max-width: 420px;
    padding: 20px;
  }

  .login-title {
    font-size: 20px;
  }

  .login-button {
    height: 46px;
  }
}

/* 键盘弹起（可视高度被压缩）时品牌区收成一行，把卡片整体上移 */
@media (max-width: 900px) and (max-height: 700px) {
  .login-brand__badge {
    width: 36px;
    height: 36px;
    margin-top: 20px;
  }

  .login-main {
    padding-top: 16px;
  }
}

/* 触控设备把输入框和眼睛按钮撑到 44，满足最小触控目标 */
@media (hover: none) {
  .login-input input {
    height: 44px;
  }

  .login-reveal {
    width: 34px;
    height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-input input,
  .login-button {
    transition: none;
  }
}