/* ==========================================================================
   PiLive — 组件层
   ========================================================================== */

/* --------------------------------------------------------------------------
   面板 —— 全站主要容器。纸张分层 + 发丝线 + 柔阴影
   -------------------------------------------------------------------------- */

.panel {
  position: relative;
  background: var(--paper-0);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel--flat { background: transparent; box-shadow: none; border-color: var(--line-soft); }
.panel--sunken { background: var(--paper-2); box-shadow: none; }

.panel--signal {
  border-color: var(--line-violet);
  background: linear-gradient(180deg, var(--violet-wash), var(--paper-0) 38%);
}

/* 反相面板：整块墨紫，用于最需要视觉重量的一处 */
.panel--invert {
  background: var(--violet-deep);
  border-color: transparent;
  color: oklch(100% 0 0 / 0.82);
  box-shadow: var(--shadow-lift);
}

.panel--invert .panel__title,
.panel--invert .metric__value,
.panel--invert .h2,
.panel--invert .h3 { color: oklch(100% 0 0); }

.panel--invert .panel__head,
.panel--invert .panel__foot { border-color: oklch(100% 0 0 / 0.14); }

.panel--invert .metric__label,
.panel--invert .panel__sub { color: oklch(100% 0 0 / 0.52); }

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 15px var(--s-5);
  border-bottom: 1px solid var(--line-soft);
  min-height: 52px;
}

.panel__title {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink-900);
}

.panel__sub {
  font-size: var(--t-xs);
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.panel__tools { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

/* 卡片顶部说明：锁定两行高度，保证同排卡片的图表 / 列表起始线在同一水平 */
.panel__lede {
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-500);
  margin-bottom: var(--s-4);
  min-height: 3.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.panel__body { padding: var(--s-5); flex: 1; min-width: 0; }
.panel__body--tight { padding: var(--s-4); }
.panel__body--flush { padding: 0; }

.panel__foot {
  padding: 13px var(--s-5);
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  color: var(--ink-400);
}

/* 子区块：与上文之间总有一道发丝线，避免内容黏连 */
.subsec {
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line-soft);
}

.subsec__label {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink-500);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-3);
}

/* --------------------------------------------------------------------------
   按钮
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 15px;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 550;
  letter-spacing: -0.004em;
  white-space: nowrap;
  border: 1px solid var(--line);
  color: var(--ink-700);
  background: var(--paper-0);
  transition: all var(--dur-fast) var(--ease-out);
}

.btn svg { width: 14px; height: 14px; flex: none; }

.btn:hover {
  color: var(--ink-900);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-card);
}

.btn:active { transform: translateY(0.5px); }

.btn--primary {
  background: var(--violet);
  border-color: var(--violet);
  color: oklch(100% 0 0);
  font-weight: 600;
}

.btn--primary:hover {
  background: var(--violet-deep);
  border-color: var(--violet-deep);
  color: oklch(100% 0 0);
  box-shadow: var(--shadow-violet);
}

.btn--ink {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: oklch(100% 0 0);
  font-weight: 600;
}

.btn--ink:hover { background: oklch(14% 0.021 291); border-color: oklch(14% 0.021 291); color: oklch(100% 0 0); }

.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { border-color: var(--line); background: var(--paper-0); }

/* 深紫底上的按钮：用于 .panel--invert / .tier--feature / 落地页 .cta */
.btn--onviolet {
  background: oklch(100% 0 0);
  border-color: oklch(100% 0 0);
  color: var(--violet-deep);
  font-weight: 650;
}

.btn--onviolet:hover { background: oklch(100% 0 0 / 0.9); border-color: oklch(100% 0 0 / 0.9); color: var(--violet-deep); }

.btn--onviolet-ghost { background: transparent; border-color: oklch(100% 0 0 / 0.3); color: oklch(100% 0 0 / 0.86); }
.btn--onviolet-ghost:hover { background: oklch(100% 0 0 / 0.08); border-color: oklch(100% 0 0 / 0.5); color: oklch(100% 0 0); }

