:root {
  --leader-background: #f5f5f7;
  --leader-sidebar: rgba(251, 251, 253, .96);
  --leader-surface: #ffffff;
  --leader-ink: #1d1d1f;
  --leader-muted: #6e6e73;
  --leader-line: #d2d2d7;
  --leader-blue: #0071e3;
}

body.leader-page {
  color: var(--leader-ink);
  background: var(--leader-background);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.leader-page .login-page { min-height: 100vh; padding: 20px; background: var(--leader-background); }
.leader-page .login-card.compact-login { width: min(390px, 100%); border: 1px solid var(--leader-line); border-radius: 12px; background: var(--leader-surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .08); }
.leader-page .login-compact-head { padding: 28px 28px 0; }
.leader-page .compact-login .login-form { padding: 25px 28px 30px; }
.leader-page .compact-login .login-form h2 { color: var(--leader-ink); font-size: 24px; letter-spacing: -.025em; }
.leader-page .login-form > p { color: var(--leader-muted); }
.leader-page .brand-mark { width: 30px; height: 30px; border-radius: 8px; color: #fff; background: var(--leader-blue); }

.leader-page .shell { grid-template-columns: 190px minmax(0, 1fr); background: var(--leader-background); }
.leader-page .sidebar { position: sticky; top: 0; height: 100vh; padding: 17px 10px 13px; color: var(--leader-ink); background: var(--leader-sidebar); border-right: 1px solid var(--leader-line); }
.leader-page .sidebar .brand { padding: 0 9px 19px; font-size: 14px; }
.leader-page .nav { gap: 2px; margin-top: 5px; }
.leader-page .nav button { padding: 8px 10px; border-radius: 7px; color: #515154; font-size: 12px; }
.leader-page .nav button:hover { color: var(--leader-ink); background: rgba(0, 0, 0, .045); }
.leader-page .nav button.active { color: var(--leader-ink); background: #e8e8ed; font-weight: 600; }
.leader-page .sidebar-bottom { padding: 13px 9px 0; border-top: 1px solid var(--leader-line); }
.leader-page .sidebar-user { gap: 3px; margin-bottom: 9px; }
.leader-page .sidebar-user small { color: var(--leader-muted); }
.leader-page .sidebar-bottom .button { color: var(--leader-muted); }

.leader-page .main { min-width: 0; padding: 28px clamp(22px, 3vw, 42px) 52px; }
.leader-page .page-head { align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.leader-page .page-head h1 { margin-top: 6px; color: var(--leader-ink); font-size: clamp(26px, 3vw, 32px); font-weight: 650; letter-spacing: -.025em; }
.leader-page .page-head p { max-width: 650px; margin-top: 6px; color: var(--leader-muted); font-size: 12px; line-height: 1.55; }
.leader-page .eyebrow { color: var(--leader-blue); font-size: 11px; font-weight: 600; }
.leader-page .button { min-height: 34px; padding: 7px 13px; border-radius: 7px; font-size: 12px; }
.leader-page .button.primary { color: #fff; border-color: var(--leader-blue); background: var(--leader-blue); }
.leader-page .button.secondary { color: var(--leader-ink); border-color: var(--leader-line); background: var(--leader-surface); }
.leader-page .button.quiet { color: var(--leader-muted); background: transparent; }
.leader-page .button.danger { color: #c93434; border-color: #f0caca; background: #fff; }

.leader-page .stats { gap: 8px; margin-bottom: 16px; }
.leader-page .stat, .leader-page .panel, .leader-page .card { border: 1px solid var(--leader-line); border-radius: 10px; background: var(--leader-surface); box-shadow: none; }
.leader-page .stat { min-height: 88px; padding: 14px; }
.leader-page .stat span, .leader-page .panel-head p, .leader-page .card p, .leader-page .muted { color: var(--leader-muted); }
.leader-page .stat strong { margin-top: 8px; color: var(--leader-ink); font-size: 25px; font-weight: 600; }
.leader-page .panel { margin-bottom: 12px; }
.leader-page .panel-head { padding: 13px 16px; border-bottom-color: var(--leader-line); }
.leader-page .panel-head h2 { color: var(--leader-ink); font-size: 15px; font-weight: 600; }
.leader-page .empty { padding: 32px 16px; color: var(--leader-muted); }
.leader-page th { color: var(--leader-muted); background: #f7f7f8; font-size: 12px; font-weight: 600; }
.leader-page th, .leader-page td { border-bottom-color: var(--leader-line); }
.leader-page .chip { min-height: 24px; border-radius: 6px; color: #515154; background: #f2f2f4; }
.leader-page .chip.good { color: #167447; background: #eaf7ef; }
.leader-page .chip.warn { color: #9a6400; background: #fff4d6; }
.leader-page .chip.bad { color: #b3261e; background: #fdeceb; }
.leader-page .progress-line i { background: var(--leader-blue); }
.leader-page .field input, .leader-page .field textarea, .leader-page .field select { border-color: var(--leader-line); border-radius: 7px; }
.leader-page .field input:focus, .leader-page .field textarea:focus, .leader-page .field select:focus { border-color: var(--leader-blue); box-shadow: 0 0 0 3px rgba(0, 113, 227, .12); }
.leader-page .modal-backdrop { background: rgba(0, 0, 0, .35); }
.leader-page .modal { border: 1px solid var(--leader-line); border-radius: 12px; box-shadow: 0 24px 80px rgba(0, 0, 0, .18); }
.leader-page .modal-head, .leader-page .modal-foot { border-color: var(--leader-line); }

@media (max-width: 700px) {
  .leader-page .shell { grid-template-columns: 1fr; }
  .leader-page .sidebar { position: static; height: auto; }
  .leader-page .sidebar .brand { padding-bottom: 12px; }
  .leader-page .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leader-page .sidebar-bottom { display: none; }
  .leader-page .main { padding: 24px 16px 42px; }
  .leader-page .page-head { align-items: flex-start; flex-direction: column; }
  .leader-page .page-head .actions { width: 100%; }
}

/* 团队运营界面与管理端共用同一套紧凑的信息层级。 */
.leader-page .shell { grid-template-columns: 176px minmax(0, 1fr); }
.leader-page .sidebar { padding: 14px 8px 10px; }
.leader-page .sidebar .brand { padding: 0 8px 14px; }
.leader-page .nav { gap: 1px; margin-top: 0; }
.leader-page .nav button { padding: 7px 9px; }
.leader-page .sidebar-bottom { padding: 10px 8px 0; }
.leader-page .main {
  width: 100%;
  max-width: 1220px;
  justify-self: start;
  padding: 0 24px 32px;
}
.leader-page .page-head {
  min-height: 58px;
  align-items: center;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--leader-line);
}
.leader-page .page-head h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.01em;
}
.leader-page .page-head .eyebrow,
.leader-page .page-head p { display: none; }
.leader-page .button {
  min-height: 29px;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.leader-page .stats {
  gap: 0;
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid var(--leader-line);
  border-radius: 6px;
  background: var(--leader-surface);
}
.leader-page .stat {
  min-height: 62px;
  padding: 10px 13px;
  border: 0;
  border-right: 1px solid var(--leader-line);
  border-radius: 0;
  background: transparent;
}
.leader-page .stat:last-child { border-right: 0; }
.leader-page .stat strong { margin-top: 3px; font-size: 20px; }
.leader-page .panel,
.leader-page .card { border-radius: 6px; }
.leader-page .panel-head { min-height: 39px; padding: 9px 12px; }
.leader-page .panel-head h2 { font-size: 13px; }
.leader-page .panel-head p { display: none; }
.leader-page th,
.leader-page td { padding: 7px 9px; }
.leader-page th { font-size: 11px; }
.leader-page .empty { padding: 20px 12px; }
.leader-page .chip { min-height: 21px; padding: 2px 7px; border-radius: 5px; }

@media (max-width: 980px) {
  .leader-page .main { max-width: none; }
}