/* Child-Pugh：五行分项计分 + 分级结果卡，配色随 A/B/C 三级切换 */

.cpw-copy { min-width: 0; }
.cpw-hl { color: var(--dk-accent); }

.cpw-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cpw-jump a {
    padding: 6px 12px; font-size: 12.5px; color: var(--dk-ink-2); text-decoration: none;
    border: 1px solid var(--dk-line); border-radius: 99px; background: var(--dk-surface);
    transition: color .14s, border-color .14s, background .14s;
}
.cpw-jump a:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); background: var(--dk-accent-soft); }

#cpwCut, #cpwGrade, #cpwTrap, #cpwFaq { scroll-margin-top: 84px; }

.cpw-tool { position: sticky; top: 82px; align-self: start; }
.cpw-tool .dk-tool-head h2 { min-width: 0; }
.cpw-tool .dk-tool-head > span { flex: none; white-space: nowrap; font-family: var(--dk-mono); }

/* ---------- 五行分项 ---------- */
.cpw-rows { display: grid; }
.cpw-row { padding: 12px 0; border-top: 1px solid var(--dk-line); }
.cpw-row:first-child { border-top: 0; padding-top: 2px; }
.cpw-row:last-child { padding-bottom: 0; }

.cpw-row-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.cpw-t { font-size: 13px; font-weight: 600; color: var(--dk-ink-2); }

.cpw-pt {
    flex: none; font-family: var(--dk-mono); font-size: 11px; line-height: 1;
    padding: 3px 7px; border-radius: 5px;
    color: var(--dk-muted); border: 1px solid var(--dk-line); background: var(--dk-surface-2);
    transition: color .14s, border-color .14s, background .14s;
}
.cpw-row.is-done .cpw-pt { color: var(--dk-accent); border-color: var(--dk-accent-line); background: var(--dk-accent-soft); }
.cpw-row.is-bad .cpw-pt { color: var(--dk-err); border-color: color-mix(in srgb, var(--dk-err) 32%, transparent); background: var(--dk-err-soft); }

.cpw-input {
    display: flex; align-items: center; gap: 6px;
    height: 38px; padding: 0 10px;
    border: 1px solid var(--dk-line-strong); border-radius: 9px;
    background: var(--dk-surface);
    transition: border-color .15s, box-shadow .15s;
}
.cpw-input:focus-within { border-color: var(--dk-accent); box-shadow: 0 0 0 3px var(--dk-accent-soft); }
.cpw-input input {
    flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none;
    background: transparent; color: var(--dk-ink);
    font-family: var(--dk-mono); font-size: 14px;
}
.cpw-input input::placeholder { font-family: var(--dk-font); font-size: 12.5px; color: var(--dk-muted); }
.cpw-u { flex: none; font-size: 11px; color: var(--dk-muted); white-space: nowrap; }
.cpw-row.is-bad .cpw-input { border-color: var(--dk-err); }
.cpw-row.is-bad .cpw-u { color: var(--dk-err); }

.cpw-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--dk-muted); }

/* ---------- 腹水 / 脑病按钮组 ---------- */
.cpw-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cpw-opt {
    padding: 6px 11px; border-radius: 99px; cursor: pointer;
    font-family: var(--dk-font); font-size: 12.5px; line-height: 1.4;
    color: var(--dk-ink-2); background: var(--dk-surface);
    border: 1px solid var(--dk-line-strong);
    transition: color .14s, border-color .14s, background .14s;
}
.cpw-opt:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); }
.cpw-opt:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 2px; }
.cpw-opt[aria-checked="true"] {
    color: var(--dk-accent); background: var(--dk-accent-soft);
    border-color: var(--dk-accent); font-weight: 600;
}