.btn--lg { height: 44px; padding: 0 24px; font-size: var(--t-base); border-radius: var(--r-md); }
.btn--sm { height: 27px; padding: 0 11px; font-size: var(--t-xs); }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   徽标 / 标签
   -------------------------------------------------------------------------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  color: var(--ink-500);
  background: var(--paper-2);
  white-space: nowrap;
}

.tag--signal { color: var(--violet-deep); border-color: var(--line-violet); background: var(--violet-wash); }
.tag--cool   { color: oklch(42% 0.086 232); border-color: oklch(56% 0.086 232 / 0.32); background: oklch(56% 0.086 232 / 0.1); }
.tag--gold   { color: oklch(48% 0.108 68);  border-color: oklch(68% 0.108 68 / 0.38);  background: oklch(68% 0.108 68 / 0.13); }
.tag--ink    { background: var(--ink-900); color: oklch(100% 0 0); border-color: transparent; }
.tag--pill   { border-radius: var(--r-pill); padding: 0 10px; }

/* 优先级：形状 + 色阶双编码，不只靠颜色 */
.prio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-400);
}

.prio::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 1px;
  background: currentColor;
  transform: rotate(45deg);
}

.prio--high { color: var(--violet); }
.prio--mid  { color: oklch(52% 0.108 68); }
.prio--low  { color: var(--ink-400); }

/* 实时指示 */
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--violet);
}

.live-dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--violet);
  animation: pulse 2.4s var(--ease-io) infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 oklch(45% 0.188 291 / 0.42); }
  70%  { box-shadow: 0 0 0 9px oklch(45% 0.188 291 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(45% 0.188 291 / 0); }
}

/* 状态点 */
.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--t-xs);
  color: var(--ink-500);
}

.state::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
}

.state--on::before   { background: var(--ds-pos); }
.state--warn::before { background: var(--ds-4); }
.state--off::before  { background: var(--ink-300); }

/* --------------------------------------------------------------------------
   指标块 —— 大数字 + 极小标签，仪表盘语汇
   -------------------------------------------------------------------------- */

.metric { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.metric__label {
  font-size: var(--t-xs);
  letter-spacing: 0;
  color: var(--ink-400);
}

.metric__value {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.042em;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}

.metric__value small {
  font-size: var(--t-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-400);
  margin-left: 3px;
}

.metric__value--sig { color: var(--violet); }
.metric__value--lg  { font-size: var(--t-3xl); }
.metric__value--sm  { font-size: var(--t-xl); }

/* 关键指标数字：无衬线 + 等宽数位，保证纵向对齐 */
.metric__value--num {
  font-weight: 660;
  letter-spacing: -0.036em;
  font-variant-numeric: tabular-nums;
}

.metric__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--ink-500);
}

.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta--up   { color: var(--ds-pos); }
.delta--down { color: oklch(52% 0.17 25); }
.delta svg { width: 11px; height: 11px; }

/* 指标条带：等分 + 竖发丝线分隔 */
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.metric-strip > * { padding: var(--s-5); border-left: 1px solid var(--line-soft); }
.metric-strip > *:first-child { border-left: 0; }

/* --------------------------------------------------------------------------
   进度 / 量表
   -------------------------------------------------------------------------- */

.meter { display: flex; flex-direction: column; gap: 7px; }

.meter__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-sm);
}

.meter__name { color: var(--ink-700); }

.meter__num {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.meter__track {
  height: 3px;
  border-radius: 2px;
  background: var(--paper-3);
  overflow: hidden;
}

.meter__fill { height: 100%; border-radius: 2px; background: var(--violet); }
.meter__fill--cool { background: var(--ds-3); }
.meter__fill--mute { background: var(--ink-300); }

/* 横向对比条 */
.bar-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 46px;
  align-items: center;
  gap: var(--s-3);
  padding: 7px 0;
}

.bar-row + .bar-row { border-top: 1px solid var(--line-soft); }
.bar-row__name { font-size: var(--t-sm); color: var(--ink-700); }

