/* preview.css —— 通用界面骨架。
   这里刻意不写任何字面量颜色/圆角/间距：全部读取由父页面注入的令牌变量，
   因此切换风格时整套界面会真实地变形，而不是只换个色。 */

:root {
  --color-bg: #fff; --color-bg-alt: #f5f5f5; --color-surface: #fff;
  --color-surface-alt: #f0f0f0; --color-border: #e5e5e5; --color-border-strong: #c0c0c0;
  --color-text: #111; --color-text-muted: #666; --color-text-faint: #999;
  --color-primary: #2563eb; --color-on-primary: #fff; --color-accent: #7c3aed;
  --color-success: #15803d; --color-warning: #b45309; --color-danger: #b91c1c;
  --color-info: #0369a1; --color-focus: #2563eb;
  --font-sans: system-ui, sans-serif;
  /* CJK 回退的顺序与 assets/theme.css 同理：黑体在前，宋体垫底。 */
  --font-mono: ui-monospace, "Sarasa Mono SC", "Sarasa Mono J", "Noto Sans Mono CJK SC",
    "Noto Sans Mono CJK JP", "PingFang SC", "Hiragino Sans",
    "Microsoft YaHei", "Yu Gothic UI", "MS Gothic", "NSimSun", monospace;
  --font-heading: var(--font-sans);
  --weight-heading: 600; --weight-body: 400;
  --tracking-heading: -0.01em; --leading-body: 1.5;
  --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px;
  --text-xl: 22px; --text-2xl: 28px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
  --border-width: 1px; --border-style: solid;
  --duration: 180ms; --easing: cubic-bezier(.2,0,0,1);
  --card-pad: 20px; --row-h: 40px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
}

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.shell { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-height: 100vh; }

/* 侧栏 */
.side {
  background: var(--color-bg-alt);
  border-right: var(--border-width) var(--border-style) var(--color-border);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-5);
}
.logo { display: flex; align-items: center; gap: var(--space-2); }
.logo__mark {
  width: 26px; height: 26px; border-radius: var(--radius-md);
  background: var(--color-primary); color: var(--color-on-primary);
  display: grid; place-items: center; font-weight: 700; font-size: var(--text-xs);
  border: var(--border-width) var(--border-style) var(--color-border-strong);
}
.logo__name { font-weight: var(--weight-heading); font-size: var(--text-sm); letter-spacing: var(--tracking-heading); }
.navlist { display: flex; flex-direction: column; gap: 2px; }
.navitem {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border: var(--border-width) var(--border-style) transparent;
  transition: background var(--duration) var(--easing), color var(--duration) var(--easing);
}
.navitem[data-active] {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: 600;
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}
/* 图标槽：包裹层负责居中，SVG 自己用 display:block 脱离基线对齐。
   尺寸不写死——它由当前风格的图标规则决定，由 preview.js 逐个注入。 */
.pi { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pi svg { display: block; }
.navitem .pi { opacity: .75; }
.navitem[data-active] .pi { opacity: 1; }

/* 主区 */
.content { min-width: 0; display: flex; flex-direction: column; }
.appbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
  background: var(--color-surface);
}
.crumbs { font-size: var(--text-xs); color: var(--color-text-faint); }
.spacer { flex: 1; }

.search {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  min-width: 170px;
}
.avatar {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  background: var(--color-accent); color: var(--color-on-primary);
  display: grid; place-items: center; font-size: var(--text-xs); font-weight: 700;
}

.page { padding: var(--space-6) var(--space-5); display: grid; gap: var(--space-5); }
.page__head { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.page__title { font-size: var(--text-xl); }
.page__sub { font-size: var(--text-sm); color: var(--color-text-muted); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) var(--border-style) var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit; font-size: var(--text-sm); font-weight: 550;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: all var(--duration) var(--easing);
}
.btn--primary {
  background: var(--color-primary); color: var(--color-on-primary);
  border-color: var(--color-border-strong);
}
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-text-muted); box-shadow: none; }
.btn--danger { background: var(--color-danger); color: var(--color-on-primary); border-color: var(--color-border-strong); }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

/* 卡片 */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.grid--2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.card {
  background: var(--color-surface);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--card-pad);
}
.card__label { font-size: var(--text-xs); color: var(--color-text-muted); }
.card__value {
  font-size: var(--text-2xl); font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-heading);
  font-variant-numeric: tabular-nums; line-height: 1.15;
  margin-top: var(--space-1);
}
.card__delta { font-size: var(--text-xs); margin-top: var(--space-1); }
.up { color: var(--color-success); }
.down { color: var(--color-danger); }

