/* ==========================================================================
   13 · 蒸汽拖把选购对照 —— STEAM PROFILE
   独立设计：雾蓝绿 + 蒸汽白渐变；首屏三栏「文案 / 竖向温度计 / 速配台」，
   权重用刻度滑杆行，场景卡带波纹顶边，分数为竖向柱而非圆盘。
   ========================================================================== */
.smg {
    --hg-paper:      #f1f6f5;
    --hg-paper-2:    #e2eceb;
    --hg-card:       #fdfefe;
    --hg-card-2:     #ecf4f3;
    --hg-ink:        #173334;
    --hg-ink-2:      #416162;
    --hg-ink-3:      #789494;
    --hg-line:       #cbdedc;
    --hg-line-2:     #a8c5c3;
    --hg-brand:      #2f7b7a;
    --hg-brand-2:    #b07a3c;
    --hg-brand-soft: #dceeee;
    --hg-on-brand:   #f7fdfc;
    background: var(--hg-paper);
}
:root[data-theme="dark"] .smg {
    --hg-paper:      #0e1617;
    --hg-paper-2:    #162324;
    --hg-card:       #151f20;
    --hg-card-2:     #1c2b2c;
    --hg-ink:        #e7f2f0;
    --hg-ink-2:      #afc8c6;
    --hg-ink-3:      #7f9b9a;
    --hg-line:       #2a3d3e;
    --hg-line-2:     #3b5556;
    --hg-brand:      #7cc9c5;
    --hg-brand-2:    #dfb477;
    --hg-brand-soft: #1b3233;
    --hg-on-brand:   #0c1718;
}
.smg .hg2-btn { border-radius: 999px; }

/* ---------- 首屏：雾气渐变三栏 ---------- */
.smg-hero {
    display: grid; grid-template-columns: minmax(0, 1.1fr) 96px minmax(0, .82fr);
    gap: 0; align-items: stretch;
    background: linear-gradient(120deg, #e7f2f0 0%, #f7fbfa 45%, #eaf4f3 100%);
    border-bottom: 2px solid var(--hg-line-2);
    position: relative; overflow: hidden;
}
:root[data-theme="dark"] .smg-hero { background: linear-gradient(120deg, #122122 0%, #162627 50%, #122021 100%); }
.smg-hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: repeating-radial-gradient(ellipse at 12% 100%, transparent 0 22px, rgba(47, 123, 122, .045) 23px 24px); }
.smg-hero-copy { position: relative; padding: 44px 32px 44px 26px; }
.smg-kicker { display: inline-block; font: 700 11.5px/1.5 var(--hg-mono); letter-spacing: .18em; color: var(--hg-brand); border-left: 3px solid var(--hg-brand); padding-left: 10px; margin-bottom: 22px; }
.smg-hero h1 { margin-bottom: 18px; }
.smg-lede { font-size: 15.5px; line-height: 1.95; max-width: 52ch; }
.smg-lede b { box-shadow: inset 0 -.4em 0 var(--hg-brand-soft); }
.smg-points { list-style: none; margin: 22px 0 0; padding: 0; }
.smg-points li { position: relative; padding: 7px 0 7px 24px; font-size: 13.5px; line-height: 1.75; color: var(--hg-ink-2); margin: 0; }
.smg-points li::before { content: '≈'; position: absolute; left: 2px; top: 6px; color: var(--hg-brand); font: 700 15px/1.5 var(--hg-mono); }
.smg-points b { color: var(--hg-ink); }
.smg-hero-note { margin: 18px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--hg-ink-3); }

.smg-thermo { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 30px 0; border-left: 1px solid var(--hg-line); border-right: 1px solid var(--hg-line); }
.smg-thermo-cap { font: 700 10.5px/1.5 var(--hg-mono); letter-spacing: .12em; color: var(--hg-ink-3); writing-mode: vertical-rl; }
.smg-thermo-tube { position: relative; width: 22px; height: 172px; border: 1px solid var(--hg-line-2); border-radius: 999px; background: var(--hg-card); overflow: hidden; }
.smg-thermo-tube i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, #7cc9c5, #2f7b7a 60%, #b07a3c); transition: height .35s; }
.smg-thermo-tube b { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); writing-mode: vertical-rl; font: 700 11px/1 var(--hg-mono); color: var(--hg-ink); }
.smg-thermo-scale { display: flex; flex-direction: column; gap: 18px; font: 10px/1 var(--hg-mono); color: var(--hg-ink-3); }
.smg-thermo-steam { font: 700 13px/1 var(--hg-mono); color: var(--hg-brand); letter-spacing: .1em; }