.bar-row__track {
  height: 20px;
  background: var(--paper-2);
  border-radius: var(--r-xs);
  overflow: hidden;
}

.bar-row__fill { height: 100%; background: var(--violet-wash); border-right: 2px solid var(--violet); }
.bar-row__fill--mute { background: var(--paper-3); border-right-color: var(--ink-300); }

.bar-row__val {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ink-500);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   列表原语
   -------------------------------------------------------------------------- */

.list-rule > li { padding: 13px 0; border-top: 1px solid var(--line-soft); }
.list-rule > li:first-child { border-top: 0; padding-top: 0; }
.list-rule > li:last-child { padding-bottom: 0; }

/* 几何勾记（非 emoji） */
.checks li {
  position: relative;
  padding-left: 20px;
  font-size: var(--t-sm);
  color: var(--ink-700);
  line-height: 1.75;
}

.checks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 6px;
  width: 5px; height: 9px;
  border-right: 1.6px solid var(--violet);
  border-bottom: 1.6px solid var(--violet);
  transform: rotate(42deg);
}

.checks--mute li::before { border-color: var(--ink-300); }

/* 序号步骤 */
.steps > li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: var(--s-3);
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}

.steps > li:first-child { border-top: 0; }

.steps__n {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--violet);
  letter-spacing: 0.04em;
  padding-top: 2px;
}

.steps__t { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-900); margin-bottom: 3px; }
.steps__d { display: block; font-size: var(--t-xs); color: var(--ink-500); line-height: 1.68; }

/* --------------------------------------------------------------------------
   表格
   -------------------------------------------------------------------------- */

.tbl { font-size: var(--t-sm); }

.tbl thead th {
  text-align: left;
  padding: 10px var(--s-4);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-500);
  background: var(--paper-1);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.tbl tbody td {
  padding: 13px var(--s-4);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-700);
  vertical-align: middle;
}

.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.tbl tbody tr:hover { background: var(--paper-1); }

.tbl td.lead { color: var(--ink-900); font-weight: 550; }
.tbl .tr, .tbl th.tr { text-align: right; }
.tbl--compare td:not(:first-child),
.tbl--compare th:not(:first-child) { text-align: center; }

.mk { display: inline-block; width: 13px; height: 13px; }
.mk--y { color: var(--violet); }
.mk--n { color: var(--ink-300); }

/* --------------------------------------------------------------------------
   芯片 / 分段 / 标签页
   -------------------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper-0);
  font-size: var(--t-xs);
  color: var(--ink-500);
  transition: all var(--dur-fast) var(--ease-out);
}

.chip:hover { color: var(--ink-900); border-color: var(--line-strong); }

.chip[aria-pressed="true"] {
  color: var(--violet-deep);
  border-color: var(--line-violet);
  background: var(--violet-wash);
  font-weight: 600;
}

.segmented {
  display: inline-flex;
  padding: 3px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper-2);
  gap: 2px;
}

.segmented button {
  height: 26px;
  padding: 0 13px;
  border-radius: var(--r-sm);
  font-size: var(--t-xs);
  color: var(--ink-500);
  transition: all var(--dur-fast) var(--ease-out);
}

.segmented button:hover { color: var(--ink-900); }

.segmented button[aria-selected="true"] {
  background: var(--paper-0);
  color: var(--ink-900);
  font-weight: 600;
  box-shadow: var(--shadow-card);
}

.tabs { display: flex; gap: var(--s-5); border-bottom: 1px solid var(--line); }

.tabs a {
  position: relative;
  padding: 0 0 11px;
  font-size: var(--t-sm);
  color: var(--ink-500);
  transition: color var(--dur-fast) var(--ease-out);
}

.tabs a:hover { color: var(--ink-900); }
.tabs a[aria-selected="true"] { color: var(--ink-900); font-weight: 600; }

.tabs a[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--violet);
}

/* --------------------------------------------------------------------------
   输入
   -------------------------------------------------------------------------- */

