/* ==========================================================================
   寻物中台 V5 · clarity 覆盖层
   版本 v0.1.0 · 2026-11-06
   依据：寻物设计系统 v0.5.0（2026-11-04，任务 VI-007），正式方向 clarity「清晰秩序」
   变量来源：ds/tokens.css（唯一颜色/形态/动效源）+ ds/foundation.css（刻度/尺寸/焦点）
   作用域：html[data-variant="clarity"]。移除该属性 + 本文件即可回到原视觉，不改动 style.css。
   不新增品牌色值：所有颜色均取自语义变量；图表单系列复用 --action，未新建系列色。
   覆盖范围：登录页、应用外壳（侧栏/顶栏/页头）、经营总览（筛选条/Hero/KPI/面板/表格/排行/图表）。
   未覆盖：深色主题（tokens 已有值，但 V5 图表存在内联色，需单独验证）、其余业务页逐页验收。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. 变量接入与基础
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] {
  /* V5 现有组件用到的语义别名，全部指向设计系统变量，避免局部另造色表 */
  --v5-page-bg: var(--bg);
  --v5-card-bg: var(--surface);
  --v5-card-border: var(--border);
  --v5-text: var(--text);
  --v5-text-muted: var(--muted);
  --v5-tap-min: var(--touch-target);

  font-family: var(--font-ui);
  font-size: var(--font-body);
  line-height: var(--line-body);
  color: var(--text);
  background: var(--bg);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}

html[data-variant="clarity"] body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
}

html[data-variant="clarity"] button,
html[data-variant="clarity"] input,
html[data-variant="clarity"] select,
html[data-variant="clarity"] textarea {
  font-family: inherit;
  font-size: var(--font-body);
  color: var(--text);
}

html[data-variant="clarity"] ::selection {
  background: var(--selected);
  color: var(--selected-text);
}

/* 可见焦点：统一 3px 焦点环，与选中态区分（DESIGN §4.1 / §14，VI-008） */
html[data-variant="clarity"] a:focus-visible,
html[data-variant="clarity"] button:focus-visible,
html[data-variant="clarity"] input:focus-visible,
html[data-variant="clarity"] select:focus-visible,
html[data-variant="clarity"] textarea:focus-visible,
html[data-variant="clarity"] [tabindex]:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* 减少动态（DESIGN §4 / VI-007） */
@media (prefers-reduced-motion: reduce) {
  html[data-variant="clarity"] *,
  html[data-variant="clarity"] *::before,
  html[data-variant="clarity"] *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* ---------------------------------------------------------------------------
   1. 登录页（DESIGN §1 品牌识别 / §4.0 控件结构 / §8 响应式）
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .login-wrap {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  background: var(--bg);
}

html[data-variant="clarity"] .login-art {
  background: var(--surface);
  border-right: 1px solid var(--border);
  color: var(--text);
  padding: var(--space-12) 6vw var(--space-10) var(--space-16);
  overflow: visible;
  /* 左栏改为「居中品牌组」：logo/标语/页脚按固定节奏成组，
     不再用 space-between 把三块撑到上下两端（矮内容高容器会出现大空洞） */
  justify-content: center;
  gap: var(--space-6);
}

/* 规范：默认不用装饰性渐变与光环 */
html[data-variant="clarity"] .login-art::before {
  content: none;
  display: none;
}

html[data-variant="clarity"] .ds-logo-horizontal {
  display: block;
  width: 120px; /* 横版最小显示宽度 112px（VI-023） */
  height: auto;
}

html[data-variant="clarity"] .brand-mark {
  display: none;
}

html[data-variant="clarity"] .login-copy {
  max-width: 520px;
}

html[data-variant="clarity"] .eyebrow,
html[data-variant="clarity"] .small-label {
  font-size: var(--font-caption);
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--muted);
}

html[data-variant="clarity"] .login-copy .eyebrow {
  color: var(--muted);
}

html[data-variant="clarity"] .login-copy h1 {
  font-family: var(--font-ui);
  font-size: 28px;
  line-height: 40px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
  margin: 4px 0 12px;
}

html[data-variant="clarity"] .login-copy p {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 22px;
  max-width: 420px;
}

html[data-variant="clarity"] .art-footer {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: var(--space-6);
}

html[data-variant="clarity"] .login-form-area {
  background: var(--bg);
  padding: 40px 24px;
}

html[data-variant="clarity"] .login-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
}

html[data-variant="clarity"] .login-step h2 {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
  margin: 12px 0 8px;
}

html[data-variant="clarity"] .login-step p {
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 22px;
  margin: 0 0 var(--space-6);
}

html[data-variant="clarity"] .login-card label {
  display: block;
  font-size: var(--font-body);
  font-weight: 600;
  color: var(--text);
  margin: var(--space-4) 0;
}

/* 隐藏域不渲染，但会把原工程的 #fbfcfc/#dce4e2 带进计算样式，一并归一 */
html[data-variant="clarity"] input[type="hidden"] {
  background: none;
  border: 0;
}

html[data-variant="clarity"] .login-card input:not([type="hidden"]) {
  display: block;
  width: 100%;
  min-height: var(--control-md);
  margin-top: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .login-card input::placeholder,
html[data-variant="clarity"] .drawer input::placeholder {
  color: var(--muted);
  opacity: 1;
}

html[data-variant="clarity"] .login-card input:focus,
html[data-variant="clarity"] .search input:focus,
html[data-variant="clarity"] .drawer input:focus,
html[data-variant="clarity"] .drawer select:focus,
html[data-variant="clarity"] .drawer textarea:focus {
  border-color: var(--focus);
  box-shadow: none;
  outline: var(--focus-width) solid var(--focus);
  outline-offset: 1px;
}

html[data-variant="clarity"] .primary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  background: var(--action);
  color: var(--on-action);
  border: 0;
  border-radius: var(--radius-control);
  font-size: var(--font-body);
  font-weight: 600;
  transition: background var(--motion-fast) var(--ease);
}

html[data-variant="clarity"] .primary-button:hover {
  background: var(--action-hover);
}

/* 忙碌 ≠ 禁用：忙碌保持主色（文字仍 4.5:1），禁用改用中性底 + 可读文字。
   规范 §2 明确禁止「先降低禁用透明度，再让为什么不可用也无法阅读」。 */