/* ---------- 结果 ---------- */
.cpw-result {
    --cpw-c: var(--dk-muted);
    --cpw-c-soft: var(--dk-surface-2);
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center;
    margin-top: 14px; padding: 14px 0 0;
    border-top: 1px solid var(--dk-line);
}
.cpw-result.is-a { --cpw-c: #16a34a; --cpw-c-soft: color-mix(in srgb, #16a34a 12%, transparent); }
.cpw-result.is-b { --cpw-c: #d97706; --cpw-c-soft: color-mix(in srgb, #d97706 12%, transparent); }
.cpw-result.is-c { --cpw-c: #dc2626; --cpw-c-soft: color-mix(in srgb, #dc2626 12%, transparent); }

.cpw-grade { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; }
.cpw-grade b {
    font-family: var(--cl-serif); font-size: 40px; line-height: 1;
    color: var(--cpw-c); letter-spacing: -.02em;
    transition: color .18s;
}
.cpw-grade span {
    font-size: 11px; line-height: 1.3; text-align: center;
    padding: 2px 8px; border-radius: 99px;
    color: var(--cpw-c); background: var(--cpw-c-soft);
    border: 1px solid color-mix(in srgb, var(--cpw-c) 26%, transparent);
    white-space: nowrap;
}
.cpw-vt { margin: 0 0 3px; font-size: 13.5px; font-weight: 700; color: var(--dk-ink); }
.cpw-vd { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--dk-ink-2); }

/* ---------- 操作 ---------- */
.cpw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.cpw-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cpw-preset {
    border: 1px dashed var(--dk-line-strong); background: transparent;
    color: var(--dk-muted); font-size: 11.5px; padding: 4px 9px; border-radius: 99px; cursor: pointer;
    transition: color .14s, border-color .14s;
}
.cpw-preset:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); }

/* ---------- 分级卡 ---------- */
.cpw-grade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cpw-gcard {
    --cpw-c: var(--dk-muted);
    padding: 16px 18px 18px;
    border: 1px solid var(--dk-line); border-left: 4px solid var(--cpw-c);
    border-radius: var(--dk-r-lg); background: var(--dk-surface);
}
.cpw-gcard.is-a { --cpw-c: #16a34a; }
.cpw-gcard.is-b { --cpw-c: #d97706; }
.cpw-gcard.is-c { --cpw-c: #dc2626; }
.cpw-gk {
    margin: 0 0 4px; font-family: var(--dk-mono); font-size: 11px;
    letter-spacing: .04em; color: var(--cpw-c);
}
.cpw-gcard h3 { margin: 0 0 6px; font-size: 18px; color: var(--dk-ink); }
.cpw-gcard p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--dk-ink-2); }
.cpw-gcard .cpw-gk + h3 { margin-top: 0; }

/* ---------- 相关工具 ---------- */
.cpw-rel { display: block; }
.cpw-rel h3 { font-size: 15.5px; margin-bottom: 6px; }
.cpw-rel p { margin: 0; font-size: 13px; color: var(--dk-muted); line-height: 1.65; }

/* ---------- 深色与窄屏 ---------- */
:root[data-theme="dark"] .cpw-result.is-a,
:root[data-theme="dark"] .cpw-gcard.is-a { --cpw-c: #4ade80; }
:root[data-theme="dark"] .cpw-result.is-b,
:root[data-theme="dark"] .cpw-gcard.is-b { --cpw-c: #fbbf24; }
:root[data-theme="dark"] .cpw-result.is-c,
:root[data-theme="dark"] .cpw-gcard.is-c { --cpw-c: #f87171; }
:root[data-theme="dark"] .cpw-jump a:hover,
:root[data-theme="dark"] .cpw-preset:hover { color: #d8b4fe; }

@media (max-width: 960px) {
    .cpw-tool { position: static; }
    .cpw-grade-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .cpw-grade b { font-size: 34px; }
    .cpw-presets { margin-left: 0; }
    .cpw-opts { gap: 5px; }
    .cpw-opt { font-size: 12px; padding: 6px 9px; }
}

/* 减少动效 */
@media (prefers-reduced-motion: reduce) {
    .cpw-grade b, .cpw-pt, .cpw-opt, .cpw-jump a, .cpw-preset { transition: none; }
}