.card__head {
  display: flex; align-items: center; gap: var(--space-3);
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
  padding: var(--space-3) var(--card-pad);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
}
.card__title { font-size: var(--text-sm); font-weight: 620; }

/* 迷你图表 */
.bars { display: flex; align-items: flex-end; gap: 5px; height: 92px; }
.bar { flex: 1; background: var(--chart-1, var(--color-primary)); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 4px; }
.bar:nth-child(8n+2) { background: var(--chart-2, var(--color-accent)); }
.bar:nth-child(8n+3) { background: var(--chart-3, var(--color-primary)); }
.bar:nth-child(8n+4) { background: var(--chart-4, var(--color-accent)); }
.bar:nth-child(8n+5) { background: var(--chart-5, var(--color-primary)); }
.bar:nth-child(8n+6) { background: var(--chart-6, var(--color-accent)); }
.bar:nth-child(8n+7) { background: var(--chart-7, var(--color-primary)); }
.bar:nth-child(8n) { background: var(--chart-8, var(--color-accent)); }

/* 表格 */
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td {
  text-align: left; padding: 0 var(--space-3); height: var(--row-h);
  border-bottom: var(--border-width) var(--border-style) var(--color-border);
}
th {
  font-size: var(--text-xs); font-weight: 650; color: var(--color-text-faint);
  text-transform: uppercase; letter-spacing: .05em; background: var(--color-surface-alt);
}
td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
tbody tr:last-child td { border-bottom: 0; }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 1px var(--space-2); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
  border: var(--border-width) var(--border-style) currentColor;
}
.pill--ok { color: var(--color-success); }
.pill--warn { color: var(--color-warning); }
.pill--bad { color: var(--color-danger); }

/* 表单 */
.form { display: grid; gap: var(--space-4); }
.formrow { display: grid; gap: var(--space-2); }
label.lbl { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.control {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) var(--border-style) var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font: inherit; font-size: var(--text-sm);
  width: 100%;
}
.control--err { border-color: var(--color-danger); }
.errtext { font-size: var(--text-xs); color: var(--color-danger); }

/* 提示条 */
.alerts { display: grid; gap: var(--space-2); }
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) var(--border-style) currentColor;
  font-size: var(--text-sm);
}
.alert span { color: var(--color-text); }
.alert--info { color: var(--color-info); }
.alert--ok { color: var(--color-success); }
.alert--warn { color: var(--color-warning); }
.alert--bad { color: var(--color-danger); }
/* 多行文本旁的图标：容器是 align-items:flex-start（图标要对齐首行，不是整块的中心）。
   让图标槽的高度正好等于一行文字的高度，align-items:center 就会把图标压在首行的
   视觉中心上——这是 vertical-align:middle 在 flex 上下文里的等价写法，不用魔数偏移。 */
.alert .pi { height: calc(var(--text-sm) * var(--leading-body)); }

/* 空状态 */
.empty {
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-5);
  text-align: center; color: var(--color-text-muted);
  display: grid; gap: var(--space-3); justify-items: center;
}
.empty__title { font-size: var(--text-base); font-weight: 620; color: var(--color-text); }
.empty__desc { font-size: var(--text-sm); max-width: 42ch; }

/* Toast */
.toastdemo {
  display: inline-flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: var(--border-width) var(--border-style) var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}

.sectionlabel {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-faint); font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 布局工具类：CSP style-src 'self' 下不允许内联 style 属性，
   因此这些一次性布局也以类的形式定义（这正是本工具建议的做法）。 */
.card--flush { padding: 0; }
.card__head--flush { margin: 0; padding: var(--space-3) var(--space-4); }
.row { display: flex; gap: var(--space-2); align-items: center; }
.stackcol { display: grid; gap: var(--space-4); align-content: start; }
.card__value { white-space: nowrap; }

/* 空状态图标：用弱化色，不抢主按钮的注意力 */
.empty__icon { color: var(--color-text-faint); margin-bottom: var(--space-3); display: flex; justify-content: center; }
.empty__icon .pi svg { width: 32px; height: 32px; }

/* KPI 涨跌、pill、错误提示里的图标随文字走，不单独设色 */
.card__delta, .pill, .errtext, .search, .toastdemo { display: inline-flex; align-items: center; gap: var(--space-2); }
.card__delta { display: flex; }
.btn .pi { margin-right: calc(var(--space-1) * -1); }

/* 图标规格脚注：说明预览画的是通用几何图形，真实图标库见生成的规则 */
.iconnote {
  display: flex; align-items: flex-start; gap: var(--space-2);
  margin: 0 var(--space-5) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.iconnote .pi { height: calc(var(--text-xs) * 1.6); }