/* ===========================================================
   auth.css — 登录 / 注册 / 找回密码 与云端状态样式
   =========================================================== */

/* ---------- 云端连接状态徽标 ---------- */
.cloud-badge{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
  border-radius:20px;padding:5px 12px;font-size:11.5px;color:var(--txt-2);box-shadow:var(--sh-1)}
.cloud-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex:none;
  box-shadow:0 0 0 3px rgba(139,144,168,.16)}
.cloud-badge.ok .dot{background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}
.cloud-badge.warn .dot{background:var(--warn);box-shadow:0 0 0 3px var(--warn-soft)}
.cloud-badge.bad .dot{background:var(--danger);box-shadow:0 0 0 3px var(--danger-soft)}
.cloud-badge.pending .dot{background:var(--info);animation:pulse 1.1s ease-in-out infinite;
  box-shadow:0 0 0 3px var(--info-soft)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- 登录卡片内的 Tab ---------- */
.login-card{max-width:660px}
.auth-tabs{display:flex;gap:4px;background:var(--bg-2);border-radius:10px;padding:4px;margin-bottom:18px}
.auth-tab{flex:1;border:0;background:transparent;border-radius:7px;padding:8px 6px;font-size:12.5px;
  font-family:inherit;color:var(--txt-2);cursor:pointer;transition:.15s;font-weight:500}
.auth-tab:hover{color:var(--primary)}
.auth-tab.on{background:var(--card);color:var(--primary);font-weight:600;box-shadow:var(--sh-1)}

.auth-pane{display:none}
.auth-pane.on{display:block}
.auth-pane h2{font-size:17px;margin-bottom:5px}

.auth-form{display:block}
.auth-form .field{margin-bottom:13px}
.auth-form .input,.auth-form .select{width:100%}
.auth-submit{margin-top:6px;padding:10px 14px;font-size:13.5px}

.auth-row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px}
.auth-row-between.gap8{gap:8px;margin:0}
.auth-row-between.gap8 .input{flex:1}
.auth-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--txt-2);cursor:pointer;
  user-select:none}
.auth-check input{accent-color:var(--primary);width:14px;height:14px}

.link-btn{border:0;background:none;padding:0;font-size:12px;color:var(--primary);cursor:pointer;
  font-family:inherit}
.link-btn:hover{text-decoration:underline}

/* ---------- 表单反馈 ---------- */
.auth-msg{font-size:12px;min-height:18px;margin-top:9px;line-height:1.5;display:none}
.auth-msg.on{display:block}
.auth-msg.err{color:var(--danger-txt)}
.auth-msg.ok{color:var(--ok-txt)}
.auth-msg.info{color:var(--txt-2)}

.auth-hint{font-size:11px;color:var(--muted);margin-top:-7px;margin-bottom:12px}

/* ---------- 员工账号登录（工号 + 密码 · 戳2006） ---------- */
.staff-login{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.staff-login .sl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.staff-login .sl-head b{font-size:13px}
.staff-login .input{min-width:0}

/* ---------- 云端不可用提示条 ---------- */
.cloud-alert{display:flex;gap:9px;align-items:flex-start;background:var(--warn-soft);border:1px solid var(--warn-bd);
  border-radius:9px;padding:10px 12px;font-size:12px;color:var(--warn-txt);margin-bottom:16px;line-height:1.55}
.cloud-alert b{display:block;margin-bottom:2px;color:var(--warn-txt-strong)}

/* ---------- 顶栏同步状态 ---------- */
.sync-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--txt-2);
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:4px 11px;white-space:nowrap}
.sync-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex:none}
.sync-pill.saving .dot{background:var(--info);animation:pulse .9s ease-in-out infinite}
.sync-pill.error .dot{background:var(--danger)}
.sync-pill.local .dot{background:var(--warn)}
.sync-pill .sep{color:var(--line);margin:0 2px}

/* ---------- 双列布局（账号中心等设置页使用） ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ---------- 窄屏 ---------- */
@media (max-width:980px){
  .login-card{max-width:100%}
  .auth-tabs{font-size:12px}
}