/* ====== 管道疏通价格工具 · puc- 前缀 ====== */
.puc-page { --puc-bg:#0b1a2a; --puc-bg-2:#12273d; --puc-accent:#22d3ee; --puc-accent-2:#f97316; --puc-clog:#ef4444; --puc-text:#e2e8f0; --puc-muted:#94a3b8; --puc-card:#17324d; --puc-border:#1f4060; padding:28px 0 40px; color:var(--puc-text); }

/* Hero 管道 SVG 风 */
.puc-hero { position:relative; display:grid; grid-template-columns:1fr 1fr 240px; gap:24px; align-items:center; padding:32px; background:linear-gradient(135deg, var(--puc-bg) 0%, var(--puc-bg-2) 100%); border-radius:20px; overflow:hidden; border:1px solid var(--puc-border); margin-bottom:28px; }
.puc-pipe { position:relative; height:160px; }
.puc-pipe-svg { width:100%; height:100%; }
.puc-pipe-svg path.puc-pipe-main { stroke:#3b82f6; stroke-width:14; fill:none; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(59,130,246,.5)); }
.puc-pipe-svg path.puc-pipe-branch { stroke:#60a5fa; stroke-width:10; fill:none; stroke-linecap:round; }
.puc-pipe-svg circle.puc-pipe-joint { fill:#475569; stroke:#64748b; stroke-width:2; }
.puc-pipe-svg circle.puc-clog { fill:var(--puc-clog); animation:pucPulse 1.8s infinite; }
@keyframes pucPulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.puc-wrench { position:absolute; right:10%; bottom:-10px; font-size:72px; transform:rotate(-20deg); filter:drop-shadow(0 4px 12px rgba(249,115,22,.4)); }
.puc-kicker { display:inline-block; padding:4px 12px; background:rgba(34,211,238,.15); color:var(--puc-accent); border-radius:999px; font-size:12px; font-weight:600; letter-spacing:1px; margin-bottom:12px; }
.puc-hero h1 { font-size:28px; font-weight:800; margin:0 0 10px; }
.puc-hero-sub { color:var(--puc-muted); margin:0 0 14px; line-height:1.6; }
.puc-hero-sub b { color:var(--puc-accent); }
.puc-hero-chips { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0; }
.puc-hero-chips li { padding:4px 10px; background:rgba(255,255,255,.06); border-radius:999px; font-size:12px; color:var(--puc-muted); }
.puc-hero-readout { background:linear-gradient(135deg, var(--puc-accent), #0ea5e9); color:#fff; padding:20px; border-radius:16px; text-align:center; box-shadow:0 8px 28px rgba(34,211,238,.25); }
.puc-readout-label { font-size:12px; opacity:.85; }
.puc-readout-num { display:block; font-size:32px; font-weight:900; margin:4px 0; }
.puc-readout-avg { font-size:13px; opacity:.9; }

/* 计算区 */
.puc-calc { display:grid; grid-template-columns:1.6fr 1fr; gap:24px; }
.puc-input-col { display:flex; flex-direction:column; gap:18px; }
.puc-panel { background:var(--puc-card); border:1px solid var(--puc-border); border-radius:16px; padding:22px; }
.puc-panel-head { display:flex; gap:14px; align-items:center; margin-bottom:16px; }
.puc-step { width:36px; height:36px; border-radius:10px; background:var(--puc-accent); color:#0b1a2a; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.puc-panel-head h2 { font-size:17px; margin:0 0 2px; }
.puc-panel-head p { font-size:12px; color:var(--puc-muted); margin:0; }
.puc-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* 位置卡片 */
.puc-pos-card { position:relative; cursor:pointer; }
.puc-pos-card input { position:absolute; opacity:0; }
.puc-pos-card span:first-of-type { font-size:26px; }
.puc-pos-card b { display:block; font-size:14px; margin:4px 0 2px; }
.puc-pos-card em { font-style:normal; font-size:11px; color:var(--puc-muted); }
.puc-pos-card { background:rgba(255,255,255,.03); border:1px solid var(--puc-border); border-radius:12px; padding:14px 16px; display:block; transition:all .2s; }
.puc-pos-card:hover { border-color:var(--puc-accent); background:rgba(34,211,238,.06); }
.puc-pos-card input:checked + span:first-of-type + b + em { }
.puc-pos-card input:checked ~ span:first-of-type { }
.puc-pos-card:has(input:checked) { border-color:var(--puc-accent); background:rgba(34,211,238,.1); box-shadow:0 0 0 3px rgba(34,211,238,.2); }

/* 程度卡片 */
.puc-level-card { background:rgba(255,255,255,.03); border:1px solid var(--puc-border); border-radius:12px; padding:14px 16px; display:block; cursor:pointer; position:relative; transition:all .2s; }
.puc-level-bar { height:4px; border-radius:2px; margin-bottom:10px; }
.puc-bar-l1 { background:#22c55e; width:30%; }
.puc-bar-l2 { background:#eab308; width:55%; }
.puc-bar-l3 { background:#f97316; width:80%; }
.puc-bar-l4 { background:#ef4444; width:100%; }
.puc-level-card b { font-size:14px; }
.puc-level-card em { font-style:normal; font-size:11px; color:var(--puc-muted); display:block; margin-top:2px; }
.puc-level-card input { position:absolute; opacity:0; }
.puc-level-card:has(input:checked) { border-color:var(--puc-accent); background:rgba(34,211,238,.1); box-shadow:0 0 0 3px rgba(34,211,238,.2); }

/* 表单字段 */
.puc-field { display:flex; flex-direction:column; gap:4px; }
.puc-label { font-size:12px; color:var(--puc-muted); }
.puc-select-wrap { position:relative; }
.puc-input { width:100%; padding:10px 12px; background:rgba(0,0,0,.25); border:1px solid var(--puc-border); border-radius:10px; color:var(--puc-text); font-size:14px; transition:border-color .2s; appearance:none; }
.puc-input:focus { outline:none; border-color:var(--puc-accent); }
select.puc-input { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }

/* 结果列 */
.puc-result-col { position:sticky; top:20px; display:flex; flex-direction:column; gap:14px; align-self:flex-start; }
.puc-result-hero { background:linear-gradient(135deg, #ef4444, #f97316); color:#fff; padding:22px; border-radius:16px; text-align:center; box-shadow:0 8px 28px rgba(239,68,68,.3); }
.puc-rh-label { font-size:12px; opacity:.9; }
.puc-rh-num { display:block; font-size:34px; font-weight:900; margin:4px 0; }
.puc-rh-sub { font-size:13px; opacity:.9; }
.puc-self-card { background:rgba(255,255,255,.04); border:1px solid var(--puc-border); border-radius:14px; padding:16px; }
.puc-self-card h3 { margin:0 0 10px; font-size:15px; }
.puc-self-content { font-size:13px; line-height:1.7; color:var(--puc-muted); }
.puc-self-content .puc-self-yes { color:#22c55e; font-weight:700; }
.puc-self-content .puc-self-no { color:#ef4444; font-weight:700; }
.puc-self-content ul { margin:8px 0 0; padding-left:18px; }
.puc-kpis { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.puc-kpi { background:rgba(255,255,255,.04); border:1px solid var(--puc-border); border-radius:10px; padding:10px 12px; }
.puc-kpi span { display:block; font-size:11px; color:var(--puc-muted); }
.puc-kpi b { font-size:15px; color:var(--puc-accent); }
.puc-breakdown { background:rgba(255,255,255,.04); border:1px solid var(--puc-border); border-radius:12px; padding:14px; font-size:13px; }
.puc-breakdown-item { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px dashed var(--puc-border); }
.puc-breakdown-item:last-child { border-bottom:none; }
.puc-warn { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.4); border-radius:10px; padding:12px 14px; font-size:12px; line-height:1.6; color:#fca5a5; }

/* FAQ */
.puc-faq { margin-top:28px; }
.puc-section-head { margin-bottom:14px; }
.puc-section-kicker { display:inline-block; font-size:11px; font-weight:700; color:var(--puc-accent); letter-spacing:2px; }
.puc-section-head h2 { font-size:20px; margin:4px 0 0; color:#fff; }
.faq-list .faq-item { background:var(--puc-card); border:1px solid var(--puc-border); border-radius:10px; margin-bottom:8px; padding:0; overflow:hidden; }
.faq-list summary { padding:14px 16px; cursor:pointer; font-weight:600; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--puc-text); }
.faq-list summary::after { content:'+'; font-size:18px; color:var(--puc-accent); }
.faq-list .faq-item[open] summary::after { content:'−'; }
.faq-list .faq-a { padding:0 16px 14px; font-size:13px; color:var(--puc-muted); line-height:1.7; }

.puc-top { position:fixed; right:20px; bottom:40px; width:44px; height:44px; border-radius:50%; background:var(--puc-accent); color:#0b1a2a; border:none; font-size:18px; font-weight:700; cursor:pointer; box-shadow:0 4px 16px rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .3s; z-index:99; }
.puc-top.show { opacity:1; pointer-events:auto; }

/* 深色模式已默认暗色 */
@media (prefers-color-scheme: light) {
    .puc-page { --puc-bg:#f8fafc; --puc-bg-2:#eef2f7; --puc-text:#0f172a; --puc-muted:#64748b; --puc-card:#fff; --puc-border:#e2e8f0; }
    .puc-pos-card, .puc-level-card { background:#fff; }
    .puc-input { background:#f1f5f9; color:#0f172a; }
}
[data-theme="light"] .puc-page { --puc-bg:#f8fafc; --puc-bg-2:#eef2f7; --puc-text:#0f172a; --puc-muted:#64748b; --puc-card:#fff; --puc-border:#e2e8f0; }

/* 响应式 */
@media (max-width: 900px) {
    .puc-hero { grid-template-columns:1fr; }
    .puc-pipe { order:-1; height:120px; }
    .puc-hero-readout { margin-top:4px; }
    .puc-calc { grid-template-columns:1fr; }
    .puc-result-col { position:static; }
}
@media (max-width: 520px) {
    .puc-grid2 { grid-template-columns:1fr; }
    .puc-kpis { grid-template-columns:1fr 1fr; }
}