:root {
  --font-ui:
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    'SF Pro Display',
    'Segoe UI',
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;
  --font-display:
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Display',
    'SF Pro Text',
    'Segoe UI',
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --glass-bg: rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.45);
  --sidebar-bg: #f9f9fb;
  --surface-primary: #ffffff;
  --surface-secondary: #f2f2f7;
  --surface-tertiary: #f9f9fb;
  --surface-glass: rgba(255,255,255,0.92);
  --text-primary: #1d1d1f;
  --text-secondary: #86868b;
  --text-tertiary: #6e6e73;
  --border-primary: #e5e5ea;
  --border-subtle: rgba(0,0,0,0.06);
  --fill-hover: rgba(0,0,0,0.02);
  --fill-active: rgba(0,0,0,0.04);
  --motion-duration-fast: 180ms;
  --motion-duration-base: 240ms;
  --motion-duration-slow: 320ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  /* ── Typography ranks ── */
  --text-rank-h1: clamp(1.625rem, 1.35rem + 0.95vw, 1.95rem);
  --text-rank-h2: 1.0625rem;
  --text-rank-h3: 1rem;
  --text-rank-body: 0.9375rem;
  --text-rank-caption: 0.8125rem;
  --text-rank-micro: 0.75rem;
  /* ── Extended semantic colors ── */
  --text-quaternary: #aeaeb2;
  --text-link: #007aff;
  --ai-bubble-bg: #e9e9eb;
  --ai-bubble-text: #1d1d1f;
  --ai-bubble-border: rgba(60, 60, 67, 0.15);
  --ai-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  color-scheme: light;
}
:root.dark { color-scheme: dark; }
body.theme-dark {
  --ai-bubble-bg: #3a3a3c;
  --ai-bubble-text: #f5f5f7;
  --ai-bubble-border: rgba(255, 255, 255, 0.08);
  --ai-bubble-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  height:100%;
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-size: var(--text-rank-body);
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  background: var(--surface-secondary);
}

:where(button, input, textarea, select) {
  font: inherit;
  letter-spacing: inherit;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
}

/* 全站页面主标题（与各页 h1.app-page-title、登录页产品名一致） */
.app-page-title {
  font-family: var(--font-display);
  font-size: var(--text-rank-h1);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--text-primary);
  margin: 0;
  text-wrap: balance;
}
body.theme-dark .app-page-title {
  color: var(--text-primary);
}

/* ── Unified iOS Typography Ranks ── */
.ios-h1 {
  font-family: var(--font-display);
  font-size: var(--text-rank-h1);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}
.ios-h2 {
  font-family: var(--font-display);
  font-size: var(--text-rank-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-primary);
}
.ios-h3 {
  font-family: var(--font-display);
  font-size: var(--text-rank-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--text-primary);
}
.ios-body {
  font-size: var(--text-rank-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-secondary);
}
.ios-caption {
  font-size: var(--text-rank-caption);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.ios-micro {
  font-size: var(--text-rank-micro);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--text-secondary);
}
.ios-card-title {
  font-family: var(--font-display);
  font-size: var(--text-rank-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--text-primary);
}
.ios-card-desc {
  font-size: var(--text-rank-caption);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-secondary);
}
.ios-field-label {
  font-size: var(--text-rank-caption);
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-secondary);
}
.ios-inline-note {
  font-size: var(--text-rank-caption);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-tertiary);
}
.ios-eyebrow {
  font-size: var(--text-rank-micro);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #8c8c91;
}
.ios-stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 1.4rem + 0.7vw, 1.875rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}
.ios-table-head {
  font-size: var(--text-rank-caption);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: none;
  color: #8c8c91;
}

/* ── Semantic text color utilities ── */
.t-primary { color: var(--text-primary) !important; }
.t-secondary { color: var(--text-secondary) !important; }
.t-tertiary { color: var(--text-tertiary) !important; }
.t-caption { color: var(--text-quaternary) !important; }
.t-link { color: var(--text-link) !important; }

/* ── Unified empty state ── */
.ios-empty-state {
  padding: 3rem 1rem;
  text-align: center;
}
.ios-empty-state__text {
  font-size: var(--text-rank-body);
  color: var(--text-quaternary);
}

.app-page-shell {
  width: 100%;
  margin: 0 auto;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
}

@media (min-width: 1024px) {
  .app-page-shell {
    padding: 2.5rem;
  }
}

.app-page-shell--sm {
  max-width: 42.5rem;
}

.app-page-shell--lg {
  max-width: 72rem;
}

.app-page-shell--xl {
  max-width: 80rem;
}

.app-page-header {
  margin-bottom: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
}

.app-page-header--split {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .app-page-header--split {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.app-page-desc {
  margin-top: 0.5rem;
  max-width: 48rem;
  font-size: var(--text-rank-body);
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

body.theme-dark .app-page-desc {
  color: var(--text-secondary);
}

.audit-table-scroll-shell {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* 全局文字收敛：动态拼接页面也统一使用同一套中文排版层级 */
#content-area,
.login-shell,
.account-modal-overlay,
.audit-behavior-menu,
.flatpickr-calendar.flatpickr-calendar--audit {
  font-family: var(--font-ui);
}

#content-area :where(label, .qq-answer-section-title, .wb-qa-label, .wb-stat-label, .growth-field-label, .gp-field__label, .settings-field__label, .db-field-label, .assistant-cc-subtle-label, .qq-answer-action-label, .db-stat-label, .db-employee-reason-label, .db-snapshot-label, .home-lx-metric-card__label) {
  font-size: var(--text-rank-caption);
  line-height: 1.45;
  letter-spacing: 0;
}

#content-area .tracking-\[0\.18em\],
#content-area .tracking-\[0\.2em\],
#content-area .tracking-\[0\.14em\],
#content-area .tracking-\[0\.08em\],
#content-area .tracking-wide,
#content-area .tracking-wider {
  letter-spacing: 0.04em !important;
}

#content-area th.uppercase,
#sidebar .sidebar-group-meta,
#sidebar .sidebar-nav-zone-label {
  text-transform: none;
}

.app-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

.app-page-actions > * {
  flex: 1 1 auto;
}

@media (min-width: 640px) {
  .app-page-actions {
    width: auto;
  }

  .app-page-actions > * {
    flex: 0 0 auto;
  }
}

.app-page-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: 100%;
  padding: 0.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #f8fafc;
}

.app-page-tabs > button,
.assessment-tab-btn,
.gp-tab,
.kb-tab {
  transition:
    transform var(--motion-duration-fast) var(--motion-ease-out),
    background-color var(--motion-duration-fast) ease,
    color var(--motion-duration-fast) ease,
    border-color var(--motion-duration-fast) ease,
    box-shadow var(--motion-duration-fast) ease,
    opacity var(--motion-duration-fast) ease;
}

.app-page-tabs > button:hover,
.assessment-tab-btn:hover,
.gp-tab:hover,
.kb-tab:hover {
  transform: translateY(-1px);
}

.app-page-tabs > button:active,
.assessment-tab-btn:active,
.gp-tab:active,
.kb-tab:active {
  transform: scale(0.985);
}

@media (min-width: 640px) {
  .app-page-tabs {
    width: auto;
  }
}

.app-page-panel {
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 1.75rem;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.05);
}

.module-ability-page {
  --module-ability-card-bg: color-mix(in srgb, var(--surface-primary) 88%, #ffffff 12%);
  --module-ability-card-border: color-mix(in srgb, var(--border-primary) 78%, transparent);
  --module-ability-card-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
  --module-ability-card-hover-shadow: 0 22px 44px rgba(15, 23, 42, 0.09);
  --module-ability-subtle-bg: color-mix(in srgb, var(--surface-secondary) 88%, #ffffff 12%);
  --module-ability-warning-bg: linear-gradient(135deg, rgba(255, 159, 10, 0.12), rgba(255, 214, 102, 0.18));
  --module-ability-track: color-mix(in srgb, var(--surface-secondary) 86%, transparent);
  --module-ability-chip-bg: color-mix(in srgb, var(--text-primary) 94%, #0f172a 6%);
  --module-ability-chip-text: #ffffff;
  --module-ability-accent: #0a84ff;
  --module-ability-accent-soft: rgba(10, 132, 255, 0.1);
  --module-ability-warning-text: #b26a00;
}

.module-ability-filter-label {
  margin-bottom: 0.5rem;
  font-size: var(--text-rank-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.module-ability-page .app-page-panel {
  border-color: var(--module-ability-card-border);
  background: color-mix(in srgb, var(--surface-primary) 94%, transparent);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.05);
}

.module-ability-select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--module-ability-card-border);
  border-radius: 1rem;
  background: var(--surface-primary);
  color: var(--text-primary);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  outline: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
  appearance: none;
}

.module-ability-select:hover {
  border-color: color-mix(in srgb, var(--module-ability-accent) 24%, var(--module-ability-card-border));
  background: color-mix(in srgb, var(--surface-primary) 92%, var(--fill-hover) 8%);
}

.module-ability-select:focus {
  border-color: color-mix(in srgb, var(--module-ability-accent) 65%, var(--module-ability-card-border));
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.14);
}

.module-ability-refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--module-ability-card-border);
  border-radius: 1rem;
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.module-ability-refresh-btn:hover {
  border-color: color-mix(in srgb, var(--module-ability-accent) 20%, var(--module-ability-card-border));
  background: color-mix(in srgb, var(--surface-primary) 90%, var(--fill-hover) 10%);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.module-ability-refresh-btn:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--module-ability-accent) 55%, var(--module-ability-card-border));
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.16);
}

.module-ability-overview-card {
  min-height: 132px;
  padding: 1rem;
  border: 1px solid var(--module-ability-card-border);
  border-radius: 1.375rem;
  background: var(--module-ability-subtle-bg);
}

.module-ability-overview-card .ios-stat-value,
.module-ability-overview-card .ios-card-title {
  color: var(--text-primary);
}

.module-ability-overview-card .ios-inline-note {
  color: var(--text-secondary);
}

.module-ability-overview-card--warning {
  background: var(--module-ability-warning-bg);
  border-color: rgba(255, 159, 10, 0.18);
}

.module-ability-overview-card__eyebrow {
  color: var(--module-ability-warning-text);
}

.module-ability-card {
  padding: 1.25rem;
  border: 1px solid var(--module-ability-card-border);
  border-radius: 1.5rem;
  background: var(--module-ability-card-bg);
  box-shadow: var(--module-ability-card-shadow);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease;
}

.module-ability-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--module-ability-accent) 18%, var(--module-ability-card-border));
  box-shadow: var(--module-ability-card-hover-shadow);
}

.module-ability-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.module-ability-card__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.module-ability-card__score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 2rem;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  background: var(--module-ability-chip-bg);
  color: var(--module-ability-chip-text);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.module-ability-card__metric-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.module-ability-card__metric-track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--module-ability-track);
}

.module-ability-card__metric-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.module-index-filter-panel {
  position: relative;
  overflow: visible;
  z-index: 40;
}

.module-index-filter-panel .ios-select-shell {
  z-index: 1;
}

.module-index-filter-panel .ios-select-shell.is-open {
  z-index: 80;
}

body.theme-dark .module-ability-page {
  --module-ability-card-bg: rgba(28, 28, 30, 0.94);
  --module-ability-card-border: rgba(255, 255, 255, 0.08);
  --module-ability-card-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  --module-ability-card-hover-shadow: 0 22px 44px rgba(0, 0, 0, 0.38);
  --module-ability-subtle-bg: linear-gradient(180deg, rgba(44, 44, 46, 0.96), rgba(36, 36, 38, 0.96));
  --module-ability-warning-bg: linear-gradient(135deg, rgba(255, 159, 10, 0.16), rgba(255, 214, 102, 0.09));
  --module-ability-track: rgba(255, 255, 255, 0.08);
  --module-ability-chip-bg: rgba(245, 245, 247, 0.12);
  --module-ability-chip-text: #f5f5f7;
  --module-ability-warning-text: #ffd166;
}

body.theme-dark .module-ability-page .app-page-panel {
  background: linear-gradient(180deg, rgba(44, 44, 46, 0.94), rgba(36, 36, 38, 0.98));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

body.theme-dark .module-ability-select {
  background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .module-ability-select:hover {
  background: rgba(255, 255, 255, 0.07);
}

body.theme-dark .module-ability-refresh-btn {
  background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .module-ability-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

body.theme-dark .module-ability-overview-card .ios-inline-note,
body.theme-dark .module-ability-card__metric-meta,
body.theme-dark .module-ability-filter-label {
  color: #98989d;
}

/* 考试任务管理：撑满视口、内部滚动 */
.task-list-viewport {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  height: calc(100dvh - 3rem);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .task-list-viewport {
    padding: 2.5rem;
    height: calc(100dvh - 4rem);
  }
}
.task-list-viewport > .app-page-header {
  flex-shrink: 0;
}
.task-list-viewport > .app-page-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.task-list-viewport .task-list-fixed-area {
  flex-shrink: 0;
}
.task-list-viewport .task-list-scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.task-list-stack {
  padding-bottom: 0.75rem;
}

.task-list-summary-card,
.task-list-card,
.task-list-owner-card,
.task-list-stat-card,
.task-list-toolbar-btn,
.task-list-action-btn,
.task-list-filter-btn {
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.task-list-card:hover {
  transform: translateY(-1px);
}

body.theme-dark .task-list-viewport {
  position: relative;
  border-radius: 2rem;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 28%),
    radial-gradient(circle at top left, rgba(20, 184, 166, 0.08), transparent 22%);
}

body.theme-dark .task-list-viewport > .app-page-panel {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(24, 27, 34, 0.96), rgba(15, 17, 23, 0.985));
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.theme-dark .task-list-fixed-area {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0));
}

body.theme-dark .task-list-scroll-area {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
}

body.theme-dark .task-list-filter-btn {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  box-shadow: none;
}

body.theme-dark .task-list-filter-btn[aria-pressed="true"] {
  border-color: rgba(96, 165, 250, 0.36);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
  color: #f8fafc;
  box-shadow:
    0 14px 30px rgba(2, 6, 23, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.theme-dark .task-list-filter-btn:not([aria-pressed="true"]):hover {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.075);
  color: #f8fafc;
}

body.theme-dark .task-list-filter-dot {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.03);
}

body.theme-dark .task-list-toolbar-btn--secondary {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #e5e7eb;
}

body.theme-dark .task-list-toolbar-btn--secondary:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

body.theme-dark .task-list-toolbar-btn--primary {
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  color: #ffffff;
  box-shadow:
    0 18px 34px rgba(29, 78, 216, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.theme-dark .task-list-toolbar-btn--primary:hover {
  background: linear-gradient(135deg, #111827, #2563eb);
  box-shadow:
    0 20px 38px rgba(37, 99, 235, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

body.theme-dark .task-list-loading-state,
body.theme-dark .task-list-scroll-area .ios-empty-state {
  border-color: rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02));
  color: #94a3b8;
}

body.theme-dark .task-list-scroll-area .ios-empty-state__text {
  color: #94a3b8;
}

body.theme-dark .task-list-summary-card,
body.theme-dark .task-list-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(24, 26, 32, 0.94), rgba(18, 20, 26, 0.98));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-dark .task-list-card:hover {
  border-color: rgba(125, 211, 252, 0.16);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.theme-dark .task-list-summary-value,
body.theme-dark .task-list-card-title,
body.theme-dark .task-list-value {
  color: #f8fafc !important;
}

body.theme-dark .task-list-card-desc,
body.theme-dark .task-list-owner-subtext,
body.theme-dark .task-list-timestamps {
  color: #9ca3af !important;
}

body.theme-dark .task-list-summary-card .ios-inline-note,
body.theme-dark .task-list-summary-card .ios-eyebrow,
body.theme-dark .task-list-label {
  color: #6b7280 !important;
}

body.theme-dark .task-list-meta-pill {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1 !important;
}

body.theme-dark .task-list-owner-card,
body.theme-dark .task-list-stat-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
}

body.theme-dark .task-list-footer {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

body.theme-dark .task-list-status-pill {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .task-list-status-pill--published {
  border-color: rgba(16, 185, 129, 0.26);
  background: rgba(16, 185, 129, 0.12);
  color: #6ee7b7 !important;
}

body.theme-dark .task-list-status-pill--draft {
  border-color: rgba(148, 163, 184, 0.2);
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1 !important;
}

body.theme-dark .task-list-status-pill--archived,
body.theme-dark .task-list-status-pill--default {
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(30, 41, 59, 0.22);
  color: #94a3b8 !important;
}

body.theme-dark .task-list-action-btn {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: #e5e7eb;
}

body.theme-dark .task-list-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

body.theme-dark .task-list-action-btn--disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: #6b7280 !important;
}

body.theme-dark .task-list-action-btn--archive {
  border-color: rgba(251, 191, 36, 0.22);
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d !important;
}

body.theme-dark .task-list-action-btn--archive:hover:not(:disabled) {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(245, 158, 11, 0.18);
}

body.theme-dark .task-list-action-btn--retake {
  border-color: rgba(96, 165, 250, 0.24);
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd !important;
}

body.theme-dark .task-list-action-btn--retake:hover:not(:disabled) {
  border-color: rgba(96, 165, 250, 0.36);
  background: rgba(59, 130, 246, 0.18);
}

body.theme-dark .task-list-action-btn--delete {
  border-color: rgba(248, 113, 113, 0.22);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5 !important;
}

body.theme-dark .task-list-action-btn--delete:hover:not(:disabled) {
  border-color: rgba(248, 113, 113, 0.34);
  background: rgba(239, 68, 68, 0.18);
}

/* 考试中心：固定视口、内容自适应、内部滚动 */
.assessment-center-viewport {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  height: calc(100dvh - 3rem);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .assessment-center-viewport {
    padding: 2.5rem;
    height: calc(100dvh - 4rem);
  }
}

.assessment-center-viewport > .app-page-header {
  flex-shrink: 0;
}

.assessment-center-viewport > .app-page-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.assessment-center-panel-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.assessment-center-scroll-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.assessment-center-current,
.assessment-center-history {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.assessment-center-summary {
  flex-shrink: 0;
}

.assessment-center-session,
.assessment-center-paper-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.assessment-center-session__body,
.assessment-center-paper-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.assessment-center-chat-log,
.assessment-center-paper-questions {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.assessment-center-chat-log {
  flex: 1;
  min-height: 16rem;
}

.assessment-center-paper-questions {
  flex: 1;
  padding-right: 0.25rem;
}

.assessment-center-paper-footer {
  flex-shrink: 0;
}

/* 人员管理 & 门店管理：撑满视口、内部滚动 */
.personnel-list-viewport,
.store-list-viewport {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  height: calc(100dvh - 3rem);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .personnel-list-viewport,
  .store-list-viewport {
    padding: 2.5rem;
    height: calc(100dvh - 4rem);
  }
}
.personnel-list-viewport > .app-page-header,
.store-list-viewport > .app-page-header {
  flex-shrink: 0;
}
.personnel-list-viewport > *,
.store-list-viewport > * {
  margin-bottom: 1rem;
}
.personnel-list-viewport > :last-child,
.store-list-viewport > :last-child {
  margin-bottom: 0;
}

/* Capsule-style select filters (门店 / 角色下拉框) */
select.capsule-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 9999px;
  padding: 0.5rem 2rem 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  cursor: pointer;
  outline: none;
  transition: background-color 0.15s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
select.capsule-select:hover {
  background-color: #e5e7eb;
}
select.capsule-select:focus {
  box-shadow: 0 0 0 2px rgba(59,130,246,0.3);
}

.personnel-toolbar-row {
  row-gap: 0.625rem;
}

.personnel-toolbar-pill,
.personnel-filter-pill {
  width: 144px;
  min-width: 144px;
  height: 40px;
  min-height: 40px;
  padding: 0 2.25rem 0 1.25rem;
  border: 1px solid transparent;
  box-sizing: border-box;
  line-height: 1.25rem;
  flex: 0 0 auto;
}

.personnel-toolbar-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-right: 1.25rem;
}

.personnel-filter-pill:hover {
  background-color: #e5e7eb;
}

.personnel-filter-pill:focus {
  border-color: rgba(59, 130, 246, 0.18);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.18);
}

@media (min-width: 768px) {
  .personnel-toolbar-row {
    flex-wrap: nowrap;
  }
}

/**
  * 统一使用 iOS 风格字栈，Windows 上仍回退 Segoe UI / 微软雅黑保证观感稳定。
 */
.ios-ui {
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ios-ui .ios-list-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.ios-ui .ios-list-body {
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  color: var(--text-primary);
}

.ios-ui .ios-list-secondary {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #515154;
}

.ios-ui .ios-list-tertiary {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #86868b;
}

/* ===================== iOS 风格全局过渡动画 ===================== */

#content-area {
  will-change: transform, opacity;
  transform-origin: top center;
}

/* 页面退出动画：从右侧滑出 + 淡出 */
@keyframes ios-page-exit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(6px, 0, 0) scale(0.998);
  }
}

/* 页面进入动画：从左侧滑入 + 淡入（iOS 标准 push 风格） */
@keyframes ios-page-enter {
  from {
    opacity: 0;
    transform: translate3d(-6px, 0, 0) scale(0.998);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* 主内容区路由切换：iOS 风进入动画 */
#content-area.ios-page-enter {
  animation: ios-page-enter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

/* 页面退出状态 */
#content-area.ios-page-exit {
  animation: ios-page-exit 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes ui-panel-swap-exit {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.992);
  }
}

@keyframes ui-panel-swap-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.ui-panel-swap-exit {
  animation: ui-panel-swap-exit 0.14s var(--motion-ease-in) both;
}

.ui-panel-swap-enter {
  animation: ui-panel-swap-enter 0.26s var(--motion-ease-out) both;
}

#profile-popover,
.settings-pwd-panel,
#dashboard-period-detail-panel,
#kb-panel-documents,
#kb-panel-hittest,
#kb-drop-zone {
  transform-origin: top center;
  will-change: height, opacity, transform;
}

/* ===================== iOS 风格弹窗/模态框动画 ===================== */

/* 遮罩层淡入 */
@keyframes ios-overlay-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 遮罩层淡出 */
@keyframes ios-overlay-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 弹窗从底部滑入（iOS Sheet 风格） */
@keyframes ios-sheet-enter {
  from {
    opacity: 0;
    transform: translateY(100%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 弹窗向底部滑出 */
@keyframes ios-sheet-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
}

/* 居中弹窗内容：缩放 + 淡入 */
@keyframes ios-modal-content-enter {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 居中弹窗内容：缩小 + 淡出 */
@keyframes ios-modal-content-exit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
}

/* ============================================
   统一 iOS Sheet 弹窗系统（全站通用）
   结构: .ios-sheet-overlay > .ios-sheet-card
   ============================================ */

/* 遮罩层 */
.ios-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ios-overlay-enter 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.ios-sheet-overlay.closing {
  animation: ios-overlay-exit 0.22s cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

/* 居中模式（可选，通过 data-align="center" 切换） */
.ios-sheet-overlay[data-align="center"] {
  align-items: center;
}

/* 弹窗内容卡片 */
.ios-sheet-card {
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  background: #ffffff;
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.12), 0 4px 40px rgba(0, 0, 0, 0.08);
  animation: ios-sheet-enter 0.32s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 居中模式下的卡片圆角 */
.ios-sheet-overlay[data-align="center"] .ios-sheet-card {
  border-radius: 20px;
  max-height: 85vh;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18), 0 2px 12px rgba(0, 0, 0, 0.08);
  animation: ios-modal-content-enter 0.28s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.ios-sheet-overlay.closing .ios-sheet-card {
  animation: ios-sheet-exit 0.22s cubic-bezier(0.4, 0, 1, 1) both;
}

.ios-sheet-overlay[data-align="center"].closing .ios-sheet-card {
  animation: ios-modal-content-exit 0.18s cubic-bezier(0.4, 0, 1, 1) both;
}

/* 隐藏状态：确保 .hidden 类能正确隐藏模态框 */
.ios-sheet-overlay.hidden {
  display: none !important;
}

/* 门店管理动态模态框的隐藏状态 */
#store-form-modal.hidden,
#store-delete-modal.hidden,
#store-detail-modal.hidden {
  display: none !important;
}

.store-modal-card {
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.store-modal-field-label {
  min-width: 4.75rem;
  color: #515154;
  letter-spacing: 0.01em;
}

.store-modal-input,
.store-modal-id-display {
  color: var(--text-primary);
}

.store-modal-input::placeholder {
  color: #a1a1a6;
}

.store-modal-divider {
  background: #d1d1d6;
}

.store-form-dialog {
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.store-form-title {
  color: var(--text-primary);
}

.store-form-field-label {
  color: #515154;
  letter-spacing: 0.01em;
}

.store-form-helper {
  color: #8e8e93;
}

.store-form-input {
  color: var(--text-primary);
}

.store-form-input::placeholder {
  color: #a1a1a6;
}

.store-form-input--readonly {
  color: #6e6e73;
}

body.theme-dark #modal-stores .ios-sheet-card,
body.theme-dark .store-form-dialog {
  background: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
}

body.theme-dark #modal-stores header {
  background: #1c1c1e !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark #modal-stores #stores-list-body + #store-form-error,
body.theme-dark #modal-stores .min-h-0.flex-1.overflow-y-auto {
  background: #111216 !important;
}

body.theme-dark .store-modal-card {
  background: rgba(44, 44, 46, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

body.theme-dark .store-modal-field-label,
body.theme-dark .store-form-field-label {
  color: #d1d1d6 !important;
}

body.theme-dark .store-modal-input,
body.theme-dark .store-modal-id-display,
body.theme-dark .store-form-title {
  color: #f5f5f7 !important;
}

body.theme-dark .store-modal-input::placeholder,
body.theme-dark .store-form-input::placeholder {
  color: #636366 !important;
}

body.theme-dark .store-modal-divider {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .store-form-helper {
  color: #98989d !important;
}

body.theme-dark .store-form-input {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

body.theme-dark .store-form-input:focus {
  border-color: rgba(10, 132, 255, 0.4);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}

body.theme-dark .store-form-input--readonly {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #c7c7cc !important;
  border-color: rgba(255, 255, 255, 0.06);
}

body.theme-dark .store-form-close {
  color: #98989d !important;
}

body.theme-dark .store-form-close:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
}

body.theme-dark #store-detail-title,
body.theme-dark #store-detail-content .text-gray-500 {
  color: #98989d !important;
}

body.theme-dark #store-detail-content .text-gray-800,
body.theme-dark #store-detail-content .font-medium {
  color: #f5f5f7 !important;
}

.store-mgm-page {
  width: 100%;
}

.store-mgm-search {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.store-mgm-head-row th {
  letter-spacing: 0.01em;
}

.store-mgm-row {
  transition: background-color 0.18s ease;
}

.store-mgm-action-btn {
  border: 1px solid transparent;
}

body.theme-dark .store-mgm-page {
  color: #f5f5f7;
}

body.theme-dark .store-mgm-hero-card,
body.theme-dark .store-mgm-table-card {
  background: rgba(28, 28, 30, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.26);
}

body.theme-dark .store-mgm-table-wrap {
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

body.theme-dark .store-mgm-head-row {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .store-mgm-head-row th {
  color: #98989d !important;
}

body.theme-dark .store-mgm-row {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

body.theme-dark .store-mgm-row:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

body.theme-dark .store-mgm-search {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f5f5f7 !important;
}

body.theme-dark .store-mgm-search::placeholder {
  color: #8e8e93 !important;
}

body.theme-dark .store-mgm-search:focus {
  border-color: rgba(10, 132, 255, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}

body.theme-dark .store-mgm-search-icon {
  color: #8e8e93 !important;
}

body.theme-dark .store-mgm-action-btn--neutral {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #d1d1d6 !important;
}

body.theme-dark .store-mgm-action-btn--neutral:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f5f5f7 !important;
}

body.theme-dark .store-mgm-action-btn--accent {
  background: rgba(10, 132, 255, 0.14) !important;
  color: #8fd1ff !important;
}

body.theme-dark .store-mgm-action-btn--accent:hover {
  background: rgba(10, 132, 255, 0.22) !important;
  color: #dbeafe !important;
}

body.theme-dark .store-mgm-action-btn--danger {
  background: rgba(255, 69, 58, 0.14) !important;
  color: #ffb4ad !important;
}

body.theme-dark .store-mgm-action-btn--danger:hover {
  background: rgba(255, 69, 58, 0.22) !important;
  color: #ffd2ce !important;
}

body.theme-dark .store-mgm-action-btn--disabled {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #636366 !important;
  border-color: rgba(255, 255, 255, 0.04);
}

/* ============================================
   旧版兼容：account-modal-overlay
   ============================================ */
.account-modal-overlay {
  animation: ios-overlay-enter 0.22s ease both;
}
.account-modal-overlay.hidden {
  animation: ios-sheet-exit 0.2s ease both;
}

/* ============================================
   下拉 / Picker iOS 风格动画
   ============================================ */
.ios-dropdown-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: ios-overlay-enter 0.15s ease both;
}

.ios-dropdown-overlay.closing {
  animation: ios-overlay-exit 0.12s ease both;
  pointer-events: none;
}

/* 下拉面板：从顶部滑入 */
.ios-dropdown-panel {
  position: fixed;
  z-index: 91;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  animation: ios-dropdown-enter 0.22s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  transform-origin: top center;
}

@keyframes ios-dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.ios-dropdown-panel.closing {
  animation: ios-dropdown-exit 0.16s cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

@keyframes ios-dropdown-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
  }
}

/* ============================================
   全局 select 增强：对齐风险看板门店下拉
   ============================================ */
.ios-select-shell {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.ios-select-native {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.ios-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-primary);
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.ios-select-shell:hover .ios-select-trigger {
  background: rgba(0, 0, 0, 0.05);
}

.ios-select-trigger:focus-visible {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18), 0 2px 8px rgba(0, 122, 255, 0.06);
}

.ios-select-shell.is-open .ios-select-trigger {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18), 0 2px 8px rgba(0, 122, 255, 0.06);
}

.ios-select-shell.is-disabled .ios-select-trigger,
.ios-select-trigger:disabled {
  opacity: 0.58;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

.ios-select-trigger__label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
}

.ios-select-trigger__label.is-placeholder {
  color: #86868b;
}

.ios-select-trigger__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ios-select-trigger__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: #8e8e93;
  transition: transform 0.2s ease, color 0.2s ease;
}

.ios-select-shell.is-open .ios-select-trigger__arrow {
  transform: rotate(180deg);
}

.ios-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 260;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.06);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px) scaleY(0.96);
  transform-origin: top center;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.18s;
}

.ios-select-shell.is-open .ios-select-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}

.ios-select-menu--up {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom center;
}

.ios-select-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease, color 0.1s ease;
}

.ios-select-option:hover,
.ios-select-option:focus-visible {
  background: rgba(0, 122, 255, 0.06);
  outline: none;
}

.ios-select-option:active {
  transform: none;
}

.ios-select-option.is-selected {
  color: #007AFF;
  font-weight: 600;
  background: rgba(0, 122, 255, 0.06);
}

.ios-select-option.is-disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.ios-select-option__text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: inherit;
  line-height: 1.4;
}

.ios-select-option__text.is-placeholder {
  color: #86868b;
}

.ios-select-option__check {
  display: none;
}

select.knowledge-theory-filter-select {
  width: 100%;
  min-height: 46px;
  padding: 0.75rem 1rem;
  border: 1px solid #e5e5ea;
  border-radius: 14px;
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: none;
  outline: none;
  appearance: none;
}

.ios-select-shell--knowledge-theory-filter {
  flex: 0 0 220px;
  width: 220px;
  min-width: 190px;
}

body.theme-dark .ios-select-trigger {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
}