html[data-variant="clarity"] .primary-button[aria-busy="true"] {
  background: var(--action-hover);
  opacity: 1;
  cursor: progress;
}

html[data-variant="clarity"] .primary-button:disabled:not([aria-busy="true"]) {
  background: var(--surface-alt);
  color: var(--muted);
  border: 1px solid var(--border);
  opacity: 1;
  cursor: not-allowed;
}

/* 入口/角色选择卡：可点，但不是按钮外观的重型卡片（DESIGN §4.4 卡片） */
html[data-variant="clarity"] .choice-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text);
  min-height: 88px;
  padding: var(--space-4);
  box-shadow: none;
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

html[data-variant="clarity"] .choice-card:hover {
  background: var(--surface-alt);
  border-color: var(--strong-border);
  box-shadow: none;
  transform: none;
}

html[data-variant="clarity"] .choice-card strong {
  font-size: var(--font-body);
  line-height: 22px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text);
}

html[data-variant="clarity"] #role-cards .choice-card {
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
}

html[data-variant="clarity"] #role-cards .choice-card strong,
html[data-variant="clarity"] #portal-cards .choice-card strong {
  font-size: var(--font-body);
}

html[data-variant="clarity"] .back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-md);
  margin-bottom: var(--space-2);
  padding: 0;
  background: none;
  border: 0;
  color: var(--action);
  font-size: var(--font-body);
  font-weight: 600;
}

html[data-variant="clarity"] .back-link:hover {
  color: var(--action-hover);
  text-decoration: underline;
}

html[data-variant="clarity"] #chosen-caption,
html[data-variant="clarity"] #portal-caption {
  color: var(--muted);
  letter-spacing: 0.14em;
}

html[data-variant="clarity"] .login-note {
  margin-top: var(--space-6);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .form-error {
  min-height: 18px;
  color: var(--danger);
  font-size: var(--font-caption);
  line-height: 18px;
}

/* ---------------------------------------------------------------------------
   2. 应用外壳：侧栏 / 顶栏 / 页头（DESIGN §4.3 导航、§5 布局）
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .shell {
  background: var(--bg);
  color: var(--text);
}

html[data-variant="clarity"] .sidebar {
  width: 240px;
  padding: var(--space-6) var(--space-3) var(--space-4);
  background: var(--sidebar);
  color: var(--text);
  border-right: 1px solid var(--border);
}

html[data-variant="clarity"] .sidebar-brand {
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-6);
}

html[data-variant="clarity"] .ds-logo-symbol {
  width: 24px; /* 图形标最小显示宽度 24px（VI-023） */
  height: auto;
  flex: none;
  display: block;
}

html[data-variant="clarity"] .brand-icon {
  background: transparent;
  color: var(--text);
  border-radius: 0;
  width: auto;
  height: auto;
}

html[data-variant="clarity"] .sidebar-brand strong {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--text);
}

html[data-variant="clarity"] .sidebar-brand small {
  font-size: var(--font-caption);
  line-height: 18px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 4px;
}

html[data-variant="clarity"] .workspace-label {
  font-size: var(--font-caption);
  line-height: 18px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 0 var(--space-2) var(--space-2);
}

html[data-variant="clarity"] nav button {
  min-height: var(--control-md);
  margin: 4px 0;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--muted);
  font-size: var(--font-body);
  font-weight: 500;
  gap: var(--space-3);
  transition: background var(--motion-fast) var(--ease),
    color var(--motion-fast) var(--ease);
}

html[data-variant="clarity"] nav button:hover {
  background: var(--surface-alt);
  color: var(--text);
}

html[data-variant="clarity"] nav button.active {
  background: var(--selected);
  color: var(--selected-text);
  font-weight: 600;
}

html[data-variant="clarity"] nav button .nav-icon {
  width: var(--icon-md);
  font-size: var(--font-body);
}

html[data-variant="clarity"] nav button .nav-arrow {
  opacity: 0.5;
}

html[data-variant="clarity"] .sidebar-bottom {
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--space-2) 0;
  gap: var(--space-2);
}

html[data-variant="clarity"] .system-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid var(--success-bg);
  box-sizing: content-box;
  /* 必须显式归零：style.css 里遗留 box-shadow 环，只写 border 会让它复活 */
  box-shadow: none;
}

html[data-variant="clarity"] .sidebar-bottom strong {
  font-size: var(--font-caption);
  line-height: 18px;
  color: var(--text);
}

html[data-variant="clarity"] .sidebar-bottom small {
  font-size: var(--font-caption);
  line-height: 18px;
  color: var(--muted);
  margin-top: 4px;
}

html[data-variant="clarity"] .topbar {
  height: 64px;
  padding: 0 var(--space-8);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-caption);
  color: var(--muted);
}

html[data-variant="clarity"] .topbar strong {
  color: var(--text);
  font-weight: 600;
  font-size: var(--font-body);
}

/* 分隔符是文字节点，保持 --muted 实色，避免透明度把它降到 1.65:1 */
html[data-variant="clarity"] .top-separator {
  opacity: 1;
  color: var(--muted);
}

html[data-variant="clarity"] .top-actions {
  gap: var(--space-4);
}

html[data-variant="clarity"] .demo-badge {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: var(--font-caption);
  line-height: 18px;
  font-weight: 600;
}

html[data-variant="clarity"] .demo-badge.real {
  background: var(--success-bg);
  color: var(--success);
}

html[data-variant="clarity"] .logout {
  min-height: 32px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  background: none;
  color: var(--muted);
  font-size: var(--font-caption);
}

html[data-variant="clarity"] .logout:hover {
  background: var(--surface-alt);
  color: var(--text);
}

html[data-variant="clarity"] .content {
  max-width: var(--content-max);
  padding: var(--space-8) var(--space-8) var(--space-16);
}

html[data-variant="clarity"] .page-heading {
  align-items: flex-start;
  margin-bottom: var(--space-6);
}

html[data-variant="clarity"] .page-heading h1 {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 4px;
}

html[data-variant="clarity"] .page-heading p {
  font-size: var(--font-body);
  line-height: 22px;
  color: var(--muted);
  margin: 0;
}

html[data-variant="clarity"] .heading-actions {
  gap: var(--space-3);
}

