/* ==========================================================================
   12 · 电陶炉锅具适配 —— HOB × POT
   独立设计：陶土橙 + 炭黑灶台；首屏为深色双灶加热环，
   材质矩阵是「金属样片」方格，功率为横向刻度条，与其它工具无共用布局。
   ========================================================================== */
.hpm {
    --hg-paper:      #f7f3ed;
    --hg-paper-2:    #ece3d7;
    --hg-card:       #fffcf6;
    --hg-card-2:     #f4ede2;
    --hg-ink:        #2c241e;
    --hg-ink-2:      #584b3d;
    --hg-ink-3:      #8c7c69;
    --hg-line:       #e0d3c0;
    --hg-line-2:     #c7b59a;
    --hg-brand:      #b4512b;
    --hg-brand-2:    #33413f;
    --hg-brand-soft: #f7e6d8;
    --hg-on-brand:   #fffaf2;
    --hpm-dark:      #28231e;
    --hpm-dark-2:    #383029;
    background: var(--hg-paper);
}
:root[data-theme="dark"] .hpm {
    --hg-paper:      #15120f;
    --hg-paper-2:    #201b16;
    --hg-card:       #1c1813;
    --hg-card-2:     #251f19;
    --hg-ink:        #f4ece0;
    --hg-ink-2:      #cdbda8;
    --hg-ink-3:      #9c8a74;
    --hg-line:       #372e25;
    --hg-line-2:     #4d4033;
    --hg-brand:      #e69a6f;
    --hg-brand-2:    #8faeaa;
    --hg-brand-soft: #35241a;
    --hg-on-brand:   #1a120c;
    --hpm-dark:      #0d0b09;
    --hpm-dark-2:    #191411;
}
.hpm .hg2-btn { border-radius: 2px; }