body.theme-dark .ios-select-menu {
  background: #2c2c2e;
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .ios-select-shell:hover .ios-select-trigger {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .ios-select-trigger:focus-visible,
body.theme-dark .ios-select-shell.is-open .ios-select-trigger {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25);
}

body.theme-dark .ios-select-trigger__label.is-placeholder,
body.theme-dark .ios-select-trigger__arrow,
body.theme-dark .ios-select-option__text.is-placeholder {
  color: #98989d;
}

body.theme-dark .ios-select-option {
  color: #f5f5f7;
}

body.theme-dark .ios-select-option:hover,
body.theme-dark .ios-select-option:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .ios-select-option.is-selected {
  color: #64D2FF;
  background: rgba(100, 210, 255, 0.08);
}

body.theme-dark select.knowledge-theory-filter-select {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
}

@media (max-width: 768px) {
  .ios-select-trigger {
    min-height: 44px;
    padding: 0.7rem 0.875rem;
  }

  .ios-select-trigger__label,
  .ios-select-option__text {
    font-size: 0.875rem;
  }

  .ios-select-shell--knowledge-theory-filter {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ios-select-trigger,
  .ios-select-trigger__arrow,
  .ios-select-menu,
  .ios-select-option,
  .app-page-tabs > button,
  .assessment-tab-btn,
  .gp-tab,
  .kb-tab,
  .practice-capsule-menu {
    transition: none !important;
  }
}

/* ===================== iOS 风格按钮交互 ===================== */

/* 按钮点击效果 */
.ios-btn {
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}
.ios-btn:active {
  transform: scale(0.965);
}

/* 侧边栏菜单项 iOS 风格 */
.sidebar-nav-item {
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.sidebar-nav-item:active {
  transform: scale(0.98);
}

/* ===================== iOS 风格列表/卡片动画 ===================== */

/* 列表项依次出现（延迟叠加） */
@keyframes ios-list-item {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ios-list-animate > * {
  animation: ios-list-item 0.25s ease both;
}
.ios-list-animate > *:nth-child(1) { animation-delay: 0ms; }
.ios-list-animate > *:nth-child(2) { animation-delay: 30ms; }
.ios-list-animate > *:nth-child(3) { animation-delay: 60ms; }
.ios-list-animate > *:nth-child(4) { animation-delay: 90ms; }
.ios-list-animate > *:nth-child(5) { animation-delay: 120ms; }
.ios-list-animate > *:nth-child(6) { animation-delay: 150ms; }
.ios-list-animate > *:nth-child(n+7) { animation-delay: 180ms; }

/* ===================== iOS 风格开关切换 ===================== */

/* iOS Switch 动画 */
.ios-switch {
  transition: background-color 0.2s ease;
}
.ios-switch-thumb {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  #content-area.ios-page-enter,
  #content-area.ios-page-exit,
  .ios-list-animate > *,
  .ui-panel-swap-enter,
  .ui-panel-swap-exit {
    animation: none;
  }
  .ios-btn:active,
  .sidebar-nav-item:active,
  .app-page-tabs > button:hover,
  .assessment-tab-btn:hover,
  .gp-tab:hover,
  .kb-tab:hover {
    transform: none;
  }
}

/* 首页「系统核心业务」大卡片：跳转前轻微按压感，与主区进入动画衔接 */
.home-core-module-card {
  transition:
    transform 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 0.32s cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 0.2s ease;
}

.home-core-module-card:hover {
  transform: translateY(-2px);
}

.home-core-module-card:active {
  transform: scale(0.985);
  transition-duration: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .home-core-module-card:hover {
    transform: none;
  }
  .home-core-module-card:active {
    transform: none;
  }
}

/* ===================== 首页工作台 · iOS 风格重设计 ===================== */

/* Page container */
.wb-page-ios {
  position: relative;
  animation: home-ios-enter 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

@keyframes home-ios-enter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===================== Hero 区域 ===================== */
.wb-hero {
  padding-top: 44px;
  padding-bottom: 18px;
}

.wb-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.wb-hero-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.wb-hero-eyebrow {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #8E8E93;
  margin: 0;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

.wb-hero-title {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.wb-hero-subtitle {
  margin: 10px 0 0;
  max-width: 620px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #6b7280;
}

.wb-home-focus {
  margin-bottom: 20px;
}

.wb-focus-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px;
  border-radius: 26px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 250, 251, 0.98) 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045);
}

.wb-focus-card--loading {
  min-height: 158px;
}

.wb-focus-card__content {
  min-width: 0;
  flex: 1;
}

.wb-focus-card__eyebrow {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(255, 255, 255, 0.72);
  padding: 6px 11px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #94a3b8;
}

.wb-focus-card__title {
  margin: 14px 0 0;
  font-size: 27px;
  line-height: 1.16;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #0f172a;
}

.wb-focus-card__desc {
  margin: 12px 0 0;
  max-width: 680px;
  font-size: 14px;
  line-height: 1.75;
  color: #64748b;
}

.wb-focus-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.wb-focus-card__chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.12);
  padding: 7px 11px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

.wb-focus-card__actions {
  flex-shrink: 0;
}

.wb-focus-card__btn {
  min-width: 132px;
  border: none;
  border-radius: 16px;
  background: #0f172a;
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wb-focus-card__btn:hover {
  transform: translateY(-1px);
  background: #111827;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
}

.wb-home-section {
  margin-top: 26px;
}

.wb-home-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.wb-home-section__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #94a3b8;
  text-transform: uppercase;
}

.wb-home-section__title {
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #0f172a;
}

/* ===================== 快捷入口 ===================== */
.wb-quick-actions {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.wb-quick-actions::-webkit-scrollbar { display: none; }

.wb-qa-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 72px;
  padding: 14px 8px 10px;
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.wb-qa-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.wb-qa-item:active {
  transform: scale(0.96);
}

.wb-qa-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wb-qa-icon--blue   { background: rgba(0, 122, 255, 0.12); color: #007AFF; }
.wb-qa-icon--green  { background: rgba(52, 199, 89, 0.12); color: #34C759; }
.wb-qa-icon--orange { background: rgba(255, 149, 0, 0.12); color: #FF9500; }
.wb-qa-icon--purple { background: rgba(175, 82, 222, 0.12); color: #AF52DE; }
.wb-qa-icon--indigo { background: rgba(88, 86, 214, 0.12); color: #5856D6; }
.wb-qa-icon--cyan   { background: rgba(90, 200, 250, 0.12); color: #5AC8FA; }

.wb-qa-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  line-height: 1.2;
}

/* ===================== 指标 Widget ===================== */
.wb-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 768px) {
  .wb-stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wb-stat-widget {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 15px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

.wb-stat-widget:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.wb-stat-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wb-stat-icon--blue   { background: rgba(0, 122, 255, 0.10); color: #007AFF; }
.wb-stat-icon--green  { background: rgba(52, 199, 89, 0.10); color: #34C759; }
.wb-stat-icon--orange { background: rgba(255, 149, 0, 0.10); color: #FF9500; }
.wb-stat-icon--indigo { background: rgba(88, 86, 214, 0.10); color: #5856D6; }
.wb-stat-icon--purple { background: rgba(175, 82, 222, 0.10); color: #AF52DE; }
.wb-stat-icon--cyan   { background: rgba(90, 200, 250, 0.10); color: #5AC8FA; }

.wb-stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wb-stat-num {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
}

/* 数字更新时淡入效果 */
.wb-stat-num--updating {
  animation: wb-val-flip 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
  color: #8E8E93;
}

@keyframes wb-val-flip {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

.wb-stat-label {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #8E8E93;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ===================== 门店选择器 ===================== */
.wb-store-picker {
  position: relative;
  display: inline-block;
  min-width: 160px;
}

.comp-store-picker {
  width: clamp(180px, 24vw, 240px);
  min-width: 0;
}

.wb-store-picker__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 34px 8px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  background: #ffffff;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  text-align: left;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wb-store-picker__btn > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-store-picker__btn:hover {
  border-color: #C7C7CC;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

.wb-store-picker__btn:focus-visible {
  border-color: #007AFF;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
}

.wb-store-picker__arrow {
  width: 14px;
  height: 14px;
  color: #8E8E93;
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.wb-store-picker.is-open .wb-store-picker__arrow {
  transform: rotate(180deg);
}

/* 下拉列表 */
.wb-store-picker__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  z-index: 200;
  opacity: 0;
  transform: translateY(-6px) scaleY(0.96);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.wb-store-picker.is-open .wb-store-picker__list {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}

/* 下拉项 */
.wb-store-picker__item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-store-picker__item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.wb-store-picker__item.is-selected {
  background: rgba(0, 122, 255, 0.08);
  color: #0b57d0;
  font-weight: 600;
}

.wb-store-picker__btn--static,
.wb-store-picker__btn:disabled {
  cursor: default;
  box-shadow: none;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.78);
}

.wb-store-picker__btn--static:hover,
.wb-store-picker__btn:disabled:hover {
  border-color: #E5E5EA;
  box-shadow: none;
}

.wb-store-picker.is-static .wb-store-picker__arrow {
  display: none;
}

.wb-store-picker__item:first-child {
  border-radius: 11px 11px 0 0;
}

.wb-store-picker__item:last-child {
  border-radius: 0 0 11px 11px;
}

.wb-store-picker__list::-webkit-scrollbar {
  width: 8px;
}

.wb-store-picker__list::-webkit-scrollbar-thumb {
  background: rgba(142, 142, 147, 0.45);
  border-radius: 999px;
}

.wb-store-picker__list::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 640px) {
  .comp-store-picker {
    width: 100%;
  }
}

/* ===================== 双列图表卡片组 ===================== */
.wb-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wb-chart-card--styled {
  background: rgba(255, 255, 255, 0.84);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.82);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wb-chart-card--styled:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.055);
}

.wb-chart-card h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.wb-chart-card__meta {
  margin: -2px 0 14px;
  font-size: 12px;
  line-height: 1.55;
  color: #8E8E93;
}

/* Ability donut chart */
.wb-ability-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.wb-ability-svg-wrap {
  flex-shrink: 0;
}

.wb-ability-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wb-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wb-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.wb-legend-text {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
}

.wb-legend-val {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #8E8E93;
}

/* Weekly trend bar chart */
.wb-trend-svg-wrap {
  width: 100%;
  min-height: 176px;
}

.wb-trend-svg-wrap svg {
  display: block;
  overflow: visible;
}

.wb-trend-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 176px;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  color: #C7C7CC;
}

.wb-home-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.wb-home-mini-card {
  height: 100%;
  border-radius: 22px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
}

.wb-home-mini-card--accent {
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
}

.wb-home-mini-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.wb-home-mini-card__eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.wb-home-mini-card__title {
  margin: 8px 0 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.wb-home-mini-card__desc {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: #64748b;
}

.wb-home-mini-card__btn {
  flex-shrink: 0;
  border: none;
  border-radius: 14px;
  background: #0f172a;
  padding: 10px 13px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.wb-home-mini-card__btn:hover {
  transform: translateY(-1px);
  background: #111827;
}

.wb-home-mini-card__btn--light {
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.12);
}

.wb-home-mini-card__btn--light:hover {
  background: #fff;
}

.wb-home-progress {
  width: 100%;
  height: 8px;
  margin-top: 14px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
}

.wb-home-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
}

@media (max-width: 1024px) {
  .wb-focus-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .wb-focus-card__actions {
    width: 100%;
  }

  .wb-focus-card__btn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .wb-hero {
    padding-top: 34px;
    padding-bottom: 16px;
  }

  .wb-hero-top {
    flex-direction: column;
  }

  .wb-hero-title {
    font-size: 24px;
  }

  .wb-focus-card {
    padding: 20px;
    border-radius: 22px;
  }

  .wb-focus-card__title {
    font-size: 23px;
  }

  .wb-home-section__title {
    font-size: 18px;
  }

  .wb-home-mini-grid,
  .wb-charts {
    grid-template-columns: 1fr;
  }
}

/* ===================== 暗黑模式 ===================== */
body.theme-dark .wb-hero-title {
  color: #F5F5F7;
}

body.theme-dark .wb-hero-eyebrow {
  color: #98989D;
}

body.theme-dark .wb-hero-subtitle {
  color: #a1a1aa;
}

body.theme-dark .wb-focus-card {
  border-color: #3a3a3c;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(44, 44, 46, 0.96) 0%, rgba(28, 28, 30, 0.96) 100%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

body.theme-dark .wb-focus-card__eyebrow {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
}

body.theme-dark .wb-focus-card__title,
body.theme-dark .wb-home-section__title,
body.theme-dark .wb-home-mini-card__title {
  color: #f8fafc;
}

body.theme-dark .wb-focus-card__desc,
body.theme-dark .wb-home-mini-card__desc {
  color: #cbd5e1;
}

body.theme-dark .wb-focus-card__chip {
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

body.theme-dark .wb-focus-card__btn {
  background: #f8fafc;
  color: #0f172a;
  box-shadow: none;
}

body.theme-dark .wb-home-section__eyebrow,
body.theme-dark .wb-home-mini-card__eyebrow {
  color: #94a3b8;
}

body.theme-dark .wb-store-picker__btn {
  background: #2C2C2E;
  border-color: #3A3A3C;
  color: #F5F5F7;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

body.theme-dark .wb-store-picker__btn:hover {
  border-color: #5A5A5E;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30);
}

body.theme-dark .wb-store-picker__btn:focus-visible {
  border-color: #0A84FF;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25);
}

body.theme-dark .wb-store-picker__list {
  background: #2C2C2E;
  border-color: #3A3A3C;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

body.theme-dark .wb-store-picker__item {
  color: #F5F5F7;
}

body.theme-dark .wb-store-picker__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .wb-store-picker__item.is-selected {
  background: rgba(90, 200, 250, 0.16);
  color: #7dd3fc;
}

body.theme-dark .wb-store-picker__btn--static,
body.theme-dark .wb-store-picker__btn:disabled {
  background: rgba(44, 44, 46, 0.9);
  color: rgba(245, 245, 247, 0.74);
}

body.theme-dark .wb-qa-item {
  background: rgba(44, 44, 46, 0.75);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

body.theme-dark .wb-qa-item:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

body.theme-dark .wb-qa-label {
  color: #F5F5F7;
}

body.theme-dark .wb-stat-widget {
  background: rgba(44, 44, 46, 0.82);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

body.theme-dark .wb-stat-widget:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

body.theme-dark .wb-stat-num {
  color: #F5F5F7;
}

body.theme-dark .wb-stat-label {
  color: #98989D;
}

body.theme-dark .wb-chart-card--styled {
  background: rgba(44, 44, 46, 0.82);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

body.theme-dark .wb-chart-card--styled:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

body.theme-dark .wb-chart-card {
  background: #2C2C2E;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

body.theme-dark .wb-chart-card:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

body.theme-dark .wb-chart-card h3 {
  color: #98989D;
}

body.theme-dark .wb-chart-card__meta {
  color: #a1a1aa;
}

body.theme-dark .wb-legend-text {
  color: #F5F5F7;
}

body.theme-dark .wb-legend-val {
  color: #636366;
}

body.theme-dark .wb-home-mini-card {
  border-color: #3a3a3c;
  background: rgba(44, 44, 46, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.24);
}

body.theme-dark .wb-home-mini-card--accent {
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(44, 44, 46, 0.95) 0%, rgba(28, 28, 30, 0.96) 100%);
}

body.theme-dark .wb-home-mini-card__btn {
  background: #f8fafc;
  color: #0f172a;
}

body.theme-dark .wb-home-mini-card__btn--light {
  background: rgba(255, 255, 255, 0.12);
  color: #f8fafc;
}

body.theme-dark .wb-home-progress {
  background: rgba(148, 163, 184, 0.16);
}


/* ===================== 减少动画 ===================== */
@media (prefers-reduced-motion: reduce) {
  .wb-stat-widget,
  .wb-qa-item,
  .wb-chart-card {
    transition: none;
  }
  .wb-stat-widget:hover,
  .wb-qa-item:hover,
  .wb-chart-card:hover {
    transform: none;
  }
  .wb-page-ios {
    animation: none;
  }
}

body {
  background:
    radial-gradient(circle at 15% 5%, rgba(0, 113, 227, 0.08), transparent 38%),
    linear-gradient(180deg, #f6f8fc 0%, #f2f4f8 100%);
  overflow: hidden;
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
}

.sidebar-glass {
    background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.input-field {
  background: rgba(142,142,147,0.08);
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--text-primary);
  outline: none;
  width: 100%;
  transition: box-shadow 0.2s ease;
}
.input-field:focus {
  box-shadow: 0 0 0 3px rgba(0,122,255,0.2);
  background: rgba(142,142,147,0.12);
}
.input-field::placeholder { color: #8e8e93; }

.btn-primary {
  background: linear-gradient(135deg, #007AFF, #0055D4);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.5px;
  transition: transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,122,255,0.35); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

.sidebar-collapse-btn {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border: none;
  border-radius: 0.5rem;
  background: #2c2c2e;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.sidebar-collapse-btn:hover {
  background: #3a3a3c;
}
.sidebar-collapse-btn:active {
  background: #252527;
}
.sidebar-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 3px;
  width: 1.125rem;
  height: 0.75rem;
}
.sidebar-hamburger-bar {
  display: block;
  height: 2px;
  border-radius: 9999px;
  background: #ffffff;
}

/* Sidebar Accordion */
.sidebar-accordion-toggle {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}
.sidebar-header-minimal {
  margin-bottom: 16px;
}
.sidebar-accordion-toggle:hover .sidebar-accordion-toggle-track {
  background: rgba(0, 0, 0, 0.02);
}
.sidebar-accordion-group.sidebar-group-active .sidebar-accordion-toggle:hover .sidebar-accordion-toggle-track {
  background: rgba(0, 0, 0, 0.04);
}
.sidebar-accordion-leading {
  min-width: 0;
}
.sidebar-accordion-emoji {
  line-height: 1;
}
.sidebar-accordion-chevron {
  color: #8e8e93;
  transform-origin: center;
  transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.sidebar-accordion-group.expanded .sidebar-accordion-chevron {
  transform: rotate(180deg);
}
.sidebar-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
.sidebar-accordion-group.expanded .sidebar-accordion-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
.sidebar-accordion-panel-inner {
  overflow: hidden;
}
.sidebar-group-first {
  margin-top: 0;
}
.sidebar-group-spaced {
  margin-top: 14px;
}
.sidebar-group-bottom {
  margin-top: 14px;
}
.sidebar-group-title {
  letter-spacing: -0.01em;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
}
.sidebar-group-heading {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}
.sidebar-group-meta {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #99a1af;
}
.sidebar-group-count {
  display: inline-flex;
  min-width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.sidebar-group-children {
  padding-left: 0;
}
.sidebar-subnav-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  padding-left: 0;
}

.sidebar-nav-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-nav-zone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-nav-zone-label {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.sidebar-nav-zone-divider {
  margin: 6px 4px 2px;
  height: 1px;
  background: linear-gradient(90deg, rgba(203, 213, 225, 0) 0%, rgba(203, 213, 225, 0.75) 20%, rgba(203, 213, 225, 0.75) 80%, rgba(203, 213, 225, 0) 100%);
}

/* 一级分组不再额外挤左边，与 nav 内边距对齐 */
#sidebar-menu .sidebar-accordion-group {
  padding: 6px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

/* 分组父级：无图标、无左侧条，极简选中态 */
.sidebar-accordion-toggle-wrap {
  position: relative;
}
.sidebar-accordion-toggle-track {
  min-width: 0;
  gap: 10px;
  border-radius: 16px;
  padding: 0.78rem 0.82rem;
}

/* 二级项：整行可点区域与背景从左缘铺满，文字相对一级再内缩 */
.sidebar-nav-item.sidebar-group-item {
  position: relative;
  gap: 12px;
  padding: 0.74rem 0.82rem;
  border-radius: 14px;
  align-items: center;
}
.sidebar-accordion-group.sidebar-group-active .sidebar-accordion-toggle-track {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sidebar-accordion-group.sidebar-group-active {
  border-color: rgba(226, 232, 240, 0.88);
  background: rgba(255, 255, 255, 0.42);
}
.sidebar-accordion-group.sidebar-group-active .sidebar-group-title {
  color: #007aff;
  font-weight: 600;
}
.sidebar-accordion-group.sidebar-group-active .sidebar-group-meta {
  color: rgba(0, 122, 255, 0.72);
}
.sidebar-accordion-group.sidebar-group-active .sidebar-group-count {
  background: rgba(0, 122, 255, 0.1);
  color: #007aff;
}

.sidebar-nav-item {
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 16px;
}
.sidebar-nav-item:not(.active),
.sidebar-nav-item:not(.active) .sidebar-item-label {
  color: #86868b;
}
.sidebar-nav-item:hover {
  background: rgba(255, 255, 255, 0.52);
}
.sidebar-nav-item:hover .sidebar-item-label {
  color: var(--text-primary);
}

.sidebar-nav-item.active {
  background: rgba(255, 255, 255, 0.94);
  color: #007aff;
  box-shadow: none;
}
.sidebar-nav-item.active .sidebar-item-label {
  color: #007aff;
  font-weight: 600;
}
.sidebar-item-accent {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  flex-shrink: 0;
  background: #cbd5e1;
  box-shadow: none;
}
.sidebar-nav-item:hover .sidebar-item-accent {
  background: #94a3b8;
}
.sidebar-nav-item.active .sidebar-item-accent {
  background: #007aff;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}
.sidebar-item-content {
  display: flex;
  min-width: 0;
  align-items: center;
}

/* 侧栏子项：弱化文字色，与分组父级标题（sidebar-group-title）区分 */
.sidebar-nav-item.sidebar-nav-item--sub:not(.active),
.sidebar-nav-item.sidebar-nav-item--sub:not(.active) .sidebar-item-label {
  color: #86868b;
}
.sidebar-nav-item.sidebar-nav-item--sub:hover:not(.active),
.sidebar-nav-item.sidebar-nav-item--sub:hover:not(.active) .sidebar-item-label {
  color: #6e6e73;
}

/* 侧栏 ring/shadow 覆盖见 sidebar-nav.css（在 body 末尾加载，晚于 Tailwind） */

/* ========== iOS 工作台 · 系统字体、侧栏毛玻璃、选中胶囊 ========== */
.workbench-ios {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.workbench-ios .workbench-main-ios {
  background:
    linear-gradient(180deg, #f7f7f8 0%, #f3f4f6 100%) !important;
}

#content-area {
  max-width: 1440px !important;
}

body.sidebar-mobile-open {
  overflow: hidden;
}

.sidebar-mobile-trigger {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 60;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 16px;
  background: rgba(28, 28, 30, 0.92);
  color: #f5f5f7;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.24);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
}

.sidebar-mobile-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.2);
  transition: opacity 180ms ease;
}

body.sidebar-mobile-open .sidebar-mobile-overlay {
  opacity: 1;
  pointer-events: auto;
}

#sidebar {
  --sidebar-width: 256px;
  --sidebar-rail-width: 72px;
  --sidebar-shell-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(247, 248, 250, 0.94) 100%);
  --sidebar-shell-border: rgba(226, 232, 240, 0.78);
  --sidebar-shell-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
  --sidebar-surface-soft: rgba(255, 255, 255, 0.72);
  --sidebar-hover: rgba(255, 255, 255, 0.82);
  --sidebar-flyout-bg: rgba(255, 255, 255, 0.98);
  --sidebar-muted: #667085;
  --sidebar-text: #111827;
  --sidebar-divider: rgba(203, 213, 225, 0.9);
  --sidebar-active: #007aff;
  --sidebar-active-bg: rgba(255, 255, 255, 0.96);
  width: var(--sidebar-width) !important;
  transition:
    width 220ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: visible;
  position: relative;
  z-index: 80;
}

#sidebar .sidebar-brand-row {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background: rgba(255, 255, 255, 0.66) !important;
  box-shadow: none !important;
}

#sidebar.sidebar-ios-panel {
  background: var(--sidebar-shell-bg) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-right: 1px solid var(--sidebar-shell-border) !important;
  box-shadow:
    var(--sidebar-shell-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #sidebar.sidebar-ios-panel {
    background: #ffffff !important;
  }
}

#sidebar .sidebar-footer-ios {
  border-top: none !important;
  padding-top: 10px;
}

#sidebar .sidebar-profile-card:hover {
  background: rgba(15, 23, 42, 0.04);
}

.sidebar-menu-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-menu-home,
.sidebar-menu-section-toggle,
.sidebar-menu-link {
  appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-menu-home {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.sidebar-menu-home__icon,
.sidebar-menu-section-toggle__icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a7890;
  background: rgba(148, 163, 184, 0.075);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition:
    background 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.sidebar-menu-home__icon svg,
.sidebar-menu-section-toggle__icon svg,
.sidebar-menu-section-toggle__chevron svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-menu-home__text,
.sidebar-menu-section-toggle__title,
.sidebar-menu-link__label,
.sidebar-menu-section-panel-head {
  letter-spacing: 0.01em;
}

.sidebar-menu-home__text {
  font-size: 15px;
  font-weight: 600;
  color: var(--sidebar-text);
}

.sidebar-menu-home:hover,
.sidebar-menu-section-toggle:hover {
  background: var(--sidebar-hover);
}

.sidebar-menu-home.is-active {
  border-color: rgba(0, 122, 255, 0.12);
  background: var(--sidebar-active-bg);
}

.sidebar-menu-home.is-active .sidebar-menu-home__icon {
  background: rgba(0, 122, 255, 0.1);
  color: var(--sidebar-active);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(0, 122, 255, 0.08);
}

.sidebar-menu-home.is-active .sidebar-menu-home__text {
  color: var(--sidebar-active);
}

.sidebar-menu-divider {
  position: relative;
  margin: 6px 4px 0;
  padding-top: 18px;
}

.sidebar-menu-divider::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(203, 213, 225, 0) 0%, var(--sidebar-divider) 18%, var(--sidebar-divider) 82%, rgba(203, 213, 225, 0) 100%);
}

.sidebar-menu-divider__label {
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}

.sidebar-menu-section {
  position: relative;
  padding: 4px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition:
    background 180ms ease,
    border-color 180ms ease;
}

.sidebar-menu-section--active {
  border-color: rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.42);
}

.sidebar-menu-section-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 10px;
  border-radius: 16px;
  transition:
    background 180ms ease,
    color 180ms ease;
}

.sidebar-menu-section--active .sidebar-menu-section-toggle {
  background: var(--sidebar-surface-soft);
}

.sidebar-menu-section--active .sidebar-menu-section-toggle__icon {
  background: rgba(0, 122, 255, 0.1);
  color: var(--sidebar-active);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
    0 8px 18px rgba(0, 122, 255, 0.08);
}

.sidebar-menu-section-toggle__body {
  min-width: 0;
  flex: 1;
}

.sidebar-menu-section-toggle__title {
  display: block;
  min-width: 0;
  color: var(--sidebar-text);
  font-size: 15px;
  font-weight: 600;
}

.sidebar-menu-section--active .sidebar-menu-section-toggle__title {
  color: var(--sidebar-active);
}

.sidebar-menu-section-toggle__chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #9aa4b2;
  transition:
    transform 200ms ease,
    color 180ms ease;
}

.sidebar-menu-section.expanded .sidebar-menu-section-toggle__chevron,
.sidebar-menu-section.sidebar-menu-section--rail-open .sidebar-menu-section-toggle__chevron {
  transform: rotate(180deg);
}

.sidebar-menu-section-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease;
}

.sidebar-menu-section.expanded .sidebar-menu-section-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sidebar-menu-section-panel-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 6px 6px;
}

.sidebar-menu-section-panel-head {
  display: none;
  color: var(--sidebar-text);
  font-size: 13px;
  font-weight: 600;
  padding: 2px 2px 8px;
}

.sidebar-menu-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px 10px 56px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--sidebar-muted);
  transition:
    background 180ms ease,
    color 180ms ease,
    border-color 180ms ease;
}

.sidebar-menu-link__label {
  font-size: 15px;
  font-weight: 500;
  color: inherit;
}

.sidebar-menu-link:hover {
  background: rgba(255, 255, 255, 0.74);
  color: var(--sidebar-text);
}

.sidebar-menu-link.is-active {
  border-color: rgba(0, 122, 255, 0.1);
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active);
}

#sidebar[data-collapsed="true"] {
  width: var(--sidebar-rail-width) !important;
  min-width: var(--sidebar-rail-width) !important;
}

#sidebar[data-collapsed="true"] .sidebar-header-row {
  justify-content: center;
  padding-left: 12px;
  padding-right: 12px;
}

#sidebar[data-collapsed="true"] .sidebar-collapse-hide {
  display: none !important;
}

#sidebar[data-collapsed="true"] #sidebar-menu {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

#sidebar[data-collapsed="true"] .sidebar-footer-row {
  padding-left: 10px;
  padding-right: 10px;
}

#sidebar[data-collapsed="true"] #profile-widget-btn,
#sidebar[data-collapsed="true"] .sidebar-menu-home,
#sidebar[data-collapsed="true"] .sidebar-menu-section-toggle {
  justify-content: center;
  padding-left: 8px;
  padding-right: 8px;
}

#sidebar[data-collapsed="true"] .sidebar-menu-home__text,
#sidebar[data-collapsed="true"] .sidebar-menu-divider,
#sidebar[data-collapsed="true"] .sidebar-menu-section-toggle__body,
#sidebar[data-collapsed="true"] .sidebar-menu-section-toggle__chevron {
  display: none !important;
}

#sidebar[data-collapsed="true"] .sidebar-menu-section {
  padding: 0;
  border-color: transparent;
  background: transparent;
}

#sidebar[data-collapsed="true"] .sidebar-menu-section-panel {
  position: fixed;
  left: 86px;
  top: 0;
  width: 220px;
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-8px);
  grid-template-rows: 1fr;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
  z-index: 90;
}

#sidebar[data-collapsed="true"] .sidebar-menu-section-panel-inner {
  overflow: visible;
  padding: 14px;
  border-radius: 20px;
  background: var(--sidebar-flyout-bg);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

#sidebar[data-collapsed="true"] .sidebar-menu-section-panel-head {
  display: block;
}

#sidebar[data-collapsed="true"] .sidebar-menu-section.sidebar-menu-section--rail-open .sidebar-menu-section-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

#sidebar[data-collapsed="true"] .sidebar-menu-link {
  padding-left: 14px;
}

body.theme-dark #sidebar.sidebar-ios-panel {
  --sidebar-shell-bg: linear-gradient(180deg, rgba(28, 28, 30, 0.94) 0%, rgba(22, 22, 24, 0.96) 100%);
  --sidebar-shell-border: rgba(82, 82, 91, 0.72);
  --sidebar-shell-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
  --sidebar-surface-soft: rgba(255, 255, 255, 0.08);
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-flyout-bg: rgba(28, 28, 30, 0.98);
  --sidebar-muted: #a1a1aa;
  --sidebar-text: #f5f5f7;
  --sidebar-divider: rgba(82, 82, 91, 0.82);
  --sidebar-active-bg: rgba(32, 32, 34, 0.94);
  box-shadow:
    var(--sidebar-shell-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.theme-dark #sidebar.sidebar-ios-panel .sidebar-brand-row {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(28, 28, 30, 0.62) !important;
}

body.theme-dark #sidebar .sidebar-profile-card:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .sidebar-mobile-trigger {
  background: rgba(28, 28, 30, 0.92);
  color: #f5f5f7;
}

body.theme-dark .sidebar-mobile-overlay {
  background: rgba(2, 6, 23, 0.46);
}

body.theme-dark .sidebar-menu-home__icon,
body.theme-dark .sidebar-menu-section-toggle__icon {
  background: rgba(148, 163, 184, 0.09);
  color: #c7d2e2;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

body.theme-dark #sidebar[data-collapsed="true"] .sidebar-menu-section-panel-inner {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1023px) {
  #sidebar-mobile-trigger {
    display: flex !important;
  }

  body.sidebar-mobile-open #sidebar-mobile-trigger {
    opacity: 0;
    pointer-events: none;
  }

  #sidebar {
    width: min(82vw, 320px) !important;
    min-width: 0 !important;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-108%);
    border-radius: 0 28px 28px 0;
    z-index: 50;
    overflow-y: auto;
  }

  #sidebar[data-mobile-open="true"] {
    transform: translateX(0);
  }

  #sidebar[data-collapsed="true"] {
    width: min(82vw, 320px) !important;
    min-width: 0 !important;
  }

  #sidebar .sidebar-header-row {
    padding-top: calc(1rem + env(safe-area-inset-top));
  }

  #sidebar .sidebar-footer-row {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .workbench-ios .workbench-main-ios {
    padding-top: 5.25rem !important;
  }

  #content-area {
    max-width: none !important;
  }
}

@media (min-width: 1024px) {
  #sidebar-mobile-trigger,
  .sidebar-mobile-overlay {
    display: none !important;
  }
}

.mentor-sidebar-group .mentor-acc-chevron {
  display: inline-block;
  transition: transform 180ms ease;
  color: rgb(156 163 175);
}
.mentor-sidebar-group.expanded .mentor-acc-chevron {
  transform: rotate(180deg);
}
.mentor-sidebar-group .mentor-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mentor-sidebar-group.expanded .mentor-acc-panel {
  grid-template-rows: 1fr;
}
.mentor-sidebar-group .mentor-acc-panel-inner {
  min-height: 0;
  overflow: hidden;
}
.mentor-sidebar-group:not(.expanded) .mentor-acc-panel-inner {
  pointer-events: none;
}
.mentor-sidebar-group.expanded .mentor-acc-panel-inner {
  pointer-events: auto;
}
.mentor-sidebar-group-toggle:hover .mentor-acc-chevron {
  color: rgb(107 114 128);
}