html[data-variant="clarity"] .role-pill {
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  font-size: var(--font-caption);
  line-height: 18px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   3. 按钮（DESIGN §4.1）：主/次两级，命中区 ≥40px，触控 ≥44px
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .outline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-md);
  padding: 0 var(--space-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  font-size: var(--font-body);
  font-weight: 500;
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

html[data-variant="clarity"] .outline-button:hover {
  background: var(--surface-alt);
  border-color: var(--strong-border);
}

/* ---------------------------------------------------------------------------
   4. 经营总览：经营范围摘要（原 Hero）
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text);
  overflow: hidden;
}

html[data-variant="clarity"] .hero::after {
  content: none;
  display: none;
}

html[data-variant="clarity"] .hero-text {
  padding: var(--space-6);
}

html[data-variant="clarity"] .hero-text span {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

html[data-variant="clarity"] .hero-text h2 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--text);
  margin: 8px 0 4px;
}

html[data-variant="clarity"] .hero-text p {
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 22px;
  margin: 0;
}

html[data-variant="clarity"] .hero-side {
  padding: var(--space-6) var(--space-8);
  border-left: 1px solid var(--border);
}

html[data-variant="clarity"] .hero-side strong {
  font-size: var(--font-heading);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] .hero-side small {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   5. KPI 卡（DESIGN §4.4 卡片、§6 层次）
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .stat-grid {
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-6);
}

html[data-variant="clarity"] .stat {
  min-height: 0;
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}

html[data-variant="clarity"] .stat-label {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .stat-symbol {
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 1;
}

html[data-variant="clarity"] .stat strong {
  margin: var(--space-3) 0 var(--space-1);
  color: var(--text);
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.02em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] .stat small {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

/* ---------------------------------------------------------------------------
   6. 面板 / 表格 / 排名 / 快捷列表 / 空态（DESIGN §4.4 数据展示）
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .panel,
html[data-variant="clarity"] .table-panel,
html[data-variant="clarity"] .channel-month-panel,
html[data-variant="clarity"] .channel-trend-panel,
html[data-variant="clarity"] .ranking-panel,
html[data-variant="clarity"] .cross-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}

html[data-variant="clarity"] .panel,
html[data-variant="clarity"] .ranking-panel {
  padding: var(--space-6);
}

html[data-variant="clarity"] .panel-heading,
html[data-variant="clarity"] .cross-panel .panel-heading,
html[data-variant="clarity"] .channel-month-panel .panel-heading,
html[data-variant="clarity"] .channel-trend-panel .panel-heading {
  margin-bottom: var(--space-4);
  padding: var(--space-6);
}

html[data-variant="clarity"] .panel > .panel-heading {
  padding: 0 0 var(--space-4);
  margin-bottom: var(--space-4);
}

html[data-variant="clarity"] .panel h3,
html[data-variant="clarity"] .table-toolbar h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: var(--text);
}

html[data-variant="clarity"] .panel-sub {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .panel-heading p,
html[data-variant="clarity"] .cross-panel .panel-heading p,
html[data-variant="clarity"] .channel-month-panel .panel-heading p,
html[data-variant="clarity"] .channel-trend-panel .panel-heading p {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

/* 表头/面板标题的分隔线也要走 tokens（原工程这里是 #e9efec，属非 token 色值） */
html[data-variant="clarity"] .table-toolbar,
html[data-variant="clarity"] .cross-panel .panel-heading,
html[data-variant="clarity"] .channel-month-panel .panel-heading,
html[data-variant="clarity"] .channel-trend-panel .panel-heading,
html[data-variant="clarity"] .real-quality .panel-heading {
  border-bottom-color: var(--border);
}

html[data-variant="clarity"] table {
  font-size: var(--font-body);
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] th {
  padding: 12px var(--space-4);
  background: var(--surface-alt);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

html[data-variant="clarity"] td {
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--border);
  font-size: var(--font-body);
  line-height: 22px;
  color: var(--text);
}

html[data-variant="clarity"] tr:last-child td {
  border-bottom: 0;
}

html[data-variant="clarity"] tbody tr:hover {
  background: var(--surface-alt);
}

html[data-variant="clarity"] .cross-panel tbody tr:hover,
html[data-variant="clarity"] .channel-month-panel tbody tr:hover,
html[data-variant="clarity"] .channel-trend-panel tbody tr:hover {
  background: var(--surface-alt);
  cursor: default;
}

html[data-variant="clarity"] .id-cell {
  color: var(--action);
  font-weight: 600;
}

html[data-variant="clarity"] .money {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] .quick-list {
  gap: var(--space-2);
}

html[data-variant="clarity"] .quick-item {
  padding: 12px var(--space-3);
  background: var(--surface-alt);
  border-radius: var(--radius-control);
  font-size: var(--font-body);
  line-height: 22px;
}

html[data-variant="clarity"] .quick-item b {
  color: var(--text);
  font-weight: 600;
}

html[data-variant="clarity"] .quick-item span {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] .quick-sub {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  margin-top: 4px;
}

html[data-variant="clarity"] .empty {
  padding: var(--space-12) var(--space-4);
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 22px;
}

/* 排名条：单系列复用 --action（未新建系列色） */
/* 表外间距统一到 4 基数 */
html[data-variant="clarity"] .ranking-list {
  gap: var(--space-4);
}

html[data-variant="clarity"] .cross-panel {
  margin-top: var(--space-4);
}

html[data-variant="clarity"] .cross-panel .panel-heading p {
  margin: var(--space-1) 0 0;
}

html[data-variant="clarity"] .ranking-label {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .ranking-label b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] .ranking-track {
  height: 8px;
  margin-top: var(--space-2);
  background: var(--surface-alt);
  border-radius: 999px;
}

html[data-variant="clarity"] .ranking-track i {
  background: var(--action);
  border-radius: 999px;
}

/* 状态标签：文字 + 语义底色，不只靠颜色（DESIGN §2 / VI-003） */
html[data-variant="clarity"] .tag {
  padding: 4px 8px;
  border-radius: var(--radius-control);
  background: var(--surface-alt);
  color: var(--text);
  font-size: var(--font-caption);
  line-height: 18px;
  font-weight: 600;
}

html[data-variant="clarity"] .tag.wait {
  background: var(--warning-bg);
  color: var(--warning);
}

html[data-variant="clarity"] .tag.stop {
  background: var(--danger-bg);
  color: var(--danger);
}

/* ---------------------------------------------------------------------------
   7. 图表（DESIGN §4.4 图表、§2 图表色）
      单系列统一使用 --action；内联 fill 属性优先级低于作者样式，故可被覆盖。
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .trend-svg {
  height: 200px;
}

/* SVG 根节点继承的默认黑也归到语义变量，避免出现 tokens 之外的颜色 */
html[data-variant="clarity"] .trend-svg {
  fill: var(--muted);
  stroke: var(--border);
}

html[data-variant="clarity"] .trend-svg text {
  fill: var(--muted);
  font-size: var(--font-caption);
}

html[data-variant="clarity"] .trend-svg line {
  stroke: var(--border);
}

html[data-variant="clarity"] .trend-svg rect {
  fill: var(--action);
  rx: 4px;
}

html[data-variant="clarity"] .chart {
  background: none;
  border-bottom: 1px solid var(--border);
}

html[data-variant="clarity"] .bar {
  background: var(--action);
  border-radius: 4px 4px 0 0;
}

html[data-variant="clarity"] .bar-value,
html[data-variant="clarity"] .bar-date {
  color: var(--muted);
  font-size: var(--font-caption);
}

/* ---------------------------------------------------------------------------
   8. 筛选条与表单控件（DESIGN §4.2 / §5）
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .dashboard-filters,
html[data-variant="clarity"] .order-filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}

html[data-variant="clarity"] .dashboard-filters strong {
  font-size: var(--font-body);
  line-height: 22px;
  color: var(--text);
  font-weight: 600;
}

html[data-variant="clarity"] .dashboard-filters small {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  margin-top: 4px;
}

html[data-variant="clarity"] .dashboard-filter-controls {
  gap: var(--space-3);
}

html[data-variant="clarity"] .dashboard-grid {
  gap: var(--space-4);
}

html[data-variant="clarity"] .ranking-grid {
  margin-top: var(--space-4);
}

html[data-variant="clarity"] .dashboard-filter-controls label,
html[data-variant="clarity"] .order-filters label,
html[data-variant="clarity"] .video-activity-controls label {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  gap: 4px;
}

html[data-variant="clarity"] .dashboard-filter-controls input,
html[data-variant="clarity"] .dashboard-filter-controls select,
html[data-variant="clarity"] .order-filters input,
html[data-variant="clarity"] .order-filters select,
html[data-variant="clarity"] .video-activity-controls input,
html[data-variant="clarity"] .video-activity-controls select,
html[data-variant="clarity"] .pager select {
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .dashboard-filter-controls input:focus,
html[data-variant="clarity"] .dashboard-filter-controls select:focus,
html[data-variant="clarity"] .order-filters input:focus,
html[data-variant="clarity"] .order-filters select:focus,
html[data-variant="clarity"] .video-activity-controls input:focus,
html[data-variant="clarity"] .video-activity-controls select:focus,
html[data-variant="clarity"] .pager select:focus {
  border-color: var(--focus);
  outline: var(--focus-width) solid var(--focus);
  outline-offset: 1px;
}

html[data-variant="clarity"] .search {
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--muted);
  padding-left: var(--space-3);
}

html[data-variant="clarity"] .search input {
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--font-body);
}


/* ---------------------------------------------------------------------------
   8.5 列表页（订单中心/对账/IP/渠道/矩阵/商品/授权/作品/投流/稽查/发佣）
       这一节是 P1 批量改造的共用规则：表格容器 + 工具栏 + 筛选 + 分页 + 说明
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .table-toolbar {
  padding: var(--space-6);
  gap: var(--space-4);
}

/* 表格容器 padding 为 0（表格要贴边横向滚动），因此把首/末列与工具栏、筛选条的
   横向内距对齐到同一个 24px，避免"标题文字轴"与"表格文字轴"差 8px */
html[data-variant="clarity"] .table-scroll th:first-child,
html[data-variant="clarity"] .table-scroll td:first-child {
  padding-left: var(--space-6);
}

html[data-variant="clarity"] .table-scroll th:last-child,
html[data-variant="clarity"] .table-scroll td:last-child {
  padding-right: var(--space-6);
}

html[data-variant="clarity"] .table-toolbar h3 {
  margin: 0 0 var(--space-1);
}

/* 原工程这里是 11px / #91a0a3（对比度 2.71:1），是列表页最主要的可读性缺陷 */
html[data-variant="clarity"] .table-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .table-toolbar-actions {
  gap: var(--space-2);
}

html[data-variant="clarity"] .order-filters {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-5);
}