.smg-quick { position: relative; padding: 34px 26px 30px; background: var(--hg-card); }
.smg-quick-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; font: 700 11.5px/1.5 var(--hg-mono); letter-spacing: .1em; color: var(--hg-ink-3); }
.smg-quick-hd b { color: var(--hg-brand); font-size: 11px; border: 1px solid var(--hg-line-2); border-radius: 999px; padding: 2px 9px; }
.smg-quick .hg2-field { margin-bottom: 12px; }
.smg-quick-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.smg-quick-btns .hg2-btn { flex: 1 1 auto; }
.smg-quick .hg2-hint { margin-top: 14px; }

/* ---------- 01 权重滑杆 ---------- */
.smg-weights { border: 1px solid var(--hg-line); background: var(--hg-card); padding: 8px 24px 16px; border-radius: 6px; }
.smg-wrow { display: grid; grid-template-columns: 108px minmax(120px, 1fr) 52px 120px; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--hg-line); }
.smg-wname { font-size: 14px; font-weight: 700; color: var(--hg-ink); }
.smg-wrow input[type="range"] { width: 100%; height: 6px; appearance: none; -webkit-appearance: none; border-radius: 999px; background: var(--hg-card-2); border: 1px solid var(--hg-line-2); outline: none; }
.smg-wrow input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--hg-brand); border: 3px solid var(--hg-card); box-shadow: 0 0 0 1px var(--hg-brand); cursor: pointer; }
.smg-wrow input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--hg-brand); border: 3px solid var(--hg-card); cursor: pointer; }
.smg-wval { font: 700 13px/1 var(--hg-mono); color: var(--hg-brand); text-align: right; }
.smg-wbar { display: block; height: 8px; border-radius: 999px; background: var(--hg-card-2); overflow: hidden; }
.smg-wbar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #7cc9c5, #2f7b7a); transition: width .2s; }
.smg-wfoot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; font: 12px/1.6 var(--hg-mono); color: var(--hg-ink-3); }

/* ---------- 卡片 ---------- */
.smg-card { background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: 6px; padding: 20px 22px 22px; }
.smg-card-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--hg-line); }
.smg-card-hd h3 { font-family: var(--hg-display); font-size: 19px; }
.smg-card-hd span { font: 11.5px/1.5 var(--hg-mono); color: var(--hg-ink-3); }
.smg-spec-grid, .smg-result-cols { display: grid; grid-template-columns: 1.12fr .88fr; gap: 18px; }
.smg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.smg-figure { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--hg-line-2); text-align: center; }
.smg-figure img { max-width: 100%; height: auto; display: block; margin: 0 auto 8px; }
.smg-figure span { font: 11.5px/1.6 var(--hg-mono); color: var(--hg-ink-3); letter-spacing: .06em; }
.smg-btn-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; align-items: center; }

/* 分数：竖向蒸汽柱 + 大数字，不使用圆盘 */
.smg-score-ring { display: flex; align-items: flex-end; justify-content: center; gap: 12px; min-height: 118px; padding: 12px 0; border-bottom: 1px solid var(--hg-line); }
.smg-score-ring strong { font: 700 66px/1 var(--hg-mono); color: var(--hg-brand); letter-spacing: -.05em; }
.smg-score-ring span { font: 12px/2 var(--hg-mono); color: var(--hg-ink-3); }
.smg-score-break { padding: 14px 0; }
.smg-score-break div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 12.5px; color: var(--hg-ink-2); }
.smg-score-break b { font: 700 12px/1 var(--hg-mono); color: var(--hg-brand); }
.smg-runtime { padding: 11px 14px; border-radius: 6px; background: var(--hg-card-2); border: 1px solid var(--hg-line); font: 700 13px/1.6 var(--hg-mono); color: var(--hg-ink); margin-bottom: 12px; }