.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: #6b7280;
  font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  user-select: none;
}
.menu-item:hover { background: #f3f4f6; color: #374151; }
.menu-item svg { width: 20px; height: 20px; flex-shrink: 0; }

.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

.slide-in { animation: slideIn 0.35s cubic-bezier(.4,0,.2,1); }
@keyframes slideIn { from { opacity:0; transform:translateX(-20px); } to { opacity:1; transform:translateX(0); } }

/* ── Dropdown listbox open / close animation ── */
.dropdown-panel {
  transform-origin: top center;
  transition: opacity 0.18s cubic-bezier(.4,0,.2,1),
              transform 0.18s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0.18s;
}
.dropdown-panel.is-open {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  visibility: visible;
  transition: opacity 0.15s cubic-bezier(.4,0,.2,1),
              transform 0.15s cubic-bezier(.4,0,.2,1),
              visibility 0s linear 0s;
}
.dropdown-panel.is-closed {
  opacity: 0;
  transform: translateY(-4px) scaleY(0.96);
  visibility: hidden;
}
.dropdown-panel[data-state="hidden"] {
  display: none;
}

.table-row { transition: background 0.15s; }
.table-row:hover { background: rgba(0,122,255,0.04); }

.role-badge {
  display: inline-block; padding: 3px 10px;
  border-radius: 20px; font-size: 12px; font-weight: 600;
}
.role-admin   { background: rgba(255,59,48,0.1);  color: #FF3B30; }
.role-leader  { background: rgba(255,149,0,0.1);  color: #FF9500; }
.role-store_manager { background: rgba(255,149,0,0.1);  color: #FF9500; }
.role-senior  { background: rgba(52,199,89,0.1);  color: #34C759; }
.role-senior_consultant { background: rgba(52,199,89,0.1);  color: #34C759; }
.role-newbie  { background: rgba(0,122,255,0.1);  color: #007AFF; }
.role-trainee { background: rgba(0,122,255,0.1);  color: #007AFF; }

.toast {
  position: fixed; top: 24px; right: 24px;
  padding: 14px 24px; border-radius: 16px; font-size: 14px; font-weight: 500;
  z-index: 9999; opacity: 0; transform: translateX(calc(100% + 40px));
  transition: all 0.45s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  max-width: 380px;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.success {
  background: rgba(220,252,231,0.82); color: #15803d;
  border: 1px solid rgba(187,247,208,0.5);
}
.toast.error {
  background: rgba(254,226,226,0.82); color: #b91c1c;
  border: 1px solid rgba(254,202,202,0.5);
}
/* AIGC END */

/* AIGC START · Chat 气泡样式 & 打字动画 */
.chat-bubble {
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-bubble-user {
  background: #007AFF;
  color: #fff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.chat-bubble-ai {
  background: var(--ai-bubble-bg);
  color: var(--ai-bubble-text);
  border-bottom-left-radius: 4px;
  box-shadow: var(--ai-bubble-shadow);
}
.chat-bubble-ai.exam-paper-bubble {
  max-width: 92%;
  font-size: 14px;
  line-height: 1.8;
  letter-spacing: 0.02em;
}
.chat-bubble-ai.exam-paper-bubble .assistant-md h4 {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 6px;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.chat-bubble-ai.exam-paper-bubble .assistant-md h4:first-child { margin-top: 0; }
.exam-paper-html .exam-interactive { pointer-events: auto; position: relative; z-index: 2; }
.exam-paper-html .exam-interactive label { cursor: pointer; }
.exam-interactive .exam-radio { accent-color: #10b981; width: 1rem; height: 1rem; pointer-events: auto; }
.exam-interactive .exam-checkbox { accent-color: #10b981; width: 1rem; height: 1rem; pointer-events: auto; }
.exam-interactive .exam-q-mcq label:has(input.exam-radio:checked),
.exam-interactive .exam-q-mcq-multi label:has(input.exam-checkbox:checked) {
  border-color: rgb(16 185 129 / 0.55);
  background: rgb(236 253 245 / 0.85);
}
.exam-interactive .exam-submit-btn:not(:disabled) { cursor: pointer; opacity: 1; }

.exam-fab-surface {
  view-transition-name: exam-fab;
  isolation: isolate;
}

::view-transition-group(exam-fab) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 9999px;
  background-color: #ffffff;
}

::view-transition-old(exam-fab),
::view-transition-new(exam-fab) {
  animation-duration: inherit;
  animation-timing-function: inherit;
  border-radius: 9999px;
  background-color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .exam-fab-surface {
    view-transition-name: none;
  }
  ::view-transition-group(exam-fab),
  ::view-transition-old(exam-fab),
  ::view-transition-new(exam-fab) {
    animation-duration: 0.01ms !important;
  }
}

.typing-dot { width:7px; height:7px; border-radius:50%; background:#94a3b8; animation: typingBounce 1.4s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }

@media print {
  aside, .exam-fab-anchor, #exam-floating-actions { display: none !important; }
  main { padding: 0 !important; overflow: visible !important; }
  #exam-paper-preview { box-shadow: none !important; }
}
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%,80%,100%{ transform:translateY(0); } 40%{ transform:translateY(-6px); } }
/* AIGC END */

.btn-loading { position: relative; color: transparent !important; }
.btn-loading::after {
  content:''; position:absolute; inset:0; margin:auto;
  width:20px; height:20px; border:2.5px solid rgba(255,255,255,0.3);
  border-top-color:#fff; border-radius:50%;
  animation: btnSpin 0.6s linear infinite;
}
@keyframes btnSpin { to { transform:rotate(360deg); } }
/* AIGC END */

.account-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 150;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
@media (min-width: 640px) {
  .account-modal-overlay { padding: 24px; }
}

/* Ensure account modal stays hidden until explicitly opened by JS. */
.account-modal-overlay.hidden {
  display: none !important;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }

#radarChart {
  width: 100%;
  min-width: 280px;
  min-height: 400px;
  height: 400px;
}

@keyframes radar-metric-breathe {
  0%,
  100% {
    text-shadow: 0 0 0 rgba(0, 122, 255, 0);
  }
  50% {
    text-shadow: 0 0 10px rgba(0, 122, 255, 0.22);
  }
}

.radar-metric-num {
  animation: radar-metric-breathe 3.2s ease-in-out infinite;
}

@keyframes vision-plugin-scan {
  0% {
    transform: translateX(-45%);
  }
  100% {
    transform: translateX(320%);
  }
}

.vision-plugin-card-scan {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.vision-plugin-card-scan::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 122, 255, 0.06) 35%,
    rgba(0, 122, 255, 0.14) 50%,
    rgba(0, 122, 255, 0.06) 65%,
    transparent 100%
  );
  animation: vision-plugin-scan 2.8s ease-in-out infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .vision-plugin-card-scan::before {
    animation: none;
    opacity: 0.35;
    transform: translateX(40%);
  }
}

.login-shell {
  font-family: var(--font-ui);
}

#login-btn.btn-loading {
  position: relative;
  color: transparent !important;
}

#login-btn.btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin 0.65s linear infinite;
}

.flatpickr-calendar.flatpickr-calendar--audit {
  z-index: 10050 !important;
  border-radius: 16px;
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.12),
    0 4px 12px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--font-ui);
  padding-bottom: 0;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-months {
  padding: 14px 12px 4px;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-current-month {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-current-month select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  padding: 3px 22px 3px 8px;
  cursor: pointer;
  outline: none;
  transition: background 0.15s ease, color 0.15s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 12px;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-current-month select:hover {
  background-color: rgba(0, 122, 255, 0.08);
  color: #007AFF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23007AFF' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-current-month select:focus {
  background-color: rgba(0, 122, 255, 0.12);
  color: #007AFF;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-prev-month,
.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-next-month {
  top: 14px;
  padding: 4px 8px;
  border-radius: 8px;
  fill: #6b7280;
  transition: background 0.15s ease, fill 0.15s ease;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-prev-month:hover,
.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-next-month:hover {
  background: rgba(0, 122, 255, 0.08);
  fill: #007aff;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-weekdays {
  padding: 8px 0 4px;
}

.flatpickr-calendar.flatpickr-calendar--audit span.flatpickr-weekday {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-innerContainer {
  padding: 0 8px 8px;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day {
  border-radius: 10px;
  line-height: 36px;
  max-height: 36px;
  color: #374151;
  border-color: transparent;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
  background: rgba(0, 122, 255, 0.08);
  color: #007aff;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day.today:not(.selected) {
  border-color: rgba(0, 122, 255, 0.45);
  color: #007aff;
  font-weight: 600;
  background: rgba(0, 122, 255, 0.06);
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day.selected,
.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day.selected:focus,
.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day.selected:hover {
  background: #007aff !important;
  border-color: #007aff !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35);
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day.prevMonthDay,
.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day.nextMonthDay {
  color: #d1d5db;
}

.flatpickr-calendar.flatpickr-calendar--audit .flatpickr-day.flatpickr-disabled {
  color: #e5e7eb;
}

.flatpickr-audit-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 2px;
}

.flatpickr-audit-footer-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: inherit;
}

.flatpickr-audit-clear {
  background: transparent;
  color: #6b7280;
}

.flatpickr-audit-clear:hover {
  background: #f3f4f6;
  color: #374151;
}

.flatpickr-audit-today {
  background: rgba(0, 122, 255, 0.12);
  color: #007aff;
}

.flatpickr-audit-today:hover {
  background: rgba(0, 122, 255, 0.2);
  color: #0055d4;
}

.audit-behavior-menu {
  font-family: var(--font-ui);
}

.audit-behavior-option {
  display: block;
  padding: 0.5rem 0.75rem;
  margin: 0 0.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.35;
  cursor: pointer;
  color: #374151;
  transition: background 0.12s ease, color 0.12s ease;
}

.audit-behavior-option:hover,
.audit-behavior-option:focus-visible {
  background: rgba(0, 122, 255, 0.08);
  color: #007aff;
  outline: none;
}

.audit-behavior-option--selected {
  background: rgba(0, 122, 255, 0.12);
  color: #007aff;
  font-weight: 500;
}

.audit-behavior-option--selected:hover {
  background: rgba(0, 122, 255, 0.16);
  color: #0066dd;
}

.ui-card-interactive,
.ui-card-lift,
.audit-trail-card,
.radar-kpi-card {
  transition:
    transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    border-color 0.35s ease;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .ui-card-interactive:hover,
  .ui-card-lift:hover,
  .audit-trail-card:hover,
  .radar-kpi-card:hover {
    transform: translateY(-2px) scale(1.002);
    box-shadow:
      0 14px 32px -10px rgba(0, 0, 0, 0.11),
      0 8px 18px -12px rgba(0, 0, 0, 0.07);
    border-color: rgba(229, 231, 235, 0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-card-interactive,
  .ui-card-lift,
  .audit-trail-card,
  .radar-kpi-card {
    transition: box-shadow 0.24s ease, border-color 0.24s ease;
  }
  .ui-card-interactive:hover,
  .ui-card-lift:hover,
  .audit-trail-card:hover,
  .radar-kpi-card:hover {
    transform: none;
  }
}

/* data-no-card-lift 属性：禁止卡片悬浮上移效果，用于 KPI 雷达卡片等不需要交互提升动效的场景 */
[data-no-card-lift] .ui-card-interactive:hover,
[data-no-card-lift].ui-card-interactive:hover,
[data-no-card-lift] .ui-card-lift:hover,
[data-no-card-lift].ui-card-lift:hover,
[data-no-card-lift] .audit-trail-card:hover,
[data-no-card-lift].audit-trail-card:hover {
  transform: none !important;
}

.audit-trail-row {
  transition:
    background-color 0.22s ease,
    box-shadow 0.22s ease;
}

@media (hover: hover) and (pointer: fine) {
  .audit-trail-row:hover {
    background-color: rgba(249, 250, 251, 0.92);
  }
}

.audit-trail-row:active {
  background-color: rgba(243, 244, 246, 0.95);
}

.audit-trail-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(0, 122, 255, 0.35);
}

/* ===== Stage6 Demo UI ===== */
.demo-surface {
  padding-bottom: 2rem;
}

.demo-hero {
  position: relative;
  overflow: hidden;
}

.demo-hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 113, 227, 0.16) 0%, rgba(0, 113, 227, 0) 68%);
  pointer-events: none;
}

.demo-card {
  box-shadow:
    0 10px 28px -22px rgba(15, 23, 42, 0.55),
    0 2px 8px rgba(15, 23, 42, 0.06);
}

.mode-badge {
  display: inline-flex;
  align-items: center;
  height: 1.85rem;
  padding: 0 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.mode-badge-auto {
  color: #11405e;
  background: #dceffd;
  border: 1px solid #c3e4fb;
}

.mode-badge-real {
  color: #0f5132;
  background: #ddf5e8;
  border: 1px solid #c9ebd8;
}

.mode-badge-mock {
  color: #6a1b12;
  background: #ffe8df;
  border: 1px solid #ffd5c6;
}

.mode-switcher-title {
  font-size: 12px;
  font-weight: 600;
  color: #516170;
  margin-bottom: 0.5rem;
}

.mode-switcher-actions {
  display: inline-flex;
  border: 1px solid #d8e0ea;
  border-radius: 9999px;
  background: #f8fafd;
  overflow: hidden;
}

.mode-switcher-btn {
  border: none;
  background: transparent;
  color: #5b6776;
  font-size: 13px;
  font-weight: 500;
  padding: 0.5rem 0.95rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.mode-switcher-btn:hover {
  background: #edf3f9;
  color: #2a3441;
}

.mode-switcher-btn-active {
  background: #0f172a;
  color: #ffffff;
}

.demo-primary-btn,
.demo-secondary-btn {
  border-radius: 0.8rem;
  padding: 0.52rem 0.95rem;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.demo-primary-btn {
  border: 1px solid #0b4ea2;
  background: linear-gradient(135deg, #0f5db8, #0c4c97);
  color: #fff;
}

.demo-primary-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px -12px rgba(15, 93, 184, 0.8);
}

.demo-secondary-btn {
  border: 1px solid #d5deea;
  background: #fff;
  color: #3e4b5c;
}

.demo-secondary-btn:hover {
  border-color: #c2ccda;
  background: #f8fafd;
}

.demo-empty-state {
  border: 1px dashed #ccd7e6;
  border-radius: 1rem;
  background: #f8fbff;
  text-align: center;
  padding: 1.1rem 1rem;
}

.demo-empty-state-title {
  font-size: 13px;
  font-weight: 600;
  color: #4f5f73;
}

.demo-empty-state-text {
  margin-top: 0.35rem;
  font-size: 13px;
  color: #6a7788;
  line-height: 1.6;
}

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  border-radius: 0.85rem;
  padding: 0.65rem 0.8rem;
  font-size: 13px;
}

.demo-banner-loading {
  border: 1px solid #c8dcf8;
  background: #edf5ff;
  color: #1f4f86;
}

.demo-banner-error {
  border: 1px solid #f4cbc7;
  background: #fff3f2;
  color: #8a2f2b;
}

.demo-spinner {
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 9999px;
  border: 2px solid rgba(31, 79, 134, 0.22);
  border-top-color: #1f4f86;
  animation: btnSpin 0.8s linear infinite;
  margin-top: 0.15rem;
}

.demo-retry-btn {
  flex-shrink: 0;
  border: 1px solid #e3b5b1;
  border-radius: 0.55rem;
  background: #fff;
  color: #8a2f2b;
  font-size: 12px;
  padding: 0.2rem 0.58rem;
  cursor: pointer;
}

.demo-retry-btn:hover {
  background: #fff8f7;
}

.login-demo-panel .login-demo-btn {
  border: 1px solid #d9e1ec;
  border-radius: 9999px;
  background: #fff;
  font-size: 12px;
  color: #46586d;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
}

.login-demo-panel .login-demo-btn:hover {
  border-color: #c8d2e1;
  background: #f8fbff;
}

/* Growth plan (iOS-style) */
.growth-plan-page {
  --growth-blue: #007aff;
  --growth-label: #8e8e93;
  --growth-text: #1d1d1f;
  padding-bottom: 2rem;
}

/* 成长计划 · Split View（仅页内根 .growth-plan-page--split 及其子节点；画布色由 main #F2F2F7 提供） */
.growth-plan-page--split {
  background: #f2f2f7;
  box-sizing: border-box;
  border-radius: 0;
}

.growth-plan-page--split .growth-plan-hero {
  margin-bottom: 1.75rem;
}

.growth-plan-page--split .app-page-title {
  color: var(--text-primary);
  font-weight: 700;
}

.growth-plan-page--split .growth-plan-subtitle {
  color: #8e8e93;
}

.growth-plan-page--split .growth-field-label {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.8125rem;
}

.growth-plan-page--split .growth-field-label--inline {
  margin-bottom: 0.65rem;
}

.growth-plan-page--split .growth-plan-title {
  color: var(--text-primary);
  font-weight: 700;
}

.growth-plan-page--split .growth-inset-platter {
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.growth-plan-page--split .growth-regen-pill {
  width: 100%;
  max-width: 100%;
  align-self: stretch;
}

@media (min-width: 1024px) {
  .growth-plan-page--split .growth-summary-bar-layout {
    flex-direction: column;
    align-items: stretch;
  }
}

.growth-ios-card .growth-textarea-inset::placeholder {
  color: #8e8e93;
}

.growth-plan-page--split .growth-input-ios::placeholder,
.growth-plan-page--split .growth-textarea-inset::placeholder {
  color: #8e8e93;
}

.growth-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: stretch;
}

@media (min-width: 1024px) {
  .growth-split {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }
}

.growth-split__col--left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.growth-split__col--right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.growth-ios-card {
  background: #ffffff;
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 1.25rem 1.25rem 1.35rem;
}

@media (min-width: 640px) {
  .growth-ios-card {
    padding: 1.35rem 1.5rem 1.5rem;
  }
}

.growth-ios-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.growth-ios-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.growth-ios-card__title--solo {
  margin-bottom: 1rem;
}

.growth-card-fields--loose {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.growth-field-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.growth-field-row:last-child {
  border-bottom: none;
}

.growth-field-row--flush {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 0.85rem;
  margin-bottom: 0.35rem;
}

.growth-field-row--grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem 1.25rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.35rem;
}

@media (min-width: 480px) {
  .growth-field-row--grid {
    grid-template-columns: 1fr 1fr;
  }
}

.growth-ios-card .growth-input-ios {
  background: transparent;
  border: 2px solid transparent;
  border-radius: 0;
  padding: 0.35rem 0 0.5rem;
  box-shadow: none;
}

.growth-ios-card .growth-input-ios:focus {
  background: transparent;
  border-color: transparent;
  border-bottom-color: #007aff;
  border-bottom-width: 2px;
  border-radius: 0;
  box-shadow: none;
}

.growth-textarea-inset {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 7rem;
  resize: vertical;
  margin-top: 0.25rem;
  padding: 0.65rem 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.growth-textarea-inset--sm {
  min-height: 5rem;
}

.growth-textarea-inset:focus {
  border-bottom-color: #007aff;
  box-shadow: 0 1px 0 0 #007aff;
}

.growth-split-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.growth-plan-page--split .growth-primary-pill {
  background: #007aff;
  border-radius: 999px;
}

.growth-result-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: min(520px, calc(100vh - 200px));
  max-height: calc(100vh - 180px);
  background: #ffffff;
  border-radius: 20px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  overflow: hidden;
}

.growth-result-panel__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 1.15rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.growth-result-panel__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.growth-result-panel .growth-plan-loading-strip {
  margin: 0 1.25rem 0.75rem;
  flex-shrink: 0;
}

.growth-result-panel .demo-banner {
  margin: 0 1.25rem 0.75rem;
  flex-shrink: 0;
}

.growth-result-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.75rem 1.25rem 1.35rem;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}

.growth-result-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: 2rem 1.5rem;
  text-align: center;
}

.growth-result-empty__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  font-weight: 500;
  color: #8e8e93;
}

.growth-ios-card .growth-plan-loading-strip {
  margin-top: 1rem;
}

.growth-ios-card .growth-identity-card {
  background: transparent;
  padding: 0;
  border-radius: 0;
  gap: 0.85rem;
}

.growth-ios-card .growth-field-label {
  color: var(--text-primary);
  font-weight: 600;
}

.growth-plan-hero .growth-plan-title {
  font-size: clamp(1.75rem, 4vw, 2.125rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--growth-text);
  line-height: 1.15;
}

.growth-plan-hero .growth-plan-subtitle {
  margin-top: 0.5rem;
  max-width: 36rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--growth-label);
}

.growth-inset-platter {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem 1.35rem;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 8px 28px rgba(0, 0, 0, 0.06);
}

@media (min-width: 640px) {
  .growth-inset-platter {
    padding: 1.75rem 1.75rem;
  }
}

.growth-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: rgba(0, 122, 255, 0.1);
  color: var(--growth-blue);
  flex-shrink: 0;
}

.growth-section-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.growth-identity-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 122, 255, 0.06) 100%);
}

.growth-identity-avatar {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 9999px;
  background: rgba(0, 122, 255, 0.12);
  color: var(--growth-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.growth-identity-avatar svg {
  width: 1.65rem;
  height: 1.65rem;
}

.growth-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--growth-label);
  margin-bottom: 0.35rem;
}

.growth-input-ios {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  padding: 0.625rem 0.8rem;
  font-size: 0.9375rem;
  color: var(--growth-text);
  outline: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.growth-input-ios::placeholder {
  color: #999999;
}

.growth-input-ios:focus {
  background: #ffffff;
  border-color: #007aff;
  box-shadow:
    0 0 0 1px rgba(0, 122, 255, 0.12),
    0 4px 18px rgba(0, 122, 255, 0.22);
}

.growth-textarea-frost {
  display: block;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--growth-text);
  outline: none;
  resize: vertical;
  min-height: 7rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.growth-textarea-frost::placeholder {
  color: #999999;
}

.growth-textarea-frost:focus {
  border-color: rgba(0, 122, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 3px rgba(0, 122, 255, 0.22);
}

.growth-textarea-frost--sm {
  min-height: 5rem;
}

.growth-focus-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: #f3f4f6;
  color: #4b5563;
  transition:
    transform 0.2s ease-in-out,
    background 0.2s ease-in-out,
    color 0.2s ease-in-out;
}

.growth-focus-chip:hover {
  transform: scale(1.05);
}

.growth-focus-chip.growth-focus-chip--on {
  background: #007aff;
  color: #ffffff;
}

.growth-primary-pill {
  width: 100%;
  border: none;
  border-radius: 9999px;
  padding: 0.9rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: #007aff;
  color: #fff;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(0, 122, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.06);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.growth-primary-pill:hover:not(:disabled) {
  background: #0066e6;
  box-shadow:
    0 6px 20px rgba(0, 122, 255, 0.4),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.growth-primary-pill:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.growth-primary-pill--compact {
  width: auto;
  align-self: center;
  padding: 0.65rem 1.35rem;
  font-size: 0.9375rem;
  box-shadow:
    0 3px 12px rgba(0, 122, 255, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.growth-draft-link {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 0.6rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #8e8e93;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s ease;
}

.growth-draft-link:hover {
  color: #636366;
}

.growth-draft-btn-secondary {
  border: none;
  border-radius: 9999px;
  padding: 0.55rem 1.1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #636366;
  background: rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background 0.15s ease;
}

.growth-draft-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.08);
}

.growth-plan-loading-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 1.25rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(0, 122, 255, 0.06);
  color: #0066cc;
  font-size: 0.875rem;
  font-weight: 500;
}

/* ===================== Growth Plan · iOS Minimal Redesign ===================== */

.gp-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.5rem 1rem 3rem;
}
.gp-two-col {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  align-items: start;
}
.gp-col-left {}
.gp-col-right {
  position: sticky;
  top: 1rem;
}

/* Header */
.gp-header {
  margin-bottom: clamp(1.25rem, 0.9rem + 1vw, 1.5rem);
}
.gp-header__desc {
  margin-top: 0.5rem;
  max-width: 48rem;
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  color: #6b7280;
  line-height: 1.7;
}

/* Card / Grouped section */
.gp-card {
  background: #ffffff;
  border-radius: 16px;
  margin-bottom: 1.35rem;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.gp-card__title {
  padding: 1rem 1.15rem 0.5rem;
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.gp-card__body {
  padding: 0.25rem 1.15rem 1rem;
}
.gp-card__body--airy {
  padding: 1.1rem 1.15rem 1.15rem;
}
.gp-card__body > .gp-textarea + .gp-textarea {
  display: block;
  margin-top: 0.5rem;
}
.gp-card__footer {
  padding: 0.25rem 1.15rem 1rem;
  display: flex;
  justify-content: flex-end;
}

/* Form field: label left, input right (iOS Settings style) */
.gp-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.15rem;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  gap: 0.75rem;
  min-height: 2.75rem;
  box-sizing: border-box;
}
.gp-field:last-child {
  border-bottom: none;
}
.gp-field__label {
  font-size: 0.9375rem;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 400;
}
.gp-field__input {
  flex: 1;
  text-align: right;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  color: var(--text-primary);
  outline: none;
  min-width: 0;
  font-weight: 400;
}
.gp-field__input::placeholder {
  color: #c7c7cc;
}
.gp-field__input:focus {
  color: #007aff;
}
.gp-field__input--locked {
  color: #6b7280;
  cursor: not-allowed;
}
.gp-field__input--locked:focus {
  color: #6b7280;
}
.gp-field__hint {
  flex-basis: 100%;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8e8e93;
}
.gp-field__hint--inline {
  flex-basis: auto;
  margin-top: 0;
  align-self: center;
}

.gp-section-head {
  margin-bottom: 0.9rem;
}
.gp-section-head__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.gp-section-head__desc {
  margin: 0.32rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #8e8e93;
}

.gp-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.gp-identity-card {
  min-width: 0;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  background: #f5f5f7;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72);
}
.gp-identity-card--wide {
  grid-column: 1 / -1;
}
.gp-identity-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8e8e93;
  letter-spacing: 0.01em;
}
.gp-identity-card__value {
  margin-top: 0.32rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--text-primary);
  font-weight: 600;
  word-break: break-word;
}
.gp-identity-card__hint {
  margin-top: 0.36rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8e8e93;
}

/* Block field (textarea, chips) */
.gp-field--block {
  flex-direction: column;
  align-items: stretch;
}
.gp-field--block .gp-field__label {
  margin-bottom: 0.35rem;
}
.gp-field--block .gp-field__value {
  width: 100%;
}

/* Textarea */
.gp-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 5rem;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  resize: vertical;
  font-weight: 400;
}
.gp-textarea--sm {
  min-height: 3.25rem;
}
.gp-textarea::placeholder {
  color: #c7c7cc;
}
.gp-textarea--panel {
  min-height: 5.8rem;
  padding: 0;
}

/* Actions */
.gp-actions {
  padding: 0.75rem 0 1rem;
  text-align: center;
}

/* Primary button */
.gp-btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 0.85rem;
  font-size: 1rem;
  font-weight: 600;
  background: #007aff;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.gp-btn:hover:not(:disabled) {
  opacity: 0.88;
}
.gp-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.gp-btn--sm {
  width: auto;
  display: inline-block;
  padding: 0.6rem 1.35rem;
  font-size: 0.9375rem;
  border-radius: 10px;
}

/* Ghost link */
.gp-link {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem;
  border: none;
  background: none;
  font-size: 0.875rem;
  color: #8e8e93;
  cursor: pointer;
  transition: color 0.15s ease;
}
.gp-link:hover {
  color: #636366;
}

/* Summary grid (Stage 2 top) */
.gp-summary {
  padding: 1rem 1.15rem 0.25rem;
}
.gp-summary__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 1.25rem;
}
.gp-summary__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.gp-summary__item {
  min-width: 0;
}
.gp-summary__label {
  font-size: 0.75rem;
  color: #8e8e93;
  display: block;
}
.gp-summary__value {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gp-summary__row .gp-summary__label {
  flex-shrink: 0;
}
.gp-summary__row .gp-summary__value {
  flex: 1;
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
}

/* Result display */
.gp-result {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-primary);
}
.gp-result__id {
  font-size: 0.8125rem;
  color: #8e8e93;
  margin-bottom: 0.75rem;
}
.gp-result__text {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.gp-result__section {
  margin-bottom: 0.85rem;
}
.gp-result__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #636366;
  letter-spacing: 0.02em;
  margin-bottom: 0.35rem;
}
.gp-result__item {
  padding: 0.4rem 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.gp-result__item:last-child {
  border-bottom: none;
}

.gp-course-item {
  padding: 0.75rem 0;
}

.gp-course-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.gp-course-item__title-wrap {
  min-width: 0;
}

.gp-course-item__title {
  font-size: 0.96875rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.45;
}

.gp-course-item__code {
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: #8e8e93;
}

.gp-course-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.gp-course-chip--high {
  color: #b42318;
  background: #fef3f2;
  border-color: #fecdca;
}

.gp-course-chip--medium {
  color: #b54708;
  background: #fffaeb;
  border-color: #fedf89;
}

.gp-course-chip--low {
  color: #027a48;
  background: #ecfdf3;
  border-color: #abefc6;
}

.gp-course-item__detail {
  margin-top: 0.45rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #3a3a3c;
}

.gp-course-item__detail-label {
  display: inline-block;
  min-width: 4.5rem;
  margin-right: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #8e8e93;
}

.gp-practice-task-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  margin: 0 -0.6rem;
  transition: background 0.15s;
}
.gp-practice-task-link:hover {
  background: rgba(0, 113, 227, 0.06);
}
.gp-practice-task-go {
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0071e3;
  opacity: 0;
  transition: opacity 0.15s;
}
.gp-practice-task-link:hover .gp-practice-task-go {
  opacity: 1;
}

/* Plain body (legacy — kept for any remaining references) */
.gp-plain-body {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Structured result — iOS-style growth plan rendering */
.gp-structured-result {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.gp-sr-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-top: 0.6rem;
  padding-bottom: 0.25rem;
}
.gp-structured-result > .gp-sr-heading:first-child {
  margin-top: 0;
}
.gp-sr-body {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #3c3c43;
  margin: 0;
}
.gp-sr-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.gp-sr-list li {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #3c3c43;
  padding: 0.4rem 0.65rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.028);
  position: relative;
  padding-left: 1.35rem;
}
.gp-sr-list li::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 0.72rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #007aff;
  opacity: 0.5;
}
.gp-sr-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0.4rem 0;
}

/* Empty state */
.gp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  color: #8e8e93;
  font-size: 0.9375rem;
  text-align: center;
}

/* Placeholder */
.gp-placeholder {
  padding: 1rem 0;
}
.gp-placeholder__title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}
.gp-placeholder__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  color: #8e8e93;
  line-height: 1.9;
}

/* Eval score cards */
.gp-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.gp-score {
  text-align: center;
  padding: 0.6rem 0.35rem;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
}
.gp-score__label {
  display: block;
  font-size: 0.75rem;
  color: #8e8e93;
}
.gp-score__value {
  display: block;
  margin-top: 0.2rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Loading strip inside gp-card */
.gp-card > .growth-plan-loading-strip {
  margin: 0 1.15rem 0.5rem;
}
.gp-card > .demo-banner {
  margin: 0 1.15rem 0.5rem;
}

.gp-card--accent {
  background:
    radial-gradient(circle at top left, rgba(0,122,255,0.12), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.gp-onboard {
  display: grid;
  gap: 0.75rem;
}
.gp-eyebrow,
.gp-progress__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #007aff;
}
.gp-onboard__title,
.gp-progress__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--text-primary);
}
.gp-onboard__desc,
.gp-progress__desc {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #6b7280;
}
.gp-onboard__tips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.gp-focus-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.gp-editor-block {
  padding: 0.95rem 1rem;
  border-radius: 16px;
  background: #f7f7f8;
}
.gp-editor-block + .gp-editor-block {
  margin-top: 0.75rem;
}
.gp-editor-block__head {
  margin-bottom: 0.65rem;
}
.gp-editor-block__title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}
.gp-editor-block__desc {
  margin: 0.28rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #8e8e93;
}
.gp-editor-block__body {
  min-width: 0;
}
.gp-detail-copy {
  font-size: 0.9375rem;
  line-height: 1.72;
  color: #3a3a3c;
  white-space: pre-wrap;
}
.gp-action-panel {
  display: grid;
  gap: 0.7rem;
}
.gp-action-panel__hint {
  margin: 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #8e8e93;
}
.gp-inline-badge,
.gp-branch-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(0,122,255,0.08);
  color: #007aff;
}
.gp-inline-badge--warn,
.gp-branch-badge--warn {
  background: rgba(255,149,0,0.12);
  color: #c46f00;
}
.gp-branch-badge--blue {
  background: rgba(0,122,255,0.08);
  color: #007aff;
}

.gp-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.gp-tab {
  min-height: 2.75rem;
  border: none;
  border-radius: 14px;
  background: rgba(0,0,0,0.04);
  color: #6b7280;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}
.gp-tab:hover {
  background: rgba(0,0,0,0.06);
}
.gp-tab--active {
  background: #ffffff;
  color: #007aff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.gp-progress {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.95rem;
}
.gp-progress__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.gp-progress__count {
  flex-shrink: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
}
.gp-progress__bar {
  position: relative;
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  overflow: hidden;
}
.gp-progress__bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #007aff 0%, #42a5ff 100%);
}
.gp-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}
.gp-metric-card {
  min-width: 0;
  padding: 0.9rem 0.95rem;
  border-radius: 14px;
  background: #f5f5f7;
}
.gp-metric-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8e8e93;
}
.gp-metric-card__value {
  margin-top: 0.32rem;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.gp-metric-card__hint {
  margin-top: 0.34rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8e8e93;
}
.gp-result-panel-card {
  padding: 1.15rem;
  border-radius: 16px;
  background: #f7f7f8;
}
.gp-result-panel-card--plan {
  height: 32rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.gp-result-panel-card--plan::-webkit-scrollbar {
  width: 8px;
}
.gp-result-panel-card--plan::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(60, 60, 67, 0.28);
}
.gp-result-panel-card--plan::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 640px) {
  .gp-result-panel-card--plan {
    height: 24rem;
  }
}

