/* ============================================================
   ceiling-leak-liability · 楼上漏水责任与维修
   水滴责任链风（cll-）：水蓝 + 水渍灰 + 责任橙 + 警戒红
   ============================================================ */
.cll-page {
    --cll-blue: #3b82d6; --cll-blue-deep: #1e5ba8; --cll-blue-soft: rgba(59,130,214,0.12);
    --cll-gray: #8692a0; --cll-gray-soft: #eef1f5;
    --cll-orange: #e88a3a; --cll-orange-deep: #b45d15; --cll-orange-soft: rgba(232,138,58,0.14);
    --cll-red: #c24545; --cll-red-soft: rgba(194,69,69,0.12);
    --cll-paper: #ffffff; --cll-paper-deep: #f4f8fc;
    --cll-text: #1a2028; --cll-muted: #6a7480;
    --cll-line: #e2e8ef; --cll-line-strong: #bfcad8;
    --cll-shadow: 0 6px 18px rgba(30,91,168,0.08);
    color: var(--cll-text); font-size: 15px; line-height: 1.75;
}
[data-theme="dark"] .cll-page {
    --cll-blue: #6ba8e8; --cll-blue-deep: #a4c4f0; --cll-blue-soft: rgba(107,168,232,0.14);
    --cll-orange: #f0a364; --cll-orange-deep: #f6c09a; --cll-orange-soft: rgba(240,163,100,0.14);
    --cll-red: #d97676; --cll-red-soft: rgba(217,118,118,0.14);
    --cll-paper: #22252b; --cll-paper-deep: #2a2f38;
    --cll-text: #e8ecf2; --cll-muted: #939cb0;
    --cll-line: #30343c; --cll-line-strong: #444a56;
    --cll-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.cll-page b { color: var(--cll-blue-deep); }

.cll-hero { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(220px,0.9fr) minmax(200px,0.7fr); gap: 22px; align-items: center; padding: 28px 30px 24px; margin-bottom: 22px; border: 1px solid var(--cll-line); border-radius: 20px; background:
    radial-gradient(90% 120% at 100% 0%, var(--cll-orange-soft), transparent 55%),
    radial-gradient(70% 100% at 0% 100%, var(--cll-blue-soft), transparent 55%),
    var(--cll-paper); box-shadow: var(--cll-shadow); }
.cll-kicker { display: inline-block; padding: 5px 14px; margin-bottom: 12px; border-radius: 8px; background: var(--cll-blue-soft); color: var(--cll-blue-deep); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; }
.cll-hero h1 { margin: 0 0 10px; font-size: clamp(26px,3.4vw,36px); font-weight: 900; }
.cll-hero-sub { margin: 0 0 14px; max-width: 58ch; color: var(--cll-muted); }
.cll-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cll-hero-chips li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--cll-line-strong); background: var(--cll-paper-deep); color: var(--cll-muted); font-size: 12px; font-weight: 700; }

/* Chain visual */
.cll-hero-chain { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 14px; border-radius: 12px; background: var(--cll-paper-deep); border: 1px dashed var(--cll-line-strong); }
.cll-chain-node { padding: 6px 12px; border-radius: 8px; background: var(--cll-gray-soft); color: var(--cll-muted); font-size: 11px; font-weight: 900; letter-spacing: 0.04em; }
.cll-chain-node.cll-node-blue { background: var(--cll-blue-soft); color: var(--cll-blue-deep); }
.cll-chain-node.cll-node-orange { background: var(--cll-orange-soft); color: var(--cll-orange-deep); }
.cll-chain-node.cll-node-red { background: var(--cll-red-soft); color: var(--cll-red); }
.cll-chain-arrow { color: var(--cll-line-strong); font-weight: 900; font-size: 14px; }

.cll-hero-readout { padding: 18px; border: 1px solid var(--cll-line-strong); border-radius: 14px; border-top: 4px solid var(--cll-blue); background: var(--cll-paper-deep); text-align: center; }
.cll-readout-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--cll-muted); }
.cll-readout-num { font-size: 22px; font-weight: 900; color: var(--cll-blue-deep); margin: 6px 0 2px; }
.cll-readout-avg { font-size: 12px; color: var(--cll-muted); }

/* Calc */
.cll-calc { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,0.9fr); gap: 22px; margin-bottom: 24px; }
.cll-panel { padding: 20px; border: 1px solid var(--cll-line); border-radius: 16px; background: var(--cll-paper); box-shadow: var(--cll-shadow); margin-bottom: 14px; }
.cll-panel-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.cll-step { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--cll-blue); color: #fff; font-size: 13px; font-weight: 900; }
.cll-panel-head h2 { margin: 0 0 2px; font-size: 16px; font-weight: 900; }
.cll-panel-head p { margin: 0; font-size: 12px; color: var(--cll-muted); }

