.legacy-app {
  --kv-page-max-width: 1260px;
  --kv-page-gutter-x: 24px;
  --kv-page-gutter-y: 24px;
  --kv-panel-bg: color-mix(in srgb, var(--surface) 96%, transparent);
  --kv-panel-border: color-mix(in srgb, var(--border-strong) 68%, var(--border));
  --kv-panel-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
  --kv-panel-radius: 24px;
  --kv-section-radius: 20px;
  --kv-control-radius: 14px;
  --kv-panel-padding: 24px;
  --kv-panel-gap: 18px;
  --kv-heading-color: var(--text-strong);
  --kv-body-color: var(--text);
  --kv-muted-color: var(--text-soft);
  --kv-empty-bg: color-mix(in srgb, var(--surface-soft) 78%, var(--surface));
  --kv-empty-border: color-mix(in srgb, var(--border) 88%, transparent);
}

.legacy-app[data-theme="dark"] {
  --kv-panel-bg: color-mix(in srgb, var(--surface) 92%, #0b1220 8%);
  --kv-panel-border: color-mix(in srgb, var(--border-strong) 76%, var(--border));
  --kv-panel-shadow: 0 18px 36px rgba(2, 6, 23, 0.28);
  --kv-empty-bg: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  --kv-empty-border: color-mix(in srgb, var(--border) 86%, transparent);
}

.legacy-app.auth-login-mode {
  --kv-panel-bg: color-mix(in srgb, var(--login-panel-bg) 96%, transparent);
  --kv-panel-border: var(--login-outline);
  --kv-panel-shadow: 0 18px 36px rgba(2, 8, 23, 0.16);
  --kv-heading-color: var(--login-text);
  --kv-body-color: var(--login-text);
  --kv-muted-color: var(--login-text-muted);
  --kv-empty-bg: color-mix(in srgb, var(--login-panel-bg) 98%, transparent);
  --kv-empty-border: var(--login-outline);
}