.field {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 40px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper-0);
  color: var(--ink-500);
  font-size: var(--t-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.field:hover { border-color: var(--line-strong); }
.field:focus-within { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-a14); }
.field svg { width: 15px; height: 15px; flex: none; opacity: 0.55; }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink-900); }
.field input::placeholder { color: var(--ink-300); }

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-height: 168px;
  padding: var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--paper-1);
  text-align: center;
  transition: all var(--dur-base) var(--ease-out);
}

.dropzone:hover { border-color: var(--violet); background: var(--violet-wash); }
.dropzone svg { width: 22px; height: 22px; color: var(--ink-400); }
.dropzone:hover svg { color: var(--violet); }

/* --------------------------------------------------------------------------
   缩略图 / 场景卡（语义图片 + 色域加载兜底）
   -------------------------------------------------------------------------- */

.thumb {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 3;
}

.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.07;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.thumb__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-out), filter 420ms var(--ease-out);
}

.thumb__image--top { object-position: center 28%; }
.thumb__image--bottom { object-position: center 72%; }

.scene:hover .thumb__image {
  transform: scale(1.035);
  filter: saturate(1.04) contrast(1.02);
}

.thumb--nordic { background: linear-gradient(148deg, oklch(95% 0.012 84),  oklch(84% 0.014 250) 118%); }
.thumb--spring { background: linear-gradient(148deg, oklch(94% 0.036 145), oklch(83% 0.028 190) 120%); }
.thumb--retro  { background: linear-gradient(148deg, oklch(88% 0.052 58),  oklch(66% 0.048 34)  118%); }
.thumb--hallow { background: linear-gradient(148deg, oklch(86% 0.086 62),  oklch(56% 0.062 300) 118%); }
.thumb--medit  { background: linear-gradient(148deg, oklch(93% 0.038 225), oklch(78% 0.046 250) 120%); }
.thumb--xmas   { background: linear-gradient(148deg, oklch(84% 0.078 25),  oklch(72% 0.058 150) 120%); }
.thumb--summer { background: linear-gradient(148deg, oklch(94% 0.042 195), oklch(82% 0.056 240) 120%); }
.thumb--autumn { background: linear-gradient(148deg, oklch(89% 0.072 66),  oklch(70% 0.052 42)  118%); }
.thumb--violet { background: linear-gradient(148deg, oklch(90% 0.052 291), oklch(72% 0.086 291) 118%); }
.thumb--steel  { background: linear-gradient(148deg, oklch(92% 0.014 250), oklch(76% 0.018 250) 118%); }

.thumb__tag {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  letter-spacing: 0.08em;
  color: var(--ink-900);
  background: oklch(100% 0 0 / 0.72);
  backdrop-filter: blur(6px);
  padding: 2px 7px;
  border-radius: var(--r-xs);
}

