/* ==========================================================================
   登录页 · login-ui.css
   --------------------------------------------------------------------------
   作用域：全部 56 个选择器以 .zq-login 开头，不外泄到全局。
   不变量：无径向模糊光斑、无 backdrop-filter、无外发光/装饰投影、无新增色相。

   为什么这份 CSS 【不能】 放进 @layer utilities（重要，别改回去）：
     index.css 末尾留着一整块「旧登录页」样式（.zq-login::before/::after 的蓝绿
     模糊光斑、.zq-login-card 等），它是在 @layer 之外追加的 —— 文件偏移约
     174470 到末尾那 76 行。按 CSS 级联层规则，【未分层规则的优先级高于任何
     layer，与特异性无关】，所以只要本文件待在 @layer 里，上面所有规则都会被
     那 76 行整体盖掉，两个光斑也会回来。

   因此本文件是未分层的，靠「后加载 + 更高特异性」与那 76 行对抗，具体见文件
   末尾「覆盖生产基线 index.css 末尾那块旧登录页遗留规则」一节。
   如果将来把旧登录样式从 index.css 里真正删掉，那一节就可以整段移除。

   级联顺序依赖：本文件必须在 index.css 之后加载（index.html 里已如此排列）。
   ========================================================================== */
  /* ---------- tokens ---------- */
  .zq-login {
    --zq-canvas: #0d1117;      /* 画布 */
    --zq-surface: #161b22;     /* 底板 / 面板 */
    --zq-field: #0d1117;       /* 输入框（凹进底板） */
    --zq-line: #30363d;        /* 描边 */
    --zq-line-soft: #21262d;   /* 分割线 / 禁用描边 */
    --zq-fg: #e6edf3;          /* 主文字 */
    --zq-body: #c9d1d9;        /* 正文 */
    --zq-muted: #8b949e;       /* 次文字 */
    --zq-dim: #6e7681;         /* 弱文字 */
    --zq-faint: #484f58;       /* 静文字 / 占位符 */
    /* 强调色：原品牌红全数换成冷蓝（原因：主体色不再用红，红只留给错误语义） */
    --zq-accent: #58a6ff;      /* 强调 · 主：focus / 选中 / 链接 —— 原红 → 冷蓝 #58a6ff */
    --zq-accent-soft: #79c0ff; /* 强调 · 次（hover）—— 原红浅调 → 冷蓝 #79c0ff */
    --zq-accent-deep: #1f6feb; /* 强调 · 深（实心填充）—— 原红深调 → 冷蓝 #1f6feb */
    --zq-accent-bg: rgba(88, 166, 255, 0.10);   /* 焦点环 / 选中底 —— 原红 22% 环 → 冷蓝 10% */
    --zq-accent-line: rgba(88, 166, 255, 0.40); /* 强调描边（40%）—— 替代原红 40%~55% 描边；键盘焦点改用实心 --zq-accent，本值留给需要弱化描边的场合 */
    /* 真错误语义：全页唯一保留红的地方（原来的红强调色挪到这里，只服务报错） */
    --zq-error: #f85149; --zq-error-soft: #ff7b72;
    --zq-ink: #0d1117;         /* 白底主按钮上的墨色文字（对 #e6edf3 约 16:1） */
    --zq-radius: 12px;
    --zq-radius-sm: 8px;
    --zq-ease: cubic-bezier(.2, .6, .25, 1);
    --zq-fast: 140ms;
    --zq-instant: 100ms;

    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px 40px;
    background-color: var(--zq-canvas);
    color: var(--zq-body);
    color-scheme: dark;
    font-family: var(--font-sans, ui-sans-serif, system-ui, -apple-system,
      "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .zq-login *,
  .zq-login *::before,
  .zq-login *::after { box-sizing: border-box; }

  /* ---------- 粒子层 ---------- */
  .zq-login > .zq-login-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
  }

  /* ---------- 布局：品牌栏 | 留白（NABI 浮出的地方） | 表单 ---------- */
  .zq-login > .zq-login-wrap {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 392px;
    grid-template-rows: auto auto;
    align-items: center;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    row-gap: 16px;
  }

  /* ---------- 品牌区 ---------- */
  .zq-login .zq-login-brand {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .zq-login .zq-login-mark {
    display: block;
    width: 50px;
    height: 50px;
    flex: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .zq-login .zq-login-title {
    margin: 20px 0 0;
    font-family: inherit;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--zq-fg);
  }

  .zq-login .zq-login-subtitle {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    color: var(--zq-dim);
  }

  /* 一根 1px 短线收住品牌区，呼应标识里那根冷蓝横杠的台阶语言 */
  .zq-login .zq-login-brand::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin-top: 24px;
    background-color: var(--zq-line);
  }

  /* ---------- 面板 ---------- */
  .zq-login .zq-login-panel {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 100%;
    max-width: 392px;
    padding: 24px;
    background-color: var(--zq-surface);
    border: 1px solid var(--zq-line);
    border-radius: var(--zq-radius);
  }

  .zq-login .zq-login-form {
    display: grid;
    gap: 16px;
    margin: 0;
  }

  /* label 与「显示」共处首行，input 独占次行；无 reveal 时首行自然只剩 label */
  .zq-login .zq-login-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 8px;
  }

  /* 行内错误提示（可选钩子：只有表单在字段内渲染 role=alert 时才生效） */
  .zq-login .zq-login-form [role="alert"] {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.01em;
    /* 原 --zq-accent-soft（品牌红）→ 真错误红 token：报错保持红，不跟强调色走 */
    color: var(--zq-error-soft);
  }

  .zq-login .zq-login-label {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.06em;
    color: var(--zq-muted);
  }

  .zq-login .zq-login-input {
    grid-column: 1 / -1;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    background-color: var(--zq-field);
    border: 1px solid var(--zq-line);
    border-radius: var(--zq-radius-sm);
    color: var(--zq-fg);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    transition: border-color var(--zq-fast) var(--zq-ease),
      background-color var(--zq-fast) var(--zq-ease);
  }

  .zq-login .zq-login-input::placeholder { color: var(--zq-faint); }

  .zq-login .zq-login-input:hover { border-color: #3d444d; }
  /* 密码遮罩：与生产 bundle 里的 .input-masked 行为等价（本文件自带一份，
     保证样式单文件可用；不改变原始行为，占位符仍按原样显示） */
  .zq-login .zq-login-input.input-masked {
    -webkit-text-security: disc;
    text-security: disc;
  }

  .zq-login .zq-login-input.input-masked::placeholder {
    -webkit-text-security: none;
    text-security: none;
  }

  .zq-login .zq-login-input:focus,
  .zq-login .zq-login-input:focus-visible {
    /* 原红 focus 环（描边 + 22% 红环）→ 冷蓝：描边 #58a6ff + 2px 淡蓝环，原因：主体色去红 */
    border-color: var(--zq-accent);
    outline: none;
    box-shadow: 0 0 0 2px var(--zq-accent-bg);
  }

  .zq-login .zq-login-input[aria-invalid="true"] { border-color: var(--zq-error); } /* 报错描边保留原红，语义是真错误 */

  .zq-login .zq-login-field:has(.zq-login-input[aria-invalid="true"]) .zq-login-label {
    color: var(--zq-error-soft); /* 报错 label 保留原红浅调，语义是真错误 */
  }

  .zq-login .zq-login-input:disabled {
    background-color: #0b0f14;
    border-color: var(--zq-line-soft);
    color: var(--zq-dim);
    cursor: not-allowed;
  }

  /* ---------- 显示 / 隐藏 ---------- */
  .zq-login .zq-login-reveal {
    grid-column: 2;
    justify-self: end;
    margin: -8px -4px -8px 0;
    padding: 8px 4px;
    background: none;
    border: 0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--zq-dim);
    cursor: pointer;
    transition: color var(--zq-instant) var(--zq-ease);
  }

  .zq-login .zq-login-reveal:hover { color: var(--zq-body); }

  .zq-login .zq-login-reveal:focus-visible {
    outline: 2px solid var(--zq-accent); /* 原红 55% 描边 → 冷蓝实心描边（40% 蓝对画布只有 2.2:1，键盘焦点用实心 7.5:1） */
    outline-offset: 1px;
    color: var(--zq-fg);
  }

  /* ---------- 记住账号密码 ---------- */
  .zq-login .zq-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0;
    padding: 4px 0;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  .zq-login .zq-login-remember > span {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--zq-muted);
  }

  .zq-login .zq-login-check {
    width: 14px;
    height: 14px;
    margin: 0;
    flex: none;
    accent-color: var(--zq-accent);
    cursor: pointer;
  }

  .zq-login .zq-login-check:focus-visible {
    outline: 2px solid var(--zq-accent); /* 原红 55% 描边 → 冷蓝实心描边（同上，键盘焦点需 ≥3:1） */
    outline-offset: 2px;
  }

  /* ---------- 提交 ---------- */
  .zq-login .zq-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    margin-top: 4px;
    padding: 0 16px;
    /* 全站主按钮：白底黑字。原品牌红底 → #e6edf3 底 / #0d1117 字，
       原因：主体色去红，而白底比蓝底更克制，且是整站唯一的主行动色 */
    background-color: #e6edf3;
    border: 0;
    border-radius: var(--zq-radius-sm);
    color: var(--zq-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: background-color var(--zq-fast) var(--zq-ease),
      transform var(--zq-instant) var(--zq-ease);
  }

  .zq-login .zq-login-submit:hover { background-color: #ffffff; } /* 原红浅调 hover → 纯白提亮 */

  .zq-login .zq-login-submit:active {
    background-color: #c9d1d9; /* 原红深调按下 → 回落到既有正文灰，不引入新色相 */
    transform: translateY(1px);
  }

  .zq-login .zq-login-submit:focus-visible {
    outline: 2px solid var(--zq-accent); /* 原红焦点环 → 冷蓝 #58a6ff，键盘焦点统一到强调色 */
    outline-offset: 2px;
  }

  .zq-login .zq-login-submit:disabled,
  .zq-login .zq-login-submit[aria-disabled="true"] {
    background-color: var(--zq-line-soft);
    border: 1px solid var(--zq-line);
    color: var(--zq-dim);
    cursor: not-allowed;
  }

  /* 登录中：保持主按钮白底（这是「正在做」，不是「不可用」），文字前加一枚细环 */
  .zq-login .zq-login-submit.is-busy {
    background-color: #e6edf3; /* 原红 → 主按钮白底，忙碌态不换色相 */
    border: 0;
    color: var(--zq-ink);
    pointer-events: none;
    cursor: progress;
  }

  .zq-login .zq-login-submit.is-busy::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: none;
    border: 1.5px solid rgba(13, 17, 23, 0.3);
    border-top-color: var(--zq-ink);
    border-radius: 50%;
    animation: zq-spin 720ms linear infinite;
  }

  /* 生产若用 disabled 表达「登录中」，仍按白底主按钮处理：状态优先于可用性灰 */
  .zq-login .zq-login-submit.is-busy:disabled,
  .zq-login .zq-login-submit.is-busy[aria-disabled="true"] {
    background-color: #e6edf3; /* 原红 → 主按钮白底 */
    border: 0;
    color: var(--zq-ink);
    cursor: progress;
  }

  /* ---------- 页脚 ---------- */
  .zq-login .zq-login-foot {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    width: 100%;
    max-width: 392px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--zq-faint);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- 窄屏：品牌居中，留白收掉 ---------- */
  @media (max-width: 960px) {
    .zq-login { padding: 36px 20px; }

    .zq-login > .zq-login-wrap {
      grid-template-columns: minmax(0, 1fr);
      max-width: 392px;
      row-gap: 28px;
    }

    .zq-login .zq-login-brand {
      grid-column: 1;
      grid-row: 1;
      align-items: center;
      text-align: center;
    }

    .zq-login .zq-login-brand::after { margin-top: 20px; }

    .zq-login .zq-login-panel {
      grid-column: 1;
      grid-row: 2;
      justify-self: stretch;
      max-width: none;
    }

    .zq-login .zq-login-foot {
      grid-column: 1;
      grid-row: 3;
      justify-self: center;
      text-align: center;
      max-width: none;
    }
  }

  @media (max-width: 420px) {
    .zq-login .zq-login-panel { padding: 20px 16px 18px; }
  }

  /* ---------- 降级：过渡压到 1ms，旋转指示器仍保留（状态必需） ---------- */
  @media (prefers-reduced-motion: reduce) {
    .zq-login,
    .zq-login *,
    .zq-login *::before,
    .zq-login *::after { transition-duration: 1ms !important; }

    .zq-login .zq-login-submit.is-busy::before { animation-duration: 2400ms !important; }
  }

  @keyframes zq-spin {
    to { transform: rotate(360deg); }
  }

