*,*::before,*::after {
  box-sizing:border-box;margin: 0;padding: 0
}
.login-wrapper {
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding: 40px;
}
.login-bg-decor {
  position:fixed;pointer-events:none;opacity:0.04;
  border-radius: 50%;filter:blur(120px);
}
.login-bg-decor:nth-child(1) {
  width:600px;height:600px;background:#3B82F6;top: -200px;right: -100px;
}
.login-bg-decor:nth-child(2) {
  width:500px;height:500px;background:var(--c-accent);bottom: -150px;left: -100px;
}
.login-card {
  width:420px;max-width:100%;
  background:var(--c-bg-card);border-radius: var(--radius-card);
  border:1px solid var(--c-border);box-shadow:var(--shadow-card);
  padding: 48px 40px;position:relative;z-index:1;
}
.login-header {
  text-align:center;margin-bottom: 36px;
}
.login-logo {
  width:52px;height:52px;border-radius: var(--radius-btn);
  background:var(--c-primary-gradient);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;margin-bottom: 16px;
  box-shadow:0 4px 16px rgba(29,78,216,0.35);
}
.login-title {
  font-size:24px;font-weight:700;color:var(--c-text-primary);margin-bottom: 4px;
}
.login-subtitle {
  font-size:12px;color:var(--c-text-tertiary);
}
.form-input.input-error {
  border-color:var(--c-error-text);box-shadow:0 0 0 3px rgba(239,68,68,0.12);
}
.form-error-msg {
  font-size:var(--fs-caption);color:var(--c-error-text);margin-top: 6px;display:flex;align-items:center;gap: 4px;
}
.form-error-msg svg {
  width:14px;height:14px;flex-shrink:0;
}
.pwd-wrap {
  position:relative;
}
.pwd-toggle {
  position:absolute;right: 12px;top: 50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--c-text-tertiary);
  padding: 4px;display:flex;align-items:center;
}
.pwd-toggle:hover {
  color:var(--c-text-secondary);
}
.captcha-row {
  display:flex;gap: 12px;
}
.captcha-row .form-input {
  flex:1;
}
.captcha-img {
  width:120px;height:44px;border-radius: var(--radius-input);
  background:linear-gradient(135deg,rgba(59,130,246,0.1),rgba(16,185,129,0.1));
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:var(--font-mono);font-size:18px;
  font-weight:700;color:var(--c-text-primary);letter-spacing:3px;
  user-select:none;border:1px solid var(--c-border);
  transition:all 150ms ease;
}
.captcha-img:hover {
  background:rgba(59,130,246,0.15);
}
.extra-row {
  display:flex;align-items:center;justify-content:space-between;margin-bottom: 24px;
}
.remember-me {
  display:flex;align-items:center;gap: 8px;font-size:12px;color:var(--c-text-secondary);cursor:pointer;
}
.remember-me input[type="checkbox"] {
  width:16px;height:16px;border-radius: 3px;border:1px solid var(--c-border);
  accent-color:var(--c-primary-text);cursor:pointer;
}
.forgot-link {
  font-size:12px;color:var(--c-primary-light);text-decoration:none;transition:color 150ms;
}
.forgot-link:hover {
  color:var(--c-primary-text);
}
.spinner {
  width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;border-radius: 50%;
  animation:spin 0.6s linear infinite;
}


.login-footer {
  text-align:center;margin-top: 28px;font-size:var(--fs-caption);color:var(--c-text-tertiary);
}
.login-footer a {
  color:var(--c-text-secondary);text-decoration:none;
}
.login-footer a:hover {
  color:var(--c-primary-light);
}
.theme-float {
  position:fixed;top: 20px;right: 20px;z-index:100;
  width:38px;height:38px;border-radius: var(--radius-btn);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid var(--c-border);
  background:var(--c-bg-card);color:var(--c-text-secondary);
  transition:all 150ms ease;font-size:18px;
}
.theme-float:hover {
  background:var(--c-bg-card-hover);
}
[data-theme="light"] .login-bg-decor {
  opacity:0.06;
}
[data-theme="light"] .btn {
  box-shadow:0 2px 12px rgba(29,78,216,0.2);
}
[data-theme="light"] .toast-error {
  background:#FEE2E2;color: #b91c1c;border-color:rgba(220,38,38,0.2);
}
[data-theme="light"] .toast-success {
  background:#D1FAE5;color: #047857;border-color:rgba(16,185,129,0.2);
}
[data-theme="light"] .toast-warning {
  background:#FEF3C7;color: #b45309;border-color:rgba(245,158,11,0.2);
}
@media(max-width:480px) {
.login-card {
  padding: 32px 24px;
}
.login-title {
  font-size:var(--fs-xl);
}
.captcha-row {
  flex-direction:column;
}
.captcha-img {
  width:100%;
}
}
 
.demo-accounts {
  margin-top: 28px;padding-top: 22px;border-top: 1px dashed var(--c-border);
}
.demo-title {
  font-size:12px;font-weight:600;color:var(--c-text-secondary);margin-bottom: 4px;
  display:flex;align-items:center;gap: 6px;
}
.demo-title svg { width:15px;height:15px;color:var(--c-primary-light); }
.demo-sub {
  font-size:var(--fs-caption);color:var(--c-text-tertiary);margin-bottom: var(--sp-md);
}
 
