/* ============================================================
   decoration-package-compare · 装修全包半包清包对比
   装修工料清单风（dpc-）：建筑蓝 + 木棕 + 石灰白 + 钢灰
   ============================================================ */
.dpc-page {
    --dpc-blue: #3b5a87;
    --dpc-blue-deep: #263c5e;
    --dpc-blue-soft: rgba(59, 90, 135, 0.12);
    --dpc-wood: #8b5a2b;
    --dpc-wood-deep: #5e3a1a;
    --dpc-lime: #f5f0e6;
    --dpc-lime-soft: #ffffff;
    --dpc-steel: #6b7280;
    --dpc-text: #1d2330;
    --dpc-muted: #6a7384;
    --dpc-line: #e4ddcf;
    --dpc-line-strong: #b8ae97;
    --dpc-ok: #4f8c6b;
    --dpc-warn: #b26a12;
    --dpc-danger: #c24545;
    --dpc-shadow: 0 6px 20px rgba(38, 60, 94, 0.08);
    color: var(--dpc-text); font-size: 15px; line-height: 1.75;
}
[data-theme="dark"] .dpc-page {
    --dpc-blue: #7f9fd6; --dpc-blue-deep: #a4bcf0; --dpc-blue-soft: rgba(127,159,214,0.14);
    --dpc-wood: #b88452; --dpc-wood-deep: #d4a474;
    --dpc-lime: #1a1d22; --dpc-lime-soft: #22252b;
    --dpc-text: #e8ecf2; --dpc-muted: #939cb0;
    --dpc-line: #30343c; --dpc-line-strong: #444a56;
    --dpc-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
.dpc-page b { color: var(--dpc-blue-deep); }

/* Hero */
.dpc-hero { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(180px,0.8fr) minmax(200px,0.7fr); gap: 22px 28px; align-items: center; padding: 30px 32px 26px; margin-bottom: 24px; border: 1px solid var(--dpc-line); border-radius: 20px; background:
    radial-gradient(90% 120% at 100% 0%, rgba(139,90,43,0.10), transparent 55%),
    radial-gradient(70% 100% at 0% 100%, var(--dpc-blue-soft), transparent 55%),
    var(--dpc-lime-soft); box-shadow: var(--dpc-shadow); }
.dpc-kicker { display: inline-block; padding: 5px 14px; margin-bottom: 12px; border-radius: 8px; background: var(--dpc-blue-soft); color: var(--dpc-blue-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
.dpc-hero h1 { margin: 0 0 10px; font-size: clamp(26px,3.4vw,38px); font-weight: 900; }
.dpc-hero-sub { margin: 0 0 14px; max-width: 60ch; color: var(--dpc-muted); font-size: 15px; }
.dpc-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dpc-hero-chips li { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--dpc-line-strong); background: var(--dpc-lime); color: var(--dpc-muted); font-size: 12px; font-weight: 700; }

/* Estimate bars (unique visual) */
.dpc-hero-estimate { padding: 14px; border-radius: 12px; background: var(--dpc-lime); border: 1.5px dashed var(--dpc-line-strong); }
.dpc-est-row { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 12px; font-weight: 800; color: var(--dpc-muted); }
.dpc-est-row:last-child { margin-bottom: 0; }
.dpc-est-bar { height: 10px; border-radius: 5px; background: var(--dpc-blue); opacity: 0.7; }
.dpc-bar-wood { background: var(--dpc-wood); }
.dpc-bar-lime { background: var(--dpc-lime-soft); border: 1px solid var(--dpc-line-strong); }
.dpc-bar-steel { background: var(--dpc-steel); }
.dpc-est-first .dpc-est-bar { opacity: 1; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.15); }

.dpc-hero-readout { display: grid; gap: 5px; padding: 18px 20px; border: 1px solid var(--dpc-line-strong); border-radius: 14px; border-top: 4px solid var(--dpc-wood); background: var(--dpc-lime); text-align: center; }
.dpc-readout-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--dpc-muted); }
.dpc-readout-num { font-size: 40px; font-weight: 900; line-height: 1; color: var(--dpc-wood-deep); font-variant-numeric: tabular-nums; }
.dpc-readout-avg { font-size: 12.5px; font-weight: 700; color: var(--dpc-muted); }

/* Input panel */
.dpc-input-panel { padding: 22px 24px; border: 1px solid var(--dpc-line); border-radius: 16px; background: var(--dpc-lime-soft); box-shadow: var(--dpc-shadow); margin-bottom: 22px; }
.dpc-panel-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.dpc-step { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--dpc-blue-deep); color: #fff; font-size: 14px; font-weight: 900; }
.dpc-panel-head h2 { margin: 0 0 2px; font-size: 17px; font-weight: 900; }
.dpc-panel-head p { margin: 0; font-size: 12.5px; color: var(--dpc-muted); }