.cll-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.cll-opt { display: flex; gap: 8px; align-items: center; padding: 9px 12px; border: 1.5px solid var(--cll-line-strong); border-radius: 8px; background: var(--cll-paper-deep); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color 0.15s ease; }
.cll-opt:hover { border-color: var(--cll-blue); }
.cll-opt input[type="radio"] { accent-color: var(--cll-blue); }
.cll-option-row { display: flex; gap: 10px; }
.cll-opt-sm { display: flex; gap: 6px; align-items: center; padding: 8px 14px; border: 1.5px solid var(--cll-line-strong); border-radius: 8px; background: var(--cll-paper-deep); font-size: 12px; font-weight: 700; cursor: pointer; }
.cll-opt-sm input[type="radio"] { accent-color: var(--cll-blue); }

.cll-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.cll-field { display: grid; gap: 5px; }
.cll-label { font-size: 12px; font-weight: 800; color: var(--cll-muted); }
.cll-input-wrap, .cll-select-wrap { position: relative; }
.cll-input { width: 100%; padding: 10px 12px; border: 1.5px solid var(--cll-line-strong); border-radius: 8px; background: var(--cll-paper-deep); color: var(--cll-text); font-size: 14px; font-weight: 600; outline: none; }
.cll-input:focus { border-color: var(--cll-blue); box-shadow: 0 0 0 3px var(--cll-blue-soft); }
select.cll-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='%236a7480' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.cll-input-wrap .cll-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: var(--cll-muted); pointer-events: none; }

/* Result col */
.cll-result-col { position: sticky; top: 20px; align-self: start; }
.cll-result-hero { padding: 20px; border: 1px solid var(--cll-line); border-radius: 16px; background: linear-gradient(135deg, var(--cll-paper), var(--cll-paper-deep)); border-top: 5px solid var(--cll-orange); box-shadow: var(--cll-shadow); text-align: center; margin-bottom: 12px; }
.cll-rh-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--cll-muted); }
.cll-rh-num { font-size: 40px; font-weight: 900; color: var(--cll-orange-deep); font-variant-numeric: tabular-nums; margin: 8px 0 4px; }
.cll-rh-sub { font-size: 12px; color: var(--cll-muted); }
.cll-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.cll-kpi { padding: 10px; border: 1px solid var(--cll-line); border-radius: 10px; background: var(--cll-paper); text-align: center; }
.cll-kpi span { display: block; font-size: 10px; font-weight: 800; color: var(--cll-muted); letter-spacing: 0.06em; }
.cll-kpi b { display: block; font-size: 17px; font-weight: 900; color: var(--cll-blue-deep); margin-top: 3px; }
.cll-verdict { padding: 14px 16px; border-radius: 12px; background: var(--cll-orange-soft); border-left: 4px solid var(--cll-orange-deep); font-size: 13px; line-height: 1.8; color: var(--cll-text); margin-bottom: 12px; }
.cll-mini-card { padding: 14px; border: 1px solid var(--cll-line); border-radius: 12px; background: var(--cll-paper); }
.cll-mini-card h3 { margin: 0 0 8px; font-size: 13px; font-weight: 900; color: var(--cll-blue-deep); }
.cll-mini-card ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--cll-muted); line-height: 1.85; }

/* Procedure */
.cll-procedure { margin-bottom: 26px; padding: 22px 24px; border: 1px solid var(--cll-line); border-radius: 18px; background: var(--cll-paper); box-shadow: var(--cll-shadow); }
.cll-proc-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 14px; }
.cll-proc-item { padding: 16px; border-radius: 12px; background: var(--cll-paper-deep); border: 1px solid var(--cll-line); position: relative; }
.cll-proc-no { display: inline-block; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; background: var(--cll-blue); color: #fff; font-size: 12px; font-weight: 900; margin-bottom: 8px; }
.cll-proc-item h3 { margin: 0 0 4px; font-size: 14px; font-weight: 900; color: var(--cll-blue-deep); }
.cll-proc-item p { margin: 0; font-size: 12px; color: var(--cll-muted); line-height: 1.7; }

.cll-section-head { margin-bottom: 12px; }
.cll-section-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: var(--cll-blue-deep); }
.cll-section-head h2 { margin: 4px 0 4px; font-size: 20px; font-weight: 900; }

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

@media (max-width: 1080px) {
    .cll-hero { grid-template-columns: minmax(0,1fr); }
    .cll-calc { grid-template-columns: minmax(0,1fr); }
    .cll-result-col { position: static; }
    .cll-proc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}