.gp-task-board {
  display: grid;
  gap: 0.85rem;
}
.gp-task-card {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 1rem;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.gp-task-card--done {
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  border-color: rgba(0,122,255,0.14);
}
.gp-task-card--locked {
  background: linear-gradient(180deg, #fbfbfc 0%, #f4f4f5 100%);
  border-color: rgba(60,60,67,0.1);
  box-shadow: none;
}
.gp-task-card__top {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.gp-task-card__main {
  flex: 1;
  min-width: 0;
}
.gp-task-check {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  color: #6b7280;
  font-size: 0.875rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gp-task-check--done {
  background: #007aff;
  color: #ffffff;
}
.gp-task-check--locked {
  background: rgba(60,60,67,0.12);
  color: #8e8e93;
}
.gp-task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
}
.gp-task-card__day,
.gp-task-card__state {
  font-size: 0.75rem;
  color: #8e8e93;
}
.gp-task-card__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.gp-task-card__desc,
.gp-task-card__note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.65;
  color: #6b7280;
}
.gp-task-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.gp-task-card__progress {
  font-size: 0.8125rem;
  color: #8e8e93;
}
.gp-task-card__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.75rem;
}
.gp-mini-link {
  border: none;
  background: none;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #007aff;
  cursor: pointer;
}
.gp-btn--ghost {
  background: rgba(0,122,255,0.08);
  color: #007aff;
}
.gp-btn--ghost:hover:not(:disabled) {
  opacity: 1;
  background: rgba(0,122,255,0.14);
}

@media (max-width: 640px) {
  .gp-card__body--airy {
    padding: 1rem 0.95rem 1rem;
  }
  .gp-identity-grid {
    grid-template-columns: 1fr;
  }
  .gp-metric-grid {
    grid-template-columns: 1fr;
  }
  .gp-tabs {
    grid-template-columns: 1fr;
  }
  .gp-progress__head,
  .gp-task-card__foot {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 900px) {
  .gp-two-col {
    grid-template-columns: 1fr;
  }
  .gp-col-right {
    position: static;
  }
}

/* Sidebar metrics */
.gp-sidebar-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.gp-sidebar-metric {
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  background: #f5f5f7;
}
.gp-sidebar-metric:last-child {
  grid-column: 1 / -1;
}
.gp-sidebar-metric__label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #8e8e93;
  letter-spacing: 0.02em;
}
.gp-sidebar-metric__value {
  margin-top: 0.2rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.gp-sidebar-metric__hint {
  margin-top: 0.15rem;
  font-size: 0.68rem;
  line-height: 1.4;
  color: #8e8e93;
}

/* Sidebar detail rows */
.gp-sidebar-detail {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.gp-sidebar-detail__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8e8e93;
}
.gp-sidebar-detail__value {
  margin-top: 0.25rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-primary);
  word-break: break-word;
}

/* ===================== Preference Settings Page ===================== */

.settings-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.settings-page-header {
  margin-bottom: 0;
}

.settings-layout {
  display: grid;
  gap: 0.9rem;
}

@media (min-width: 1024px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.95fr);
    align-items: start;
  }
}

.settings-column {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.settings-hero-card,
.settings-section-card,
.settings-save-card {
  position: relative;
  overflow: hidden;
}

.settings-hero-card::after {
  content: none;
}

.settings-hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.settings-identity {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.settings-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1.1rem;
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 650;
  flex-shrink: 0;
  box-shadow: 0 10px 22px rgba(0, 122, 255, 0.18);
}

.settings-identity__body {
  min-width: 0;
}

.settings-identity__meta {
  margin: 0.3rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: #8e8e93;
}

.settings-section-kicker {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8e8e93;
}

.settings-identity__name {
  margin: 0;
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.7rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text-primary);
}

.settings-identity__desc {
  margin: 0.45rem 0 0;
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #6e6e73;
}

.settings-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.settings-meta-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(60, 60, 67, 0.08);
  background: #f5f5f7;
}

.settings-meta-pill__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #8e8e93;
}

.settings-meta-pill__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
  text-align: right;
}

.settings-card-head {
  align-items: flex-start;
  margin-bottom: 0.8rem;
}

.settings-card-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.settings-card-desc {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #6e6e73;
}

.settings-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}

.settings-field {
  display: grid;
  grid-template-columns: minmax(4.25rem, 5rem) minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.95rem 1rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(60, 60, 67, 0.08);
  background: #f5f5f7;
}

.settings-field--editable {
  background: #ffffff;
}

.settings-field__label {
  display: block;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
}

.settings-field__value {
  min-height: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: #6e6e73;
  word-break: break-word;
  text-align: right;
}

.settings-field__input {
  width: 100%;
  min-width: 0;
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #3a3a3c;
  text-align: right;
}

.settings-field__hint {
  margin-top: 0.45rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #8e8e93;
}

.settings-action-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1rem;
  background: #f5f5f7;
  border: 1px solid rgba(60, 60, 67, 0.08);
  border-radius: 0.95rem;
  cursor: pointer;
  text-align: left;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.settings-action-row:hover .settings-action-row__label,
.settings-action-row[aria-expanded="true"] .settings-action-row__label {
  color: #007aff;
}

.settings-action-row:focus-visible {
  border-color: rgba(0, 122, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.settings-action-row__body {
  flex: 1;
  min-width: 0;
}

.settings-action-row__label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: color 0.15s ease;
}

.settings-action-row__desc {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #6e6e73;
}

.settings-action-row__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #8e8e93;
}

.settings-chevron {
  width: 0.95rem;
  height: 0.95rem;
  color: #c7c7cc;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.settings-action-row[aria-expanded="true"] .settings-chevron {
  transform: rotate(90deg);
  color: #007aff;
}

.settings-pwd-panel {
  padding-top: 0.6rem;
}

.settings-field-grid--compact {
  gap: 0.6rem;
}

.settings-panel-note {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #8e8e93;
}

.settings-pref-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.settings-slide-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  width: 100%;
  padding: 0.95rem 1rem;
  border-radius: 0.95rem;
  border: 1px solid rgba(60, 60, 67, 0.08);
  background: #f5f5f7;
  cursor: pointer;
  outline: none;
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.settings-slide-row:hover {
  background: #fafafc;
  border-color: rgba(60, 60, 67, 0.12);
}

.settings-slide-row:active {
  transform: translateY(1px);
}

.settings-slide-row:focus-visible {
  border-color: rgba(0, 122, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.settings-slide-content {
  flex: 1;
  min-width: 0;
}

.settings-slide-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.settings-slide-desc {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #6e6e73;
}

.settings-slide-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.settings-pref-state {
  min-width: 3.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: right;
  color: #8e8e93;
}

.settings-slide-track {
  position: relative;
  width: 3.15rem;
  height: 1.8rem;
  border-radius: 999px;
  background: #d9d9de;
  flex-shrink: 0;
  transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
}

.settings-slide-track--on {
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  box-shadow: inset 0 1px 3px rgba(0, 122, 255, 0.3);
}

.settings-slide-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 1.42rem;
  height: 1.42rem;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22), 0 1px 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-slide-track--on .settings-slide-thumb {
  transform: translateX(1.32rem);
}

.settings-save-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.settings-save-copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.settings-save-note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #8e8e93;
}

.settings-save-btn {
  width: 100%;
  justify-content: center;
  min-height: 2.9rem;
}

@media (min-width: 640px) {
  .settings-save-card {
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }

  .settings-save-btn {
    width: auto;
    min-width: 11rem;
  }
}

body.theme-dark .settings-hero-card::after {
  background: none;
}

body.theme-dark .settings-section-kicker,
body.theme-dark .settings-meta-pill__label,
body.theme-dark .settings-card-desc,
body.theme-dark .settings-field__label,
body.theme-dark .settings-field__hint,
body.theme-dark .settings-action-row__desc,
body.theme-dark .settings-action-row__meta,
body.theme-dark .settings-slide-desc,
body.theme-dark .settings-pref-state,
body.theme-dark .settings-identity__meta,
body.theme-dark .settings-save-note,
body.theme-dark .settings-panel-note {
  color: #98989d;
}

body.theme-dark .settings-identity__name,
body.theme-dark .settings-meta-pill__value,
body.theme-dark .settings-field__value,
body.theme-dark .settings-field__label,
body.theme-dark .settings-field__input,
body.theme-dark .settings-action-row__label,
body.theme-dark .settings-slide-label {
  color: #f5f5f7;
}

body.theme-dark .settings-identity__desc {
  color: #a1a1aa;
}

body.theme-dark .settings-meta-pill,
body.theme-dark .settings-field,
body.theme-dark .settings-slide-row,
body.theme-dark .settings-action-row {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .settings-action-row:hover .settings-action-row__label,
body.theme-dark .settings-action-row[aria-expanded="true"] .settings-action-row__label {
  color: #64d2ff;
}

body.theme-dark .settings-slide-row:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

body.theme-dark .settings-action-row:focus-visible,
body.theme-dark .settings-slide-row:focus-visible {
  border-color: rgba(10, 132, 255, 0.32);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}

body.theme-dark .settings-slide-track {
  background: #39393d;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.theme-dark .settings-slide-track--on {
  background: linear-gradient(135deg, #0A84FF 0%, #64D2FF 100%);
}

body.theme-dark .settings-slide-thumb {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}

.growth-apple-spinner {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 122, 255, 0.2);
  border-top-color: #007aff;
  animation: growthAppleSpin 0.65s linear infinite;
}

@keyframes growthAppleSpin {
  to {
    transform: rotate(360deg);
  }
}

.growth-plan-preview-card {
  border-radius: 14px;
  padding: 1.25rem 1.35rem;
  background: linear-gradient(135deg, #ffffff 0%, #f2f8ff 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 20px rgba(0, 0, 0, 0.05);
}

.growth-plan-preview-card .growth-preview-title {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0066cc;
}

.growth-plan-preview-card .growth-preview-lead {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #48484a;
}

.growth-plan-preview-card .growth-preview-bullets {
  margin-top: 0.85rem;
  padding-left: 1.15rem;
  color: #3a3a3c;
  font-size: 0.875rem;
  line-height: 1.6;
}

.growth-plan-preview-card .growth-preview-bullets li {
  margin-bottom: 0.35rem;
}

.growth-result-shell {
  border-radius: 14px;
  background: linear-gradient(135deg, #ffffff 0%, #f2f8ff 100%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 6px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.growth-result-shell > .space-y-2 {
  padding: 1rem 1.15rem 1.25rem;
}

.growth-result-shell > .space-y-2 > div {
  line-height: 1.6;
}

.growth-result-shell pre {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  line-height: 1.6 !important;
}

/* 成长计划结果：纯文本正文（非 Markdown 源码、非等宽 pre） */
.growth-plan-plain-body {
  padding: 1rem 1.15rem 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.practice-page-root {
  /* iOS-like spring (slight overshoot) for panel width */
  --practice-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --practice-spring-dur: 480ms;
  --practice-fade-dur: 200ms;
  --practice-side-width: 320px;
  --practice-side-collapsed-width: 0px;
  background: transparent;
  border-radius: 0;
  margin: 0;
  padding: 0 0 2rem;
  min-height: min(100vh, 920px);
}

.glass-practice,
.practice-glass-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  border: none;
  border-radius: 24px;
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.65) inset;
}

.practice-hero {
  position: relative;
  z-index: 50;
  overflow: visible;
  padding: 1.35rem 1.5rem 1.5rem;
  margin-bottom: 40px;
}

.practice-hero-top {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .practice-hero-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
  }
}

.practice-hero-desc {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  color: #aeaeb2;
  letter-spacing: 0.06em;
  line-height: 1.45;
}

.practice-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
  align-items: center;
  justify-content: flex-end;
  overflow: visible;
}

.practice-toolbar-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
  overflow: visible;
}

.practice-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem 0.65rem;
  overflow: visible;
}

.practice-toolbar-sidebar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 1.25rem 0 0;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background var(--practice-spring-dur) var(--practice-spring),
    color var(--practice-spring-dur) var(--practice-spring),
    transform 0.18s ease;
}

.practice-toolbar-sidebar-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.practice-toolbar-sidebar-btn:active {
  transform: scale(0.94);
}

.practice-toolbar-sidebar-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.28);
}

.practice-toolbar-sidebar-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
  pointer-events: none;
}

.practice-tool-btn {
  border: none;
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}

.practice-tool-btn--secondary {
  color: #007aff;
  background: transparent;
  box-shadow: none;
}

.practice-tool-btn--secondary:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.05);
  transform: translateY(-1px);
}

.practice-tool-btn--secondary:active:not(:disabled) {
  transform: translateY(0);
}

.practice-tool-btn--primary-accent {
  color: #ffffff;
  background: #007aff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.24);
}

.practice-tool-btn--primary-accent:hover:not(:disabled) {
  background: #0a84ff;
  transform: scale(0.98);
  box-shadow: 0 10px 22px rgba(0, 122, 255, 0.28);
}

.practice-tool-btn--primary-accent:active:not(:disabled) {
  transform: scale(0.96);
}

.practice-tool-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.practice-tool-btn--ghost {
  color: #007aff;
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.4rem 0.55rem;
  font-weight: 500;
  box-shadow: none;
}

.practice-tool-btn--ghost:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.06);
  transform: none;
}

.practice-tool-btn--ghost:active:not(:disabled) {
  opacity: 0.85;
  transform: none;
}

.practice-tool-btn--ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.practice-tool-btn--secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}

.practice-tool-btn--primary-accent:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(0, 113, 227, 0.45);
}

.practice-tool-btn--end-link {
  color: #8e8e93;
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.45rem 0.5rem;
  font-weight: 500;
  font-size: 0.8125rem;
  box-shadow: none;
}

.practice-tool-btn--end-link:hover:not(:disabled) {
  color: #ff3b30;
  background: rgba(255, 59, 48, 0.06);
}

.practice-tool-btn--end-link:active:not(:disabled) {
  opacity: 0.88;
}

.practice-tool-btn--end-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.2);
}

/* 勿对 <details> 使用 inline-flex，会破坏原生 open 与 slot 渲染，导致菜单不显示 */
.practice-toolbar-more {
  position: relative;
  flex-shrink: 0;
  z-index: 60;
  width: max-content;
  max-width: 100%;
}

.practice-toolbar-more-summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: #636366;
  cursor: pointer;
  transition:
    background var(--practice-fade-dur) ease,
    color var(--practice-fade-dur) ease;
}

.practice-toolbar-more-summary::-webkit-details-marker {
  display: none;
}

.practice-toolbar-more-summary:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.practice-toolbar-more-summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.28);
}

.practice-toolbar-more-dots {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  pointer-events: none;
}

.practice-toolbar-more-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 11rem;
  padding: 0.35rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.8) inset;
  z-index: 200;
}

.practice-toolbar-more[open] > .practice-toolbar-more-panel {
  display: block;
}

.practice-toolbar-more-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.75rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}

.practice-toolbar-more-item:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.05);
}

.practice-toolbar-more-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.practice-main-stage-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

.practice-main-grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: stretch;
}

.practice-col-chat {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.practice-chat-stage {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}

@media (min-width: 1024px) {
  /* 顶对齐：主列高度不随右侧面板变高而被拉高，避免输入条随 stretch/margin-top:auto 上下跳 */
  .practice-main-grid {
    flex-direction: row;
    align-items: flex-start;
  }

  .practice-col-chat {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* 主列占满可用宽度，避免输入条两侧大块留白；仍用百分比宽度避免侧栏动画时「拖拽感」 */
  .practice-chat-stage {
    width: 100%;
    max-width: 100%;
    min-height: min(78vh, 900px);
  }

  .practice-col-side {
    flex: 0 0 var(--practice-side-width);
    width: var(--practice-side-width);
    max-width: var(--practice-side-width);
  }

  .practice-main-grid--side-collapsed .practice-col-side {
    width: var(--practice-side-collapsed-width);
    flex-basis: var(--practice-side-collapsed-width);
    max-width: var(--practice-side-collapsed-width);
    align-self: flex-start;
  }
}

.practice-main-grid--side-collapsed {
  gap: 0.9rem;
}

@media (min-width: 1024px) {
  .practice-main-grid--side-collapsed {
    gap: 2rem;
  }
}

.practice-col-side {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  position: relative;
  overflow: visible;
  min-height: 420px;
  transition:
    width var(--practice-spring-dur) var(--practice-spring),
    flex-basis var(--practice-spring-dur) var(--practice-spring),
    max-width var(--practice-spring-dur) var(--practice-spring),
    transform var(--practice-spring-dur) var(--practice-spring),
    opacity var(--practice-spring-dur) var(--practice-spring);
}

.practice-col-side.practice-col-side--collapsed {
  overflow: hidden;
  /* 收起后不再保留 420px 占位，避免整行被撑高、主区输入条被拽到视口最底 */
  min-height: 0;
}

.practice-side-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 420px;
  padding-top: 0.25rem;
  transform-origin: top right;
  transition:
    transform var(--practice-spring-dur) var(--practice-spring),
    opacity var(--practice-spring-dur) var(--practice-spring),
    filter var(--practice-spring-dur) var(--practice-spring);
}

.practice-col-side--collapsed .practice-side-shell {
  transform: none;
  filter: none;
  min-height: 0;
}

.practice-side-rail {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
  flex: 1 1 auto;
  overflow: visible;
  transition:
    gap var(--practice-spring-dur) var(--practice-spring),
    transform var(--practice-spring-dur) var(--practice-spring),
    opacity var(--practice-spring-dur) var(--practice-spring);
}

.practice-col-side--collapsed .practice-side-rail {
  gap: 0.55rem;
}

.practice-side-rail-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0.55rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
  min-height: auto;
  transition:
    padding var(--practice-spring-dur) var(--practice-spring),
    border-color var(--practice-spring-dur) var(--practice-spring),
    transform var(--practice-spring-dur) var(--practice-spring),
    opacity var(--practice-spring-dur) var(--practice-spring);
}

.practice-side-rail-head-copy {
  min-width: 0;
  transition:
    opacity var(--practice-fade-dur) ease,
    transform var(--practice-fade-dur) ease,
    max-width var(--practice-spring-dur) var(--practice-spring);
}

.practice-side-rail-unified {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #8e8e93;
  text-transform: uppercase;
  white-space: nowrap;
}

.practice-side-body {
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  opacity: 1;
  transition:
    grid-template-rows var(--practice-spring-dur) var(--practice-spring),
    opacity var(--practice-spring-dur) var(--practice-spring);
}

.practice-col-side--collapsed .practice-side-body {
  grid-template-rows: 0fr;
  opacity: 0;
}

.practice-col-side--collapsed .practice-side-rail-head {
  padding: 0;
  border-bottom-color: transparent;
}

.practice-col-side--collapsed .practice-side-rail-head-copy {
  opacity: 0;
  transform: translateX(8px);
  max-width: 0;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity var(--practice-fade-dur) ease,
    transform var(--practice-fade-dur) ease,
    max-width var(--practice-spring-dur) var(--practice-spring);
}

.practice-col-side--collapsed .practice-side-stack {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(12px);
  filter: none;
  transition:
    opacity var(--practice-fade-dur) ease,
    transform var(--practice-fade-dur) ease,
    visibility 0s linear var(--practice-fade-dur);
}

@media (max-width: 1023px) {
  .practice-main-grid--side-collapsed {
    gap: 0.85rem;
  }

  .practice-col-side {
    min-height: 0;
  }

  .practice-side-shell {
    min-height: 0;
  }

  .practice-side-rail-head {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-main-grid,
  .practice-col-chat,
  .practice-col-side,
  .practice-side-shell,
  .practice-side-rail,
  .practice-side-rail-head,
  .practice-side-rail-head-copy,
  .practice-side-body,
  .practice-side-stack,
  .practice-toolbar-sidebar-btn,
  .practice-toolbar-more-summary {
    transition: none !important;
  }
}

.practice-chat-panel {
  padding: 2.5rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 420px;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .practice-chat-panel {
    min-height: min(78vh, 900px);
    /* 略收紧左右内边距，让主输入条在玻璃卡内更「铺满」 */
    padding-left: 1.65rem;
    padding-right: 1.65rem;
  }
}

@media (max-width: 1023px) {
  .practice-chat-panel {
    padding: 1.25rem 1.25rem 1.75rem;
  }

  .practice-chat-stage {
    min-height: min(68vh, 560px);
  }
}

.practice-chat-panel > .demo-banner {
  flex-shrink: 0;
}

.practice-module-hint {
  max-width: 168px;
  padding-left: 0.15rem;
  color: var(--text-tertiary);
}

.practice-module-hint__text {
  display: inline-block;
  font-size: 0.71rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.practice-module-hint.is-active {
  color: #4f7db8;
}

.practice-module-hint.is-done {
  color: #6e6e73;
}

body.theme-dark .practice-module-hint {
  color: var(--text-secondary);
}

.practice-chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem 0.15rem 1rem;
  scrollbar-width: thin;
}

.practice-chat-empty {
  text-align: left;
  padding: 1rem 0.25rem 0.5rem;
  color: #86868b;
}

.practice-chat-empty-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #48484a;
}

.practice-chat-empty-hint {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  max-width: 38rem;
}

.practice-msg-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.practice-msg-row {
  display: flex;
}

.practice-msg-row--user {
  justify-content: flex-end;
}

.practice-msg-row--ai {
  justify-content: flex-start;
}

.practice-bubble {
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.5;
  word-break: break-word;
}

.practice-bubble--user {
  background: #007AFF;
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.practice-bubble--ai {
  background: var(--ai-bubble-bg);
  color: var(--ai-bubble-text);
  border-bottom-left-radius: 4px;
  box-shadow: var(--ai-bubble-shadow);
  max-width: min(100%, 36rem);
  padding: 14px 16px;
}

.practice-bubble--ai .practice-bubble-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ai-bubble-text);
}

.practice-msg-row--hint {
  justify-content: center;
}

.practice-bubble--hint {
  max-width: min(100%, 36rem);
  background: #ececee;
  color: #636366;
  font-size: 0.8125rem;
  border-radius: 16px;
  padding: 8px 14px;
  box-shadow: none;
}

.practice-bubble--hint .practice-bubble-text {
  text-align: center;
}

.practice-compose-pill {
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  border: 1px solid transparent;
}

.practice-compose-pill:focus-within {
  border-color: rgba(60, 60, 67, 0.14);
  box-shadow:
    0 0 0 1px rgba(60, 60, 67, 0.08),
    0 6px 24px rgba(0, 0, 0, 0.07);
}

.practice-compose-pill .practice-compose-input.practice-compose-pill-input {
  padding: 14px 0 10px;
  min-height: 44px;
}

.practice-compose-pill .practice-compose-input.practice-compose-pill-input:focus,
.practice-compose-pill .practice-compose-input.practice-compose-pill-input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.practice-bubble-text {
  margin: 0;
  white-space: pre-wrap;
}

/* 在岗助手：对方灰色气泡加宽，与陪练 iMessage 圆角体系一致 */
#content-area .oj-assistant-page .assistant-ai-bubble.practice-bubble {
  max-width: min(100%, 36rem);
  padding: 14px 16px;
}

.ai-typing-bubble.practice-bubble--ai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 58px;
  min-height: 38px;
  padding: 12px 16px;
}

.ai-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: #8e8e93;
  animation: aiTypingFloat 1.05s ease-in-out infinite;
}

.ai-typing-dot:nth-child(2) {
  animation-delay: 0.14s;
}

.ai-typing-dot:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes aiTypingFloat {
  0%,
  80%,
  100% {
    opacity: 0.42;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-typing-dot {
    animation: none;
    opacity: 0.72;
  }
}

/* Gemini 式：单圆角容器 = 上输入区 + 底栏（仅发送），无额外白边外壳 */
.practice-compose {
  flex-shrink: 0;
  width: 100%;
  max-width: min(720px, 100%);
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.practice-compose-field {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 24px;
  /* iOS light: systemGray6 */
  background: #f2f2f7;
  border: 1px solid rgba(60, 60, 67, 0.12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.practice-compose-field:focus-within {
  border-color: rgba(0, 122, 255, 0.35);
  box-shadow:
    0 0 0 3px rgba(0, 122, 255, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.06);
}

.practice-compose-input {
  display: block;
  width: 100%;
  min-height: 48px;
  max-height: 160px;
  resize: none !important;
  overflow-y: auto;
  overflow-x: hidden;
  border: none;
  border-radius: 0;
  padding: 14px 16px 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei UI',
    'Segoe UI',
    'Helvetica Neue',
    sans-serif;
  color: var(--text-primary);
  background: transparent;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.practice-compose-input::-webkit-resizer {
  display: none !important;
  width: 0;
  height: 0;
}

.practice-compose-input:focus {
  background: transparent;
  box-shadow: none;
}

.practice-compose-input::placeholder {
  font-family: inherit;
  font-weight: 400;
  color: #aeaeb2;
  opacity: 1;
}

.practice-compose-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 0 10px 10px 12px;
  gap: 0.5rem;
}

.practice-compose-bar .practice-send-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  border: none;
  /* 深炭底 + 浅灰箭头，偏高级感 */
  background: #1a1a1a;
  color: #d1d1d1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}

.practice-compose-bar .practice-send-btn:hover:not(:disabled) {
  background: #242424;
  color: #e8e8e8;
  transform: scale(0.98);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}

.practice-compose-bar .practice-send-btn:active:not(:disabled) {
  transform: scale(0.94);
  background: #1f1f1f;
}

.practice-compose-bar .practice-send-btn:focus-visible {
  outline: 2px solid rgba(26, 26, 26, 0.45);
  outline-offset: 2px;
}

.practice-compose-bar .practice-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.practice-compose-bar .practice-send-icon {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}

.practice-side-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.32s ease 0.06s,
    transform 0.42s var(--practice-spring),
    visibility 0s linear 0s;
}

.practice-side-stack.practice-side-col--dim .practice-config-card {
  opacity: 0.58;
  filter: saturate(0.85);
  transform: scale(0.995);
}

.practice-config-card,
.practice-feedback-card,
.practice-ability-card {
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.practice-config-card {
  transition: opacity var(--practice-spring-dur) var(--practice-spring);
}

.practice-feedback-card.practice-feedback-card--has-score:not(.practice-side-card--collapsed) {
  background: rgba(255, 255, 255, 0.8);
  transform: none;
  transition: background var(--practice-spring-dur) var(--practice-spring);
}

.practice-side-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}

.practice-side-title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: var(--text-primary);
}

.practice-side-title-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--text-primary);
  opacity: 0.9;
}

.practice-side-card-head .practice-side-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}

.practice-side-card--collapsed .practice-side-card-head {
  margin-bottom: 0;
}

.practice-card-collapse-btn {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(142, 142, 147, 0.12);
  color: #0071e3;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.practice-card-collapse-btn:hover {
  background: rgba(0, 113, 227, 0.14);
}

.practice-card-collapse-btn:active {
  transform: scale(0.94);
}

.practice-card-collapse-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.35);
}

.practice-card-collapse-icon {
  width: 1.125rem;
  height: 1.125rem;
  display: block;
  pointer-events: none;
  transition: transform var(--practice-spring-dur) var(--practice-spring);
  transform: rotate(0deg);
}

.practice-card-collapse-icon--open {
  transform: rotate(180deg);
}

.practice-side-card-collapse-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--practice-spring-dur) var(--practice-spring);
}

.practice-side-card--collapsed .practice-side-card-collapse-wrap {
  grid-template-rows: 0fr;
}

.practice-side-card-collapse-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--practice-spring-dur) var(--practice-spring),
    transform var(--practice-spring-dur) var(--practice-spring);
}

.practice-side-card--collapsed .practice-side-card-collapse-inner {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.practice-side-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.practice-side-desc {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  color: #86868b;
  line-height: 1.45;
}

.practice-picker-section {
  margin-bottom: 1rem;
}

.practice-picker-heading {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #636366;
  margin-bottom: 0.5rem;
}

.practice-sf-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.85;
}

.practice-picker-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 1100px) {
  .practice-picker-row {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

.practice-picker-card {
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.practice-picker-card--narrow {
  flex: 1 1 30%;
}

.practice-picker-card-inner {
  display: block;
  padding: 0.7rem 0.85rem;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition:
    box-shadow 0.22s ease,
    background 0.22s ease,
    transform 0.15s ease,
    border-color 0.22s ease;
}

.practice-picker-card:hover .practice-picker-card-inner {
  transform: scale(0.989);
  border-color: rgba(0, 0, 0, 0.06);
}

.practice-picker-card:active .practice-picker-card-inner {
  transform: scale(0.98);
}

.practice-picker-card:has(input:checked) .practice-picker-card-inner {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 113, 227, 0.18);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(0, 113, 227, 0.1),
    0 0 24px rgba(0, 113, 227, 0.1),
    0 4px 14px rgba(0, 113, 227, 0.07);
}

.practice-picker-title-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.practice-picker-title-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0071e3;
  opacity: 0.88;
}

.practice-picker-card:has(input:checked) .practice-picker-title-icon {
  color: #0071e3;
  opacity: 1;
}

.practice-picker-sf-icon {
  width: 1rem;
  height: 1rem;
  display: block;
}

.practice-picker-title {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.practice-picker-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.6875rem;
  color: #86868b;
  line-height: 1.35;
}

/* ── practice capsule dropdown row ── */
.practice-picker-capsule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-start;
}

.practice-capsule-dropdown {
  position: relative;
  min-width: 0;
}

.practice-capsule-dropdown--module {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.practice-capsule-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: #f2f2f7;
  border: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.practice-capsule-btn:hover {
  background: #e8e8ed;
}

.practice-capsule-dropdown--open .practice-capsule-btn {
  background: #e8e8ed;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.15);
}

.practice-capsule-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.practice-capsule-arrow {
  width: 0.7rem;
  height: 0.7rem;
  flex-shrink: 0;
  color: #86868b;
  transition: transform 0.2s;
}

.practice-capsule-dropdown--open .practice-capsule-arrow {
  transform: rotate(180deg);
}

.practice-capsule-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 210px;
  max-height: 280px;
  overflow-y: auto;
  padding: 0.35rem 0;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    0 2px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top left;
  transition:
    opacity var(--motion-duration-fast) ease,
    transform var(--motion-duration-fast) var(--motion-ease-out);
}

.practice-capsule-menu.practice-capsule-menu--mounted {
  display: block;
}

.practice-capsule-menu.practice-capsule-menu--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.practice-capsule-item {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}

.practice-capsule-item:hover {
  background: #f2f2f7;
}

.practice-capsule-item--active {
  background: rgba(0, 113, 227, 0.06);
}

.practice-capsule-item-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.practice-capsule-item--active .practice-capsule-item-title {
  color: #0071e3;
}

.practice-capsule-item-sub {
  font-size: 0.6875rem;
  color: #86868b;
  margin-top: 0.1rem;
  line-height: 1.3;
}