/* ---------- 首屏：深色灶台 ---------- */
.hpm-hero { background: var(--hpm-dark); color: #f6ede2; margin-top: 0; border-bottom: 5px solid var(--hg-brand); }
.hpm-hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 0; max-width: 1180px; margin: 0 auto; }
.hpm-hero-copy { padding: 48px 44px 48px 26px; }
.hpm-kicker { display: inline-block; font: 700 11.5px/1.5 var(--hg-mono); letter-spacing: .18em; color: #e69a6f; border-left: 3px solid #e69a6f; padding-left: 10px; margin-bottom: 24px; }
.hpm-hero h1 { color: #fbf4ea; margin-bottom: 20px; }
.hpm-hero h1 em { color: #f0b184; }
.hpm-lede { color: #cfc1b0; font-size: 15.5px; line-height: 1.95; max-width: 54ch; }
.hpm-lede b { color: #fbf4ea; box-shadow: inset 0 -.4em 0 rgba(230, 154, 111, .22); }
.hpm-points { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid #4a3d31; }
.hpm-points li { position: relative; padding: 9px 0 9px 22px; border-bottom: 1px solid #4a3d31; font-size: 13.5px; color: #d2c4b3; margin: 0; }
.hpm-points li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: #e69a6f; }
.hpm-points b { color: #fbf4ea; }
.hpm-hero-note { margin: 20px 0 0; font-size: 12.5px; line-height: 1.8; color: #a99a88; }

.hpm-tester { padding: 32px 26px 34px; background: var(--hpm-dark-2); border-left: 1px solid #4a3d31; }
.hpm-tester-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 700 11.5px/1.5 var(--hg-mono); letter-spacing: .12em; color: #a99a88; }
.hpm-tester-hd b { color: #f0b184; border: 1px solid #6a5644; padding: 2px 9px; border-radius: 2px; font-size: 11px; }
.hpm-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0 20px; }
.hpm-ring { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 138px; border-radius: 50%; text-align: center; border: 2px solid #5a4a3a; background: radial-gradient(circle, #2b241d 0 58%, #332a22 59% 100%); transition: border-color .25s, box-shadow .25s; }
.hpm-ring::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .09); }
.hpm-ring.is-ok { border-color: #7fc09a; box-shadow: 0 0 0 5px rgba(127, 192, 154, .1); }
.hpm-ring.is-no { border-color: #d98472; box-shadow: 0 0 0 5px rgba(217, 132, 114, .1); }
.hpm-ring.is-mid { border-color: #e3bd7b; box-shadow: 0 0 0 5px rgba(227, 189, 123, .1); }
.hpm-ring-cap { font: 700 11px/1.5 var(--hg-mono); letter-spacing: .14em; color: #a99a88; }
.hpm-ring strong { display: block; font: 700 34px/1.25 var(--hg-mono); color: #fbf4ea; margin: 2px 0; }
.hpm-ring.is-ok strong { color: #9ad9b2; }
.hpm-ring.is-no strong { color: #ef9f8d; }
.hpm-ring.is-mid strong { color: #f0d09a; }
.hpm-ring-sub { font-size: 11.5px; color: #cfc1b0; line-height: 1.5; max-width: 100px; }
.hpm-tester .hg2-label { color: #cfc1b0; }
.hpm-tester .hg2-hint { color: #a99a88; }
.hpm-tester-btns { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 15px; }
.hpm-tester-btns .hg2-btn { flex: 1 1 auto; }
:root[data-theme="dark"] .hpm-tester select, :root[data-theme="light"] .hpm-tester select { background-color: #2c251e; color: #f6ede2; border-color: #6a5644; }

/* ---------- 01 材质矩阵：金属样片 ---------- */
.hpm-matrix { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--hg-line); border: 1px solid var(--hg-line); }
.hpm-mat { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 15px 14px 14px; background: var(--hg-card); border: 0; border-top: 3px solid transparent; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; min-height: 138px; font-family: var(--hg-body); }
.hpm-mat:hover { background: var(--hg-card-2); }
.hpm-mat.is-on { background: var(--hg-brand-soft); border-top-color: var(--hg-brand); }
.hpm-mat-name { font-size: 14px; font-weight: 700; color: var(--hg-ink); line-height: 1.45; }
.hpm-mat-meta { font: 11.5px/1.6 var(--hg-mono); color: var(--hg-ink-3); }
.hpm-mat-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.hpm-mat-tags span { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 2px; }
.hpm-mat-tags .is-y { background: var(--hg-ok-bg); color: var(--hg-ok); }
.hpm-mat-tags .is-n { background: var(--hg-bad-bg); color: var(--hg-bad); }
.hpm-mat-note { font-size: 11.5px; line-height: 1.6; color: var(--hg-ink-3); }

/* ---------- 卡片与表单 ---------- */
.hpm-card { background: var(--hg-card); border: 1px solid var(--hg-line); border-radius: 2px; padding: 20px 22px 22px; }
.hpm-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); }
.hpm-card-hd h3 { font-family: var(--hg-display); font-size: 19px; }
.hpm-card-hd span { font: 11.5px/1.5 var(--hg-mono); color: var(--hg-ink-3); }
.hpm-setup-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; }
.hpm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hpm-figure { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--hg-line-2); text-align: center; }
.hpm-figure img { max-width: 100%; height: auto; display: block; margin: 0 auto 8px; }
.hpm-figure span { font: 11.5px/1.6 var(--hg-mono); color: var(--hg-ink-3); letter-spacing: .06em; }
.hpm-btn-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; align-items: center; }

/* ---------- 02 功率刻度条 ---------- */
.hpm-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.hpm-modes .hg2-chip.is-on { background: var(--hg-brand-soft); border-color: var(--hg-brand); }
.hpm-power-bar { position: relative; height: 26px; margin: 24px 0 6px; border: 1px solid var(--hg-line-2); border-radius: 2px; background: linear-gradient(90deg, var(--hg-card-2) 0%, #f3d9bf 50%, #d58a55 100%); overflow: hidden; }
:root[data-theme="dark"] .hpm-power-bar { background: linear-gradient(90deg, #241e19 0%, #5a3a26 50%, #a75f35 100%); }
.hpm-power-bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: rgba(180, 81, 43, .3); border-right: 2px solid var(--hg-brand); transition: width .28s; }
.hpm-power-bar span { position: absolute; right: 9px; top: 3px; font: 700 12px/1.6 var(--hg-mono); color: var(--hg-ink); }
.hpm-power-scale { display: flex; justify-content: space-between; font: 11px/1.5 var(--hg-mono); color: var(--hg-ink-3); }

/* ---------- 03 结论 ---------- */
.hpm-verdicts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hg-line); border: 1px solid var(--hg-line); margin-bottom: 18px; }
.hpm-verdict { background: var(--hg-card); padding: 20px 22px; border-top: 4px solid var(--hg-line-2); }
.hpm-verdict.is-ok { border-top-color: var(--hg-ok); }
.hpm-verdict.is-mid { border-top-color: var(--hg-warn); }
.hpm-verdict.is-no { border-top-color: var(--hg-bad); }
.hpm-verdict-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hpm-verdict-top h3 { font-family: var(--hg-display); font-size: 20px; }
.hpm-verdict-top b { font: 700 13px/1.5 var(--hg-mono); }
.hpm-verdict.is-ok b { color: var(--hg-ok); }
.hpm-verdict.is-mid b { color: var(--hg-warn); }
.hpm-verdict.is-no b { color: var(--hg-bad); }
.hpm-verdict p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.85; }
.hpm-result-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hpm-warns { list-style: none; margin: 0; padding: 0; }
.hpm-warns li { padding: 9px 0 9px 16px; border-bottom: 1px solid var(--hg-line); position: relative; font-size: 13.5px; line-height: 1.8; color: var(--hg-ink-2); }
.hpm-warns li::before { content: ''; position: absolute; left: 0; top: 17px; width: 6px; height: 6px; background: var(--hg-brand-2); border-radius: 1px; }
.hpm-warns li:last-child { border-bottom: 0; }
.hpm-warns b { color: var(--hg-ink); }
.hpm-ask p { padding-left: 14px; border-left: 2px solid var(--hg-brand-soft); margin-bottom: 9px; font-size: 13.5px; line-height: 1.85; }
.hpm-result-btns { padding-top: 18px; border-top: 1px solid var(--hg-line); margin-top: 22px; }

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

@media (max-width: 1000px) {
    .hpm-hero-in, .hpm-setup-grid, .hpm-result-cols { grid-template-columns: 1fr; }
    .hpm-hero-copy { padding-right: 26px; padding-bottom: 30px; }
    .hpm-tester { border-left: 0; border-top: 1px solid #4a3d31; }
    .hpm-matrix { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
    .hpm-matrix { grid-template-columns: repeat(2, 1fr); }
    .hpm-fields, .hpm-verdicts { grid-template-columns: 1fr; }
    .hpm-ring { min-height: 118px; }
    .hpm-ring strong { font-size: 26px; }
}