/* 20 · 食用油烟点对照表 —— 视觉母题「温度仪表盘」：炭黑 / 火焰橙 / 刻度尺
   独立布局：大数字表盘 + 渐变温度轴 + 可勾选数据表 + 并排对照条。 */
.t28.sp-wrap {
    --t28-bg: #f4f6f8;
    --t28-surface: #ffffff;
    --t28-surface-2: #eef1f4;
    --t28-ink: #1c252e;
    --t28-sub: #46525f;
    --t28-muted: #7a8794;
    --t28-line: #dde3e9;
    --t28-accent: #dd5a26;
    --t28-accent-2: #2a6ea8;
    --t28-soft: #fdeee5;
    --t28-on-accent: #ffffff;
    --t28-ok: #1c7a5b;
    --t28-warn: #9a6a0d;
    --t28-danger: #bb3c34;
    --t28-ok-soft: #e2f3ec;
    --t28-warn-soft: #fbf1d9;
    --t28-danger-soft: #fbe8e6;
    --t28-radius: 12px;
    --t28-radius-sm: 7px;
    --t28-font: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --t28-shadow: 0 1px 2px rgba(28,37,46,.06), 0 10px 28px rgba(28,37,46,.06);
}
:root[data-theme="dark"] .t28.sp-wrap {
    --t28-bg: #0e1319;
    --t28-surface: #171e27;
    --t28-surface-2: #1e2732;
    --t28-ink: #eaf0f6;
    --t28-sub: #b7c3cf;
    --t28-muted: #8a99a8;
    --t28-line: #2a3541;
    --t28-accent: #ff9563;
    --t28-accent-2: #7bb8ec;
    --t28-soft: #33241d;
    --t28-on-accent: #171e27;
    --t28-ok: #6dd0aa;
    --t28-warn: #eec47a;
    --t28-danger: #ff9a92;
    --t28-ok-soft: #17342c;
    --t28-warn-soft: #372c18;
    --t28-danger-soft: #3a2020;
    --t28-shadow: 0 8px 28px rgba(0,0,0,.42);
}
.sp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: center; padding: 34px 0 26px; }
.sp-hero h1 em { display: block; font-style: normal; font-size: .52em; font-weight: 650; letter-spacing: .04em; color: var(--t28-accent); margin-top: 10px; }
.sp-wrap .t28-eyebrow { border-radius: 5px; text-transform: uppercase; }

/* 表盘 */
.sp-dial { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 168px; border-radius: 14px; padding: 20px;
    background: linear-gradient(135deg, #1e2731, #111820);
    box-shadow: 0 14px 34px rgba(17,24,32,.26); color: #fff; }
.sp-dial-label { font-size: 12px; letter-spacing: .22em; color: #9fb0be; }
.sp-dial-num { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.sp-dial-num b { font-size: clamp(44px, 7vw, 64px); font-weight: 800; line-height: 1.1; color: #ffb37e; letter-spacing: -.05em; }
.sp-dial-num small { font-size: 18px; color: #c7d3dc; }
.sp-dial-mode { font-size: 12.5px; color: #b8c6d1; text-align: center; }

/* 温度滑块与刻度轴 */
.sp-control { border-top: 3px solid var(--t28-accent); }
.sp-slider-field { flex: 2 1 280px; }
.sp-slider-field input[type=range] { width: 100%; accent-color: var(--t28-accent); height: 28px; cursor: pointer; }
.sp-axis { margin-top: 18px; }
.sp-axis-bar { height: 12px; border-radius: 999px;
    background: linear-gradient(90deg, #4a90c2 0%, #8dc26a 28%, #e8c65a 52%, #ee8f3a 74%, #d0452c 100%); }
.sp-axis-ticks { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--t28-muted); margin-top: 5px; font-variant-numeric: tabular-nums; }

/* 数据表 */
.sp-table-panel { background: var(--t28-surface); border: 1px solid var(--t28-line); border-radius: var(--t28-radius); padding: 20px; box-shadow: var(--t28-shadow); }
.sp-wrap .t28-table th { position: sticky; top: 0; }
.sp-bar { display: inline-block; height: 7px; border-radius: 99px; background: linear-gradient(90deg, var(--t28-accent-2), var(--t28-accent)); vertical-align: middle; margin-right: 8px; min-width: 4px; }
.sp-fit { color: var(--t28-ok); font-weight: 700; }
.sp-low { color: var(--t28-danger); font-weight: 700; }
.sp-wrap .t28-table tr.sp-row-low td { background: var(--t28-danger-soft); }

/* 并排对照卡 */
.sp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.sp-card { padding: 14px; border-radius: 10px; border: 1px solid var(--t28-line); background: var(--t28-surface-2); }
.sp-card h4 { font-size: 15px; margin-bottom: 4px; }
.sp-card .sp-card-num { font-size: 26px; font-weight: 800; color: var(--t28-accent); font-variant-numeric: tabular-nums; }
.sp-card small { display: block; font-size: 12px; color: var(--t28-muted); line-height: 1.6; margin-top: 6px; }
.sp-batch-panel { border-left: 5px solid var(--t28-accent-2); }
.sp-reading .t28-panel { border-top: 3px solid var(--t28-accent); }

@media (max-width: 860px) { .sp-hero { grid-template-columns: minmax(0, 1fr); } .sp-dial { min-height: 130px; } }
@media (max-width: 520px) { .sp-table-panel { padding: 14px; } .sp-axis-ticks { font-size: 10px; } }