body.theme-dark .practice-capsule-btn {
  background: rgba(44, 44, 46, 0.92);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

body.theme-dark .practice-capsule-btn:hover {
  background: rgba(58, 58, 60, 0.94);
}

body.theme-dark .practice-capsule-dropdown--open .practice-capsule-btn {
  background: rgba(58, 58, 60, 0.98);
  border-color: rgba(90, 200, 250, 0.28);
  box-shadow:
    0 0 0 2px rgba(90, 200, 250, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.theme-dark .practice-capsule-label {
  color: var(--text-primary);
}

body.theme-dark .practice-capsule-arrow {
  color: #c7c7cc;
}

body.theme-dark .practice-capsule-menu {
  background: rgba(28, 28, 30, 0.98);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.42),
    0 6px 18px rgba(0, 0, 0, 0.22);
}

body.theme-dark .practice-capsule-item {
  color: var(--text-primary);
}

body.theme-dark .practice-capsule-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .practice-capsule-item--active {
  background: rgba(10, 132, 255, 0.16);
}

body.theme-dark .practice-capsule-item-title {
  color: var(--text-primary);
}

body.theme-dark .practice-capsule-item--active .practice-capsule-item-title {
  color: #8fd1ff;
}

body.theme-dark .practice-capsule-item-sub {
  color: var(--text-secondary);
}

body.theme-dark .practice-capsule-menu::-webkit-scrollbar {
  width: 8px;
}

body.theme-dark .practice-capsule-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

body.theme-dark .practice-capsule-menu::-webkit-scrollbar-track {
  background: transparent;
}

/* ── end capsule dropdown ── */

/* ── unified datetime input ── */
input[type="datetime-local"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}
/* ── end unified datetime input ── */

.practice-health-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #f2f2f7 100%);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.practice-health-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #86868b;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.practice-health-score {
  margin-top: 0.15rem;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.practice-radar-wrap {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
}

.practice-radar-svg {
  width: 100%;
  height: 100%;
}

.practice-radar-grid {
  fill: rgba(0, 113, 227, 0.04);
  stroke: rgba(0, 113, 227, 0.12);
  stroke-width: 1;
}

.practice-radar-spoke {
  stroke: rgba(0, 113, 227, 0.1);
  stroke-width: 1;
}

.practice-radar-label {
  font-size: 6.5px;
  fill: #636366;
}

.practice-radar-area {
  fill: rgba(0, 122, 255, 0.22);
  stroke: none;
  animation: practiceRadarFade 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.practice-radar-stroke {
  stroke: #007aff;
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
  animation: practiceRadarFade 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes practiceRadarFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.practice-coach-summary {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #3a3a3c;
  padding: 0.75rem 0.9rem;
  border-radius: 14px;
  background: rgba(142, 142, 147, 0.08);
}

.practice-insight-columns {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 560px) {
  .practice-insight-columns {
    grid-template-columns: 1fr 1fr;
  }
}

.practice-insight-title {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.practice-insight-title--pos {
  color: #34c759;
}

.practice-insight-title--warn {
  color: #ff9500;
}

.practice-insight-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.practice-list-card {
  border-radius: 14px;
  padding: 0.65rem 0.85rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #3a3a3c;
}

.practice-list-card--mint {
  background: rgba(52, 199, 89, 0.1);
}

.practice-list-card--warm {
  background: rgba(255, 149, 0, 0.1);
}

.practice-list-lead {
  font-weight: 600;
  color: var(--text-primary);
}

.practice-ability-rings {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.practice-ability-ring-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.5rem 0.65rem 0.65rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.practice-ring-svg {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
}

.practice-ring-bg {
  fill: none;
  stroke: rgba(142, 142, 147, 0.18);
  stroke-width: 4;
}

.practice-ring-fill {
  fill: none;
  stroke: #007aff;
  stroke-width: 4;
  stroke-linecap: round;
  animation: practiceRingFade 0.65s ease both;
}

@keyframes practiceRingFade {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}

.practice-ring-meta {
  min-width: 0;
}

.practice-ring-label {
  font-size: 0.6875rem;
  color: #86868b;
}

.practice-ring-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.practice-delta-pill {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.12rem 0.4rem;
  border-radius: 6px;
}

.practice-delta--up {
  background: rgba(52, 199, 89, 0.18);
  color: #248a3d;
}

.practice-delta--down {
  background: rgba(255, 59, 48, 0.12);
  color: #c93429;
}

.practice-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.practice-ability-tag {
  font-size: 0.6875rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 122, 255, 0.12);
  color: #0071e3;
  font-weight: 500;
}

.practice-ability-comment {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #3a3a3c;
  padding: 0.85rem;
  border-radius: 14px;
  background: rgba(142, 142, 147, 0.09);
}

#practice-score-panel.practice-score-enter {
  animation: practiceScoreSmoothReveal 360ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

@keyframes practiceScoreSmoothReveal {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== 在岗助手 · Apple HIG 生产力布局 ========== */
.assistant-cc-page {
  --assistant-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  display: flex;
  flex-direction: column;
  background-color: transparent;
  padding-bottom: 0.5rem;
}

.assistant-cc-page-header {
  margin-top: 64px;
  margin-bottom: 48px;
}

.assistant-cc-input-card {
  margin-top: 4px;
  margin-bottom: 20px;
}

.assistant-cc-icon-star {
  color: #007aff;
}

.assistant-cc-icon-shield {
  color: #ff9500;
}

.assistant-cc-glass {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: none;
  border-radius: 26px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  padding: 1.25rem 1.35rem;
}

@media (min-width: 640px) {
  .assistant-cc-glass {
    padding: 1.35rem 1.5rem;
  }
}

.assistant-cc-input-card.assistant-cc-glass {
  padding: 1.35rem 1.35rem 1.25rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
  transition:
    box-shadow 0.45s var(--assistant-ease),
    background-color 0.35s var(--assistant-ease),
    border-color 0.35s var(--assistant-ease);
}

.assistant-cc-input-card.assistant-cc-glass:focus-within {
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.06),
    0 6px 20px rgba(0, 122, 255, 0.07),
    0 0 0 1px rgba(0, 122, 255, 0.1);
  background: rgba(255, 255, 255, 0.97);
}

.assistant-cc-result-card.assistant-cc-glass {
  padding: 1.15rem 1.25rem 1.35rem;
  min-height: 280px;
}

.assistant-cc-result-card--reply.assistant-cc-glass {
  border-top-color: rgba(0, 122, 255, 0.22);
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 0 rgba(0, 122, 255, 0.18);
}

.assistant-spotlight-field {
  border: none;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.3s var(--assistant-ease);
}

.assistant-cc-input-card.assistant-cc-glass:focus-within .assistant-spotlight-field {
  box-shadow: 0 0 0 1px rgba(0, 122, 255, 0.12);
}

.assistant-spotlight-input {
  box-shadow: none;
  resize: none !important;
  max-height: 320px;
  background-color: rgba(242, 242, 247, 0.65) !important;
  border: none !important;
  border-radius: 22px;
  line-height: 1.55;
  transition:
    height 0.35s var(--assistant-ease),
    background-color 0.2s var(--assistant-ease);
}

.assistant-spotlight-input:focus {
  background-color: rgba(0, 0, 0, 0.04) !important;
}

.assistant-btn-primary {
  border: none;
  border-radius: 9999px;
  background: #007aff;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.55rem 1.35rem;
  cursor: pointer;
  transition:
    opacity 0.2s var(--assistant-ease),
    background-color 0.2s var(--assistant-ease),
    transform 0.18s var(--assistant-ease);
}

.assistant-btn-primary:hover:not(:disabled) {
  background: #0066dd;
}

.assistant-btn-primary:active:not(:disabled) {
  transform: scale(0.95);
}

.assistant-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.assistant-btn-secondary {
  border: none;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.05);
  color: #3a3a3c;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition:
    color 0.2s var(--assistant-ease),
    background-color 0.25s var(--assistant-ease);
}

.assistant-btn-secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-primary);
}

.assistant-btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.assistant-cc-title-icon-wrap {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.assistant-cc-title-icon {
  width: 20px;
  height: 20px;
  display: block;
}

.assistant-copy-btn {
  opacity: 0.38;
}

.assistant-copy-btn-trans {
  transition:
    opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
    background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.assistant-copy-btn:hover {
  opacity: 0.85;
}

.assistant-copy-btn--done {
  opacity: 1;
  color: #34c759;
}

@keyframes assistant-cc-panel-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.assistant-cc-panel--enter {
  animation: assistant-cc-panel-enter 0.4s var(--assistant-ease) forwards;
}

.assistant-cc-results-grid {
  align-items: stretch;
}

@media (prefers-reduced-motion: reduce) {
  .assistant-cc-panel--enter {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .assistant-btn-primary:active:not(:disabled) {
    transform: none;
  }
}

.assistant-cc-empty {
  text-align: center;
  padding: 2rem 1rem 2.25rem;
}

.assistant-cc-empty-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #c7c7cc;
}

.assistant-cc-empty-desc {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.65;
  color: #d1d1d6;
}

.assistant-cc-reply-main {
  padding: 0.85rem 1rem;
  border-radius: 18px;
  line-height: 1.6;
  background: rgba(0, 0, 0, 0.035);
}

.assistant-cc-subtle-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #aeaeb2;
}

.assistant-cc-chip-row {
  align-items: center;
}

.assistant-cc-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

.assistant-cc-chip--info {
  background: rgba(0, 122, 255, 0.1);
  color: #0071e3;
}

.assistant-cc-chip--risk {
  background: rgba(255, 149, 0, 0.14);
  color: #c65a00;
}

.assistant-cc-chip--neutral {
  background: rgba(142, 142, 147, 0.14);
  color: #48484a;
}

/* ========== 一句话查询 · 顶栏搜索（卡片外） ========== */
.quick-query-bar-outer {
  width: 100%;
}

.quick-query-bar-heading {
  margin-bottom: 0.75rem;
}

.quick-query-bar-eyebrow {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8e8e93;
}

.quick-query-bar-sub {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: #6e6e73;
}

.quick-query-bar-shell {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.65rem 0.85rem;
  padding: 0.5rem 0.65rem 0.5rem 0.75rem;
  border-radius: 16px;
  background: linear-gradient(145deg, #f4f6fb 0%, #ffffff 42%, #f8f9fc 100%);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 24px rgba(15, 23, 42, 0.06);
}

@media (min-width: 640px) {
  .quick-query-bar-shell {
    flex-wrap: nowrap;
    align-items: center;
    padding: 0.55rem 0.75rem 0.55rem 0.9rem;
  }
}

.quick-query-bar-field {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 0.75rem 0 0.85rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(0, 113, 227, 0.14);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.quick-query-bar-field:focus-within {
  border-color: rgba(0, 113, 227, 0.45);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.12);
}

.quick-query-bar-icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  color: #0071e3;
  opacity: 0.88;
}

.quick-query-bar-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--text-primary);
  outline: none;
}

.quick-query-bar-input::placeholder {
  color: #aeaeb2;
}

.quick-query-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.quick-query-bar-btn {
  border: none;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    opacity 0.15s ease,
    box-shadow 0.15s ease;
  white-space: nowrap;
}

.quick-query-bar-btn-primary {
  color: #ffffff;
  background: linear-gradient(180deg, #0a84ff 0%, #0071e3 100%);
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.28);
}

.quick-query-bar-btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #1a8fff 0%, #0077ed 100%);
  transform: translateY(-1px);
}

.quick-query-bar-btn-secondary {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.quick-query-bar-btn-secondary:hover:not(:disabled) {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
}

.quick-query-bar-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.quick-query-bar-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.quick-query-bar-banners {
  margin-top: 0.75rem;
}

/* ========== 一句话查询 · iOS HIG 胶囊搜索与建议标签 ========== */
.quick-query-ios-page {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

.quick-query-ios-page .quick-query-ios-inner {
  line-height: 1.65;
}

/* 一句话查询：首屏垂直居中（与侧栏+主区内边距大致对齐） */
.qq-layout--hero {
  box-sizing: border-box;
}

/* 一句话查询：发送后聊天式布局 — 结果区滚动，输入条贴底 */
.qq-layout--chat {
  box-sizing: border-box;
  height: calc(100dvh - 9rem);
  min-height: 0;
  max-height: calc(100dvh - 9rem);
}

.qq-page-header--hero {
  margin-bottom: 2rem;
  padding-top: 0.25rem;
}

.qq-page-header--hero .app-page-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.35;
}

.qq-page-header--tight {
  margin-bottom: 1rem;
}

.qq-page-header--tight .app-page-title {
  line-height: 1.4;
}

.qq-ios-section {
  padding-top: 0.25rem;
}

.qq-ios-section--post {
  padding-top: 0;
}

.qq-ios-subtitle {
  margin: 0 0 2.25rem;
  max-width: 22rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.7;
  color: #86868b;
}

.qq-pill-shell {
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.qq-pill-shell:focus-within {
  box-shadow:
    0 10px 34px rgba(0, 0, 0, 0.055),
    0 0 0 1px rgba(0, 122, 255, 0.11);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .qq-pill-shell {
    background: #ffffff;
  }
}

.qq-pill-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 52px;
  padding: 0.35rem 0.4rem 0.35rem 1.125rem;
}

.qq-pill-search-icon {
  flex-shrink: 0;
  color: #8e8e93;
}

.qq-pill-input {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* 单行车：占位符略下移，在胶囊高度内更居中 */
.qq-pill-row > input.qq-pill-input {
  min-height: 2.75rem;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.45rem;
  box-sizing: border-box;
}

.qq-pill-send {
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.22);
}

.qq-pill-send:hover:not(:disabled) {
  filter: brightness(1.06);
}

.qq-pill-send:active:not(:disabled) {
  transform: scale(0.97);
}

/* 在岗助手：与一句话查询共用胶囊，多行输入与工具按钮贴底对齐 */
.qq-pill-row--assistant {
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

/* 搜索图标随整行高度垂直居中（输入多行时不贴底） */
.qq-pill-row--assistant > .qq-pill-search-icon {
  align-self: center;
}

.oa-pill-ta {
  min-height: 2.75rem;
  max-height: 200px;
  resize: none;
  line-height: 1.5;
  padding-top: 0.5rem;
  padding-bottom: 0.42rem;
  font-family: inherit;
  box-sizing: border-box;
}

.qq-intent-card {
  border: none;
}

/* 一句话查询：查询解析详情折叠/展开过渡动画 */
.qq-detail-body {
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.25s ease;
}
.qq-detail-arrow {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.qq-answer-bubble {
  max-width: min(92%, 46rem) !important;
  padding: 18px 18px 16px;
  border-radius: 24px 24px 24px 10px;
  border: 1px solid var(--ai-bubble-border);
  background: var(--ai-bubble-bg);
  box-shadow: var(--ai-bubble-shadow);
}

#content-area .app-chat-page {
  min-height: calc(100dvh - 6rem);
}

#content-area .app-chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - 4rem);
  min-height: 520px;
  max-height: calc(100dvh - 4rem);
}

#content-area .app-chat-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

#content-area .app-chat-composer {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  margin-top: auto;
}

@media (max-width: 767px) {
  #content-area .app-chat-page {
    min-height: calc(100dvh - 4.5rem);
  }

  #content-area .app-chat-shell {
    height: calc(100dvh - 4rem);
    min-height: 420px;
    max-height: calc(100dvh - 4rem);
  }
}

.qq-answer-card {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.qq-answer-topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.qq-answer-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 30px;
  padding: 0 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.qq-answer-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.92;
}

.qq-answer-status--success {
  background: rgba(15, 118, 110, 0.11);
  color: #0f766e;
}

.qq-answer-status--empty {
  background: rgba(180, 83, 9, 0.12);
  color: #b45309;
}

.qq-answer-status--unsupported {
  background: rgba(79, 70, 229, 0.1);
  color: #4f46e5;
}

.qq-answer-status--error {
  background: rgba(190, 24, 93, 0.1);
  color: #be185d;
}

.qq-answer-context {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.qq-answer-context-chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  padding: 0 0.8rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(120, 113, 108, 0.11);
  color: #57534e;
  font-size: 0.75rem;
  font-weight: 500;
}

.qq-answer-main {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qq-answer-reply {
  margin: 0;
  font-size: 1rem;
  line-height: 1.9;
  color: #1f2937;
  white-space: pre-wrap;
}

.qq-answer-headline {
  margin: 0;
  font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #1f2937;
}

.qq-answer-support {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: #57534e;
}

.qq-answer-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.qq-answer-fact {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 0.82rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(214, 211, 209, 0.9);
  color: #44403c;
  font-size: 0.78rem;
  font-weight: 600;
}

.qq-answer-action {
  padding: 0.92rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(214, 211, 209, 0.95);
}

.qq-answer-action-label {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #78716c;
}

.qq-answer-action-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.62;
  color: #292524;
}

.qq-answer-section {
  padding-top: 0.95rem;
  border-top: 1px solid rgba(214, 211, 209, 0.7);
}

.qq-answer-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.45rem 0.9rem;
  margin-bottom: 0.7rem;
}

.qq-answer-section-title {
  margin: 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: #292524;
}

.qq-answer-section-note {
  font-size: 0.76rem;
  color: #78716c;
}

.qq-answer-template-grid {
  display: grid;
  gap: 0.6rem;
}

.qq-answer-template-btn {
  width: 100%;
  min-height: 44px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(191, 219, 254, 0.9);
  border-radius: 1rem;
  background: rgba(239, 246, 255, 0.88);
  color: #1d4ed8;
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.5;
  transition:
    transform 0.18s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.qq-answer-template-btn:hover {
  background: rgba(219, 234, 254, 0.95);
  border-color: rgba(96, 165, 250, 0.95);
}

.qq-answer-template-btn:active {
  transform: scale(0.985);
}

.qq-answer-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #2563eb;
  font-size: 0.88rem;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.qq-answer-link-btn:hover {
  opacity: 0.72;
}

.qq-answer-link-btn--subtle {
  color: #2563eb;
}

.qq-answer-collapse {
  transition:
    max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease;
}

.qq-answer-detail-card {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(214, 211, 209, 0.85);
}

.qq-biz-table {
  border: 1px solid rgba(214, 211, 209, 0.9);
  background: rgba(250, 250, 249, 0.96);
}

.qq-biz-table__body {
  background: rgba(255, 255, 255, 0.92);
}

.qq-biz-table__head-cell {
  color: #292524;
  background: rgba(245, 245, 244, 0.96);
}

.qq-biz-table__body-cell {
  color: #1f2937;
}

.qq-biz-table__row:last-child {
  border-bottom: none;
}

.qq-biz-table__row:hover {
  background: rgba(250, 250, 249, 0.92);
}

.qq-biz-table__hint {
  color: #78716c;
}

@media (max-width: 640px) {
  .qq-answer-bubble {
    max-width: 100% !important;
    padding: 16px 15px 15px;
  }

  .qq-answer-support,
  .qq-answer-action-text {
    font-size: 0.9rem;
  }

  .qq-answer-section-head {
    align-items: flex-start;
  }
}

/* 在岗助手：#content-area 作用域 + !important，避免 Tailwind CDN 后注入覆盖；修改样式时请同步 bump index.html 中 styles.css 的 ?v= */
#content-area .assistant-cc-page button.assistant-btn-secondary {
  background-color: rgba(0, 0, 0, 0.06) !important;
  color: #3a3a3c !important;
  border: none !important;
}

#content-area .assistant-cc-page button.assistant-btn-secondary:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.09) !important;
  color: var(--text-primary) !important;
}

#content-area .assistant-cc-page .assistant-spotlight-field {
  border: none !important;
}

#content-area .assistant-cc-page .assistant-spotlight-input {
  background-color: rgba(0, 0, 0, 0.025) !important;
}

#content-area .assistant-cc-page .assistant-spotlight-input:focus {
  background-color: rgba(0, 0, 0, 0.035) !important;
}

#content-area .assistant-cc-page .assistant-cc-glass {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04) !important;
}

#content-area .assistant-cc-page .assistant-cc-page-header {
  margin-top: 64px !important;
}

/* ========== 人员管理 · 员工角色弹窗 ========== */

/* 角色列表行 */
.pr-role-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.15s ease;
  animation: pr-row-enter 0.3s ease both;
}

.pr-role-row:last-child {
  border-bottom: none;
}

/* 列表行入场动画 */
@keyframes pr-row-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.pr-role-row:hover {
  background-color: #f9fafb;
}

.pr-role-row-main {
  min-width: 0;
  flex: 1;
}

.pr-role-row-line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  line-height: 1.35;
}

.pr-role-row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 0.15s ease;
}

.pr-role-row-meta {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.35;
  transition: color 0.15s ease;
}

.pr-role-row-meta-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #9ca3af;
}

.pr-role-row-desc {
  margin-top: 0.25rem;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.pr-role-row-count {
  margin-top: 0.25rem;
  font-size: 13px;
  color: #9ca3af;
  transition: color 0.15s ease;
}

.pr-role-row--disabled {
  opacity: 0.55;
}

.pr-role-row--disabled .pr-role-row-name {
  color: #9ca3af;
}

.pr-role-status-off {
  color: #ef4444;
  font-size: 13px;
  animation: pr-fade-in 0.2s ease;
}

/* 行内操作按钮 */
.pr-role-row-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
}

.pr-role-link {
  margin: 0;
  padding: 0.25rem 0.5rem;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: #3b82f6;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  opacity: 0.8;
}

.pr-role-link:hover {
  opacity: 1;
  background: #eff6ff;
}

.pr-role-link:active {
  transform: scale(0.95);
}

.pr-role-link--danger {
  color: #ef4444;
}

.pr-role-link--danger:hover {
  opacity: 1;
  background: #fef2f2;
}

.pr-role-link--danger:active {
  transform: scale(0.95);
}

.pr-role-badge {
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
}

/* 列表空态 / 错误提示 */
.pr-list-msg {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  animation: pr-fade-in 0.3s ease;
}

.pr-list-msg--error {
  color: #ef4444;
}

/* 编辑器展开/收起动画 */
#personnel-roles-editor-wrap {
  animation: pr-editor-enter 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  overflow: hidden;
}

#personnel-roles-editor-wrap:not(.is-open) {
  display: none;
}

@keyframes pr-editor-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 全局淡入动画 */
@keyframes pr-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 骨架屏加载动画 */
.pr-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: pr-skeleton-shimmer 1.5s infinite;
  border-radius: 4px;
}

@keyframes pr-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 开关切换时的脉冲效果 */
.pr-role-switch--toggling {
  animation: pr-switch-pulse 0.3s ease;
}

@keyframes pr-switch-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.on-duty-assistant-shell {
  background: transparent;
}

.on-duty-assistant-shell,
.oj-assistant-page--sales {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Text',
    'Helvetica Neue',
    'PingFang SC',
    'Hiragino Sans GB',
    'Microsoft YaHei',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

.oj-assistant-canvas {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.oj-assistant-large-title {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.oj-assistant-sales-header {
  margin-bottom: 2.25rem;
  text-align: left;
}

.oj-assistant-sales-sub {
  margin: 0.85rem 0 0;
  max-width: 40rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  font-weight: 400;
  color: #86868b;
}

.oj-assistant-split {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1024px) {
  .oj-assistant-split {
    grid-template-columns: 1fr minmax(17rem, 22rem);
    gap: 2rem;
  }
}

.oj-assistant-input-section {
  margin-bottom: 1.5rem;
}

.oj-assistant-tags-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0 1rem;
  margin: 0 -0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.oj-assistant-tags-scroll::-webkit-scrollbar {
  display: none;
}

.oj-assistant-quick-tag {
  flex-shrink: 0;
  border: none;
  margin: 0;
  cursor: pointer;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: #3a3a3c;
  background: #e5e5ea;
  box-shadow: none;
  transition:
    transform 0.12s ease,
    opacity 0.12s ease,
    background 0.15s ease;
}

.oj-assistant-quick-tag:hover {
  background: #d9d9de;
  color: var(--text-primary);
}

.oj-assistant-quick-tag:active {
  opacity: 0.7;
  transform: scale(0.97);
}

.oj-assistant-glass-input-wrap {
  border-radius: 1.75rem;
  padding: 0.65rem 0.75rem 0.65rem 0.85rem;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .oj-assistant-glass-input-wrap {
    background: rgba(255, 255, 255, 0.96);
  }
}

.oj-assistant-imessage-bar {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  min-width: 0;
}

.oj-assistant-imessage-ta {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  max-height: 200px;
  resize: none;
  border: none;
  outline: none;
  box-shadow: none;
  border-radius: 1.375rem;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-primary);
  background: transparent;
  transition: opacity 0.12s ease;
}

.oj-assistant-imessage-ta::placeholder {
  color: rgba(60, 60, 67, 0.6);
}

.oj-assistant-imessage-ta:focus {
  outline: none;
}

.oj-assistant-imessage-trail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding-bottom: 0.15rem;
}

.oj-assistant-toolbar-svg {
  display: block;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--text-primary);
}

.oj-assistant-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.oj-assistant-icon-btn::-webkit-details-marker {
  display: none;
}

.oj-assistant-icon-btn:hover {
  background: transparent;
  color: var(--text-primary);
}

.oj-assistant-icon-btn:active {
  opacity: 0.7;
  transform: scale(0.95);
}

.oj-assistant-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 9999px;
  background: #007aff;
  color: #fff;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.oj-assistant-send-btn:hover:not(:disabled) {
  background: #007aff;
  color: #fff;
}

.oj-assistant-send-btn:active:not(:disabled) {
  opacity: 0.7;
  transform: scale(0.95);
}

.oj-assistant-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.oj-assistant-send-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  color: #fff;
}

.oj-assistant-phrases {
  position: relative;
}

.oj-assistant-phrases-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  min-width: 12rem;
  max-width: min(90vw, 18rem);
  padding: 0.4rem 0;
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:
    0 16px 40px -8px rgba(0, 0, 0, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  z-index: 40;
}

.oj-assistant-phrases-hint {
  padding: 0.35rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #8e8e93;
}

.oj-assistant-phrase-line {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.75rem;
  border: none;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-primary);
  cursor: pointer;
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.oj-assistant-phrase-line:hover {
  background: transparent;
  color: var(--text-primary);
}

.oj-assistant-phrase-line:active {
  opacity: 0.7;
}

.oj-assistant-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.oj-assistant-pill-btn {
  border: none;
  margin: 0;
  cursor: pointer;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  background: #f2f2f7;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.oj-assistant-pill-btn:hover:not(:disabled) {
  background: #f2f2f7;
  color: var(--text-primary);
}

.oj-assistant-pill-btn:active:not(:disabled) {
  opacity: 0.7;
  transform: scale(0.97);
}

.oj-assistant-pill-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.oj-assistant-zone-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8e8e93;
}

.oj-assistant-zone-eyebrow--side {
  color: #8e8e93;
}

.oj-assistant-reply-zone {
  margin-top: 0.5rem;
}

.oj-assistant-reply-scroll {
  min-height: 8rem;
}

.oj-assistant-memo {
  min-height: 10rem;
}

#content-area .oj-assistant-page--sales .assistant-cc-reply-main {
  background: #f2f2f7;
}

.oj-assistant-page--sales .demo-retry-btn:hover {
  background: #fff;
  color: #8a2f2b;
}

.oj-assistant-page--sales .demo-retry-btn:active {
  opacity: 0.7;
}

#content-area .oj-assistant-page--sales #assistant-copy-reply-btn.assistant-copy-btn--done {
  background: #f2f2f7;
  color: #34c759;
}

/* ===================== Dark Mode ===================== */
body.theme-dark {
  background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%);
  color: #f5f5f7;
}

body.theme-dark .bg-white,
body.theme-dark .rounded-2xl.bg-white,
body.theme-dark .rounded-\[22px\].bg-white {
  background-color: #2c2c2e !important;
  color: #f5f5f7;
}

body.theme-dark .text-\[\#1D1D1F\] {
  color: #f5f5f7 !important;
}

body.theme-dark .text-\[\#86868B\] {
  color: #98989d !important;
}

body.theme-dark .border-\[\#E5E5EA\] {
  border-color: #38383a !important;
}

body.theme-dark .border-\[\#E5E5EA\]\/80 {
  border-color: #38383a !important;
}

body.theme-dark .bg-\[\#F2F2F7\] {
  background-color: #1c1c1e !important;
}

body.theme-dark .bg-\[\#F2F2F7\]\/60 {
  background-color: #1c1c1e !important;
}

body.theme-dark .shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea,
body.theme-dark option {
  color: #f5f5f7 !important;
}

body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
  color: #636366 !important;
}