html[data-variant="clarity"] .order-filters label {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  gap: var(--space-1);
}

html[data-variant="clarity"] .pager {
  padding: 0 var(--space-6) var(--space-4);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .prospect-note {
  margin: 0 0 var(--space-4);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .table-toolbar .search {
  min-height: var(--control-md);
}

html[data-variant="clarity"] .outline-button:disabled {
  background: var(--surface-alt);
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed;
  /* 必须显式归零：style.css 有 button:disabled{opacity:.55}，
     叠加后前景会降到约 2.15:1（§2 禁止"降透明度导致原因不可读"） */
  opacity: 1;
}

/* 宽表在容器内横向滚动时给出可感知的边界，不隐藏滚动条、不撑宽页面 */
html[data-variant="clarity"] .table-scroll {
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

/* 可横向滚动的区域本身可聚焦，给它与其余控件一致的焦点环，不用浏览器默认蓝环 */
html[data-variant="clarity"] .table-scroll:focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: calc(-1 * var(--focus-width));
}

/* 宽表：首列（业务主键）吸附，滚到右侧字段时仍能对上"这一行是谁" */
html[data-variant="clarity"] .table-scroll th:first-child,
html[data-variant="clarity"] .table-scroll td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

html[data-variant="clarity"] .table-scroll thead th:first-child {
  z-index: 2;
  background: var(--surface-alt);
}

html[data-variant="clarity"] .table-scroll tbody tr:hover td:first-child {
  background: var(--surface-alt);
}

/* ---------------------------------------------------------------------------
   9. 抽屉 / 轻提示（DESIGN §4.5）
   --------------------------------------------------------------------------- */
/* 层叠顺序走 foundation 的 z 刻度，不用无声明数值（SP-07） */
html[data-variant="clarity"] .drawer-layer {
  z-index: var(--z-dialog);
}

html[data-variant="clarity"] .drawer-backdrop {
  background: color-mix(in srgb, var(--text) 45%, transparent);
}

html[data-variant="clarity"] .drawer {
  padding: var(--space-8);
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 48px color-mix(in srgb, var(--text) 10%, transparent);
}

html[data-variant="clarity"] .drawer-close {
  padding: 0;
  width: var(--control-md);
  height: var(--control-md);
  background: var(--surface-alt);
  color: var(--muted);
  border-radius: var(--radius-control);
  font-size: 20px;
}

html[data-variant="clarity"] .drawer-close:hover {
  background: var(--border);
  color: var(--text);
}

html[data-variant="clarity"] .drawer h2 {
  margin: var(--space-4) 0 var(--space-1);
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--text);
}

html[data-variant="clarity"] .drawer p {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 22px;
}

html[data-variant="clarity"] .drawer-field span {
  color: var(--muted);
  font-size: var(--font-caption);
}

html[data-variant="clarity"] .drawer-field strong {
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .drawer form {
  margin-top: var(--space-6);
}

html[data-variant="clarity"] .drawer .primary-button {
  margin-top: var(--space-6);
}

html[data-variant="clarity"] .drawer label {
  margin: var(--space-4) 0;
  color: var(--text);
  font-size: var(--font-body);
  font-weight: 600;
}

html[data-variant="clarity"] .drawer input,
html[data-variant="clarity"] .drawer select,
html[data-variant="clarity"] .drawer textarea {
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .toast {
  bottom: var(--space-6);
  right: var(--space-6);
  max-width: 420px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent);
  font-size: var(--font-body);
  line-height: 22px;
  z-index: var(--z-toast);
}

/* 必要控件边界：--border 对白仅 1.29:1，不满足 VI-008「必要控件边界 ≥3:1」，
   故输入框、次按钮、选择卡的边界统一使用 --strong-border（3.77:1）。
   卡片/面板/表格分隔线属层次表达，不是控件边界，仍用 --border。 */
html[data-variant="clarity"] .outline-button,
html[data-variant="clarity"] .login-card input:not([type="hidden"]),
html[data-variant="clarity"] .choice-card,
html[data-variant="clarity"] .search,
html[data-variant="clarity"] .drawer input,
html[data-variant="clarity"] .drawer select,
html[data-variant="clarity"] .drawer textarea,
html[data-variant="clarity"] .dashboard-filter-controls input,
html[data-variant="clarity"] .dashboard-filter-controls select,
html[data-variant="clarity"] .order-filters input,
html[data-variant="clarity"] .order-filters select,
html[data-variant="clarity"] .video-activity-controls input,
html[data-variant="clarity"] .video-activity-controls select,
html[data-variant="clarity"] .pager select {
  border-color: var(--strong-border);
}

/* 按下态：hover 颜色 + 1px 下沉，形成可感知的按下反馈；
   translate 不改变 width/height 与命中区（DESIGN §4.1「按下反馈不能造成整行跳动」） */
html[data-variant="clarity"] .primary-button:active {
  background: var(--action-hover);
  transform: translateY(1px);
}
html[data-variant="clarity"] .outline-button:active,
html[data-variant="clarity"] .choice-card:active {
  background: var(--border);
}

/* ---------------------------------------------------------------------------
   9.5 电视数据看板（原深色渐变大屏 → clarity 浅色，与经营总览同构）
   原实现是 radial-gradient 深绿底 + #ffffff10 半透明卡片，导致同一行三张 KPI
   卡因透底取到不同的底色（实测 rgb(32,53,64) / (34,60,70) / (40,83,84)），
   且整块深绿与 clarity 的中性雾白外壳不一致。此处按 §1「不用装饰性渐变、
   玻璃叠层」改为不透明语义面：卡片同色、边界走 --border、文字走 --text/--muted。
   只读语义变量，不新增色值。
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .tv-board {
  min-height: 0;
  padding: var(--space-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--text);
}

/* 全屏是大屏观看场景，背景仍为不透明 --surface，圆角归零，内距放大。
   注：不再写 min-height:100vh —— Chrome 对 :fullscreen 的 UA 规则带 !important，
   该声明是死代码（独立复核实测读回 0）。 */
html[data-variant="clarity"] .tv-board:fullscreen {
  padding: var(--space-10);
  border: 0;
  border-radius: 0;
  background: var(--surface);
  overflow: auto;
}

html[data-variant="clarity"] .tv-head {
  gap: var(--space-6);
  align-items: start;
}

html[data-variant="clarity"] .tv-head span {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  letter-spacing: 0.1em;
  font-weight: 600;
}

html[data-variant="clarity"] .tv-head h2 {
  margin: var(--space-2) 0 var(--space-1);
  color: var(--text);
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] .tv-head p,
html[data-variant="clarity"] .tv-footnote {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .tv-footnote {
  margin: var(--space-6) 0 0;
}

html[data-variant="clarity"] .tv-actions {
  gap: var(--space-2);
}

html[data-variant="clarity"] .tv-actions label {
  gap: var(--space-1);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

/* 日期输入与三个操作按钮统一为次按钮规格：控件高 40px、边界 --strong-border */
html[data-variant="clarity"] .tv-actions input,
html[data-variant="clarity"] .tv-actions button {
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--strong-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-body);
  transition: background var(--motion-fast) var(--ease),
    border-color var(--motion-fast) var(--ease);
}

html[data-variant="clarity"] .tv-actions button:hover {
  background: var(--surface-alt);
}

html[data-variant="clarity"] .tv-actions button:active {
  background: var(--border);
  transform: translateY(1px);
}

html[data-variant="clarity"] .tv-actions input:focus {
  border-color: var(--focus);
}

/* KPI 卡与排行卡：同一套不透明底面，同一行不再出现三种颜色 */
html[data-variant="clarity"] .tv-stats {
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

html[data-variant="clarity"] .tv-stats > div,
html[data-variant="clarity"] .tv-rank {
  padding: var(--space-6);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

html[data-variant="clarity"] .tv-stats span {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .tv-stats strong {
  margin-top: var(--space-2);
  color: var(--text);
  /* 必须用 clamp 而不是定值：三列布局在中宽（701–1180）每卡仅 ~130px，
     定值 32px 会让 ¥40,400 这类数字溢出卡外 22px（768 宽实测）。下限 26px
     与原实现一致（同宽度原实现有 5.3px 余量）。 */
  font-size: clamp(26px, 3.2vw, 32px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 大屏全屏时数值放大，观看距离更远（4K/1080p 现场） */
html[data-variant="clarity"] .tv-board:fullscreen .tv-stats strong {
  font-size: clamp(32px, 2.2vw, 48px);
  line-height: 1.25;
}

html[data-variant="clarity"] .tv-empty {
  color: var(--warning);
  font-size: var(--font-body);
  line-height: 22px;
}

html[data-variant="clarity"] .tv-ranks {
  gap: var(--space-4);
}

html[data-variant="clarity"] .tv-rank h3 {
  margin: 0 0 var(--space-4);
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

html[data-variant="clarity"] .tv-rank p {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .tv-rank-row {
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border);
}

html[data-variant="clarity"] .tv-rank-row span {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] .tv-rank-row strong {
  color: var(--text);
  font-size: var(--font-body);
  line-height: 22px;
  font-weight: 500;
}

html[data-variant="clarity"] .tv-rank-row b {
  color: var(--text);
  font-size: var(--font-body);
  line-height: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  html[data-variant="clarity"] .tv-head {
    align-items: start;
  }
}

/* 701–900 区间侧栏仍是 240px、内容区只有 ~440px，三列会让每卡只剩 ~110px，
   大数字（`¥40,400` 需 104px）放不下 —— 独立复核在 768 宽实测溢出 22px。
   这里改成两列，并允许字号随视口收缩；≤700 已由原工程的单列断点接管。 */
@media (max-width: 900px) and (min-width: 701px) {
  html[data-variant="clarity"] .tv-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  html[data-variant="clarity"] .tv-stats > div,
  html[data-variant="clarity"] .tv-rank {
    padding: var(--space-4);
  }
  html[data-variant="clarity"] .tv-stats strong {
    font-size: clamp(24px, 3vw, 32px);
  }
}

@media (max-width: 700px) {
  html[data-variant="clarity"] .tv-board {
    padding: var(--space-5);
  }
  html[data-variant="clarity"] .tv-board:fullscreen {
    padding: var(--space-5);
  }
  html[data-variant="clarity"] .tv-actions {
    width: 100%;
    margin-top: var(--space-5);
    align-items: stretch;
  }
  html[data-variant="clarity"] .tv-actions label {
    flex: 1 1 100%;
  }
  html[data-variant="clarity"] .tv-actions input {
    width: 100%;
  }
  /* 触控目标 ≥44px（DESIGN §8） */
  html[data-variant="clarity"] .tv-actions button {
    min-height: var(--tap-min, 44px);
  }
  html[data-variant="clarity"] .tv-stats strong {
    font-size: 28px;
    line-height: 36px;
  }
}

/* ---------------------------------------------------------------------------
   9.6 页面引导条（IP 趋势 / 昨日快照 / 月度账本）→ 中性摘要卡
   与 §4 经营总览 Hero 同一形态：白卡 + --border + --radius-card。
   原样式是 linear-gradient 深绿底 + 白字，而覆盖层又把 .small-label 统一成了
   --muted，形成"灰字压深绿"（实测 1.19:1 ~ 2.45:1，AA 要 4.5）——
   所以背景与文字色必须一起改；只改背景会变成白字压白底，比改前更糟。
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .ip-trend-intro,
html[data-variant="clarity"] .snapshot-intro,
html[data-variant="clarity"] .ledger-intro {
  padding: var(--space-6);
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--text);
}

html[data-variant="clarity"] .ip-trend-intro h2,
html[data-variant="clarity"] .snapshot-intro h2,
html[data-variant="clarity"] .ledger-intro h2 {
  margin: var(--space-2) 0 var(--space-1);
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html[data-variant="clarity"] .ip-trend-intro p,
html[data-variant="clarity"] .snapshot-intro p,
html[data-variant="clarity"] .ledger-intro p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 22px;
}

html[data-variant="clarity"] .snapshot-intro > strong {
  color: var(--text);
  font-size: var(--font-heading);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* 摘要卡下的 KPI 网格：间距归到 4 基数 */
html[data-variant="clarity"] .snapshot-stats,
html[data-variant="clarity"] .ip-trend-stats,
html[data-variant="clarity"] .ledger-stats {
  gap: var(--space-4);
}

/* 说明/脚注：原为 11px 灰绿（#849895 / #819692 / #91a39f，实测 2.49–3.13:1） */
html[data-variant="clarity"] .ip-trend-footnote,
html[data-variant="clarity"] .ledger-note,
html[data-variant="clarity"] .snapshot-chart p,
html[data-variant="clarity"] .snapshot-pending p {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .snapshot-chart p strong {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* 三处自绘 SVG 没有 .trend-svg，§7 的图表规则压不到，这里按同一套语义补上
   （不改 app.js 加 class：本轮另有并行改动在碰 app.js，纯 CSS 覆盖更安全） */
html[data-variant="clarity"] .snapshot-chart svg text,
html[data-variant="clarity"] .ip-trend-chart svg text,
html[data-variant="clarity"] .video-activity-chart text {
  fill: var(--muted);
  font-size: var(--font-caption);
}

html[data-variant="clarity"] .snapshot-chart svg line,
html[data-variant="clarity"] .ip-trend-chart svg line,
html[data-variant="clarity"] .video-activity-chart line {
  stroke: var(--border);
}

html[data-variant="clarity"] .snapshot-chart svg rect,
html[data-variant="clarity"] .ip-trend-chart svg rect,
html[data-variant="clarity"] .video-activity-chart rect {
  fill: var(--action);
}

/* 作品与直播：.video-activity* 自成一套，未复用面板/列表类 */
html[data-variant="clarity"] .video-activity {
  padding: var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
}

html[data-variant="clarity"] .video-activity .panel-heading p {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .video-activity-controls label {
  gap: var(--space-1);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .video-activity-controls input,
html[data-variant="clarity"] .video-activity-controls select {
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--strong-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .video-activity-stats {
  gap: var(--space-3);
}

html[data-variant="clarity"] .video-activity-stats > div {
  padding: var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

html[data-variant="clarity"] .video-activity-stats span,
html[data-variant="clarity"] .video-activity-stats small {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .video-activity-stats strong {
  margin: var(--space-1) 0;
  color: var(--text);
  font-size: 24px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

html[data-variant="clarity"] .video-activity-note {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

/* ---------------------------------------------------------------------------
   9.7 敏感信息 / 权限分配：permissions.css 是第二套色板（深青 + 绿调 + 10px 小字）
   覆盖层对它覆盖数为 0，所以这两页是"外壳 clarity、内容另一套"的典型。
   --------------------------------------------------------------------------- */
html[data-variant="clarity"] .permissions-intro {
  padding: var(--space-6);
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: none;
  color: var(--text);
}

html[data-variant="clarity"] .permissions-intro h2 {
  margin: var(--space-2) 0 var(--space-1);
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

html[data-variant="clarity"] .permissions-intro p {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 22px;
}

html[data-variant="clarity"] .permission-dirty {
  margin-right: var(--space-3);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .permission-roles {
  gap: var(--space-3);
}

html[data-variant="clarity"] .permission-role {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--strong-border);
  border-radius: var(--radius-card);
  color: var(--text);
}

html[data-variant="clarity"] .permission-role strong {
  color: var(--text);
  font-size: var(--font-body);
  line-height: 22px;
}

html[data-variant="clarity"] .permission-role small {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .permission-role.selected {
  border-color: var(--action);
  background: var(--selected);
  color: var(--selected-text);
  box-shadow: none;
}

/* 选中卡里的次文字若用 --muted，压在 --selected 上只有 4.706:1（页内余量最低的一项），
   改用 --selected-text 提到 ~6.5:1 */
html[data-variant="clarity"] .permission-role.selected small {
  color: var(--selected-text);
}

/* permissions-mobile.css 在 ≤700 给所有 tr 写了 #e9efec 下边线（非 token），
   该断点不在 §9.7 的接管范围，这里补齐 */
@media (max-width: 700px) {
  html[data-variant="clarity"] .permission-table tr,
  html[data-variant="clarity"] .account-table tr {
    border-bottom: 1px solid var(--border);
  }
}

html[data-variant="clarity"] .permission-notice {
  padding: var(--space-3) var(--space-4);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius-control);
  color: var(--warning);
  font-size: var(--font-body);
  line-height: 22px;
}

html[data-variant="clarity"] .permission-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

html[data-variant="clarity"] .permission-card-head {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border);
}

html[data-variant="clarity"] .permission-card-head h3 {
  color: var(--text);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}

html[data-variant="clarity"] .permission-card-head p {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .step-number {
  min-width: 24px;
  height: 24px;
  background: var(--selected);
  color: var(--selected-text);
  border-radius: 6px;
  font-size: var(--font-caption);
  font-weight: 600;
}

html[data-variant="clarity"] .permission-table th,
html[data-variant="clarity"] .permission-table td {
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .permission-table th {
  color: var(--muted);
  font-size: var(--font-caption);
  font-weight: 600;
}

html[data-variant="clarity"] .permission-table td small {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .permission-table input[type="checkbox"] {
  accent-color: var(--action);
  width: 18px;
  height: 18px;
}

html[data-variant="clarity"] .permission-table select,
html[data-variant="clarity"] .permission-module,
html[data-variant="clarity"] .scope-editor select,
html[data-variant="clarity"] .scope-editor textarea {
  min-height: var(--control-sm);
  padding: 0 var(--space-3);
  border: 1px solid var(--strong-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .account-no-scope {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .permission-actions #permission-delete {
  color: var(--danger);
  border-color: var(--danger);
}

/* 权限页其余残留：账号创建行 / 作用域编辑器 / 已选模块徽标 / 来源权限勾选 */
html[data-variant="clarity"] .account-create-form {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border);
}

html[data-variant="clarity"] .account-create-form input,
html[data-variant="clarity"] .account-create-form select,
html[data-variant="clarity"] .account-table input,
html[data-variant="clarity"] .account-table select {
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--strong-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .account-create-form label,
html[data-variant="clarity"] .scope-editor label,
html[data-variant="clarity"] .source-action {
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 22px;
  font-weight: 500;
}

html[data-variant="clarity"] .scope-editor p {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .role-create-form {
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
}

html[data-variant="clarity"] .role-create-form input,
html[data-variant="clarity"] .role-create-form select {
  min-height: var(--control-md);
  padding: 0 var(--space-3);
  border: 1px solid var(--strong-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--font-body);
}

html[data-variant="clarity"] .selected-module {
  padding: var(--space-1) var(--space-3);
  background: var(--selected);
  color: var(--selected-text);
  border-radius: var(--radius-control);
  font-size: var(--font-caption);
  line-height: 18px;
  font-weight: 600;
}

html[data-variant="clarity"] .source-actions {
  gap: var(--space-4);
  border-bottom: 1px solid var(--border);
}

html[data-variant="clarity"] .source-action input {
  accent-color: var(--action);
  width: 18px;
  height: 18px;
}

/* 操作记录：完整性校验面板（原绿/琥珀一套近似色，非 token） */
html[data-variant="clarity"] .integrity-state.good {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

html[data-variant="clarity"] .integrity-state.bad {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

html[data-variant="clarity"] .integrity-metrics > div {
  background: var(--surface-alt);
  border-color: var(--border);
}

html[data-variant="clarity"] .integrity-metrics span,
html[data-variant="clarity"] .integrity-note,
html[data-variant="clarity"] .integrity-warnings {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

html[data-variant="clarity"] .integrity-tag.ok {
  background: var(--success-bg);
  color: var(--success);
}

html[data-variant="clarity"] .integrity-tag.warn {
  background: var(--warning-bg);
  color: var(--warning);
}

/* 矩阵账号：IP 变更记录（点开抽屉才渲染） */
html[data-variant="clarity"] .transfer-history {
  border-top: 1px solid var(--border);
}

html[data-variant="clarity"] .transfer-item strong {
  color: var(--text);
}

html[data-variant="clarity"] .transfer-item small {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

/* 经营总览：渠道趋势说明（需 data.channelTrend 才渲染） */
html[data-variant="clarity"] .channel-trend-intro {
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

/* 真实数据源模式（DATA_SOURCE=sqlite 才渲染，demo 模式无法验收） */
html[data-variant="clarity"] .real-hero {
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--text);
}

html[data-variant="clarity"] .real-source-bar {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--muted);
}

html[data-variant="clarity"] .real-source-bar span {
  background: var(--action);
  color: var(--on-action);
}

html[data-variant="clarity"] .real-source-bar b,
html[data-variant="clarity"] .real-quality td,
html[data-variant="clarity"] .real-muted,
html[data-variant="clarity"] .real-blocked p {
  color: var(--muted);
}

/* 待接入策略清单（.real-gap-list）：浅底米色卡 + 棕字，是第三套卡片底色。
   演示态在「敏感信息」页可见，真实数据源模式也复用同一组件。 */
html[data-variant="clarity"] .real-gap-list {
  gap: var(--space-3);
  background: none;
  border: 0;
  color: var(--muted);
}

html[data-variant="clarity"] .real-gap-list li {
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

html[data-variant="clarity"] .real-gap-list b {
  color: var(--text);
  font-size: var(--font-body);
  line-height: 22px;
  font-weight: 600;
}

html[data-variant="clarity"] .real-gap-list span {
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: var(--font-caption);
  line-height: 18px;
}

/* ---------------------------------------------------------------------------
   10. 响应式验收点：390 / 1024 / 1440（DESIGN §8）
   --------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  html[data-variant="clarity"] .content {
    padding: var(--space-6) var(--space-6) var(--space-12);
  }
}

@media (max-width: 1024px) {
  html[data-variant="clarity"] .content {
    padding: var(--space-6) var(--space-5) var(--space-12);
  }
  html[data-variant="clarity"] .hero-side {
    padding: var(--space-6);
  }
}

@media (max-width: 700px) {
  html[data-variant="clarity"] .content {
    padding: var(--space-5) var(--space-4) var(--space-12);
  }
  /* 移动端输入正文 ≥16px，避免小字与聚焦缩放（DESIGN §8） */
  html[data-variant="clarity"] input:not([type="hidden"]),
  html[data-variant="clarity"] select,
  html[data-variant="clarity"] textarea {
    font-size: var(--font-mobile-body);
  }
  /* 触控目标：主/次按钮与导航至少 44px */
  html[data-variant="clarity"] .primary-button,
  html[data-variant="clarity"] .outline-button,
  html[data-variant="clarity"] nav button,
  html[data-variant="clarity"] .choice-card,
  html[data-variant="clarity"] .back-link {
    min-height: var(--tap-min, 44px);
  }
  /* 窄屏登录页收为单栏（原工程断点行为，覆盖层需重新声明） */
  html[data-variant="clarity"] .login-wrap {
    grid-template-columns: 1fr;
  }
  html[data-variant="clarity"] .login-form-area {
    padding: var(--space-6) var(--space-4);
  }
  html[data-variant="clarity"] .login-card {
    padding: var(--space-6);
    border: 0;
    background: transparent;
  }
  html[data-variant="clarity"] .drawer {
    padding: var(--space-6);
  }
  html[data-variant="clarity"] .login-art {
    padding: var(--space-8) var(--space-6) var(--space-6);
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  html[data-variant="clarity"] .login-copy p {
    max-width: none;
  }
  /* 侧栏收成图标栏（沿用原工程断点行为，仅换 token） */
  html[data-variant="clarity"] .sidebar {
    width: 64px;
    padding: var(--space-4) var(--space-2);
  }
  html[data-variant="clarity"] nav {
    width: 100%;
  }
  html[data-variant="clarity"] .sidebar-brand {
    justify-content: center;
    padding: 0 0 var(--space-6);
  }
  html[data-variant="clarity"] .sidebar-brand div,
  html[data-variant="clarity"] .workspace-label,
  html[data-variant="clarity"] .sidebar-bottom,
  html[data-variant="clarity"] nav button span:not(.nav-icon) {
    display: none;
  }
  html[data-variant="clarity"] nav button {
    justify-content: center;
    padding: 0;
  }
  html[data-variant="clarity"] .main {
    width: calc(100% - 64px);
  }
  html[data-variant="clarity"] .topbar {
    height: 56px;
    padding: 0 var(--space-4);
    gap: var(--space-2);
  }
  /* 窄屏只保留当前页名，不做省略号截断（TY-09 要求截断必须有完整名称；
     而「工作台」前缀与分隔符在窄屏属可省上下文） */
  html[data-variant="clarity"] .top-kicker,
  html[data-variant="clarity"] .top-separator {
    display: none;
  }
  html[data-variant="clarity"] .topbar > div:first-child {
    min-width: 0;
  }
  html[data-variant="clarity"] .top-actions {
    gap: var(--space-2);
    flex: none;
  }
  html[data-variant="clarity"] .logout {
    min-width: var(--tap-min, 44px);
    min-height: var(--tap-min, 44px);
  }
  /* 窄屏页头纵向堆叠，避免角色徽标与标题互相挤压 */
  html[data-variant="clarity"] .page-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }
  html[data-variant="clarity"] .heading-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  html[data-variant="clarity"] .hero {
    grid-template-columns: 1fr;
  }
  html[data-variant="clarity"] .hero-side {
    display: flex;
    justify-content: flex-start;
    padding: var(--space-4) var(--space-6);
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  html[data-variant="clarity"] .hero-side small {
    text-align: left;
  }
  html[data-variant="clarity"] .stat {
    padding: var(--space-6);
  }
  html[data-variant="clarity"] .stat strong {
    font-size: 20px;
    line-height: 28px;
  }
  html[data-variant="clarity"] .panel {
    padding: var(--space-6);
  }
  html[data-variant="clarity"] .dashboard-filters {
    padding: var(--space-6);
  }
  /* 窄屏：筛选纵向堆叠会把表格推到首屏之外（实测 7 个筛选占 572px），
     改为单行横向滚动，默认只露出前两个条件，表格回到首屏 */
  html[data-variant="clarity"] .order-filters {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
  }
  html[data-variant="clarity"] .order-filters label {
    flex: 0 0 auto;
    min-width: 148px;
  }
  html[data-variant="clarity"] .toast {
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    max-width: none;
  }
}