/* ===== 细胞计数与传代 · 计数板 ===== */
.ccp {
    background: #f8fdfb;
    border: 1px solid #d6ece4;
    border-radius: 12px;
    padding: 24px 22px;
    margin-bottom: 26px;
    box-shadow: 0 10px 30px rgba(14, 96, 78, .07);
}

.ccp-stage {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 22px;
    align-items: stretch;
}

/* ---- 计数板 ---- */
.ccp-board {
    background: #fff;
    border: 1px solid #d6ece4;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 2px 8px rgba(14, 96, 78, .05);
}
.ccp-board-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10.5px; color: #7a9a91; letter-spacing: .06em;
    margin-bottom: 10px;
}
.ccp-board-head b { color: #0f766e; font-size: 11px; }
.ccp-cells {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
    background: #cfe6de; border: 3px solid #cfe6de; border-radius: 6px;
    overflow: hidden;
}
.ccp-cells label {
    position: relative; display: block;
    aspect-ratio: 1.32 / 1;
    background-color: #f7fdfb;
    background-image: radial-gradient(circle, rgba(16, 185, 129, .22) 1px, transparent 1.7px);
    background-size: 13px 13px;
    background-position: 6px 6px;
}
.ccp-cells label::after {
    content: ''; position: absolute; inset: 22%;
    border: 1px solid rgba(15, 118, 110, .22);
    pointer-events: none;
}
.ccp-cells input {
    position: absolute; inset: 0; width: 100%;
    border: none; background: transparent; outline: none; text-align: center;
    font: 700 21px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
    color: #0f766e; font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
.ccp-cells input:focus { background: rgba(20, 184, 166, .08); }
.ccp-cells input.is-bad { color: #b91c1c; background: rgba(254, 226, 226, .85); }
.ccp-cells label > i {
    position: absolute; left: 5px; top: 4px; font-style: normal;
    font-size: 9px; color: #94b3aa; letter-spacing: .04em;
}

/* ---- 读数 ---- */
.ccp-read {
    display: flex; flex-direction: column; gap: 14px;
    background: #fff; border: 1px solid #d6ece4; border-radius: 10px;
    padding: 16px 18px;
}
.ccp-read-top { display: flex; align-items: center; gap: 16px; }
.ccp-density { flex: 1 1 auto; min-width: 0; }
.ccp-density small { display: block; font-size: 10.5px; color: #7a9a91; letter-spacing: .06em; }
.ccp-density b {
    display: block; font: 700 30px/1.05 ui-monospace, Consolas, monospace;
    color: #0f766e; font-variant-numeric: tabular-nums; margin-top: 3px;
}
.ccp-density em { font-style: normal; font-size: 10.5px; color: #8aa79f; }

.ccp-ring {
    --v: 0;
    width: 82px; height: 82px; flex: 0 0 82px; border-radius: 50%;
    background: conic-gradient(#10b981 0 calc(var(--v) * 1%), #e8f4f0 calc(var(--v) * 1%) 100%);
    position: relative; display: grid; place-items: center;
}
.ccp-ring::before {
    content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #fff;
}
.ccp-ring span {
    position: relative; font: 700 15px/1 ui-monospace, monospace; color: #047857;
}
.ccp-ring i {
    position: absolute; bottom: 15px; font-style: normal; font-size: 8px; color: #94b3aa;
}

.ccp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ccp-metric {
    background: #f5fbf9; border: 1px solid #e2f0eb; border-radius: 7px;
    padding: 8px 11px;
}
.ccp-metric span { display: block; font-size: 9.5px; color: #8aa79f; }
.ccp-metric b { font: 700 14px/1.3 ui-monospace, monospace; color: #134e4a; }
.ccp-metric.is-bad { background: #fff5f5; border-color: #f7dada; }
.ccp-metric.is-bad b { color: #b91c1c; }

/* ---- 传代结果条 ---- */
.ccp-passage {
    margin-top: 18px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border: 1px solid #d6ece4; border-radius: 10px;
    overflow: hidden;
}
.ccp-passage > div {
    padding: 14px 16px;
    border-left: 1px dashed #e0efe9;
}
.ccp-passage > div:first-child { border-left: none; background: #f3fbf8; }
.ccp-passage span { display: block; font-size: 10px; color: #7a9a91; letter-spacing: .04em; }
.ccp-passage b {
    display: block; margin-top: 4px;
    font: 700 22px/1.15 ui-monospace, monospace; color: #0f766e;
    font-variant-numeric: tabular-nums;
}
.ccp-passage b em { font-style: normal; font-size: 11px; color: #8aa79f; font-family: inherit; }
.ccp-passage .ccp-passage-tip {
    grid-column: 1 / -1; border-left: none; border-top: 1px dashed #e0efe9;
    font-size: 11.5px; line-height: 1.65; color: #4c6b63; background: #fbfefd;
}
.ccp-passage .ccp-passage-tip.warn { color: #9a3412; background: #fffbf5; }
.ccp-passage .ccp-passage-tip.bad { color: #9f1239; background: #fff6f7; }

/* ---- 参数 ---- */
.ccp-params { margin-top: 20px; border-top: 1px solid #d6ece4; padding-top: 16px; }
.ccp-params h2 { font-size: 12px; letter-spacing: .08em; color: #4c6b63; margin: 0 0 12px; }
.ccp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ccp-grid label { display: flex; flex-direction: column; gap: 4px; }
.ccp-grid span { font-size: 11px; color: #7a9a91; }
.ccp-grid input {
    font: inherit; font-size: 12.5px; padding: 7px 9px;
    border: 1px solid #d6ece4; border-radius: 5px; background: #fff;
    color: #134e4a; font-variant-numeric: tabular-nums; min-width: 0;
}
.ccp-grid input:focus { outline: 2px solid rgba(16, 185, 129, .2); border-color: #10b981; }
.ccp-grid input.is-bad { border-color: #dc2626; background: #fef2f2; }

.ccp-note { margin: 16px 0 0; font-size: 11.5px; line-height: 1.8; color: #7a9a91; }
.ccp-note code { background: #eefaf5; padding: 1px 4px; color: #0f766e; }

@media (max-width: 900px) {
    .ccp-stage { grid-template-columns: 1fr; }
    .ccp-passage { grid-template-columns: 1fr 1fr; }
    .ccp-passage > div:nth-child(3) { border-left: none; }
}
@media (max-width: 560px) {
    .ccp { padding: 16px 13px; }
    .ccp-grid { grid-template-columns: 1fr 1fr; }
    .ccp-density b { font-size: 25px; }
    .ccp-passage b { font-size: 19px; }
}

/* ---- 深色 ---- */
[data-theme="dark"] .ccp { background: #0d1614; border-color: #22332e; box-shadow: none; }
[data-theme="dark"] .ccp-board, [data-theme="dark"] .ccp-read, [data-theme="dark"] .ccp-passage { background: #131d1a; border-color: #22332e; }
[data-theme="dark"] .ccp-cells { background: #22332e; border-color: #22332e; }
[data-theme="dark"] .ccp-cells label { background-color: #16211e; background-image: radial-gradient(circle, rgba(94, 234, 212, .18) 1px, transparent 1.7px); }
[data-theme="dark"] .ccp-cells label > i, [data-theme="dark"] .ccp-board-head { color: #7a9a91; }
[data-theme="dark"] .ccp-cells input { color: #5eead4; text-shadow: none; }
[data-theme="dark"] .ccp-density b { color: #5eead4; }
[data-theme="dark"] .ccp-density small, [data-theme="dark"] .ccp-density em { color: #7a9a91; }
[data-theme="dark"] .ccp-ring { background: conic-gradient(#34d399 0 calc(var(--v) * 1%), #1e2f2a calc(var(--v) * 1%) 100%); }
[data-theme="dark"] .ccp-ring::before { background: #131d1a; }
[data-theme="dark"] .ccp-ring span { color: #6ee7b7; }
[data-theme="dark"] .ccp-metric { background: #16211e; border-color: #22332e; }
[data-theme="dark"] .ccp-metric b { color: #b8dcd3; }
[data-theme="dark"] .ccp-passage > div { border-color: #22332e; }
[data-theme="dark"] .ccp-passage > div:first-child { background: #15211d; }
[data-theme="dark"] .ccp-passage b { color: #5eead4; }
[data-theme="dark"] .ccp-passage .ccp-passage-tip { color: #a8c4bd; background: #131d1a; }
[data-theme="dark"] .ccp-params { border-color: #22332e; }
[data-theme="dark"] .ccp-params h2 { color: #a8c4bd; }
[data-theme="dark"] .ccp-grid input { background: #131d1a; border-color: #22332e; color: #d6ece4; }
[data-theme="dark"] .ccp-note { color: #7a9a91; }
[data-theme="dark"] .ccp-note code { background: #1a2824; color: #5eead4; }