/* 47 · 行车记录仪选购 —— 视觉母题「需求天平 / 参数权重条」
   独立布局：顶部两组左右对照天平按钮 + 底部参数；结果用带百分比的横向权重条与容量三格。 */
.b29.dp-wrap {
    --b29-bg: #f2f5fa;
    --b29-surface: #ffffff;
    --b29-surface-2: #eef2f8;
    --b29-ink: #1d2737;
    --b29-sub: #50607a;
    --b29-muted: #8795aa;
    --b29-line: #e0e7f0;
    --b29-line-strong: #cbd6e5;
    --b29-accent: #2b4d83;
    --b29-accent-2: #7d8c9e;
    --b29-tint: #e7eef9;
    --b29-radius: 16px;
    --b29-radius-sm: 9px;
}
:root[data-theme="dark"] .b29.dp-wrap {
    --b29-bg: #0f131b;
    --b29-surface: #1a212d;
    --b29-surface-2: #222a38;
    --b29-ink: #eaf0fa;
    --b29-sub: #b6c2d6;
    --b29-muted: #8b9ab0;
    --b29-line: #2c3648;
    --b29-line-strong: #3c495e;
    --b29-accent: #98b8ee;
    --b29-accent-2: #b3bfd0;
    --b29-tint: #22304a;
}
.dp-hero h1 em { font-style: normal; color: var(--b29-accent-2); display: block; font-size: .56em; margin-top: 10px; }
.dp-balance { border: 1px solid var(--b29-line); border-radius: var(--b29-radius); background: var(--b29-surface);
    box-shadow: var(--b29-shadow); overflow: hidden; }
.dp-balance-head { padding: 24px 26px 0; }
.dp-tag { font-family: var(--b29-mono); font-size: 11.5px; letter-spacing: .16em; color: var(--b29-accent); }
.dp-balance-head h2 { font-size: var(--b29-xl); margin-top: 10px; }
.dp-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 20px 26px 6px; }
.dp-pair { padding: 16px; border-radius: var(--b29-radius-sm); background: var(--b29-surface-2); border: 1px solid var(--b29-line); }
.dp-pair-title { font-size: var(--b29-xs); font-weight: 800; letter-spacing: .1em; color: var(--b29-muted); margin-bottom: 12px; }
.dp-pair-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.dp-opt { position: relative; cursor: pointer; text-align: center; padding: 14px 10px; border-radius: 9px;
    background: var(--b29-surface); border: 2px solid var(--b29-line-strong); transition: all .16s; }
.dp-opt:hover { border-color: var(--b29-accent); }
.dp-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dp-opt:has(input:checked) { border-color: var(--b29-accent); background: var(--b29-tint); box-shadow: var(--b29-shadow); }
.dp-opt b { display: block; font-size: var(--b29-sm); }
.dp-opt small { display: block; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.6; margin-top: 4px; }
.dp-opt input:focus-visible ~ span { outline: 2px solid var(--b29-accent); outline-offset: 3px; }
.dp-bottom { padding: 18px 26px 26px; border-top: 1px dashed var(--b29-line-strong); margin-top: 18px; }

.dp-verdict { padding: 18px 21px; border-radius: var(--b29-radius); background: var(--b29-tint);
    border-left: 5px solid var(--b29-accent); font-size: var(--b29-sm); line-height: 1.85; margin-bottom: 20px; }
.dp-verdict b { color: var(--b29-accent); }
.dp-bars { display: flex; flex-direction: column; gap: 12px; }
.dp-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 52px; gap: 14px; align-items: center; font-size: var(--b29-sm); }
.dp-bar-name { font-weight: 750; }
.dp-bar-track { height: 14px; border-radius: 999px; background: var(--b29-surface-2); border: 1px solid var(--b29-line); overflow: hidden; }
.dp-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--b29-accent), #6b8fc4); }
.dp-bar.is-top .dp-bar-fill { background: linear-gradient(90deg, #b4793a, var(--b29-accent)); }
.dp-bar-pct { text-align: right; font-family: var(--b29-mono); font-weight: 800; color: var(--b29-accent); }
.dp-bar-desc { grid-column: 2 / -1; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.7; margin-top: -7px; }

.dp-store { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.dp-store-item { padding: 20px; border-radius: var(--b29-radius-sm); background: var(--b29-surface); border: 1px solid var(--b29-line); text-align: center; }
.dp-store-item span { display: block; font-size: var(--b29-xs); color: var(--b29-muted); letter-spacing: .08em; }
.dp-store-item b { display: block; font-family: var(--b29-mono); font-size: var(--b29-xl); color: var(--b29-accent); margin: 9px 0 5px; }
.dp-store-item small { display: block; font-size: var(--b29-xs); color: var(--b29-muted); line-height: 1.65; }
.dp-ai-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 22px; border: 2px dashed var(--b29-accent); border-radius: var(--b29-radius); background: var(--b29-tint); }
.dp-ai-box b { font-size: var(--b29-md); }
.dp-ai-box p { font-size: var(--b29-sm); color: var(--b29-sub); line-height: 1.75; margin: 6px 0 0; max-width: 700px; }

@media (max-width: 900px) {
    .dp-pairs, .dp-store { grid-template-columns: minmax(0, 1fr); }
    .dp-bar { grid-template-columns: 110px minmax(0, 1fr) 46px; gap: 9px; font-size: var(--b29-xs); }
}
@media (max-width: 560px) {
    .dp-balance-head, .dp-pairs, .dp-bottom { padding-left: 16px; padding-right: 16px; }
    .dp-pair-opts { grid-template-columns: minmax(0, 1fr); }
}