/* 场景条目：图 + 文，左右交替（打破均匀网格） */
.scene {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-0);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.scene:hover { border-color: var(--line-violet); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.scene--flip { grid-template-columns: minmax(0, 1fr) 148px; }
.scene--flip .thumb { order: 2; }
.scene__name { font-size: var(--t-md); font-weight: 650; letter-spacing: -0.018em; color: var(--ink-900); margin-bottom: 6px; }
.scene__desc { font-size: var(--t-xs); color: var(--ink-500); line-height: 1.7; }

/* --------------------------------------------------------------------------
   实时流（弹幕 / 对话）
   -------------------------------------------------------------------------- */

.stream { display: flex; flex-direction: column; gap: 2px; overflow: hidden; font-size: var(--t-xs); }

.stream__row {
  display: grid;
  grid-template-columns: 52px 92px minmax(0, 1fr);
  gap: var(--s-3);
  padding: 7px var(--s-4);
  border-left: 2px solid transparent;
  transition: background var(--dur-fast) var(--ease-out);
}

.stream__row:hover { background: var(--paper-1); }
.stream__row--hot { border-left-color: var(--violet); background: var(--violet-wash); }
.stream__time { font-family: var(--font-mono); color: var(--ink-300); font-size: var(--t-2xs); }
.stream__user { color: var(--ink-400); font-size: var(--t-2xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream__text { color: var(--ink-700); line-height: 1.55; }

/* 话术卡 —— 直播中给主播的实时提词 */
.cue {
  padding: 14px var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper-0);
  border-left: 2px solid var(--violet);
}

.cue--idle { border-left-color: var(--ink-300); background: var(--paper-1); }
.cue__head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: 8px; }
.cue__text { font-size: var(--t-md); line-height: 1.7; color: var(--ink-900); }
.cue__meta { margin-top: 10px; display: flex; gap: var(--s-4); font-size: var(--t-2xs); color: var(--ink-400); }

/* 波形（纯 CSS 条形，静态） */
.wave { display: flex; align-items: center; gap: 2px; height: 34px; }
.wave i { flex: 1; min-width: 1px; background: var(--violet-soft); border-radius: 1px; align-self: center; }
.wave--mute i { background: var(--paper-3); }

/* --------------------------------------------------------------------------
   时间线
   -------------------------------------------------------------------------- */

.timeline { position: relative; padding-left: var(--s-5); }

.timeline::before {
  content: "";
  position: absolute;
  left: 4px; top: 5px; bottom: 5px;
  width: 1px;
  background: var(--line);
}

.timeline > li { position: relative; padding: 0 0 var(--s-5); }
.timeline > li:last-child { padding-bottom: 0; }

.timeline > li::before {
  content: "";
  position: absolute;
  left: calc(var(--s-5) * -1 + 1px);
  top: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--paper-1);
  border: 1.5px solid var(--ink-300);
}

.timeline > li.is-key::before { border-color: var(--violet); background: var(--violet); }

.timeline__t {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  color: var(--ink-400);
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   洞察条 —— 全站复用的"AI 结论"呈现
   -------------------------------------------------------------------------- */

.insight {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-4);
  border-radius: var(--r-md);
  background: var(--paper-1);
  border: 1px solid var(--line-soft);
}

.insight--signal { background: var(--violet-wash); border-color: var(--line-violet); }
.insight--cool   { background: oklch(56% 0.086 232 / 0.08); border-color: oklch(56% 0.086 232 / 0.28); }
.insight svg { width: 15px; height: 15px; margin-top: 2px; color: var(--ink-400); }
.insight--signal svg { color: var(--violet); }
.insight--cool svg { color: oklch(45% 0.086 232); }
.insight__t { display: block; font-size: var(--t-sm); font-weight: 600; color: var(--ink-900); margin-bottom: 5px; }
.insight__d { display: block; font-size: var(--t-xs); color: var(--ink-500); line-height: 1.7; }

.ghost {
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-400);
  font-size: var(--t-xs);
}

/* --------------------------------------------------------------------------
   定价
   -------------------------------------------------------------------------- */

.tier {
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-0);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.tier:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-lift); }

.tier--feature {
  border-color: transparent;
  background: var(--violet-deep);
  color: oklch(100% 0 0 / 0.78);
  box-shadow: var(--shadow-lift);
}

.tier--feature .h3,
.tier--feature .tier__amount { color: oklch(100% 0 0); }
.tier--feature .tier__unit,
.tier--feature .body-xs { color: oklch(100% 0 0 / 0.58); }
.tier--feature .tier__feats li { color: oklch(100% 0 0 / 0.8); border-color: oklch(100% 0 0 / 0.14); }
.tier--feature .kicker { color: oklch(100% 0 0 / 0.55); }

.tier__price { display: flex; align-items: baseline; gap: 4px; margin: var(--s-4) 0 var(--s-2); }

.tier__amount {
  font-size: var(--t-3xl);
  font-weight: 680;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.tier__unit { font-size: var(--t-xs); color: var(--ink-400); }
.tier__feats { margin: var(--s-5) 0; flex: 1; }
.tier__feats li { padding: 8px 0; border-top: 1px solid var(--line-soft); font-size: var(--t-sm); color: var(--ink-700); }
.tier__feats li:first-child { border-top: 0; }