.demo-cats {
  display:grid;grid-template-columns:repeat(3, 1fr);gap: 12px;margin-bottom: 20px;
}
.demo-cat {
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap: 8px;
  padding: 16px 12px;border:1px solid var(--c-border);border-radius: var(--radius-card);
  background:var(--c-bg-card-hover);cursor:pointer;transition:all 150ms ease;
  color:var(--c-text-secondary);
}
.demo-cat:hover:not(.active) { border-color:var(--c-primary-text);color:var(--c-primary-text); }
.demo-cat.active { background:var(--c-primary);border-color:var(--c-primary-text);color:#fff; }
.demo-cat .dc-icon { width:28px;height:28px; }
.demo-cat .dc-label { font-size:var(--fs-body);font-weight:700;line-height:1.2;white-space:nowrap; }
 
.demo-group { margin-bottom: 16px; }
.demo-group:last-child { margin-bottom: 0; }
/* 修复（2026-09-24）树桩卡片：T6 补载的 components.css 里有孤儿类兜底规则
   .demo-grid { grid-template-columns: repeat(auto-fill, minmax(150px,1fr)) }，
   它是给「无分组平铺卡片」场景设计的；登录页面板 #demoGrid 装的是 .demo-group
   分组容器，被该规则切成两列后组内 3 列卡片仅剩 ~60px，姓名一字一行竖排成"树桩"。
   最早版登录页不加载 components.css（分组纵向通栏），此处用更高特异性恢复，
   仅作用域本页，不影响 components.css 的全站兜底。 */
.demo-accounts .demo-grid { display: block; }
.demo-group-title {
  font-size: var(--fs-caption);font-weight:700;color:var(--c-text-secondary);margin: 0 0 8px 2px;letter-spacing:.3px;
}
 
.demo-group-chips {
  display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap: 6px;
}
.demo-chip {
  display:inline-flex;align-items:center;gap: 6px;min-width:0;overflow:hidden;
  padding: 6px 8px;border:1px solid var(--c-border);border-radius: var(--radius-btn);
  background:var(--c-bg-card-hover);cursor:pointer;text-align:left;
  transition:all 150ms ease;width:100%;
}
.dc-role { font-size:12px;color:var(--c-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.demo-chip:hover {
  transform:translateY(-1px);box-shadow:0 2px 10px rgba(29,78,216,0.18);
  filter:brightness(1.02);
}
.dc-avatar {
  width:24px;height:24px;border-radius: var(--radius-btn);flex-shrink:0;
  background:var(--c-primary-gradient);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-caption);font-weight:700;
}
.dc-meta { display:flex;flex-direction:column;line-height:1.25;min-width:0; }
.dc-name { font-size:var(--fs-caption);font-weight:600;color:var(--c-text-primary); }
.dc-role { font-size:12px;color:var(--c-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
 
.demo-chip.is-admin { border-color:var(--c-warning, #f59e0b);background:rgba(245,158,11,0.10); }
.demo-chip.is-admin .dc-avatar { background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
 
 
.demo-chip.dim-internal.lvl-mgr { border-color: #1d4ed8;background:rgba(37,99,235,0.12); }
.demo-chip.dim-internal.lvl-mgr .dc-avatar { background:linear-gradient(135deg, #1e40af 0%, #2563eb 100%); }
.demo-chip.dim-internal.lvl-mgr .dc-name { color:#1e40af; }
.demo-chip.dim-internal.lvl-exec { border-color:#bfdbfe;background:rgba(59,130,246,0.06); }
.demo-chip.dim-internal.lvl-exec .dc-avatar { background:linear-gradient(135deg, var(--c-primary-light) 0%, #3b82f6 100%); }
.demo-chip.dim-internal.lvl-exec .dc-name { color: #1d4ed8; }
 
.demo-chip.dim-cust.lvl-mgr { border-color: #b45309;background:rgba(217,119,11,0.12); }
.demo-chip.dim-cust.lvl-mgr .dc-avatar { background:linear-gradient(135deg, #b45309 0%, #d97706 100%); }
.demo-chip.dim-cust.lvl-mgr .dc-name { color:#92400e; }
.demo-chip.dim-cust.lvl-exec { border-color:#fde68a;background:rgba(245,158,11,0.07); }
.demo-chip.dim-cust.lvl-exec .dc-avatar { background:linear-gradient(135deg, var(--c-warning-light) 0%, #f59e0b 100%); }
.demo-chip.dim-cust.lvl-exec .dc-name { color: #b45309; }
 
.demo-chip.dim-partner.lvl-mgr { border-color: #047857;background:rgba(5,150,105,0.12); }
.demo-chip.dim-partner.lvl-mgr .dc-avatar { background:linear-gradient(135deg, #047857 0%, #059669 100%); }
.demo-chip.dim-partner.lvl-mgr .dc-name { color:#065f46; }
.demo-chip.dim-partner.lvl-exec { border-color:#a7f3d0;background:rgba(16,185,129,0.06); }
.demo-chip.dim-partner.lvl-exec .dc-avatar { background:linear-gradient(135deg, var(--c-success-light) 0%, var(--c-success) 100%); }
.demo-chip.dim-partner.lvl-exec .dc-name { color: #047857; }
@media (max-width:420px) {
  .demo-chip { padding: 6px 8px; }
}
.demo-hint {
  margin-top: var(--sp-md);font-size: var(--fs-caption);color:var(--c-text-tertiary);text-align:center;
}
.demo-hint code {
  font-family:var(--font-mono);background:var(--c-bg-card-hover);
  padding: 1px 6px;border-radius: 4px;color:var(--c-primary-light);
}