/* 糖尿病风险自评：九行表单（八项计分 + 性别参数），结果卡与五档风险条 */

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

.db-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.db-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;
}
.db-jump a:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); background: var(--dk-accent-soft); }

#dbCut, #dbGrade, #dbTrap, #dbFaq { scroll-margin-top: 84px; }

/* 表单行数多、卡片偏高，不做 sticky，避免小屏下底部按钮被固定在视口外 */
.db-tool { align-self: start; }
.db-tool .dk-tool-head h2 { min-width: 0; }
.db-tool .dk-tool-head > span { flex: none; white-space: nowrap; font-family: var(--dk-mono); }

/* ---------- 表单行 ---------- */
.db-rows { display: grid; }
.db-row { padding: 11px 0; border-top: 1px solid var(--dk-line); }
.db-row:first-child { border-top: 0; padding-top: 2px; }
.db-row:last-child { padding-bottom: 0; }

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

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

.db-input, .db-pair { min-width: 0; }
.db-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.db-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;
}
.db-input:focus-within { border-color: var(--dk-accent); box-shadow: 0 0 0 3px var(--dk-accent-soft); }
.db-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;
}
.db-input input::placeholder { font-family: var(--dk-font); font-size: 12.5px; color: var(--dk-muted); }
.db-u { flex: none; font-size: 11px; color: var(--dk-muted); white-space: nowrap; }
.db-row.is-bad .db-input { border-color: var(--dk-err); }
.db-row.is-bad .db-u { color: var(--dk-err); }

.db-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--dk-muted); }
.db-hint b { font-family: var(--dk-mono); font-weight: 600; color: var(--dk-ink-2); }

/* ---------- 按钮组 ---------- */
.db-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.db-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;
}
.db-opt:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); }
.db-opt:focus-visible { outline: 2px solid var(--dk-accent); outline-offset: 2px; }
.db-opt[aria-checked="true"] {
    color: var(--dk-accent); background: var(--dk-accent-soft);
    border-color: var(--dk-accent); font-weight: 600;
}

/* ---------- 结果 ---------- */
.db-result {
    --db-c: var(--dk-muted);
    --db-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);
}
.db-result.is-low { --db-c: #16a34a; --db-c-soft: color-mix(in srgb, #16a34a 12%, transparent); }
.db-result.is-mild { --db-c: #65a30d; --db-c-soft: color-mix(in srgb, #65a30d 12%, transparent); }
.db-result.is-mid { --db-c: #d97706; --db-c-soft: color-mix(in srgb, #d97706 12%, transparent); }
.db-result.is-high { --db-c: #ea580c; --db-c-soft: color-mix(in srgb, #ea580c 12%, transparent); }
.db-result.is-top { --db-c: #dc2626; --db-c-soft: color-mix(in srgb, #dc2626 12%, transparent); }

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

/* ---------- 操作 ---------- */
.db-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.db-presets { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.db-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;
}
.db-preset:hover { color: var(--dk-accent); border-color: var(--dk-accent-line); }

/* ---------- 五档风险条 ---------- */
.db-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 14px; }
.db-band {
    --db-c: var(--dk-muted);
    padding: 15px 17px 17px;
    border: 1px solid var(--dk-line); border-left: 4px solid var(--db-c);
    border-radius: var(--dk-r-lg); background: var(--dk-surface);
}
.db-band.is-low { --db-c: #16a34a; }
.db-band.is-mild { --db-c: #65a30d; }
.db-band.is-mid { --db-c: #d97706; }
.db-band.is-high { --db-c: #ea580c; }
.db-band.is-top { --db-c: #dc2626; }
.db-bk { margin: 0 0 4px; font-family: var(--dk-mono); font-size: 11px; letter-spacing: .04em; color: var(--db-c); }
.db-band h3 { margin: 0 0 6px; font-size: 17px; color: var(--dk-ink); }
.db-band p:not(.db-bk) { margin: 0; font-size: 13px; line-height: 1.7; color: var(--dk-ink-2); }

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

/* ---------- 深色与窄屏 ---------- */
:root[data-theme="dark"] .db-result.is-low,
:root[data-theme="dark"] .db-band.is-low { --db-c: #4ade80; }
:root[data-theme="dark"] .db-result.is-mild,
:root[data-theme="dark"] .db-band.is-mild { --db-c: #a3e635; }
:root[data-theme="dark"] .db-result.is-mid,
:root[data-theme="dark"] .db-band.is-mid { --db-c: #fbbf24; }
:root[data-theme="dark"] .db-result.is-high,
:root[data-theme="dark"] .db-band.is-high { --db-c: #fb923c; }
:root[data-theme="dark"] .db-result.is-top,
:root[data-theme="dark"] .db-band.is-top { --db-c: #f87171; }
:root[data-theme="dark"] .db-jump a:hover,
:root[data-theme="dark"] .db-preset:hover { color: #fcd34d; }

@media (max-width: 560px) {
    .db-total b { font-size: 34px; }
    .db-presets { margin-left: 0; }
    .db-opts { gap: 5px; }
    .db-opt { font-size: 12px; padding: 6px 9px; }
    .db-pair { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .db-total b, .db-pt, .db-opt, .db-jump a, .db-preset, .db-input { transition: none; }
}