.dpc-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.dpc-field { display: grid; gap: 5px; }
.dpc-label { font-size: 12.5px; font-weight: 800; color: var(--dpc-muted); }
.dpc-input-wrap, .dpc-select-wrap { position: relative; }
.dpc-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--dpc-line-strong); border-radius: 8px; background: var(--dpc-lime-soft); color: var(--dpc-text); font-size: 14px; font-weight: 600; outline: none; transition: border-color 0.15s ease; }
.dpc-input:focus { border-color: var(--dpc-blue); box-shadow: 0 0 0 3px var(--dpc-blue-soft); }
select.dpc-input { padding-right: 28px; appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236a7384' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.dpc-input-wrap .dpc-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 700; color: var(--dpc-muted); pointer-events: none; }

/* Section head */
.dpc-section-head { margin-bottom: 14px; }
.dpc-section-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: var(--dpc-blue-deep); }
.dpc-section-head h2 { margin: 4px 0 4px; font-size: 22px; font-weight: 900; }
.dpc-section-head p { margin: 0; color: var(--dpc-muted); font-size: 13px; }

/* Compare table (工料单风) */
.dpc-compare { margin-bottom: 26px; }
.dpc-compare-table { width: 100%; border-collapse: collapse; border: 1px solid var(--dpc-line-strong); border-radius: 10px; overflow: hidden; background: var(--dpc-lime-soft); box-shadow: var(--dpc-shadow); }
.dpc-compare-table th, .dpc-compare-table td { padding: 12px 14px; border: 1px solid var(--dpc-line); font-size: 13px; vertical-align: top; }
.dpc-compare-table th { background: var(--dpc-blue-deep); color: #fff; font-size: 13px; font-weight: 900; text-align: left; letter-spacing: 0.02em; }
.dpc-compare-table th.dpc-col-mode { background: var(--dpc-wood); }
.dpc-compare-table td.dpc-col-header { background: var(--dpc-lime); font-weight: 800; color: var(--dpc-blue-deep); white-space: nowrap; width: 110px; }
.dpc-compare-table td.dpc-col-mode { background: var(--dpc-lime); }
.dpc-compare-table .dpc-col-num { font-weight: 900; color: var(--dpc-blue-deep); font-variant-numeric: tabular-nums; }
.dpc-compare-table .dpc-col-num.is-positive { color: var(--dpc-ok); }
.dpc-compare-table .dpc-col-num.is-warn { color: var(--dpc-warn); }
.dpc-compare-table .dpc-col-num.is-danger { color: var(--dpc-danger); }

/* Breakdown grid */
.dpc-breakdown { margin-bottom: 26px; }
.dpc-breakdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.dpc-bd-card { padding: 18px; border: 1px solid var(--dpc-line); border-radius: 14px; background: var(--dpc-lime-soft); box-shadow: var(--dpc-shadow); }
.dpc-bd-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 900; color: var(--dpc-blue-deep); display: flex; gap: 8px; align-items: center; }
.dpc-bd-card h3::before { content: ''; width: 10px; height: 10px; border-radius: 2px; background: var(--dpc-blue); }
.dpc-bd-card[data-mode="half"] h3::before { background: var(--dpc-wood); }
.dpc-bd-card[data-mode="clean"] h3::before { background: var(--dpc-steel); }
.dpc-bd-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--dpc-line); font-size: 12.5px; }
.dpc-bd-row:last-child { border-bottom: none; font-weight: 900; padding-top: 10px; border-top: 2px solid var(--dpc-blue); border-bottom: none; margin-top: 4px; }
.dpc-bd-row:last-child span { color: var(--dpc-blue-deep); }
.dpc-bd-row span:first-child { color: var(--dpc-muted); }
.dpc-bd-row:last-child span:first-child { color: var(--dpc-text); font-size: 13px; }

/* Recommend */
.dpc-recommend { margin-bottom: 26px; }
.dpc-rec-box { padding: 20px 22px; border-radius: 14px; background: var(--dpc-blue-soft); border: 1px solid rgba(59,90,135,0.25); }
.dpc-rec-box h3 { margin: 0 0 10px; font-size: 18px; font-weight: 900; color: var(--dpc-blue-deep); }
.dpc-rec-box p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--dpc-text); }
.dpc-rec-box p b { color: var(--dpc-wood-deep); }

/* Package cards */
.dpc-package { margin-bottom: 26px; }
.dpc-package-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.dpc-pkg-card { padding: 18px; border: 1px solid var(--dpc-line); border-radius: 14px; background: var(--dpc-lime-soft); box-shadow: var(--dpc-shadow); }
.dpc-pkg-card h3 { margin: 0 0 8px; font-size: 14px; font-weight: 900; color: var(--dpc-danger); }
.dpc-pkg-card ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--dpc-muted); line-height: 1.9; }

/* Top btn */
.dpc-top { position: fixed; right: 26px; bottom: 30px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--dpc-line-strong); border-radius: 10px; background: var(--dpc-lime-soft); color: var(--dpc-blue-deep); font-size: 17px; font-weight: 900; cursor: pointer; box-shadow: var(--dpc-shadow); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.15s ease; z-index: 60; }
.dpc-top.is-show { opacity: 1; pointer-events: auto; }

@media (max-width: 1080px) {
    .dpc-hero { grid-template-columns: minmax(0,1fr); }
    .dpc-hero-estimate { display: none; }
    .dpc-breakdown-grid, .dpc-package-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
    .dpc-grid3 { grid-template-columns: minmax(0,1fr); }
    .dpc-compare-table { font-size: 12px; }
    .dpc-compare-table th, .dpc-compare-table td { padding: 8px 10px; }
}