body.theme-dark .btn-primary {
  background: linear-gradient(135deg, #0a84ff 0%, #5ac8fa 100%);
}

body.theme-dark .pr-ios-toggle-pill {
  background: #39393d !important;
}

body.theme-dark .pr-ios-toggle-input:checked + .pr-ios-toggle-pill {
  background: #34c759 !important;
}

body.theme-dark .sidebar-glass {
  background: rgba(44, 44, 46, 0.85) !important;
  backdrop-filter: blur(20px);
}

body.theme-dark .workbench-ios .workbench-main-ios {
  background: linear-gradient(180deg, #111216 0%, #171a22 100%) !important;
}

body.theme-dark #content-area {
  background: transparent;
}

body.theme-dark #sidebar .sidebar-brand-row {
  border-color: rgba(255, 255, 255, 0.06) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ===================== Dark Mode · Extended ===================== */

/* ---------- CSS Variable Remapping ---------- */
body.theme-dark {
  --glass-bg: rgba(44,44,46,0.85);
  --glass-border: rgba(255,255,255,0.08);
  --sidebar-bg: #1c1c1e;
  --surface-primary: #2c2c2e;
  --surface-secondary: #1c1c1e;
  --surface-tertiary: #1c1c1e;
  --surface-glass: rgba(44,44,46,0.92);
  --text-primary: #f5f5f7;
  --text-secondary: #98989d;
  --text-tertiary: #636366;
  --border-primary: #38383a;
  --border-subtle: rgba(255,255,255,0.08);
  --fill-hover: rgba(255,255,255,0.06);
  --fill-active: rgba(255,255,255,0.1);
}

/* ---------- Extended Tailwind Bracket-Class Overrides ---------- */
body.theme-dark .text-\[\#1d1d1f\],
body.theme-dark .text-\[\#1D1d1F\],
body.theme-dark .text-\[\#1c1c1e\],
body.theme-dark .text-\[\#1C1C1E\] {
  color: #f5f5f7 !important;
}
body.theme-dark .text-\[\#86868b\],
body.theme-dark .text-\[\#8e8e93\],
body.theme-dark .text-\[\#8E8E93\] {
  color: #98989d !important;
}
body.theme-dark .text-\[\#6E6E73\],
body.theme-dark .text-\[\#6e6e73\] {
  color: #636366 !important;
}
body.theme-dark .text-\[\#48484A\] {
  color: #aeaeb2 !important;
}
body.theme-dark .text-\[\#515154\] {
  color: #aeaeb2 !important;
}
body.theme-dark .text-\[\#5F5F64\] {
  color: #98989d !important;
}
body.theme-dark .text-\[\#3A3A3C\] {
  color: #c7c7cc !important;
}
body.theme-dark .text-\[\#A1A1A6\] {
  color: #636366 !important;
}
body.theme-dark .text-\[\#111827\] {
  color: #f5f5f7 !important;
}
body.theme-dark .text-\[\#374151\] {
  color: #e5e5ea !important;
}
body.theme-dark .text-\[\#4b5563\],
body.theme-dark .text-\[\#4B5563\] {
  color: #aeaeb2 !important;
}
body.theme-dark .text-\[\#86909C\] {
  color: #8e8e93 !important;
}
body.theme-dark .text-\[\#1D2129\] {
  color: #f5f5f7 !important;
}
body.theme-dark .text-\[\#12304F\] {
  color: #dbeafe !important;
}
body.theme-dark .text-\[\#7B92AE\],
body.theme-dark .text-\[\#6F87A3\] {
  color: #93c5fd !important;
}
body.theme-dark .text-\[\#0B63CE\] {
  color: #60a5fa !important;
}
body.theme-dark .hover\:text-\[\#0051D5\]:hover,
body.theme-dark .hover\:text-\[\#12304F\]:hover {
  color: #93c5fd !important;
}
body.theme-dark .text-\[\#C9CDD4\] {
  color: #636366 !important;
}
body.theme-dark .text-\[\#C7C7CC\] {
  color: #636366 !important;
}
body.theme-dark .text-\[\#3c3c43\],
body.theme-dark .text-\[\#888\],
body.theme-dark .text-\[\#ccc\],
body.theme-dark .text-\[\#d1d1d6\] {
  color: #a1a1aa !important;
}
body.theme-dark .text-gray-400 {
  color: #636366 !important;
}
body.theme-dark .text-gray-500 {
  color: #8e8e93 !important;
}
body.theme-dark .text-gray-600 {
  color: #aeaeb2 !important;
}
body.theme-dark .text-gray-700 {
  color: #c7c7cc !important;
}
body.theme-dark .text-gray-800 {
  color: #f5f5f7 !important;
}
body.theme-dark .text-gray-900 {
  color: #f5f5f7 !important;
}
body.theme-dark .text-slate-900,
body.theme-dark .text-slate-800 {
  color: #f5f5f7 !important;
}
body.theme-dark .text-slate-700 {
  color: #d1d1d6 !important;
}
body.theme-dark .text-slate-600 {
  color: #c7c7cc !important;
}
body.theme-dark .text-slate-500 {
  color: #98989d !important;
}
body.theme-dark .text-slate-400 {
  color: #8e8e93 !important;
}
body.theme-dark .text-slate-300 {
  color: #d1d5db !important;
}
body.theme-dark .placeholder\:text-slate-400::placeholder {
  color: #636366 !important;
}
body.theme-dark .bg-\[\#f5f5f7\],
body.theme-dark .bg-\[\#F5F5F7\] {
  background-color: #1c1c1e !important;
}
body.theme-dark .bg-\[\#f2f2f7\] {
  background-color: #1c1c1e !important;
}
body.theme-dark .bg-\[\#f8fafd\] {
  background-color: #2c2c2e !important;
}
body.theme-dark .bg-\[\#F8FAFC\],
body.theme-dark .bg-\[\#f7f7f8\],
body.theme-dark .bg-\[\#F7F7F8\],
body.theme-dark .bg-\[\#fafafa\],
body.theme-dark .bg-\[\#FAFAFA\],
body.theme-dark .bg-\[\#ededf0\] {
  background-color: #2c2c2e !important;
}
body.theme-dark .bg-\[\#f9f9fb\] {
  background-color: #1c1c1e !important;
}
body.theme-dark .bg-\[\#E5E5EA\],
body.theme-dark .bg-\[\#F2F3F5\],
body.theme-dark .bg-\[\#C6C6C8\] {
  background-color: #3a3a3c !important;
}
body.theme-dark .bg-\[\#FFF9F1\] {
  background-color: rgba(255,149,0,0.14) !important;
}
body.theme-dark .bg-\[\#EEF5FF\] {
  background-color: rgba(10,132,255,0.16) !important;
}
body.theme-dark .hover\:bg-\[\#DCEBFF\]:hover,
body.theme-dark .active\:bg-\[\#CFE3FF\]:active {
  background-color: rgba(10,132,255,0.22) !important;
}
body.theme-dark .bg-gray-50 {
  background-color: #1c1c1e !important;
}
body.theme-dark .bg-gray-100 {
  background-color: #2c2c2e !important;
}
body.theme-dark .bg-gray-200 {
  background-color: #3a3a3c !important;
}
body.theme-dark .bg-slate-50,
body.theme-dark .bg-slate-100,
body.theme-dark .bg-white\/78,
body.theme-dark .bg-white\/92 {
  background-color: #1c1c1e !important;
}
body.theme-dark .bg-slate-200,
body.theme-dark .bg-slate-300 {
  background-color: #2c2c2e !important;
}
body.theme-dark .border-gray-100,
body.theme-dark .border-gray-200 {
  border-color: #38383a !important;
}
body.theme-dark .border-slate-100,
body.theme-dark .border-slate-200,
body.theme-dark .border-slate-300,
body.theme-dark .border-slate-400 {
  border-color: #48484a !important;
}
body.theme-dark .border-\[\#d2d2d7\] {
  border-color: #48484a !important;
}
body.theme-dark .border-\[\#d1d1d6\],
body.theme-dark .border-\[\#c7c7cc\],
body.theme-dark .border-\[\#e5e5ea\],
body.theme-dark .border-\[\#f0f0f0\],
body.theme-dark .border-\[\#F2F3F5\] {
  border-color: #48484a !important;
}
body.theme-dark .border-\[\#E5E6EB\] {
  border-color: #38383a !important;
}
body.theme-dark .border-black\/\[0\.06\],
body.theme-dark .border-black\/\[0\.08\] {
  border-color: rgba(255,255,255,0.08) !important;
}
body.theme-dark .hover\:bg-gray-50:hover,
body.theme-dark .hover\:bg-gray-100:hover {
  background-color: rgba(255,255,255,0.06) !important;
}
body.theme-dark .hover\:bg-slate-50:hover,
body.theme-dark .hover\:bg-slate-100:hover {
  background-color: rgba(255,255,255,0.06) !important;
}
body.theme-dark .hover\:bg-blue-50:hover {
  background-color: rgba(0,122,255,0.1) !important;
}
body.theme-dark .hover\:text-slate-600:hover,
body.theme-dark .hover\:text-slate-800:hover {
  color: #f5f5f7 !important;
}
body.theme-dark .focus\:border-slate-300:focus,
body.theme-dark .focus\:border-slate-400:focus {
  border-color: #5ac8fa !important;
}
body.theme-dark .focus\:ring-slate-100:focus,
body.theme-dark .focus\:ring-slate-300:focus {
  --tw-ring-color: rgba(90, 200, 250, 0.18) !important;
}

/* ---------- Inline Style Fallback (legacy template strings) ---------- */
body.theme-dark [style*="color:#1d1d1f"],
body.theme-dark [style*="color: #1d1d1f"],
body.theme-dark [style*="color:#1D1D1F"],
body.theme-dark [style*="color: #1D1D1F"],
body.theme-dark [style*="color:#1c1c1e"],
body.theme-dark [style*="color: #1c1c1e"],
body.theme-dark [style*="color:#1C1C1E"],
body.theme-dark [style*="color: #1C1C1E"],
body.theme-dark [style*="color:#000"],
body.theme-dark [style*="color: #000"],
body.theme-dark [style*="color:#000000"],
body.theme-dark [style*="color: #000000"],
body.theme-dark [style*="color:black"],
body.theme-dark [style*="color: black"],
body.theme-dark [style*="color:#1D2129"],
body.theme-dark [style*="color: #1D2129"],
body.theme-dark [style*="color:#111827"],
body.theme-dark [style*="color: #111827"] {
  color: #f5f5f7 !important;
}
body.theme-dark [style*="color:#3a3a3c"],
body.theme-dark [style*="color: #3a3a3c"],
body.theme-dark [style*="color:#3A3A3C"],
body.theme-dark [style*="color: #3A3A3C"],
body.theme-dark [style*="color:#424245"],
body.theme-dark [style*="color: #424245"],
body.theme-dark [style*="color:#666"],
body.theme-dark [style*="color: #666"],
body.theme-dark [style*="color:#6e6e73"],
body.theme-dark [style*="color: #6e6e73"],
body.theme-dark [style*="color:#6E6E73"],
body.theme-dark [style*="color: #6E6E73"],
body.theme-dark [style*="color:#888"],
body.theme-dark [style*="color: #888"],
body.theme-dark [style*="color:#9E9E9E"],
body.theme-dark [style*="color: #9E9E9E"],
body.theme-dark [style*="color:#9e9e9e"] {
  color: #a1a1aa !important;
}
body.theme-dark [style*="color:#86868B"],
body.theme-dark [style*="color: #86868B"],
body.theme-dark [style*="color:#86868b"],
body.theme-dark [style*="color: #86868b"],
body.theme-dark [style*="color:#98989d"],
body.theme-dark [style*="color: #98989d"] {
  color: #c7c7cc !important;
}
body.theme-dark [style*="background:#fff"],
body.theme-dark [style*="background: #fff"],
body.theme-dark [style*="background:#ffffff"],
body.theme-dark [style*="background: #ffffff"],
body.theme-dark [style*="background:#fafafa"],
body.theme-dark [style*="background: #fafafa"],
body.theme-dark [style*="background:#FAFAFA"],
body.theme-dark [style*="background: #FAFAFA"],
body.theme-dark [style*="background:#f7f7f8"],
body.theme-dark [style*="background: #f7f7f8"],
body.theme-dark [style*="background:#F7F7F8"],
body.theme-dark [style*="background: #F7F7F8"],
body.theme-dark [style*="background:#f5f5f7"],
body.theme-dark [style*="background: #f5f5f7"],
body.theme-dark [style*="background:#F5F5F7"],
body.theme-dark [style*="background: #F5F5F7"],
body.theme-dark [style*="background:#f2f2f7"],
body.theme-dark [style*="background: #f2f2f7"],
body.theme-dark [style*="background-color:#fff"],
body.theme-dark [style*="background-color: #fff"],
body.theme-dark [style*="background-color:#ffffff"],
body.theme-dark [style*="background-color: #ffffff"],
body.theme-dark [style*="background-color:#f5f5f7"],
body.theme-dark [style*="background-color: #f5f5f7"],
body.theme-dark [style*="background-color:#f2f2f7"],
body.theme-dark [style*="background-color: #f2f2f7"],
body.theme-dark [style*="background:#F2F2F7"] {
  background: #2c2c2e !important;
}
body.theme-dark [style*="border:1px solid #f0f0f0"],
body.theme-dark [style*="border: 1px solid #f0f0f0"],
body.theme-dark [style*="border:1px solid #F0F0F0"],
body.theme-dark [style*="border: 1px solid #F0F0F0"],
body.theme-dark [style*="border:1px solid #e5e5ea"],
body.theme-dark [style*="border: 1px solid #e5e5ea"],
body.theme-dark [style*="border:1px solid #E5E5EA"] {
  border-color: #48484a !important;
}
body.theme-dark [style*="background:none;color:#1D1D1F"],
body.theme-dark [style*="background:none;color: #1D1D1F"],
body.theme-dark [style*="background:none;color:#1d1d1f"],
body.theme-dark [style*="background:none;color: #1d1d1f"] {
  color: #93c5fd !important;
}

/* ---------- Sidebar Navigation ---------- */
body.theme-dark .sidebar-nav-item,
body.theme-dark .sidebar-nav-item:not(.active) .sidebar-item-label {
  color: #98989d;
}
body.theme-dark .sidebar-nav-item:hover {
  background: rgba(255,255,255,0.06);
}
body.theme-dark .sidebar-nav-item:hover .sidebar-item-label {
  color: #f5f5f7;
}
body.theme-dark .sidebar-nav-item.active {
  background: rgba(255, 255, 255, 0.08);
  color: #0a84ff;
}
body.theme-dark .sidebar-nav-item.active .sidebar-item-label {
  color: #0a84ff;
}
body.theme-dark .sidebar-item-accent {
  background: #475569;
  box-shadow: none;
}
body.theme-dark .sidebar-nav-item.active .sidebar-item-accent {
  background: #38bdf8;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.16);
}
body.theme-dark .sidebar-nav-item.sidebar-nav-item--sub:not(.active),
body.theme-dark .sidebar-nav-item.sidebar-nav-item--sub:not(.active) .sidebar-item-label {
  color: #98989d;
}
body.theme-dark .sidebar-nav-item.sidebar-nav-item--sub:hover:not(.active),
body.theme-dark .sidebar-nav-item.sidebar-nav-item--sub:hover:not(.active) .sidebar-item-label {
  color: #c7c7cc;
}
body.theme-dark .sidebar-group-title {
  color: #f5f5f7;
}
body.theme-dark .sidebar-group-meta {
  color: #8b9bb0;
}
body.theme-dark .sidebar-group-count {
  background: rgba(51, 65, 85, 0.9);
  color: #cbd5e1;
}
body.theme-dark .sidebar-nav-zone-label {
  color: #64748b;
}
body.theme-dark .sidebar-nav-zone-divider {
  background: linear-gradient(90deg, rgba(71, 85, 105, 0) 0%, rgba(71, 85, 105, 0.92) 20%, rgba(71, 85, 105, 0.92) 80%, rgba(71, 85, 105, 0) 100%);
}
body.theme-dark .sidebar-accordion-toggle {
  color: #f5f5f7;
}
body.theme-dark .sidebar-accordion-toggle:hover .sidebar-accordion-toggle-track {
  background: rgba(255,255,255,0.06);
}
body.theme-dark .sidebar-accordion-group.sidebar-group-active .sidebar-accordion-toggle-track {
  background: rgba(255, 255, 255, 0.06);
}
body.theme-dark .sidebar-accordion-group.sidebar-group-active .sidebar-accordion-toggle:hover .sidebar-accordion-toggle-track {
  background: rgba(255,255,255,0.1);
}
body.theme-dark .sidebar-accordion-group.sidebar-group-active {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
body.theme-dark .sidebar-accordion-chevron {
  color: #636366;
}
body.theme-dark .sidebar-nav-overview {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(17, 24, 39, 0.94) 100%);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
body.theme-dark .sidebar-nav-overview-title {
  color: #f8fafc;
}
body.theme-dark .sidebar-nav-overview-desc {
  color: #94a3b8;
}
body.theme-dark #sidebar-menu .sidebar-accordion-group {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}
body.theme-dark .sidebar-profile-card:hover {
  background: rgba(255,255,255,0.06);
}
body.theme-dark #profile-widget-btn {
  background: transparent;
  border: 1px solid transparent;
}
body.theme-dark #profile-widget-btn:hover,
body.theme-dark #profile-widget-btn[aria-expanded="true"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.08);
}
body.theme-dark #profile-widget-name {
  color: #f5f5f7 !important;
}
body.theme-dark #profile-widget-sub {
  color: #98989d !important;
}
body.theme-dark #avatar-letter {
  box-shadow: 0 10px 24px rgba(10, 132, 255, 0.22);
}
body.theme-dark #profile-popover {
  background: rgba(28, 28, 30, 0.94) !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34), 0 6px 18px rgba(0, 0, 0, 0.22) !important;
}
body.theme-dark #profile-popover button {
  color: #e5e5ea !important;
}
body.theme-dark #profile-popover button svg {
  color: #a1a1aa !important;
}
body.theme-dark #profile-popover button:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #f5f5f7 !important;
}
body.theme-dark #profile-popover button:hover svg {
  color: #c7c7cc !important;
}
body.theme-dark .sidebar-collapse-btn {
  background: #48484a;
  box-shadow: none;
}
body.theme-dark .sidebar-collapse-btn:hover {
  background: #5a5a5e;
}
body.theme-dark .sidebar-collapse-btn:active {
  background: #3a3a3c;
}

/* ---------- iOS Sheet Modals ---------- */
body.theme-dark .ios-sheet-card {
  background: #2c2c2e;
  box-shadow: 0 -2px 20px rgba(0,0,0,0.4), 0 4px 40px rgba(0,0,0,0.3);
}
body.theme-dark .ios-sheet-overlay {
  background: rgba(0,0,0,0.55);
}
body.theme-dark .ios-sheet-overlay[data-align="center"] .ios-sheet-card {
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 2px 12px rgba(0,0,0,0.3);
}
body.theme-dark .ios-list-title {
  color: #f5f5f7;
}
body.theme-dark .ios-list-body {
  color: #98989d;
}

/* ---------- iOS Dropdown Panel ---------- */
body.theme-dark .ios-dropdown-panel {
  background: #2c2c2e;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
}
body.theme-dark .ios-dropdown-overlay {
  background: rgba(0,0,0,0.4);
}

/* ---------- Custom Scrollbar ---------- */
body.theme-dark ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
}

/* ---------- Login Page ---------- */
body.theme-dark .login-shell {
  background: linear-gradient(180deg, #1c1c1e 0%, #2c2c2e 100%);
}
body.theme-dark .login-shell input[type="text"],
body.theme-dark .login-shell input[type="password"] {
  background: rgba(255,255,255,0.06) !important;
  border-color: #38383a !important;
  color: #f5f5f7 !important;
}
body.theme-dark .login-shell .input-field {
  background: rgba(255,255,255,0.06);
  color: #f5f5f7;
}
body.theme-dark .login-shell .input-field::placeholder {
  color: #636366;
}
body.theme-dark .login-shell .input-field:focus {
  background: rgba(255,255,255,0.1);
}
body.theme-dark .login-shell .app-page-title {
  color: #f5f5f7;
}

/* ---------- Toast Notifications ---------- */
body.theme-dark .toast.success {
  background: rgba(20,60,30,0.85);
  color: #34d399;
  border-color: rgba(52,211,153,0.25);
}
body.theme-dark .toast.error {
  background: rgba(60,20,20,0.85);
  color: #f87171;
  border-color: rgba(248,113,113,0.25);
}

/* ---------- Chat Bubbles ---------- */
body.theme-dark .chat-bubble-ai {
  background: var(--ai-bubble-bg);
  color: var(--ai-bubble-text);
}
body.theme-dark .chat-bubble-ai.exam-paper-bubble .assistant-md h4 {
  color: #f5f5f7;
  border-bottom-color: #48484a;
}
body.theme-dark .typing-dot {
  background: #636366;
}

/* ---------- Demo Mode UI ---------- */
body.theme-dark .demo-empty-state {
  border-color: #38383a;
  background: #1c1c1e;
}
body.theme-dark .demo-empty-state-title {
  color: #98989d;
}
body.theme-dark .demo-empty-state-text {
  color: #636366;
}
body.theme-dark .demo-banner-loading {
  border-color: rgba(0,122,255,0.25);
  background: rgba(0,122,255,0.08);
  color: #5ac8fa;
}
body.theme-dark .demo-banner-error {
  border-color: rgba(248,113,113,0.25);
  background: rgba(248,113,113,0.08);
  color: #f87171;
}
body.theme-dark .demo-spinner {
  border-color: rgba(90,200,250,0.22);
  border-top-color: #5ac8fa;
}
body.theme-dark .mode-badge-auto {
  color: #5ac8fa;
  background: rgba(0,122,255,0.12);
  border-color: rgba(0,122,255,0.25);
}
body.theme-dark .mode-badge-real {
  color: #34d399;
  background: rgba(52,211,153,0.12);
  border-color: rgba(52,211,153,0.25);
}
body.theme-dark .mode-badge-mock {
  color: #f87171;
  background: rgba(248,113,113,0.12);
  border-color: rgba(248,113,113,0.25);
}
body.theme-dark .mode-switcher-title {
  color: #98989d;
}
body.theme-dark .mode-switcher-actions {
  border-color: #38383a;
  background: #2c2c2e;
}
body.theme-dark .mode-switcher-btn {
  color: #98989d;
}
body.theme-dark .mode-switcher-btn:hover {
  background: rgba(255,255,255,0.06);
  color: #f5f5f7;
}
body.theme-dark .mode-switcher-btn-active {
  background: #0a84ff;
  color: #ffffff;
}
body.theme-dark .demo-card {
  box-shadow: 0 10px 28px -22px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.3);
}
body.theme-dark .demo-secondary-btn {
  border-color: #48484a;
  background: #3a3a3c;
  color: #f5f5f7;
}
body.theme-dark .demo-secondary-btn:hover {
  border-color: #5a5a5e;
  background: #48484a;
}

/* ---------- Audit Trail Cards & Card Hover ---------- */
body.theme-dark .audit-trail-row:hover {
  background-color: rgba(255,255,255,0.06);
}
body.theme-dark .audit-trail-row:active {
  background-color: rgba(255,255,255,0.08);
}
body.theme-dark .ui-card-interactive:hover,
body.theme-dark .ui-card-lift:hover,
body.theme-dark .audit-trail-card:hover {
  border-color: rgba(255,255,255,0.1);
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.4), 0 8px 18px -12px rgba(0,0,0,0.3);
}

/* ---------- Practice / Coaching Page ---------- */
body.theme-dark .glass-practice,
body.theme-dark .practice-glass-panel {
  background: rgba(44,44,46,0.7);
  box-shadow: 0 10px 40px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.05) inset;
}
body.theme-dark .practice-hero-desc {
  color: #98989d;
}
body.theme-dark .practice-toolbar-sidebar-btn {
  color: #f5f5f7;
}
body.theme-dark .practice-toolbar-sidebar-btn:hover {
  background: rgba(255,255,255,0.06);
}
body.theme-dark .practice-toolbar-more-summary {
  color: #98989d;
}
body.theme-dark .practice-toolbar-more-summary:hover {
  background: rgba(255,255,255,0.06);
  color: #f5f5f7;
}
body.theme-dark .practice-toolbar-more-panel {
  background: rgba(44,44,46,0.96);
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05) inset;
}
body.theme-dark .practice-toolbar-more-item {
  color: #f5f5f7;
}
body.theme-dark .practice-toolbar-more-item:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
}
body.theme-dark .practice-side-rail-head {
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-dark .practice-side-rail-unified {
  color: #8e8e93;
}
body.theme-dark .practice-chat-empty {
  color: #98989d;
}
body.theme-dark .practice-chat-empty-title {
  color: #aeaeb2;
}
body.theme-dark .practice-bubble--ai {
  background: var(--ai-bubble-bg);
  color: var(--ai-bubble-text);
}
body.theme-dark .practice-bubble--ai .practice-bubble-text {
  color: var(--ai-bubble-text);
}
body.theme-dark .practice-bubble--hint {
  background: #2c2c2e;
  color: #98989d;
}
body.theme-dark .practice-compose-field {
  background: #1c1c1e;
  border-color: rgba(255,255,255,0.1);
}
body.theme-dark .practice-compose-input {
  color: #f5f5f7;
}
body.theme-dark .practice-compose-input::placeholder {
  color: #636366;
}
body.theme-dark .practice-compose-pill:focus-within {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 6px 24px rgba(0,0,0,0.2);
}
body.theme-dark .practice-compose-field:focus-within {
  border-color: rgba(0,122,255,0.5);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.25), 0 2px 8px rgba(0,0,0,0.15);
}

/* ---------- Growth Plan Page ---------- */
body.theme-dark .growth-plan-page {
  --growth-text: #f5f5f7;
  --growth-label: #98989d;
}
body.theme-dark .growth-plan-page--split {
  background: #1c1c1e;
}
body.theme-dark .growth-plan-page--split .app-page-title {
  color: #f5f5f7;
}
body.theme-dark .growth-plan-page--split .growth-plan-subtitle {
  color: #98989d;
}
body.theme-dark .growth-plan-page--split .growth-field-label {
  color: #f5f5f7;
}
body.theme-dark .growth-plan-page--split .growth-plan-title {
  color: #f5f5f7;
}
body.theme-dark .growth-ios-card {
  background: #2c2c2e;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
body.theme-dark .growth-ios-card__title {
  color: #f5f5f7;
}
body.theme-dark .growth-field-row,
body.theme-dark .growth-field-row--flush {
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-dark .growth-textarea-inset {
  color: #f5f5f7;
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-dark .growth-input-ios {
  background: rgba(255,255,255,0.06);
  color: #f5f5f7;
}
body.theme-dark .growth-input-ios::placeholder,
body.theme-dark .growth-ios-card .growth-textarea-inset::placeholder,
body.theme-dark .growth-plan-page--split .growth-input-ios::placeholder,
body.theme-dark .growth-plan-page--split .growth-textarea-inset::placeholder {
  color: #636366;
}
body.theme-dark .growth-input-ios:focus {
  background: rgba(255,255,255,0.1);
  border-color: transparent;
  border-bottom-color: #0a84ff;
}
body.theme-dark .growth-textarea-frost {
  color: #f5f5f7;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.1);
}
body.theme-dark .growth-textarea-frost::placeholder {
  color: #636366;
}
body.theme-dark .growth-textarea-frost:focus {
  border-color: rgba(0,122,255,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgba(0,122,255,0.25);
}
body.theme-dark .growth-result-panel {
  background: #2c2c2e;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
body.theme-dark .growth-result-panel__head {
  border-bottom-color: rgba(255,255,255,0.08);
}
body.theme-dark .growth-result-panel__title {
  color: #f5f5f7;
}
body.theme-dark .growth-result-empty__text {
  color: #636366;
}
body.theme-dark .growth-inset-platter {
  background: #2c2c2e;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2), 0 8px 28px rgba(0,0,0,0.15);
}
body.theme-dark .growth-focus-chip {
  background: #3a3a3c;
  color: #c7c7cc;
}
body.theme-dark .growth-draft-link {
  color: #98989d;
}
body.theme-dark .growth-draft-link:hover {
  color: #c7c7cc;
}
body.theme-dark .growth-draft-btn-secondary {
  color: #98989d;
  background: rgba(255,255,255,0.06);
}
body.theme-dark .growth-draft-btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}
body.theme-dark .growth-plan-loading-strip {
  background: rgba(0,122,255,0.1);
  color: #5ac8fa;
}
body.theme-dark .growth-identity-card {
  background: linear-gradient(165deg, rgba(255,255,255,0.04) 0%, rgba(0,122,255,0.08) 100%);
}

/* ---------- Growth Plan iOS Minimal · Dark ---------- */
body.theme-dark .gp-header__desc { color: #9ca3af; }
body.theme-dark .gp-card { background: #1c1c1e; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
body.theme-dark .gp-card__title { color: #f5f5f7; }
body.theme-dark .gp-field { border-bottom-color: rgba(255,255,255,0.08); }
body.theme-dark .gp-field__label { color: #f5f5f7; }
body.theme-dark .gp-field__input { color: #f5f5f7; }
body.theme-dark .gp-field__input::placeholder { color: #48484a; }
body.theme-dark .gp-field__input:focus { color: #0a84ff; }
body.theme-dark .gp-field__input--locked,
body.theme-dark .gp-field__input--locked:focus { color: #98989d; }
body.theme-dark .gp-field__hint { color: #98989d; }
body.theme-dark .gp-section-head__title,
body.theme-dark .gp-identity-card__value,
body.theme-dark .gp-editor-block__title,
body.theme-dark .gp-detail-copy { color: #f5f5f7; }
body.theme-dark .gp-section-head__desc,
body.theme-dark .gp-identity-card__label,
body.theme-dark .gp-identity-card__hint,
body.theme-dark .gp-editor-block__desc,
body.theme-dark .gp-action-panel__hint { color: #98989d; }
body.theme-dark .gp-identity-card,
body.theme-dark .gp-editor-block { background: #232326; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04); }
body.theme-dark .gp-textarea { color: #f5f5f7; }
body.theme-dark .gp-textarea::placeholder { color: #48484a; }
body.theme-dark .gp-btn { background: #0a84ff; }
body.theme-dark .gp-link { color: #98989d; }
body.theme-dark .gp-link:hover { color: #c7c7cc; }
body.theme-dark .gp-summary__label { color: #98989d; }
body.theme-dark .gp-summary__value { color: #f5f5f7; }
body.theme-dark .gp-summary__row { border-top-color: rgba(255,255,255,0.06); }
body.theme-dark .gp-result { color: #f5f5f7; }
body.theme-dark .gp-result__id { color: #98989d; }
body.theme-dark .gp-result__label { color: #98989d; }
body.theme-dark .gp-result__item { border-bottom-color: rgba(255,255,255,0.06); }
body.theme-dark .gp-course-item__title { color: #f5f5f7; }
body.theme-dark .gp-course-item__code { color: #98989d; }
body.theme-dark .gp-course-item__detail { color: rgba(245,245,247,0.86); }
body.theme-dark .gp-course-item__detail-label { color: #98989d; }
body.theme-dark .gp-course-chip--high {
  color: #ffb4ab;
  background: rgba(244, 67, 54, 0.18);
  border-color: rgba(244, 67, 54, 0.4);
}
body.theme-dark .gp-course-chip--medium {
  color: #ffd37a;
  background: rgba(255, 184, 0, 0.16);
  border-color: rgba(255, 184, 0, 0.34);
}
body.theme-dark .gp-course-chip--low {
  color: #8ce7b0;
  background: rgba(52, 199, 89, 0.16);
  border-color: rgba(52, 199, 89, 0.34);
}
body.theme-dark .gp-plain-body { color: #f5f5f7; }
body.theme-dark .gp-sr-heading { color: #f5f5f7; }
body.theme-dark .gp-sr-body { color: #d1d1d6; }
body.theme-dark .gp-sr-list li { background: rgba(255,255,255,0.06); color: #d1d1d6; }
body.theme-dark .gp-sr-list li::before { background: #0a84ff; opacity: 0.7; }
body.theme-dark .gp-sr-divider { background: rgba(255,255,255,0.08); }
body.theme-dark .gp-empty { color: #636366; }
body.theme-dark .gp-placeholder__title { color: #f5f5f7; }
body.theme-dark .gp-placeholder__list { color: #98989d; }
body.theme-dark .gp-score { background: rgba(255,255,255,0.06); }
body.theme-dark .gp-score__label { color: #98989d; }
body.theme-dark .gp-score__value { color: #f5f5f7; }
body.theme-dark .gp-card--accent {
  background:
    radial-gradient(circle at top left, rgba(10,132,255,0.22), transparent 42%),
    linear-gradient(180deg, #1c1c1e 0%, #232326 100%);
}
body.theme-dark .gp-onboard__title,
body.theme-dark .gp-progress__title,
body.theme-dark .gp-progress__count,
body.theme-dark .gp-task-card__title,
body.theme-dark .gp-tab--active {
  color: #f5f5f7;
}
body.theme-dark .gp-onboard__desc,
body.theme-dark .gp-progress__desc,
body.theme-dark .gp-task-card__desc,
body.theme-dark .gp-task-card__note {
  color: #a1a1aa;
}
body.theme-dark .gp-inline-badge,
body.theme-dark .gp-branch-badge,
body.theme-dark .gp-btn--ghost {
  background: rgba(10,132,255,0.14);
  color: #64d2ff;
}
body.theme-dark .gp-inline-badge--warn,
body.theme-dark .gp-branch-badge--warn {
  background: rgba(255,159,10,0.16);
  color: #ffd28c;
}
body.theme-dark .gp-tab {
  background: rgba(255,255,255,0.06);
  color: #98989d;
}
body.theme-dark .gp-tab:hover {
  background: rgba(255,255,255,0.08);
}
body.theme-dark .gp-tab--active {
  background: #2c2c2e;
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
  color: #64d2ff;
}
body.theme-dark .gp-metric-card,
body.theme-dark .gp-result-panel-card {
  background: #232326;
}
body.theme-dark .gp-metric-card__label,
body.theme-dark .gp-metric-card__hint {
  color: #98989d;
}
body.theme-dark .gp-metric-card__value {
  color: #f5f5f7;
}
body.theme-dark .gp-progress__bar {
  background: rgba(255,255,255,0.08);
}
body.theme-dark .gp-task-card {
  background: #232326;
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
body.theme-dark .gp-task-card--done {
  background: linear-gradient(180deg, #232326 0%, #1f2830 100%);
  border-color: rgba(100,210,255,0.18);
}
body.theme-dark .gp-task-card--locked {
  background: linear-gradient(180deg, #1d1d20 0%, #18181b 100%);
  border-color: rgba(255,255,255,0.05);
  box-shadow: none;
}
body.theme-dark .gp-task-check {
  background: rgba(255,255,255,0.08);
  color: #a1a1aa;
}
body.theme-dark .gp-task-check--done {
  background: #0a84ff;
  color: #ffffff;
}
body.theme-dark .gp-task-check--locked {
  background: rgba(255,255,255,0.08);
  color: #7c7c84;
}
body.theme-dark .gp-task-card__day,
body.theme-dark .gp-task-card__state,
body.theme-dark .gp-task-card__progress {
  color: #98989d;
}
body.theme-dark .gp-mini-link {
  color: #64d2ff;
}
body.theme-dark .gp-btn--ghost:hover:not(:disabled) {
  background: rgba(10,132,255,0.2);
}

/* ---------- Quick Query Bar ---------- */
body.theme-dark .quick-query-bar-shell {
  background: linear-gradient(145deg, #2c2c2e 0%, #1c1c1e 42%, #2c2c2e 100%);
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 24px rgba(0,0,0,0.2);
}
body.theme-dark .quick-query-bar-eyebrow {
  color: #98989d;
}
body.theme-dark .quick-query-bar-sub {
  color: #636366;
}
body.theme-dark .quick-query-bar-field {
  background: rgba(255,255,255,0.06);
  border-color: rgba(0,122,255,0.2);
}
body.theme-dark .quick-query-bar-input {
  color: #f5f5f7;
}
body.theme-dark .quick-query-bar-input::placeholder {
  color: #636366;
}
body.theme-dark .quick-query-bar-btn-secondary {
  color: #f5f5f7;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.1);
}
body.theme-dark .quick-query-bar-btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.15);
}
body.theme-dark .assistant-cc-chip--neutral {
  background: rgba(255,255,255,0.08);
  color: #aeaeb2;
}
body.theme-dark .qq-answer-bubble {
  border-color: var(--ai-bubble-border);
  background: var(--ai-bubble-bg);
  box-shadow: var(--ai-bubble-shadow);
}
body.theme-dark .qq-answer-headline {
  color: #f5f5f7;
}
body.theme-dark .qq-answer-reply {
  color: #f5f5f7;
}
body.theme-dark .qq-answer-support {
  color: #d6d3d1;
}
body.theme-dark .qq-answer-context-chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #d6d3d1;
}
body.theme-dark .qq-answer-fact {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.09);
  color: #f5f5f7;
}
body.theme-dark .qq-answer-action {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .qq-answer-action-label,
body.theme-dark .qq-answer-section-note,
body.theme-dark .qq-biz-table__hint {
  color: #a8a29e;
}
body.theme-dark .qq-answer-action-text,
body.theme-dark .qq-answer-section-title {
  color: #f5f5f7;
}
body.theme-dark .qq-answer-section {
  border-top-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .qq-answer-template-btn {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(96, 165, 250, 0.28);
  color: #bfdbfe;
}
body.theme-dark .qq-answer-template-btn:hover {
  background: rgba(37, 99, 235, 0.2);
  border-color: rgba(147, 197, 253, 0.4);
}
body.theme-dark .qq-answer-link-btn {
  color: #93c5fd;
}
body.theme-dark .qq-answer-detail-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .qq-biz-table {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}
body.theme-dark .qq-biz-table__body {
  background: rgba(255, 255, 255, 0.02);
}
body.theme-dark .qq-biz-table__head-cell {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
}
body.theme-dark .qq-biz-table__body-cell {
  color: #f5f5f7;
}
body.theme-dark .qq-biz-table__row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .qq-biz-table__row:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* ---------- On-Duty Assistant Page ---------- */
body.theme-dark .oj-assistant-large-title {
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-sales-sub {
  color: #98989d;
}
body.theme-dark .oj-assistant-quick-tag {
  color: #c7c7cc;
  background: #3a3a3c;
}
body.theme-dark .oj-assistant-quick-tag:hover {
  background: #48484a;
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-glass-input-wrap {
  background: rgba(255,255,255,0.06);
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
body.theme-dark .oj-assistant-glass-input-wrap:not(:-webkit-any()) {
  background: rgba(255,255,255,0.1);
}
body.theme-dark .oj-assistant-imessage-ta {
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-imessage-ta::placeholder {
  color: rgba(255,255,255,0.35);
}
body.theme-dark .oj-assistant-toolbar-svg {
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-icon-btn {
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-icon-btn:hover {
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-phrases-panel {
  background: rgba(44,44,46,0.96);
  box-shadow: 0 16px 40px -8px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08);
}
body.theme-dark .oj-assistant-phrases-hint {
  color: #636366;
}
body.theme-dark .oj-assistant-phrase-line {
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-phrase-line:hover {
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-pill-btn {
  color: #f5f5f7;
  background: #3a3a3c;
}
body.theme-dark .oj-assistant-pill-btn:hover:not(:disabled) {
  background: #48484a;
  color: #f5f5f7;
}
body.theme-dark .oj-assistant-zone-eyebrow,
body.theme-dark .oj-assistant-zone-eyebrow--side {
  color: #636366;
}
body.theme-dark #content-area .oj-assistant-page--sales .assistant-cc-reply-main {
  background: #1c1c1e;
}
body.theme-dark .oj-assistant-page--sales .demo-retry-btn:hover {
  background: #3a3a3c;
  color: #f87171;
}
body.theme-dark #content-area .oj-assistant-page--sales #assistant-copy-reply-btn.assistant-copy-btn--done {
  background: #3a3a3c;
  color: #34d399;
}

/* ---------- Personnel Roles Modal ---------- */
body.theme-dark .pr-role-row {
  border-bottom-color: #38383a;
}
body.theme-dark .pr-role-row:hover {
  background-color: rgba(255,255,255,0.06);
}
body.theme-dark .pr-role-row-name {
  color: #f5f5f7;
}
body.theme-dark .pr-role-row-meta {
  color: #8e8e93;
}
body.theme-dark .pr-role-row-meta-mono {
  color: #636366;
}
body.theme-dark .pr-role-row-desc {
  color: #8e8e93;
}
body.theme-dark .pr-role-row-count {
  color: #636366;
}
body.theme-dark .pr-role-row--disabled .pr-role-row-name {
  color: #636366;
}
body.theme-dark .pr-role-link:hover {
  background: rgba(0,122,255,0.1);
}
body.theme-dark .pr-role-link--danger:hover {
  background: rgba(248,113,113,0.1);
}
body.theme-dark .pr-role-badge {
  color: #636366;
}
body.theme-dark .pr-list-msg {
  color: #8e8e93;
}
body.theme-dark .pr-skeleton {
  background: linear-gradient(90deg, #2c2c2e 25%, #3a3a3c 50%, #2c2c2e 75%);
}

/* ---------- Flatpickr Calendar ---------- */
body.theme-dark .flatpickr-calendar.flatpickr-calendar--audit {
  background: #2c2c2e;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
  border-color: rgba(255,255,255,0.08);
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-current-month {
  color: #f5f5f7;
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-current-month select {
  color: #f5f5f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2398989d' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-current-month select:hover {
  background-color: rgba(0,122,255,0.12);
  color: #0a84ff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230a84ff' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-current-month select:focus {
  background-color: rgba(0,122,255,0.16);
  color: #0a84ff;
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-prev-month,
body.theme-dark .flatpickr-calendar--audit .flatpickr-next-month {
  fill: #98989d;
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-prev-month:hover,
body.theme-dark .flatpickr-calendar--audit .flatpickr-next-month:hover {
  background: rgba(0,122,255,0.12);
  fill: #0a84ff;
}
body.theme-dark .flatpickr-calendar--audit span.flatpickr-weekday {
  color: #636366;
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-day {
  color: #e5e5ea;
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-day:hover:not(.selected):not(.flatpickr-disabled) {
  background: rgba(0,122,255,0.12);
  color: #0a84ff;
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-day.today:not(.selected) {
  border-color: rgba(0,122,255,0.5);
  color: #0a84ff;
  background: rgba(0,122,255,0.1);
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-day.prevMonthDay,
body.theme-dark .flatpickr-calendar--audit .flatpickr-day.nextMonthDay {
  color: #48484a;
}
body.theme-dark .flatpickr-calendar--audit .flatpickr-day.flatpickr-disabled {
  color: #38383a;
}
body.theme-dark .flatpickr-audit-footer {
  border-top-color: rgba(255,255,255,0.08);
}
body.theme-dark .flatpickr-audit-clear {
  color: #8e8e93;
}
body.theme-dark .flatpickr-audit-clear:hover {
  background: rgba(255,255,255,0.06);
  color: #f5f5f7;
}
body.theme-dark .audit-behavior-option {
  color: #e5e5ea;
}
body.theme-dark .audit-behavior-option:hover,
body.theme-dark .audit-behavior-option:focus-visible {
  background: rgba(0,122,255,0.12);
  color: #0a84ff;
}
body.theme-dark .audit-behavior-option--selected {
  background: rgba(0,122,255,0.15);
  color: #0a84ff;
}

/* ---------- Settings Page Extras ---------- */
body.theme-dark .settings-slide-row {
  border-bottom-color: #38383a;
}

/* ---------- Exam Interactive ---------- */
body.theme-dark .exam-interactive .exam-q-mcq label:has(input.exam-radio:checked),
body.theme-dark .exam-interactive .exam-q-mcq-multi label:has(input.exam-checkbox:checked) {
  border-color: rgba(16,185,129,0.45);
  background: rgba(52,211,153,0.12);
}

/* ========== 风险看板 · iOS Minimalist Redesign ========== */
.db-page {
  --db-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --db-spring: cubic-bezier(0.32, 0.72, 0, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hero header */
.db-hero {
  padding: 0.5rem 0 1.75rem;
}

.db-hero-title {
  margin: 0;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  line-height: 1.15;
}

.db-hero-sub {
  margin: 0.45rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #86868b;
  font-weight: 400;
}

/* Glass card base */
.db-card {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: none;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 1.35rem 1.35rem 1.45rem;
  transition: box-shadow 0.35s var(--db-ease);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .db-card {
    background: #ffffff;
  }
}

@media (min-width: 640px) {
  .db-card {
    padding: 1.5rem 1.65rem 1.65rem;
  }
}

/* Card section headers */
.db-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.db-section-title-group {
  min-width: 0;
}

.db-section-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.db-section-desc {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: #86868b;
  line-height: 1.4;
}

/* Input fields */
.db-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.03);
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  color: var(--text-primary);
  outline: none;
  transition: background 0.2s var(--db-ease), box-shadow 0.2s var(--db-ease);
  -webkit-appearance: none;
  font-family: inherit;
}

.db-input::placeholder {
  color: #aeaeb2;
}

.db-input:focus {
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18), 0 2px 8px rgba(0, 122, 255, 0.06);
}

/* ---- Dashboard store picker dropdown ---- */
.db-store-picker {
  position: relative;
  width: 100%;
}
.db-store-picker__btn {
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.db-store-picker__btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
.db-store-picker.is-open .db-store-picker__btn {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18), 0 2px 8px rgba(0, 122, 255, 0.06);
}
.db-store-picker.is-open svg {
  transform: rotate(180deg);
}
.db-store-picker__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  z-index: 300;
  opacity: 0;
  transform: translateY(-6px) scaleY(0.96);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.25, 0.1, 0.25, 1);
  max-height: 240px;
  overflow-y: auto;
}
.db-store-picker.is-open .db-store-picker__list {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}
.db-store-picker__item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s ease;
  font-family: inherit;
}
.db-store-picker__item:hover {
  background: rgba(0, 122, 255, 0.06);
}
.db-store-picker__item--active {
  color: #007AFF;
  font-weight: 600;
  background: rgba(0, 122, 255, 0.06);
}
.db-store-picker__item:first-child {
  border-radius: 11px 11px 0 0;
}
.db-store-picker__item:last-child {
  border-radius: 0 0 11px 11px;
}
body.theme-dark .db-store-picker__list {
  background: #2c2c2e;
  border-color: rgba(255, 255, 255, 0.08);
}
body.theme-dark .db-store-picker__item {
  color: #f5f5f7;
}
body.theme-dark .db-store-picker__item:hover {
  background: rgba(255, 255, 255, 0.06);
}
body.theme-dark .db-store-picker__item--active {
  color: #64D2FF;
  background: rgba(100, 210, 255, 0.08);
}

/* Period chips */
.db-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  padding: 0.5rem 1.15rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.2s var(--db-ease), color 0.2s var(--db-ease), box-shadow 0.2s var(--db-ease), transform 0.15s var(--db-ease);
  font-family: inherit;
  min-height: 36px;
}

.db-chip--off {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-primary);
}

.db-chip--off:hover {
  background: rgba(0, 0, 0, 0.07);
}

.db-chip--on {
  background: #007aff;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 122, 255, 0.28);
}

.db-chip--on:hover {
  background: #0066dd;
}

.db-chip:active:not(:disabled) {
  transform: scale(0.97);
}

.db-chip:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Dashboard period select — white glass instead of gray */
#dashboard-period-select.db-input {
  cursor: pointer;
  border: 1px solid rgba(0, 122, 255, 0.16);
  background: linear-gradient(135deg, rgba(250, 252, 255, 0.98) 0%, rgba(238, 245, 255, 0.95) 100%);
  color: #12304f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px rgba(0, 122, 255, 0.08);
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s, transform 0.15s ease;
}

#dashboard-period-select.db-input:hover {
  border-color: rgba(0, 122, 255, 0.28);
  background: linear-gradient(135deg, #ffffff 0%, #edf5ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 14px 28px rgba(0, 122, 255, 0.12);
  transform: translateY(-1px);
}

#dashboard-period-select .db-date-input-icon,
#dashboard-period-arrow {
  color: #0b63ce;
}

#dashboard-period-label {
  font-weight: 600;
  color: #12304f;
}

#dashboard-period-select.db-input:focus,
#dashboard-period-select.db-input.db-period-active {
  border-color: rgba(0, 122, 255, 0.34);
  background: linear-gradient(135deg, #ffffff 0%, #e8f2ff 100%);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.14), 0 18px 34px rgba(0, 122, 255, 0.16) !important;
}

/* ---- unified period panel (chips + calendar) ---- */
.db-period-panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 255, 0.98) 100%);
  border: 1px solid rgba(0, 122, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 22px 50px rgba(15, 23, 42, 0.14), 0 8px 22px rgba(0, 122, 255, 0.08);
  z-index: 99999;
  padding: 16px;
  animation: db-panel-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.db-period-panel--open {
  display: block;
}

@keyframes db-panel-in {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* quick chip row */
.db-period-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.db-period-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 122, 255, 0.08);
  color: #2458a6;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.db-period-chip:hover {
  background: rgba(0, 122, 255, 0.14);
}

.db-period-chip--active {
  background: linear-gradient(135deg, #007aff 0%, #42a5ff 100%);
  color: #fff;
  box-shadow: 0 10px 18px rgba(0, 122, 255, 0.24);
}

.db-period-chip--active:hover {
  background: linear-gradient(135deg, #006fe0 0%, #3b9bff 100%);
}

/* divider */
.db-period-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 122, 255, 0.02) 0%, rgba(0, 122, 255, 0.16) 48%, rgba(0, 122, 255, 0.02) 100%);
  margin: 14px 0 12px;
}

/* calendar header */
.db-period-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.db-period-cal-title {
  font-size: 14px;
  font-weight: 600;
  color: #12304f;
  user-select: none;
}

.db-period-cal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: none;
  background: rgba(0, 122, 255, 0.08);
  color: #0b63ce;
  cursor: pointer;
  transition: background 0.15s;
}

.db-period-cal-nav:hover {
  background: rgba(0, 122, 255, 0.16);
}

.db-period-cal-nav:active {
  background: rgba(0, 122, 255, 0.22);
}

.db-period-cal-today {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #007AFF;
  background: rgba(0, 122, 255, 0.08);
  border: none;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1.4;
}
.db-period-cal-today:hover {
  background: rgba(0, 122, 255, 0.15);
}
.db-period-cal-today:active {
  background: rgba(0, 122, 255, 0.22);
}
body.theme-dark .db-period-cal-today {
  color: #64D2FF;
  background: rgba(100, 210, 255, 0.10);
}
body.theme-dark .db-period-cal-today:hover {
  background: rgba(100, 210, 255, 0.18);
}

/* weekday labels */
.db-period-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}

.db-period-cal-weekdays span {
  font-size: 12px;
  font-weight: 500;
  color: #86909C;
  line-height: 32px;
}

.db-period-cal-weekdays .db-wk-end {
  color: #F53F3F;
}

/* day grid */
.db-period-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.db-cal-empty {
  height: 36px;
}

.db-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 100%;
  border-radius: 10px;
  border: none;
  background: none;
  color: #1D2129;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.db-cal-day:hover:not(.db-cal-day--disabled) {
  background: rgba(0, 122, 255, 0.08);
}

.db-cal-day:active:not(.db-cal-day--disabled) {
  background: rgba(0, 122, 255, 0.14);
  transform: scale(0.92);
}

/* today */
.db-cal-day--today {
  font-weight: 700;
  color: #007AFF;
}

.db-cal-day--today::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #007AFF;
}

/* weekend */
.db-cal-day--weekend {
  color: #F53F3F;
}

/* disabled (future) */
.db-cal-day--disabled {
  color: #C9CDD4;
  cursor: not-allowed;
}

/* selected (from or to) */
.db-cal-day--selected {
  background: linear-gradient(135deg, #007aff 0%, #34a1ff 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 10px 18px rgba(0, 122, 255, 0.22);
}

.db-cal-day--selected:hover {
  background: linear-gradient(135deg, #006fe0 0%, #2f96f7 100%);
}

/* in range */
.db-cal-day--inrange {
  background: rgba(0, 122, 255, 0.1);
  color: #0b63ce;
  border-radius: 10px;
}

/* date range display */
.db-period-range {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  min-height: 28px;
}

.db-range-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #007AFF;
  flex-shrink: 0;
}

.db-range-dot--to {
  background: #34C759;
}

.db-range-text {
  font-size: 13px;
  font-weight: 500;
  color: #1D2129;
}

.db-range-sep {
  font-size: 13px;
  color: #C9CDD4;
  margin: 0 2px;
}

.db-range-hint {
  font-size: 13px;
  color: #86909C;
}

.db-date-field {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0.75rem 0.95rem;
  border: 1px solid rgba(0, 122, 255, 0.14);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(252, 253, 255, 0.98) 0%, rgba(238, 245, 255, 0.95) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 10px 22px rgba(0, 122, 255, 0.08);
  color: #12304f;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--db-ease), box-shadow 0.2s var(--db-ease), transform 0.15s ease, background 0.2s var(--db-ease);
  font-family: inherit;
}

.db-date-field:hover {
  border-color: rgba(0, 122, 255, 0.24);
  background: linear-gradient(135deg, #ffffff 0%, #edf5ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), 0 14px 28px rgba(0, 122, 255, 0.12);
  transform: translateY(-1px);
}

.db-date-field:focus-visible {
  outline: none;
  border-color: rgba(0, 122, 255, 0.34);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.14), 0 18px 34px rgba(0, 122, 255, 0.16);
}

.db-date-field--filled {
  border-color: rgba(0, 122, 255, 0.22);
  color: #0f2740;
}

.db-date-field__text {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.db-date-field__placeholder {
  color: #7b92ae;
  font-weight: 500;
}

.db-date-input-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #0b63ce;
}

/* Dark theme */
body.theme-dark #dashboard-period-select {
  border-color: rgba(100, 210, 255, 0.18) !important;
  background: linear-gradient(135deg, rgba(34, 46, 64, 0.98) 0%, rgba(20, 31, 47, 0.96) 100%) !important;
  color: #f5f5f7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 34px rgba(0, 0, 0, 0.28) !important;
}

body.theme-dark #dashboard-period-select:hover {
  border-color: rgba(100, 210, 255, 0.28) !important;
  background: linear-gradient(135deg, rgba(38, 55, 80, 0.98) 0%, rgba(24, 38, 58, 0.96) 100%) !important;
}

body.theme-dark #dashboard-period-label,
body.theme-dark #dashboard-period-arrow {
  color: #7ad7ff;
}

body.theme-dark .db-period-panel {
  background: linear-gradient(180deg, rgba(26, 33, 44, 0.98) 0%, rgba(17, 24, 34, 0.98) 100%) !important;
  border-color: rgba(100, 210, 255, 0.12) !important;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.42), 0 10px 26px rgba(10, 132, 255, 0.12);
}

body.theme-dark .db-period-chip {
  background: rgba(100, 210, 255, 0.08);
  color: #9fe4ff;
}

body.theme-dark .db-period-chip:hover {
  background: rgba(100, 210, 255, 0.16);
}

body.theme-dark .db-period-chip--active {
  background: #0A84FF;
  color: #fff;
}

body.theme-dark .db-period-divider {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-dark .db-period-cal-title {
  color: #f5f5f7;
}

body.theme-dark .db-period-cal-nav {
  color: #7ad7ff;
  background: rgba(100, 210, 255, 0.08);
}

body.theme-dark .db-period-cal-nav:hover {
  background: rgba(100, 210, 255, 0.16);
}

body.theme-dark .db-period-cal-weekdays span {
  color: #8E8E93;
}

body.theme-dark .db-cal-day {
  color: #f5f5f7;
}

body.theme-dark .db-cal-day:hover:not(.db-cal-day--disabled) {
  background: rgba(100, 210, 255, 0.08);
}

body.theme-dark .db-cal-day--today {
  color: #0A84FF;
}

body.theme-dark .db-cal-day--today::after {
  background: #0A84FF;
}

body.theme-dark .db-cal-day--disabled {
  color: #48484A;
}

body.theme-dark .db-cal-day--selected {
  background: #0A84FF;
  color: #fff;
}

body.theme-dark .db-cal-day--inrange {
  background: rgba(10, 132, 255, 0.15);
  color: #0A84FF;
}

body.theme-dark .db-period-range {
  border-top-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .db-range-text {
  color: #f5f5f7;
}

body.theme-dark .db-range-hint {
  color: #8E8E93;
}

body.theme-dark .db-date-field {
  border-color: rgba(100, 210, 255, 0.16);
  background: linear-gradient(135deg, rgba(34, 46, 64, 0.98) 0%, rgba(20, 31, 47, 0.96) 100%);
  color: #f5f5f7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 34px rgba(0, 0, 0, 0.26);
}

body.theme-dark .db-date-field:hover {
  border-color: rgba(100, 210, 255, 0.26);
  background: linear-gradient(135deg, rgba(38, 55, 80, 0.98) 0%, rgba(24, 38, 58, 0.96) 100%);
}

body.theme-dark .db-date-field:focus-visible {
  border-color: rgba(100, 210, 255, 0.34);
  box-shadow: 0 0 0 4px rgba(100, 210, 255, 0.12), 0 22px 38px rgba(0, 0, 0, 0.28);
}

body.theme-dark .db-date-field__placeholder {
  color: #8eb5ce;
}

body.theme-dark .db-date-input-icon {
  color: #7ad7ff;
}

/* Primary action button */
.db-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: #007aff;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0.75rem 2rem;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 122, 255, 0.32);
  transition: background 0.2s var(--db-ease), box-shadow 0.2s var(--db-ease), transform 0.15s var(--db-ease), opacity 0.15s var(--db-ease);
  font-family: inherit;
}

.db-btn-primary:hover:not(:disabled) {
  background: #0066dd;
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.36);
}

.db-btn-primary:active:not(:disabled) {
  transform: scale(0.97);
}

.db-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Secondary button */
.db-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.05);
  color: #007aff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1.15rem;
  min-height: 36px;
  cursor: pointer;
  transition: background 0.2s var(--db-ease), color 0.2s var(--db-ease), transform 0.15s var(--db-ease);
  font-family: inherit;
}

.db-btn-secondary:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.08);
}

.db-btn-secondary:active:not(:disabled) {
  transform: scale(0.97);
}

.db-btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Date range toggle */
.db-date-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  border: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.03);
  padding: 0.7rem 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--db-ease), box-shadow 0.2s var(--db-ease);
  font-family: inherit;
}

.db-date-toggle:hover {
  background: rgba(0, 0, 0, 0.05);
}

.db-date-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18);
}

.db-date-toggle-chevron {
  width: 1.1rem;
  height: 1.1rem;
  color: #aeaeb2;
  transition: transform 0.28s var(--db-spring);
  flex-shrink: 0;
}

.db-date-toggle-chevron--open {
  transform: rotate(180deg);
}

/* Calendar panel */
.db-calendar-panel {
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.02);
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.db-date-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s var(--db-ease), box-shadow 0.2s var(--db-ease);
  font-family: inherit;
  min-height: 44px;
}

.db-date-btn:hover {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Overview stat cells */
.db-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .db-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.db-stat-cell {
  border-radius: 16px;
  padding: 1rem 1.1rem;
  position: relative;
  overflow: hidden;
}

.db-stat-cell--total {
  background: linear-gradient(145deg, #f2f2f7 0%, #e8e8ed 100%);
}

.db-stat-cell--high {
  background: linear-gradient(145deg, rgba(255, 59, 48, 0.08) 0%, rgba(255, 59, 48, 0.04) 100%);
}

.db-stat-cell--medium {
  background: linear-gradient(145deg, rgba(255, 149, 0, 0.08) 0%, rgba(255, 149, 0, 0.04) 100%);
}

.db-stat-cell--low {
  background: linear-gradient(145deg, rgba(52, 199, 89, 0.08) 0%, rgba(52, 199, 89, 0.04) 100%);
}

.db-stat-label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #86868b;
  letter-spacing: 0.02em;
}

.db-stat-value {
  margin: 0.35rem 0 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
}

.db-stat-cell--high .db-stat-value {
  color: #ff3b30;
}

.db-stat-cell--medium .db-stat-value {
  color: #ff9500;
}

.db-stat-cell--low .db-stat-value {
  color: #34c759;
}

/* Risk level indicator (dot) */
.db-risk-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.db-risk-dot--high {
  background: #ff3b30;
  box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.2);
}

.db-risk-dot--medium {
  background: #ff9500;
  box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.2);
}

.db-risk-dot--low {
  background: #34c759;
  box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.2);
}

/* Risk pill badge */
.db-risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 9999px;
  padding: 0.2rem 0.6rem 0.2rem 0.45rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.db-risk-pill--high {
  background: rgba(255, 59, 48, 0.1);
  color: #ff3b30;
}

.db-risk-pill--medium {
  background: rgba(255, 149, 0, 0.1);
  color: #c65a00;
}

.db-risk-pill--low {
  background: rgba(52, 199, 89, 0.1);
  color: #248a3d;
}

/* Employee risk card */
.db-employee-card {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.7);
  padding: 1rem 1.1rem;
  transition: background 0.2s var(--db-ease), box-shadow 0.2s var(--db-ease);
}

.db-employee-card:hover {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.db-employee-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}

.db-employee-name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.db-employee-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.6875rem;
  color: #aeaeb2;
  letter-spacing: 0.02em;
}

.db-employee-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  color: #86868b;
}

.db-employee-reason {
  margin: 0.65rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #3a3a3c;
}

.db-employee-reason-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #aeaeb2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-right: 0.35rem;
}

.db-employee-action {
  margin: 0.4rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #007aff;
}

.db-employee-action .db-employee-reason-label {
  color: rgba(0, 122, 255, 0.5);
}

/* Manager action items */
.db-action-item {
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.025);
  padding: 0.85rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #3a3a3c;
  transition: background 0.2s var(--db-ease);
}

.db-action-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* History section */
.db-history-body {
  margin-top: 0.75rem;
}

.db-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.db-history-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.2s var(--db-ease);
}

@media (min-width: 640px) {
  .db-history-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.db-history-row:hover {
  background: rgba(0, 0, 0, 0.035);
  border-color: rgba(0, 0, 0, 0.06);
}

.db-history-row--active {
  background: rgba(0, 122, 255, 0.06);
  border-color: rgba(0, 122, 255, 0.15);
}

.db-history-row-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

@media (min-width: 640px) {
  .db-history-row-body {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

.db-history-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.db-history-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(0, 122, 255, 0.08);
  color: #007AFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.db-history-row--active .db-history-icon {
  background: #007AFF;
  color: #fff;
}

.db-history-text {
  min-width: 0;
}

.db-history-time {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.db-history-tags {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.db-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 11px;
  font-weight: 500;
  color: #86868b;
  white-space: nowrap;
}

.db-tag--store {
  background: rgba(0, 122, 255, 0.06);
  color: #007AFF;
}

/* stats chips in history row */
.db-history-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.db-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 12px;
  font-weight: 400;
  color: #6e6e73;
  white-space: nowrap;
}

.db-stat-chip strong {
  font-weight: 700;
  color: var(--text-primary);
}

.db-stat-chip--high {
  background: rgba(245, 63, 63, 0.08);
  color: #F53F3F;
}

.db-stat-chip--high strong {
  color: #F53F3F;
}

.db-stat-chip--med {
  background: rgba(255, 125, 0, 0.08);
  color: #FF7D00;
}

.db-stat-chip--med strong {
  color: #FF7D00;
}

.db-stat-chip--low {
  background: rgba(52, 199, 89, 0.08);
  color: #34C759;
}

.db-stat-chip--low strong {
  color: #34C759;
}

/* view button in history row */
.db-history-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: none;
  border-radius: 10px;
  background: rgba(0, 122, 255, 0.08);
  color: #007AFF;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s var(--db-ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.db-history-view-btn:hover:not(:disabled) {
  background: rgba(0, 122, 255, 0.15);
}

.db-history-view-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.db-history-view-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.db-history-view-btn[aria-current="true"] {
  background: #007AFF;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

/* Empty state */
.db-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
  min-height: 200px;
}

.db-empty-icon {
  width: 3rem;
  height: 3rem;
  color: #d1d1d6;
  opacity: 0.75;
}

.db-empty-title {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #aeaeb2;
}

.db-empty-desc {
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #c7c7cc;
}

/* Snapshot banner */
.db-snapshot-banner {
  border-radius: 16px;
  background: rgba(255, 149, 0, 0.08);
  padding: 0.75rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

@media (min-width: 640px) {
  .db-snapshot-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.db-snapshot-label {
  font-size: 0.8125rem;
  color: #7c4a00;
  font-weight: 500;
}

.db-snapshot-label strong {
  font-weight: 700;
  color: #5c3600;
}

.db-snapshot-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  color: #7c4a00;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.45rem 1.15rem;
  cursor: pointer;
  transition: background 0.2s var(--db-ease), transform 0.15s var(--db-ease);
  font-family: inherit;
  flex-shrink: 0;
}

.db-snapshot-exit:hover {
  background: #ffffff;
}

.db-snapshot-exit:active {
  transform: scale(0.97);
}

/* Two-column results layout */
.db-results-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 1024px) {
  .db-results-grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* Loading banner */
.db-loading-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: rgba(0, 122, 255, 0.06);
  color: #0055b3;
  font-size: 0.8125rem;
  font-weight: 500;
  margin-top: 0.75rem;
}

.db-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid rgba(0, 122, 255, 0.2);
  border-top-color: #007aff;
  animation: dbSpin 0.65s linear infinite;
}

@keyframes dbSpin {
  to { transform: rotate(360deg); }
}

/* Expand toggle */
.db-expand-btn {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #007aff;
  padding: 0.55rem 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s var(--db-ease);
}

.db-expand-btn:hover {
  color: #0055b3;
}

/* Field label */
.db-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #86868b;
  margin-bottom: 0.45rem;
  letter-spacing: 0.02em;
}

/* Fade-in animation */
.db-fade-in {
  animation: dbFadeIn 0.4s var(--db-ease) both;
}

@keyframes dbFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode support */
body.theme-dark .db-card {
  background: rgba(44, 44, 46, 0.92) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15), 0 0 1px rgba(255, 255, 255, 0.04) !important;
}

body.theme-dark .db-hero-title {
  color: #f5f5f7 !important;
}

body.theme-dark .db-hero-sub,
body.theme-dark .db-section-desc,
body.theme-dark .db-field-label {
  color: #98989d !important;
}

body.theme-dark .db-section-title,
body.theme-dark .db-employee-name,
body.theme-dark .db-history-time,
body.theme-dark .db-stat-value:not(.db-stat-cell--high .db-stat-value):not(.db-stat-cell--medium .db-stat-value):not(.db-stat-cell--low .db-stat-value) {
  color: #f5f5f7 !important;
}

body.theme-dark .db-input {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #f5f5f7 !important;
}

body.theme-dark .db-input:focus {
  background: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.25) !important;
}

body.theme-dark .db-employee-card {
  background: rgba(255, 255, 255, 0.05) !important;
}

body.theme-dark .db-employee-card:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.theme-dark .db-stat-cell--total {
  background: linear-gradient(145deg, #38383a 0%, #2c2c2e 100%) !important;
}

body.theme-dark .db-history-list {
  background: none !important;
}

body.theme-dark .db-history-row {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.06);
}

body.theme-dark .db-history-row:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}

body.theme-dark .db-history-row--active {
  background: rgba(10, 132, 255, 0.1);
  border-color: rgba(10, 132, 255, 0.2);
}

body.theme-dark .db-history-icon {
  background: rgba(10, 132, 255, 0.15);
  color: #0A84FF;
}

body.theme-dark .db-history-row--active .db-history-icon {
  background: #0A84FF;
  color: #fff;
}

body.theme-dark .db-history-view-btn {
  background: rgba(10, 132, 255, 0.12);
  color: #0A84FF;
}

body.theme-dark .db-history-view-btn:hover:not(:disabled) {
  background: rgba(10, 132, 255, 0.2);
}

body.theme-dark .db-history-view-btn[aria-current="true"] {
  background: #0A84FF;
  color: #fff;
}

body.theme-dark .db-tag {
  background: rgba(255, 255, 255, 0.06);
  color: #8E8E93;
}

body.theme-dark .db-tag--store {
  background: rgba(10, 132, 255, 0.1);
  color: #0A84FF;
}

body.theme-dark .db-stat-chip {
  background: rgba(255, 255, 255, 0.06);
  color: #AEAEB2;
}

body.theme-dark .db-stat-chip strong {
  color: #f5f5f7;
}

body.theme-dark .db-action-item {
  background: rgba(255, 255, 255, 0.05) !important;
}

body.theme-dark .db-employee-reason,
body.theme-dark .db-employee-meta {
  color: #98989d !important;
}

body.theme-dark .db-snapshot-banner {
  background: rgba(255, 149, 0, 0.12) !important;
}

@media (prefers-reduced-motion: reduce) {
  .db-fade-in {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ========== Risk Dashboard: Responsive core result cards ========== */
@media (max-width: 768px) {
  .db-page [style*="flex:0 0 40%"],
  .db-page [style*="flex:0 0 58%"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* Dashboard employee select dark mode */
body.theme-dark select.db-input {
  background-color: rgba(255, 255, 255, 0.06) !important;
  background-image: url('data:image/svg+xml;utf8,<svg width=\'12\' height=\'12\' viewBox=\'0 0 12 12\' fill=\'none\' xmlns=\'http://www.w3.org/2000/svg\'><path d=\'M2 4L6 8L10 4\' stroke=\'%2398989d\' stroke-width=\'1.5\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>') !important;
  color: #f5f5f7 !important;
}
body.theme-dark select.db-input option {
  background: #2c2c2e;
  color: #f5f5f7;
}

/* ========== Windows 平台字体补偿 ========== */
@supports (-webkit-text-stroke: 0px) {
  @media (pointer: fine) {
    /* Windows 上 Segoe UI / Microsoft YaHei 比 Mac PingFang 偏小偏细，
       通过 letter-spacing + font-weight 微调使两端视觉一致 */
    .sidebar-group-title,
    .sidebar-item-label,
    .sidebar-accordion-label {
      letter-spacing: 0.02em;
    }
  }
}

/* ========== Task Publish Page ========== */
.tp-two-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.5rem;
  align-items: start;
}
.tp-col-right {
  position: sticky;
  top: 1rem;
}
.tp-paper-scroll {
  max-height: 520px;
  overflow-y: auto;
}
@media (max-width: 900px) {
  .tp-two-col {
    grid-template-columns: 1fr;
  }
  .tp-col-right {
    position: static;
  }
}

/* ===================== Home Minimal Refresh ===================== */
.home-lx-page {
  --home-bg-1: #f5f5f7;
  --home-bg-2: #ffffff;
  --home-surface: rgba(255, 255, 255, 0.88);
  --home-surface-soft: #f5f5f7;
  --home-surface-strong: #eceef2;
  --home-border: rgba(15, 23, 42, 0.08);
  --home-border-strong: rgba(15, 23, 42, 0.12);
  --home-text: #111827;
  --home-muted: #6b7280;
  --home-subtle: #9ca3af;
  --home-accent: #0a84ff;
  --home-accent-deep: #0066cc;
  --home-accent-soft: rgba(10, 132, 255, 0.1);
  --home-danger: #ff453a;
  --home-ok: #30b158;
  --home-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
  --home-shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.06);
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
  padding: 36px 20px 84px;
  font-family: var(--font-display);
  color: var(--home-text);
  animation: home-lx-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-lx-page::before,
.home-lx-page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-lx-page::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.8), transparent 22%),
    radial-gradient(circle at 100% 12%, rgba(10, 132, 255, 0.05), transparent 20%),
    linear-gradient(180deg, var(--home-bg-1) 0%, var(--home-bg-2) 48%, rgba(255, 255, 255, 0) 100%);
  border-radius: 40px;
}

.home-lx-page::after {
  display: none;
}

@keyframes home-lx-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-lx-overview,
.home-lx-section {
  position: relative;
}

.home-lx-overview {
  z-index: 3;
}

.home-lx-section {
  z-index: 1;
}

.home-lx-page .ios-empty-state {
  min-height: 120px;
  border: 1px dashed var(--home-border);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.72);
}

.home-lx-page .ios-empty-state__text {
  color: var(--home-muted);
}

.home-lx-overview {
  position: relative;
  overflow: visible;
  border: 1px solid var(--home-border);
  border-radius: 36px;
  padding: 40px;
  background: var(--home-surface);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--home-shadow);
}

.home-lx-overview::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0));
  opacity: 0.72;
}

.home-lx-overview::after {
  display: none;
}

.home-lx-overview__head {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 320px);
  gap: 40px;
  align-items: end;
}

.home-lx-overview__copy {
  min-width: 0;
}

.home-lx-overview__eyebrow,
.home-lx-section__eyebrow,
.home-lx-todo-card__eyebrow,
.home-lx-result-card__eyebrow,
.home-lx-focus-card__eyebrow,
.home-lx-note-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--home-subtle);
}

.home-lx-overview__title {
  margin: 16px 0 0;
  max-width: 8.4em;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  font-weight: 650;
  color: var(--home-text);
}

.home-lx-overview__desc {
  margin: 18px 0 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--home-muted);
}

.home-lx-result-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.home-lx-result-card__tag,
.home-lx-focus-card__chip,
.home-lx-task-card__meta-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--home-border);
  background: var(--home-surface-soft);
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.2;
  color: var(--home-muted);
}

.home-lx-overview__aside {
  position: relative;
  z-index: 1;
  align-self: start;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: min(100%, 220px);
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.home-lx-section__desc,
.home-lx-focus-card__desc,
.home-lx-note-card__desc,
.home-lx-todo-card__desc,
.home-lx-result-card__desc,
.home-lx-chart-card__meta {
  margin: 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--home-muted);
}

.home-lx-overview__focus {
  position: relative;
  z-index: 1;
  margin-top: 24px;
}

.home-lx-focus-card,
.home-lx-todo-card,
.home-lx-note-card,
.home-lx-chart-card {
  border-radius: 30px;
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--home-shadow-soft);
}

.home-lx-focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 30px;
}

.home-lx-overview .home-lx-focus-card {
  border-radius: 26px;
  background: rgba(249, 250, 251, 0.8);
  box-shadow: none;
}

.home-lx-focus-card--loading {
  min-height: 168px;
}

.home-lx-focus-card__content {
  min-width: 0;
}

.home-lx-focus-card__title {
  margin: 14px 0 0;
  max-width: 11em;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.04em;
  font-weight: 650;
}

.home-lx-focus-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.home-lx-focus-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.home-lx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.home-lx-button:hover {
  transform: translateY(-1px);
}

.home-lx-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.14);
}

.home-lx-button--primary {
  background: var(--home-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(10, 132, 255, 0.18);
}

.home-lx-button--primary:hover {
  background: var(--home-accent-deep);
}

.home-lx-button--secondary {
  border-color: var(--home-border);
  background: var(--home-surface-soft);
  color: var(--home-text);
}

.home-lx-button--secondary:hover,
.home-lx-button--soft:hover {
  border-color: rgba(10, 132, 255, 0.2);
  background: #eef4ff;
}

.home-lx-button--soft {
  border-color: var(--home-border);
  background: rgba(245, 245, 247, 0.92);
  color: var(--home-text);
}

.home-lx-button--warning {
  border-color: rgba(255, 69, 58, 0.18);
  background: rgba(255, 69, 58, 0.1);
  color: #c9342b;
  box-shadow: none;
}

.home-lx-button--disabled {
  border-color: var(--home-border);
  background: rgba(245, 245, 247, 0.92);
  color: var(--home-muted);
  cursor: not-allowed;
  opacity: 0.82;
  box-shadow: none;
}

.home-lx-section {
  margin-top: 34px;
}

.home-lx-section__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.home-lx-section__title {
  margin: 8px 0 0;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.035em;
  font-weight: 650;
  color: var(--home-text);
}

.home-lx-section__desc {
  margin-top: 10px;
  max-width: 560px;
}

.home-lx-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.home-lx-metric-card {
  position: relative;
  min-height: 172px;
  padding: 24px;
  border-radius: 26px;
  border: 1px solid var(--home-border);
  background: var(--home-surface);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--home-shadow-soft);
}

.home-lx-metric-card::after {
  display: none;
}

.home-lx-metric-card__index {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: var(--home-subtle);
}

.home-lx-metric-card__value {
  position: relative;
  z-index: 1;
  margin: 30px 0 0;
  font-size: clamp(1.95rem, 3.8vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.05em;
  font-weight: 650;
  color: var(--home-text);
}

.home-lx-metric-card__value--updating {
  animation: home-lx-metric-rise 0.35s cubic-bezier(0.32, 1, 0.23, 1) both;
}

@keyframes home-lx-metric-rise {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home-lx-metric-card__label {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--home-muted);
}

.home-lx-workflow-grid,
.home-lx-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.95fr);
  gap: 22px;
}

.home-lx-workflow-grid__secondary,
.home-lx-chart-stack {
  display: grid;
  gap: 18px;
}

.home-lx-insight-flow {
  display: grid;
  gap: 28px;
}

.home-lx-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.home-lx-todo-card {
  padding: 30px;
}

.home-lx-todo-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 22px;
}

.home-lx-todo-card__title,
.home-lx-note-card__title,
.home-lx-chart-card__title {
  margin: 12px 0 0;
  font-size: 23px;
  line-height: 1.24;
  letter-spacing: -0.03em;
  font-weight: 650;
  color: var(--home-text);
}

.home-lx-note-card__title--spaced {
  margin-top: 14px;
}

.home-lx-todo-card__desc {
  margin-top: 12px;
  max-width: 480px;
}

.home-lx-todo-card__body {
  margin-top: 18px;
}

.home-lx-todo-fold {
  border-radius: 24px;
  border: 1px solid var(--home-border);
  background: rgba(248, 249, 251, 0.82);
}

.home-lx-todo-fold__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  padding: 18px 20px;
}

.home-lx-todo-fold__summary::-webkit-details-marker {
  display: none;
}

.home-lx-todo-fold__main {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.home-lx-todo-fold__signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--home-border);
  font-size: 12px;
  font-weight: 600;
  color: var(--home-muted);
  background: rgba(255, 255, 255, 0.82);
}

.home-lx-todo-fold__signal--active {
  border-color: rgba(10, 132, 255, 0.14);
  background: rgba(10, 132, 255, 0.07);
  color: var(--home-accent-deep);
}

.home-lx-todo-fold__signal--danger {
  border-color: rgba(255, 69, 58, 0.14);
  background: rgba(255, 69, 58, 0.08);
  color: var(--home-danger);
}

.home-lx-todo-fold__signal--calm {
  color: var(--home-muted);
}

.home-lx-todo-fold__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 5px rgba(15, 23, 42, 0.04);
}

.home-lx-todo-fold__copy {
  min-width: 0;
}

.home-lx-todo-fold__lead {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--home-text);
}

.home-lx-todo-fold__meta {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--home-muted);
}

.home-lx-todo-fold__chevron {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--home-subtle);
  border-bottom: 1.5px solid var(--home-subtle);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.home-lx-todo-fold[open] .home-lx-todo-fold__chevron {
  transform: rotate(225deg);
}

.home-lx-todo-fold__panel {
  display: grid;
  gap: 18px;
  padding: 0 20px 20px;
}

.home-lx-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--home-border);
  background: var(--home-surface-soft);
  color: var(--home-muted);
}

.home-lx-status--pending {
  border-color: rgba(10, 132, 255, 0.16);
  background: var(--home-accent-soft);
  color: var(--home-accent-deep);
}

.home-lx-status--done {
  border-color: rgba(48, 177, 88, 0.18);
  background: rgba(48, 177, 88, 0.08);
  color: var(--home-ok);
}

.home-lx-empty-block {
  display: flex;
  min-height: 126px;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  border: 1px dashed var(--home-border);
  background: rgba(245, 245, 247, 0.8);
  padding: 28px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--home-muted);
}

.home-lx-empty-block--soft {
  min-height: 0;
  flex-direction: column;
  gap: 6px;
}

.home-lx-empty-block__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--home-text);
}