/* ---------- 03 场景卡 + 对照表 ---------- */
.smg-scenes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.smg-scene { position: relative; padding: 20px 18px 18px; border: 1px solid var(--hg-line); border-radius: 6px; background: var(--hg-card); overflow: hidden; }
.smg-scene::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--hg-brand) 0 12px, transparent 12px 18px); opacity: .65; }
.smg-scene.is-on { border-color: var(--hg-brand); box-shadow: inset 0 0 0 1px var(--hg-brand); }
.smg-scene-ic { display: block; font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.smg-scene h3 { font-family: var(--hg-display); font-size: 17px; margin-bottom: 7px; }
.smg-scene p { font-size: 12.5px; line-height: 1.8; color: var(--hg-ink-2); margin-bottom: 10px; }
.smg-scene b { color: var(--hg-brand); }
.smg-scene-fit { display: inline-block; font: 700 11.5px/1.6 var(--hg-mono); padding: 2px 9px; border-radius: 999px; background: var(--hg-brand-soft); color: var(--hg-brand); }
.smg-compare { margin-top: 18px; border: 1px solid var(--hg-line); border-radius: 6px; background: var(--hg-card); padding: 20px 22px; }
.smg-compare-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.smg-compare-hd h3 { font-family: var(--hg-display); font-size: 19px; }
.smg-compare-hd span { font: 11.5px/1.5 var(--hg-mono); color: var(--hg-ink-3); }
.smg-table td:first-child { font-weight: 700; color: var(--hg-ink); white-space: nowrap; }

/* ---------- 04 结果 ---------- */
.smg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hg-line); border: 1px solid var(--hg-line); margin-bottom: 18px; }
.smg-kpi { background: var(--hg-card); padding: 16px 18px; }
.smg-kpi span { display: block; font-size: 12px; color: var(--hg-ink-3); }
.smg-kpi strong { display: block; font: 700 23px/1.4 var(--hg-mono); color: var(--hg-brand); margin-top: 4px; }
.smg-kpi small { display: block; font-size: 11.5px; color: var(--hg-ink-3); }
.smg-ask p { padding-left: 14px; border-left: 2px solid var(--hg-brand-soft); margin-bottom: 9px; font-size: 13.5px; line-height: 1.85; }
.smg-warns { list-style: none; margin: 0; padding: 0; }
.smg-warns li { padding: 8px 0 8px 16px; border-bottom: 1px solid var(--hg-line); position: relative; font-size: 13px; line-height: 1.8; color: var(--hg-ink-2); }
.smg-warns li::before { content: '≈'; position: absolute; left: 0; top: 8px; color: var(--hg-brand); font-weight: 700; }
.smg-warns li:last-child { border-bottom: 0; }
.smg-warns b { color: var(--hg-ink); }
.smg-result-btns { padding-top: 18px; border-top: 1px solid var(--hg-line); margin-top: 22px; }

/* ---------- 05 批量 ---------- */
.smg-batch { border: 1px solid var(--hg-line); border-radius: 6px; background: var(--hg-card); padding: 20px 22px; }
.smg-clean { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
.smg-clean > b { width: 100%; font-size: 12.5px; color: var(--hg-ink-2); }
.smg-preview { width: 100%; margin-top: 6px; padding: 8px 10px; background: var(--hg-card-2); border-radius: 4px; font: 12px/1.7 var(--hg-mono); color: var(--hg-ink-3); word-break: break-all; }
.smg-table { margin-top: 16px; }

@media (max-width: 1000px) {
    .smg-hero { grid-template-columns: 1fr 76px; }
    .smg-quick { grid-column: 1 / -1; border-top: 1px solid var(--hg-line); }
    .smg-spec-grid, .smg-result-cols { grid-template-columns: 1fr; }
    .smg-scenes { grid-template-columns: repeat(2, 1fr); }
    .smg-wrow { grid-template-columns: 92px 1fr 46px; }
    .smg-wbar { display: none; }
}
@media (max-width: 600px) {
    .smg-hero { grid-template-columns: 1fr; }
    .smg-thermo { flex-direction: row; border: 0; border-top: 1px solid var(--hg-line); padding: 14px 0; }
    .smg-thermo-cap, .smg-thermo-scale { writing-mode: horizontal-tb; }
    .smg-thermo-scale { flex-direction: row; gap: 12px; }
    .smg-thermo-tube { height: 92px; }
    .smg-scenes, .smg-kpis { grid-template-columns: 1fr 1fr; }
    .smg-fields { grid-template-columns: 1fr; }
    .smg-wrow { grid-template-columns: 80px 1fr 44px; gap: 10px; }
}