/*!
 * 21 · 抖音标题字数检查 —— 独立设计：创作者后台 / 手机首屏
 * 炭黑 + 品红青色渐变，手机折叠预览、环形统计与风险词标签。
 */
.vx.vx-21 {
    --vx-accent: #d2386c;
    --vx-accent-2: #ef5c8a;
    --vx-accent-soft: #fbe6ee;
    --vx-accent-ink: #ffffff;
    --vx-bg: #f2f3f6;
    --vx-surface: #ffffff;
    --vx-surface-2: #f7f8fa;
    --vx-surface-3: #ebeef3;
    --vx-line: #e0e4ea;
    --vx-line-2: #eef0f4;
    --vx-ink: #1f2430;
    --vx-ink-2: #525b6a;
}
:root[data-theme="dark"] .vx.vx-21 {
    --vx-accent: #f38bab;
    --vx-accent-2: #f7a8c2;
    --vx-accent-soft: #3a1e2a;
    --vx-accent-ink: #2a0d18;
    --vx-bg: #0d1015;
    --vx-surface: #161b22;
    --vx-surface-2: #1c222b;
    --vx-surface-3: #232b36;
    --vx-line: #2c3542;
    --vx-line-2: #242c37;
    --vx-ink: #edf1f7;
    --vx-ink-2: #aeb9c8;
}

.vx-21 .dy-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 400px); gap: 32px; }
.vx-21 .vx-h1 em { background: linear-gradient(90deg, #d2386c, #2ba7b8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vx-21 .vx-eyebrow { color: #2ba7b8; }
.vx-21 .vx-chip { border-radius: 999px; }
.vx-21 .vx-feat > i { border-radius: 6px; }

/* 手机首屏 */
.vx-21 .dy-phone { position: relative; margin: 0 auto 16px; width: min(320px, 100%); padding: 14px 12px 10px; border: 7px solid #20242d; border-radius: 28px; background: #11141a; color: #f1f3f7; box-shadow: var(--vx-shadow-lg); }
.vx-21 .dy-phone-notch { position: absolute; top: 3px; left: 50%; transform: translateX(-50%); width: 76px; height: 9px; border-radius: 99px; background: #20242d; }
.vx-21 .dy-phone-h { display: flex; justify-content: space-between; gap: 8px; padding: 8px 4px 10px; font-size: 11.5px; font-weight: 750; color: #c8cfda; }
.vx-21 .dy-phone-h > span { font-weight: 600; color: #8b95a5; }
.vx-21 .dy-phone-body { padding: 12px; border-radius: 12px; background: #1b2028; }
.vx-21 .dy-preview { min-height: 92px; font-size: 13.2px; line-height: 1.85; word-break: break-all; white-space: pre-wrap; }
.vx-21 .dy-preview > span { color: #f38bab; }
.vx-21 .dy-preview > button { appearance: none; border: 0; background: transparent; color: #8b95a5; font: inherit; font-size: 12px; cursor: pointer; padding: 0; }
.vx-21 .dy-phone-actions { display: flex; gap: 16px; padding-top: 12px; color: #c8cfda; font-size: 15px; }
.vx-21 .dy-phone-actions > i { font-style: normal; }

/* 检测台 */
.vx-21 .dy-console { border: 1px solid var(--vx-line); border-radius: 14px; background: var(--vx-surface); box-shadow: var(--vx-shadow-lg); }
.vx-21 .dy-console-h { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--vx-line-2); background: linear-gradient(90deg, rgba(210, 56, 108, .1), rgba(43, 167, 184, .1)); border-radius: 14px 14px 0 0; }
.vx-21 .dy-console-h > b { font-size: 14px; }
.vx-21 .dy-console-h > span { font: 800 10.5px/1 var(--vx-font-num); letter-spacing: .16em; color: #2ba7b8; }
.vx-21 .dy-console-b { padding: 15px; }

/* 环形统计 */
.vx-21 .dy-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; }
.vx-21 .dy-stat { display: grid; grid-template-columns: 62px 1fr; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--vx-line); border-radius: 12px; background: var(--vx-surface); }
.vx-21 .dy-ring { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; position: relative; background: conic-gradient(#d2386c var(--p), var(--vx-surface-3) 0); }
.vx-21 .dy-ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--vx-surface); }
.vx-21 .dy-ring > b { position: relative; z-index: 1; font: 800 15px var(--vx-font-num); }
.vx-21 .dy-stat > div > span { display: block; font-size: 11.5px; color: var(--vx-faint); }
.vx-21 .dy-stat > div > b { display: block; font-size: 17px; }

/* 标尺与自查 */
.vx-21 .dy-ruler { position: relative; height: 42px; margin: 6px 0 14px; border-bottom: 2px solid var(--vx-line); }
.vx-21 .dy-ruler > .dy-track { position: absolute; left: 0; right: 0; bottom: -2px; height: 8px; border-radius: 99px; background: var(--vx-surface-3); }
.vx-21 .dy-ruler > .dy-fill { position: absolute; left: 0; bottom: -2px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #2ba7b8, #d2386c); }
.vx-21 .dy-mark { position: absolute; bottom: 0; transform: translateX(-50%); text-align: center; }
.vx-21 .dy-mark > i { display: block; width: 1px; height: 14px; margin: 0 auto; background: var(--vx-faint); }
.vx-21 .dy-mark > b { font: 800 10.5px var(--vx-font-num); color: var(--vx-ink-2); }
.vx-21 .dy-checks { display: grid; gap: 7px; }
.vx-21 .dy-check { display: grid; grid-template-columns: 18px 1fr; gap: 9px; padding: 8px 10px; border: 1px solid var(--vx-line-2); border-radius: 8px; background: var(--vx-surface-2); font-size: 13px; line-height: 1.75; }
.vx-21 .dy-check > i { font-style: normal; font-weight: 800; }
.vx-21 .dy-check.is-good > i { color: var(--vx-good); }
.vx-21 .dy-check.is-bad > i { color: var(--vx-bad); }
.vx-21 .dy-check.is-warn > i { color: var(--vx-warn); }
.vx-21 .dy-hits { display: flex; flex-wrap: wrap; gap: 7px; }
.vx-21 .dy-hit { padding: 5px 10px; border-radius: 999px; background: var(--vx-bad-soft); color: var(--vx-bad); font-size: 12.5px; font-weight: 700; }
.vx-21 .dy-hit > small { display: block; font-weight: 500; }
.vx-21 .dy-topics { display: grid; gap: 6px; }
.vx-21 .dy-topics > div { padding: 7px 10px; border-radius: 8px; background: var(--vx-surface-2); font-size: 12.8px; font-family: var(--vx-font-num); }
.vx-21 .vx-ai { border-color: #2ba7b8; background: rgba(43, 167, 184, .09); }

@media (max-width: 900px) {
    .vx-21 .dy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .vx-21 .dy-stats { grid-template-columns: 1fr; }
}