.home-lx-empty-block__meta {
  font-size: 12px;
  color: var(--home-muted);
}

.home-lx-task-list {
  display: grid;
  gap: 14px;
}

.home-lx-task-list--completed {
  margin-top: 0;
}

.home-lx-task-card {
  border-radius: 24px;
  border: 1px solid var(--home-border);
  background: rgba(255, 255, 255, 0.9);
  padding: 22px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-lx-task-card:hover {
  transform: translateY(-1px);
  border-color: var(--home-border-strong);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.home-lx-task-card--retake {
  background: rgba(255, 69, 58, 0.04);
  border-color: rgba(255, 69, 58, 0.12);
}

.home-lx-task-card--completed {
  background: rgba(48, 177, 88, 0.04);
  border-color: rgba(48, 177, 88, 0.12);
}

.home-lx-todo-secondary {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.home-lx-todo-secondary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-lx-todo-secondary__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--home-subtle);
}

.home-lx-todo-secondary__count,
.home-lx-todo-secondary__hint {
  font-size: 12px;
  color: var(--home-muted);
}

.home-lx-task-list--completed .home-lx-task-card {
  background: rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.home-lx-task-card__layout,
.home-lx-result-card__layout,
.home-lx-note-card__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.home-lx-task-card__body,
.home-lx-result-card__body {
  min-width: 0;
  flex: 1;
}

.home-lx-task-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.home-lx-task-card__status,
.home-lx-task-card__tag,
.home-lx-note-card__status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.home-lx-task-card__status--todo,
.home-lx-note-card__status--waiting {
  border: 1px solid rgba(10, 132, 255, 0.16);
  background: var(--home-accent-soft);
  color: var(--home-accent-deep);
}

.home-lx-task-card__status--retake,
.home-lx-task-card__tag--danger {
  border: 1px solid rgba(255, 69, 58, 0.16);
  background: rgba(255, 69, 58, 0.1);
  color: var(--home-danger);
}

.home-lx-task-card__status--done,
.home-lx-note-card__status--ready {
  border: 1px solid rgba(48, 177, 88, 0.18);
  background: rgba(48, 177, 88, 0.1);
  color: var(--home-ok);
}

.home-lx-task-card__order {
  align-self: center;
  font-size: 12px;
  color: var(--home-subtle);
}

.home-lx-task-card__title {
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 650;
  color: var(--home-text);
}

.home-lx-task-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.home-lx-task-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.home-lx-completed {
  margin-top: 16px;
  border-radius: 24px;
  border: 1px solid rgba(48, 177, 88, 0.12);
  background: rgba(48, 177, 88, 0.05);
  padding: 20px;
}

.home-lx-completed__summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding-right: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--home-ok);
}

