/*!
 * 20 · 短信字数计算 —— 独立设计：手机气泡 / 计费单
 * 靛紫 + 浅紫，手机预览气泡、临界刻度尺与分段票据卡。
 */
.vx.vx-20 {
    --vx-accent: #5b4bb7;
    --vx-accent-2: #7565cf;
    --vx-accent-soft: #eae7fa;
    --vx-accent-ink: #ffffff;
    --vx-bg: #f3f2fa;
    --vx-surface: #ffffff;
    --vx-surface-2: #f8f7fd;
    --vx-surface-3: #eceaf8;
    --vx-line: #e0ddf0;
    --vx-line-2: #eeeaf8;
    --vx-ink: #262340;
    --vx-ink-2: #555071;
}
:root[data-theme="dark"] .vx.vx-20 {
    --vx-accent: #b3a6f0;
    --vx-accent-2: #c8bdf6;
    --vx-accent-soft: #2a2445;
    --vx-accent-ink: #17122c;
    --vx-bg: #101019;
    --vx-surface: #191827;
    --vx-surface-2: #201e30;
    --vx-surface-3: #28253c;
    --vx-line: #322f4a;
    --vx-line-2: #27243a;
    --vx-ink: #efedfb;
    --vx-ink-2: #b7b1d0;
}

.vx-20 .sms-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 32px; }
.vx-20 .vx-h1 em { color: var(--vx-accent); }
.vx-20 .vx-eyebrow { color: var(--vx-accent); }
.vx-20 .vx-chip { border-radius: 999px; }
.vx-20 .vx-feat > i { border-radius: 50%; }

/* 手机预览 */
.vx-20 .sms-phone { max-width: 380px; margin-top: 20px; padding: 12px; border: 8px solid var(--vx-surface); border-radius: 24px; background: var(--vx-surface-2); box-shadow: var(--vx-shadow-lg); }
.vx-20 .sms-phone-h { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px 9px; font-size: 12px; font-weight: 750; color: var(--vx-ink-2); }
.vx-20 .sms-phone-h > span { font-weight: 600; color: var(--vx-faint); }
.vx-20 .sms-bubble { max-width: 88%; padding: 11px 13px; border-radius: 14px 14px 14px 3px; background: var(--vx-accent); color: #fff; font-size: 13.5px; line-height: 1.85; word-break: break-all; white-space: pre-wrap; min-height: 52px; }
.vx-20 .sms-phone-f { padding-top: 9px; text-align: center; font-size: 10.5px; color: var(--vx-faint); }

/* 计费台 */
.vx-20 .sms-console { border: 1px solid var(--vx-line); border-top: 4px solid var(--vx-accent); border-radius: 14px; background: var(--vx-surface); box-shadow: var(--vx-shadow-lg); }
.vx-20 .sms-console-h { display: flex; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--vx-line-2); background: var(--vx-surface-2); border-radius: 10px 10px 0 0; }
.vx-20 .sms-console-h > b { font-size: 14px; }
.vx-20 .sms-console-h > span { font: 800 10.5px/1 var(--vx-font-num); letter-spacing: .16em; color: var(--vx-accent); }
.vx-20 .sms-console-b { padding: 16px; }
.vx-20 .sms-console .vx-check { display: flex; margin: 9px 0; }

/* 结果 */
.vx-20 .vx-kpi { border-top: 3px solid var(--vx-accent); }
.vx-20 .vx-kpi.is-hot { background: var(--vx-accent-soft); border-color: var(--vx-accent); }
.vx-20 .sms-ruler { position: relative; height: 46px; margin: 8px 0 14px; border-bottom: 2px solid var(--vx-line); }
.vx-20 .sms-ruler > .sms-track { position: absolute; left: 0; right: 0; bottom: -2px; height: 8px; border-radius: 99px; background: var(--vx-surface-3); }
.vx-20 .sms-ruler > .sms-fill { position: absolute; left: 0; bottom: -2px; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--vx-accent), #c07ad6); }
.vx-20 .sms-tick { position: absolute; bottom: 0; transform: translateX(-50%); text-align: center; }
.vx-20 .sms-tick > i { display: block; width: 1px; height: 15px; margin: 0 auto; background: var(--vx-faint); }
.vx-20 .sms-tick > b { display: block; font: 800 11px var(--vx-font-num); color: var(--vx-ink-2); }
.vx-20 .sms-tick.is-key > b { color: var(--vx-accent); }
.vx-20 .sms-thresholds { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.vx-20 .sms-thresholds > div { padding: 8px 10px; border: 1px solid var(--vx-line-2); border-radius: 8px; background: var(--vx-surface-2); font-size: 12.5px; }
.vx-20 .sms-thresholds > div > b { font-family: var(--vx-font-num); color: var(--vx-accent); }
.vx-20 .sms-parts { display: grid; gap: 10px; }
.vx-20 .sms-part { display: grid; grid-template-columns: 58px 1fr; gap: 12px; padding: 11px 13px; border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-surface-2); }
.vx-20 .sms-part > b { display: grid; place-items: center; height: 44px; border-radius: 8px; background: var(--vx-accent); color: #fff; font: 800 14px var(--vx-font-num); }
.vx-20 .sms-part > div > b { display: block; font-size: 12.5px; }
.vx-20 .sms-part > div > p { margin: 4px 0 0; font-size: 13px; line-height: 1.8; word-break: break-all; }
.vx-20 .sms-detail > div { padding: 9px 0; border-bottom: 1px dashed var(--vx-line-2); font-size: 13px; line-height: 1.8; }
.vx-20 .sms-detail > div:last-child { border-bottom: 0; }