/* ==========================================================================
   覆盖生产基线 index.css 末尾那块「旧登录页」遗留规则
   --------------------------------------------------------------------------
   那 76 行是在 @layer 之外追加的（.zq-login::before/::after 的蓝绿模糊光斑、
   .zq-login-card/.zq-login-side 等一整套旧结构）。
   未分层规则的优先级高于任何 layer，所以本文件不能待在 @layer utilities 里，
   否则上面所有 .zq-login 规则都会被那 76 行压掉 —— 包括两个必须删掉的光斑。
   下面几条把它逐项关掉，用后加载 + 更高特异性（个别处必须带 !important，
   因为旧规则自己就带了 !important）。
   ========================================================================== */

/* 1. 两个径向模糊光斑：旧规则用 ::before/::after 画的，直接取消生成 */
.zq-login::before,
.zq-login::after { content: none !important; background: none !important; }

/* 2. 旧规则给的 focus 环带 !important，必须夺回。
   特异性算术：旧 `.zq-login input[type=text]:focus` = (0,3,1)，
   所以这里要 (0,4,0) 才压得住 —— 多挂一层 .zq-login-field。
   原红 focus（描边 + 22% 红环）→ 冷蓝描边 + 2px 淡蓝环，原因：主体色去红。 */
.zq-login .zq-login-field .zq-login-input:focus,
.zq-login .zq-login-field .zq-login-input:focus-visible {
  border-color: var(--zq-accent) !important;
  box-shadow: 0 0 0 2px var(--zq-accent-bg) !important;
}

/* 3. 占位符：旧规则 #4d5662 是给旧输入框的调子，这里用本页 token */
.zq-login .zq-login-input::placeholder { color: var(--zq-faint); }

/* 4. 旧规则给提交按钮加 brightness 滤镜，会和本页的底色切换叠在一起。
   旧 `.zq-login button[type=submit]:hover:not([disabled])` = (0,4,1)，故这里 (0,5,0)。 */
.zq-login .zq-login-form .zq-login-submit:hover:not([disabled]) { filter: none; }