.home-lx-completed__summary::-webkit-details-marker {
  display: none;
}

.home-lx-completed__summary::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.18s ease;
}

.home-lx-completed[open] .home-lx-completed__summary::after {
  transform: translateY(-35%) rotate(225deg);
}

.home-lx-note-card {
  padding: 24px;
}

.home-lx-note-card--accent {
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.05), rgba(255, 255, 255, 0.92));
}

.home-lx-note-card__desc {
  margin-top: 16px;
}

.home-lx-progress {
  overflow: hidden;
  width: 100%;
  height: 8px;
  margin-top: 18px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
}

.home-lx-progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5ac8fa 0%, #0a84ff 100%);
}

.home-lx-result-card {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--home-border-strong);
  border-radius: 30px;
  background: var(--home-surface);
  padding: 36px;
  text-align: left;
  color: var(--home-text);
  box-shadow: var(--home-shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-lx-result-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}

.home-lx-result-card::after {
  content: '';
  position: absolute;
  left: 30px;
  right: 30px;
  top: 0;
  height: 1px;
  background: var(--home-border);
}

.home-lx-result-card__eyebrow {
  color: var(--home-accent);
}

.home-lx-result-card__title {
  margin: 14px 0 0;
  max-width: 100%;
  font-size: clamp(1.85rem, 2.8vw, 2.45rem);
  line-height: 1.14;
  letter-spacing: -0.04em;
  font-weight: 650;
  color: var(--home-text);
}

.home-lx-result-card__desc {
  margin-top: 16px;
  max-width: 36rem;
  color: var(--home-muted);
}

.home-lx-result-card__layout {
  align-items: flex-end;
  gap: 34px;
}

.home-lx-result-card .home-lx-button {
  min-width: 124px;
  justify-content: center;
  align-self: center;
}

.home-lx-result-card__tag {
  border-color: rgba(10, 132, 255, 0.12);
  background: rgba(10, 132, 255, 0.06);
  color: var(--home-accent-deep);
}

.home-lx-chart-card {
  padding: 30px;
  min-height: 100%;
}

.home-lx-chart-card__title {
  margin: 0;
}

.home-lx-chart-card__meta {
  margin-top: 14px;
  max-width: 26rem;
}

.home-lx-page .wb-ability-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 26px;
}

.home-lx-page .wb-ability-legend {
  display: grid;
  gap: 12px;
}

.home-lx-page .wb-legend-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.home-lx-page .wb-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.home-lx-page .wb-legend-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--home-text);
}

.home-lx-page .wb-legend-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--home-muted);
}

.home-lx-page .wb-trend-svg-wrap {
  position: relative;
  min-height: 196px;
  margin-top: 22px;
}

.home-lx-page .wb-trend-svg-wrap svg {
  display: block;
  overflow: visible;
}

.home-lx-page .wb-trend-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  border: 1px dashed var(--home-border);
  background: rgba(245, 245, 247, 0.84);
  font-size: 14px;
  color: var(--home-muted);
}

.home-lx-page .wb-trend-empty.hidden {
  display: none;
}

.home-lx-page .wb-store-picker {
  position: relative;
  min-width: 0;
}

.home-lx-page .wb-store-picker.is-open {
  z-index: 8;
}

.home-lx-page .wb-store-picker__btn {
  min-height: 48px;
  width: 100%;
  border-radius: 18px;
  border: 1px solid var(--home-border);
  background: rgba(255, 255, 255, 0.86);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--home-text);
  box-shadow: none;
}

.home-lx-page .wb-store-picker__btn:hover {
  border-color: rgba(10, 132, 255, 0.18);
  background: #ffffff;
}

.home-lx-page .wb-store-picker__btn:focus-visible {
  border-color: rgba(10, 132, 255, 0.42);
  box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.12);
}

.home-lx-page .wb-store-picker__arrow {
  color: var(--home-muted);
}

.home-lx-page .wb-store-picker__list {
  top: calc(100% + 8px);
  border-radius: 16px;
  border-color: var(--home-border);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
  z-index: 24;
}

.home-lx-page .wb-store-picker__item {
  padding: 12px 16px;
  color: var(--home-text);
}

.home-lx-page .wb-store-picker__item:hover {
  background: rgba(10, 132, 255, 0.06);
}

body.theme-dark .home-lx-page {
  --home-bg-1: #0f1115;
  --home-bg-2: #151821;
  --home-surface: rgba(28, 28, 30, 0.88);
  --home-surface-soft: #25262b;
  --home-surface-strong: #2c2d33;
  --home-border: rgba(255, 255, 255, 0.08);
  --home-border-strong: rgba(255, 255, 255, 0.12);
  --home-text: #f5f5f7;
  --home-muted: #a1a1aa;
  --home-subtle: #7c7c84;
  --home-accent: #0a84ff;
  --home-accent-deep: #409cff;
  --home-accent-soft: rgba(10, 132, 255, 0.18);
  --home-danger: #ff6961;
  --home-ok: #32d74b;
  --home-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
  --home-shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.26);
}

body.theme-dark .home-lx-page::before {
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.06), transparent 22%),
    radial-gradient(circle at 100% 14%, rgba(10, 132, 255, 0.14), transparent 20%),
    linear-gradient(180deg, var(--home-bg-1) 0%, var(--home-bg-2) 48%, rgba(0, 0, 0, 0) 100%);
}

body.theme-dark .home-lx-page::after {
  display: none;
}

body.theme-dark .home-lx-overview {
  background: var(--home-surface);
}

body.theme-dark .home-lx-overview__aside,
body.theme-dark .home-lx-focus-card,
body.theme-dark .home-lx-todo-card,
body.theme-dark .home-lx-note-card,
body.theme-dark .home-lx-chart-card,
body.theme-dark .home-lx-metric-card {
  background: rgba(28, 28, 30, 0.88);
}

body.theme-dark .home-lx-result-card__tag,
body.theme-dark .home-lx-focus-card__chip,
body.theme-dark .home-lx-task-card__meta-pill,
body.theme-dark .home-lx-button--secondary,
body.theme-dark .home-lx-button--soft,
body.theme-dark .home-lx-status {
  background: rgba(255, 255, 255, 0.06);
}

body.theme-dark .home-lx-button--secondary,
body.theme-dark .home-lx-button--soft {
  color: var(--home-text);
}

body.theme-dark .home-lx-overview__aside {
  background: transparent;
}

body.theme-dark .home-lx-overview .home-lx-focus-card {
  background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .home-lx-todo-fold {
  background: rgba(255, 255, 255, 0.03);
}

body.theme-dark .home-lx-todo-fold__signal {
  background: rgba(255, 255, 255, 0.05);
}

body.theme-dark .home-lx-todo-fold__dot {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.04);
}

body.theme-dark .home-lx-task-list--completed .home-lx-task-card {
  background: rgba(255, 255, 255, 0.04);
}

body.theme-dark .home-lx-button--primary {
  background: var(--home-accent);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(10, 132, 255, 0.2);
}

body.theme-dark .home-lx-button--warning {
  background: rgba(255, 69, 58, 0.14);
  color: #ffb4ad;
}

body.theme-dark .home-lx-result-card {
  border-color: var(--home-border-strong);
  background: var(--home-surface);
}

body.theme-dark .home-lx-completed {
  background: rgba(50, 215, 75, 0.08);
}

body.theme-dark .home-lx-empty-block,
body.theme-dark .home-lx-page .wb-trend-empty {
  background: rgba(255, 255, 255, 0.03);
}

body.theme-dark .home-lx-page .wb-store-picker__btn {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

body.theme-dark .home-lx-page .wb-store-picker__list {
  background: rgba(31, 34, 43, 0.98);
}

@media (max-width: 1180px) {
  .home-lx-page {
    padding-inline: 16px;
  }

  .home-lx-overview__head,
  .home-lx-workflow-grid,
  .home-lx-insight-grid {
    grid-template-columns: 1fr;
  }

  .home-lx-chart-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .home-lx-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .home-lx-page {
    padding: 24px 14px 64px;
  }

  .home-lx-overview,
  .home-lx-focus-card,
  .home-lx-todo-card,
  .home-lx-result-card,
  .home-lx-note-card,
  .home-lx-chart-card {
    padding: 22px;
    border-radius: 24px;
  }

  .home-lx-insight-flow {
    gap: 18px;
  }

  .home-lx-section {
    margin-top: 24px;
  }

  .home-lx-overview__aside {
    width: 100%;
    margin-left: 0;
  }

  .home-lx-section__head {
    margin-bottom: 14px;
  }

  .home-lx-focus-card,
  .home-lx-task-card__layout,
  .home-lx-result-card__layout,
  .home-lx-note-card__head,
  .home-lx-todo-card__head,
  .home-lx-todo-fold__summary,
  .home-lx-todo-secondary__head {
    flex-direction: column;
    align-items: stretch;
  }

  .home-lx-focus-card__actions,
  .home-lx-task-card__actions {
    width: 100%;
  }

  .home-lx-button {
    width: 100%;
  }

  .home-lx-metrics {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .home-lx-section__title {
    font-size: 24px;
  }

  .home-lx-overview__title {
    max-width: none;
    font-size: clamp(2rem, 12vw, 2.6rem);
  }

  .home-lx-focus-card__title,
  .home-lx-result-card__title {
    max-width: none;
    font-size: clamp(1.6rem, 8vw, 2.1rem);
  }

  .home-lx-page .wb-ability-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  .home-lx-page .wb-trend-svg-wrap {
    min-height: 168px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-lx-page,
  .home-lx-button,
  .home-lx-task-card,
  .home-lx-result-card {
    animation: none !important;
    transition: none !important;
  }
}

.home-lx-page--management .home-lx-overview {
  padding: 32px 34px;
  border-radius: 32px;
}

.home-lx-page--management .home-lx-overview__head {
  gap: 28px;
  align-items: center;
}

.home-lx-page--management .home-lx-overview__title {
  margin-top: 12px;
  max-width: 7.4em;
  font-size: clamp(1.9rem, 2.6vw, 2.45rem);
}

.home-lx-page--management .home-lx-overview__desc {
  margin-top: 12px;
  max-width: 34ch;
  font-size: 14px;
  line-height: 1.7;
  color: #4f5560;
}

.home-bi-toolbar {
  min-width: min(100%, 420px);
}

.home-bi-toolbar__controls {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.home-bi-toolbar .wb-store-picker {
  flex: 1 1 auto;
  min-width: 0;
}

.home-bi-toolbar__refresh {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
  transition: transform 180ms var(--motion-ease-out), box-shadow 180ms var(--motion-ease-out), background 180ms var(--motion-ease-out);
}

.home-bi-toolbar__refresh:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.home-bi-toolbar__refresh:disabled {
  cursor: progress;
  transform: none;
  opacity: 0.72;
}

.home-bi-board {
  display: grid;
  gap: 16px;
}

.home-bi-inline-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.home-bi-inline-note--error {
  color: #8a5b12;
  background: rgba(255, 248, 235, 0.88);
  border-color: rgba(180, 83, 9, 0.12);
}

.home-bi-inline-note__text {
  min-width: 0;
}

.home-bi-inline-note__action {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.home-bi-kpi-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.48fr);
  gap: 14px;
}

.home-bi-story-card,
.home-bi-stat-card,
.home-bi-evidence-card,
.home-bi-proof-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(24px);
}

.home-bi-story-card {
  padding: 24px;
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 34%),
    radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.08), transparent 42%),
    rgba(255, 255, 255, 0.88);
}

.home-bi-story-card__head,
.home-bi-proof-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.home-bi-story-card__eyebrow,
.home-bi-proof-card__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8f9098;
}

.home-bi-story-card__title,
.home-bi-proof-card__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + 0.5vw, 1.7rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.home-bi-story-card__status {
  flex-shrink: 0;
}

.home-bi-story-card__desc {
  margin-top: 16px;
  font-size: 0.9875rem;
  line-height: 1.75;
  color: #3d3d42;
  max-width: 60ch;
}

.home-bi-story-card__meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.home-bi-meta-item {
  min-width: 0;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(245, 247, 250, 0.78);
  border: 1px solid rgba(15, 23, 42, 0.04);
}

.home-bi-meta-item__label,
.home-bi-stat-card__label,
.home-bi-evidence-card__label,
.home-bi-proof-card__meta {
  font-size: 0.75rem;
  font-weight: 600;
  color: #8f9098;
}

.home-bi-meta-item__value {
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.home-bi-headline-grid,
.home-bi-evidence-grid,
.home-bi-proof-grid {
  display: grid;
  gap: 14px;
}

.home-bi-headline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-bi-evidence-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-bi-proof-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-bi-stat-card,
.home-bi-evidence-card,
.home-bi-proof-card {
  padding: 18px 20px;
}

.home-bi-proof-card {
  display: flex;
  flex-direction: column;
}

.home-bi-proof-card__head {
  margin-bottom: 18px;
}

.home-bi-proof-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 126px;
}

.home-bi-proof-card__body--trend {
  justify-content: flex-end;
}

.home-bi-proof-card__body--rank {
  justify-content: flex-start;
}

.home-bi-proof-card__body--risk {
  justify-content: space-between;
  gap: 16px;
}

.home-bi-stat-card--warn {
  background:
    radial-gradient(circle at top right, rgba(248, 113, 113, 0.1), transparent 42%),
    rgba(255, 255, 255, 0.78);
}

.home-bi-stat-card--support {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(247, 248, 250, 0.76);
}

.home-bi-stat-card__value,
.home-bi-evidence-card__value {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.72rem, 1.42rem + 0.45vw, 2.15rem);
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--text-primary);
}

.home-bi-stat-card--support .home-bi-stat-card__value {
  font-size: clamp(1.52rem, 1.24rem + 0.3vw, 1.85rem);
}

.home-bi-stat-card__value span,
.home-bi-evidence-card__value span {
  margin-left: 6px;
  font-size: 0.88rem;
  letter-spacing: -0.02em;
  color: #8f9098;
}

.home-bi-stat-card__meta,
.home-bi-evidence-card__meta {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.home-bi-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}

.home-bi-status--ok {
  color: #157347;
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.16);
}

.home-bi-status--warn {
  color: #b45309;
  background: rgba(245, 158, 11, 0.14);
  border-color: rgba(245, 158, 11, 0.18);
}

.home-bi-spark {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
  min-height: 168px;
}

.home-bi-spark__item {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.home-bi-spark__bar-wrap {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  min-height: 112px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(241, 245, 249, 0.4) 0%, rgba(241, 245, 249, 0.95) 100%);
  padding: 10px 0;
}

.home-bi-spark__bar {
  display: block;
  width: min(30px, 70%);
  min-height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3db8ff 0%, #007aff 100%);
  box-shadow: 0 10px 18px rgba(0, 122, 255, 0.22);
}

.home-bi-spark__label,
.home-bi-spark__value {
  font-size: 0.75rem;
  color: #8f9098;
}

.home-bi-spark__value {
  color: var(--text-primary);
  font-weight: 600;
}

.home-bi-rank-list,
.home-bi-action-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
}

.home-bi-rank-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(245, 247, 250, 0.76);
}

.home-bi-rank-item__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.home-bi-rank-item__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #ffffff;
  color: #4b5563;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.home-bi-rank-item__label {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-primary);
}

.home-bi-rank-item__meta {
  font-size: 0.75rem;
  line-height: 1.45;
  color: #8f9098;
}

.home-bi-rank-item__value {
  padding-left: 8px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.home-bi-risk-copy {
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(245, 247, 250, 0.72);
}

.home-bi-risk-copy__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.home-bi-risk-copy__meta {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #8f9098;
}

.home-bi-action-item,
.home-bi-empty {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(245, 247, 250, 0.72);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.home-bi-empty {
  border: 1px dashed rgba(148, 163, 184, 0.18);
}

body.theme-dark .home-bi-toolbar__refresh {
  background: rgba(44, 44, 46, 0.9);
  border-color: rgba(255, 255, 255, 0.06);
  color: #f5f5f7;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

body.theme-dark .home-bi-story-card,
body.theme-dark .home-bi-stat-card,
body.theme-dark .home-bi-evidence-card,
body.theme-dark .home-bi-proof-card {
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(28, 28, 30, 0.82);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

body.theme-dark .home-bi-story-card {
  background:
    radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 34%),
    radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.14), transparent 42%),
    rgba(28, 28, 30, 0.92);
}

body.theme-dark .home-bi-inline-note {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(44, 44, 46, 0.76);
  color: rgba(245, 245, 247, 0.78);
}

body.theme-dark .home-bi-inline-note--error {
  background: rgba(83, 58, 24, 0.42);
  color: #f5d8a6;
}

body.theme-dark .home-bi-story-card__desc,
body.theme-dark .home-bi-meta-item__value,
body.theme-dark .home-bi-stat-card__value,
body.theme-dark .home-bi-evidence-card__value,
body.theme-dark .home-bi-proof-card__title,
body.theme-dark .home-bi-rank-item__label,
body.theme-dark .home-bi-rank-item__value,
body.theme-dark .home-bi-risk-copy__title {
  color: #f5f5f7;
}

body.theme-dark .home-bi-meta-item,
body.theme-dark .home-bi-rank-item,
body.theme-dark .home-bi-risk-copy,
body.theme-dark .home-bi-action-item,
body.theme-dark .home-bi-empty,
body.theme-dark .home-bi-spark__bar-wrap {
  background: rgba(44, 44, 46, 0.82);
}

body.theme-dark .home-bi-meta-item__label,
body.theme-dark .home-bi-stat-card__label,
body.theme-dark .home-bi-evidence-card__label,
body.theme-dark .home-bi-proof-card__meta,
body.theme-dark .home-bi-story-card__eyebrow,
body.theme-dark .home-bi-proof-card__eyebrow,
body.theme-dark .home-bi-spark__label,
body.theme-dark .home-bi-risk-copy__meta,
body.theme-dark .home-bi-rank-item__meta {
  color: rgba(245, 245, 247, 0.62);
}

body.theme-dark .home-bi-stat-card__meta,
body.theme-dark .home-bi-evidence-card__meta,
body.theme-dark .home-bi-action-item,
body.theme-dark .home-bi-empty {
  color: rgba(245, 245, 247, 0.76);
}

@media (max-width: 1200px) {
  .home-bi-kpi-shell {
    grid-template-columns: 1fr;
  }

  .home-bi-evidence-grid,
  .home-bi-proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-bi-story-card__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .home-lx-page--management .home-lx-overview {
    padding: 26px 24px;
  }

  .home-bi-kpi-shell,
  .home-bi-headline-grid,
  .home-bi-evidence-grid,
  .home-bi-proof-grid,
  .home-bi-story-card__meta {
    grid-template-columns: 1fr;
  }

  .home-bi-toolbar__controls,
  .home-bi-story-card__head,
  .home-bi-proof-card__head {
    flex-direction: column;
    align-items: stretch;
  }

  .home-bi-toolbar__refresh {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .home-bi-spark {
    gap: 8px;
    min-height: 160px;
  }

  .home-bi-spark__bar-wrap {
    min-height: 104px;
  }
}

/* ===================== Responsive Foundation (2026-04 mobile pass) ===================== */

html,
body {
  overflow-x: hidden;
}

#content-area,
#content-area > *,
.workbench-main-ios,
.app-page-shell,
.assessment-center-viewport,
.personnel-list-viewport,
.store-list-viewport,
.training-mobile-card,
.personnel-mobile-card {
  min-width: 0;
}

.training-mobile-list,
.personnel-mobile-list {
  display: grid;
  gap: 0.85rem;
}

.training-manage-toolbar {
  width: 100%;
}

.training-manage-toolbar__search {
  min-width: min(100%, 18rem);
}

.tm-detail-modal-card {
  min-width: 0;
}

.tm-detail-content,
.tm-day-grid-scroll {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tm-day-grid-scroll {
  scrollbar-width: thin;
}

.tm-detail-info-row {
  min-width: 0;
}

.tm-detail-info-row > span:last-child {
  word-break: break-word;
}

@media (max-width: 1023px) {
  .app-page-shell,
  .assessment-center-viewport,
  .personnel-list-viewport,
  .store-list-viewport {
    max-width: none;
    height: auto;
    min-height: calc(100dvh - 5rem);
    padding: 1.25rem;
  }

  .task-list-fixed-area,
  .task-list-scroll-area {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .task-list-footer {
    gap: 0.75rem;
  }

  .task-list-owner-card {
    width: 100%;
  }

  .assessment-center-viewport {
    overflow: visible;
  }

  .assessment-center-viewport > .app-page-panel,
  .assessment-center-panel-wrap,
  .assessment-center-scroll-pane {
    overflow: visible;
  }

  .assessment-center-panel-wrap {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .assessment-center-chat-log {
    min-height: 24rem;
  }

  .assessment-center-paper-footer {
    gap: 0.75rem;
  }

  .ios-sheet-overlay {
    padding: 1rem;
  }

  .ios-sheet-overlay[data-align="center"] .ios-sheet-card {
    width: min(720px, 100%);
  }

  .tm-detail-modal-card {
    top: 1rem;
    right: 1rem;
    bottom: 1rem;
    left: max(40vw, 1rem);
  }
}

@media (max-width: 640px) {
  .workbench-ios .workbench-main-ios {
    padding-top: 4.75rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  #content-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .app-page-shell,
  .assessment-center-viewport,
  .personnel-list-viewport,
  .store-list-viewport {
    padding:
      calc(0.9rem + env(safe-area-inset-top))
      1rem
      calc(1rem + env(safe-area-inset-bottom));
    min-height: calc(100dvh - 4.5rem);
  }

  .app-page-shell {
    gap: 1rem;
  }

  #content-area .mx-auto.max-w-5xl,
  #content-area .mx-auto.max-w-6xl {
    padding: 1rem !important;
  }

  .app-page-desc {
    max-width: none;
    line-height: 1.65;
  }

  .app-page-actions,
  .personnel-toolbar-row,
  .task-list-footer,
  .assessment-center-paper-footer,
  .training-mobile-actions,
  .personnel-mobile-actions,
  .tm-detail-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .app-page-actions > *,
  .task-list-action-btn,
  .task-list-toolbar-btn,
  .assessment-center-paper-footer > *,
  .training-mobile-actions > *,
  .personnel-mobile-actions > *,
  .tm-detail-action-row > * {
    width: 100%;
    justify-content: center;
  }

  .personnel-toolbar-pill,
  .personnel-filter-pill,
  select.capsule-select,
  .training-manage-toolbar__search,
  .store-mgm-search {
    width: 100%;
    min-width: 0;
  }

  .training-manage-toolbar__search {
    flex-basis: 100%;
  }

  .training-mobile-meta,
  .personnel-mobile-meta {
    grid-template-columns: 1fr !important;
  }

  .training-mobile-meta > .col-span-2,
  .personnel-mobile-meta > .col-span-2 {
    grid-column: auto !important;
  }

  .assessment-center-panel-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .assessment-center-session,
  .assessment-center-paper-card {
    border-radius: 26px;
  }

  .assessment-center-chat-log {
    min-height: 46dvh;
  }

  .assessment-center-paper-questions {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .ios-sheet-overlay {
    padding: 0;
  }

  .ios-sheet-overlay[data-align="center"] {
    align-items: flex-end;
  }

  .ios-sheet-card,
  .ios-sheet-overlay[data-align="center"] .ios-sheet-card {
    width: 100%;
    max-width: none;
    max-height: calc(100dvh - env(safe-area-inset-top));
    margin-top: auto;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.16);
  }

  .tm-detail-modal-card {
    top: max(env(safe-area-inset-top), 0.75rem);
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    border-radius: 24px;
  }

  .tm-detail-content {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  .tm-detail-info-grid {
    grid-template-columns: 1fr !important;
  }

  .tm-detail-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    background: #ffffff;
  }

  .tm-detail-info-row > span:last-child {
    text-align: left !important;
  }

  .task-list-fixed-area,
  .task-list-scroll-area {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .task-list-card,
  .task-list-summary-card {
    padding: 1rem !important;
  }

  .task-list-owner-card {
    padding: 0.85rem 1rem;
  }

  .task-list-toolbar-btn,
  .task-list-action-btn {
    min-height: 44px;
  }

  #personnel-table-container,
  .store-mgm-table-wrap,
  .qq-biz-table,
  #audit-table-scroll,
  .audit-table-scroll-shell {
    scrollbar-width: thin;
  }
}