.kvsp-page{
    width:100%;max-width:900px;margin:0 auto;padding:34px 24px 56px;
    --kvsp-ok-line:#bfe8d6;--kvsp-ok-bg:var(--kv-ok-soft);--kvsp-ok-ink:#0b7a51;
    --kvsp-warn-line:#f6dcb2;--kvsp-warn-bg:#fff6e8;--kvsp-warn-ink:#8a5a10;
    --kvsp-bad-line:#f6c9c6;--kvsp-bad-bg:#fdf1f0;--kvsp-bad-ink:#a12820;
    --kvsp-ok-dot:var(--kv-ok);--kvsp-warn-dot:var(--kv-warn);--kvsp-bad-dot:var(--kv-bad);
    --kvsp-ok-glow:rgba(25,161,92,.14);--kvsp-warn-glow:rgba(245,178,62,.18);--kvsp-bad-glow:rgba(224,65,58,.14);
}
html[data-theme="dark"] .kvsp-page{
    --kvsp-ok-line:rgba(63,203,146,.34);--kvsp-ok-bg:rgba(63,203,146,.11);--kvsp-ok-ink:#5FE0AC;
    --kvsp-warn-line:rgba(245,178,62,.34);--kvsp-warn-bg:rgba(245,178,62,.11);--kvsp-warn-ink:#FFC978;
    --kvsp-bad-line:rgba(255,123,114,.34);--kvsp-bad-bg:rgba(255,123,114,.11);--kvsp-bad-ink:#FFA79D;
    --kvsp-ok-glow:rgba(63,203,146,.18);--kvsp-warn-glow:rgba(245,178,62,.2);--kvsp-bad-glow:rgba(255,123,114,.18);
}

.kvsp-hero{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    padding:22px 24px;border-radius:var(--kv-r-lg);
    border:1px solid var(--kv-line);background:var(--kv-soft-2);
}
.kvsp-hero.is-ok{border-color:var(--kvsp-ok-line);background:var(--kvsp-ok-bg)}
.kvsp-hero.is-warn{border-color:var(--kvsp-warn-line);background:var(--kvsp-warn-bg)}
.kvsp-hero.is-bad{border-color:var(--kvsp-bad-line);background:var(--kvsp-bad-bg)}
.kvsp-hero-ic{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:52px;height:52px;border-radius:16px;background:var(--kv-bg);font-size:22px;
}
.kvsp-hero.is-ok .kvsp-hero-ic{color:var(--kvsp-ok-ink)}
.kvsp-hero.is-warn .kvsp-hero-ic{color:var(--kvsp-warn-ink)}
.kvsp-hero.is-bad .kvsp-hero-ic{color:var(--kvsp-bad-ink)}
.kvsp-hero-b{flex:1;min-width:200px}
.kvsp-hero-b h1{font-size:24px;font-weight:780;letter-spacing:-.03em;line-height:1.2}
.kvsp-hero-b p{margin-top:5px;font-size:13.6px;line-height:1.55;color:var(--kv-body)}
.kvsp-hero-t{flex:none;font-size:12.2px;color:var(--kv-muted)}

.kvsp-note{
    display:flex;align-items:flex-start;gap:11px;margin-top:16px;padding:13px 15px;
    border:1px solid var(--kvsp-warn-line);border-radius:14px;background:var(--kvsp-warn-bg);
    font-size:13.2px;line-height:1.55;color:var(--kvsp-warn-ink);
}
.kvsp-note i{flex:none;margin-top:2px;font-size:13px}

.kvsp-box{
    margin-top:18px;padding:22px 24px;
    border:1px solid var(--kv-line);border-radius:var(--kv-r-lg);background:var(--kv-bg);
}
.kvsp-box h2{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:16px;font-weight:700;letter-spacing:-.02em}
.kvsp-box h2 i{font-size:14px;color:var(--kv-muted)}

.kvsp-parts{display:flex;flex-direction:column;gap:10px}
.kvsp-part{
    display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:15px;
    border:1px solid var(--kv-line);background:var(--kv-soft-2);
}
.kvsp-part-ic{
    flex:none;display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;border-radius:12px;background:var(--kv-bg);
    border:1px solid var(--kv-line);font-size:14px;color:var(--kv-muted);
}
.kvsp-part-b{flex:1;min-width:0}
.kvsp-part-b b{display:block;font-size:14px;font-weight:650;letter-spacing:-.01em}
.kvsp-part-b span{display:block;margin-top:3px;font-size:12.4px;line-height:1.45;color:var(--kv-muted)}
.kvsp-part-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--kvsp-ok-dot);box-shadow:0 0 0 4px var(--kvsp-ok-glow)}
.kvsp-part.is-warn{border-color:var(--kvsp-warn-line);background:var(--kvsp-warn-bg)}
.kvsp-part.is-warn .kvsp-part-ic{border-color:var(--kvsp-warn-line);color:var(--kvsp-warn-ink)}
.kvsp-part.is-warn .kvsp-part-dot{background:var(--kvsp-warn-dot);box-shadow:0 0 0 4px var(--kvsp-warn-glow)}
.kvsp-part.is-bad{border-color:var(--kvsp-bad-line);background:var(--kvsp-bad-bg)}
.kvsp-part.is-bad .kvsp-part-ic{border-color:var(--kvsp-bad-line);color:var(--kvsp-bad-ink)}
.kvsp-part.is-bad .kvsp-part-dot{background:var(--kvsp-bad-dot);box-shadow:0 0 0 4px var(--kvsp-bad-glow)}
.kvsp-part.is-off .kvsp-part-dot{background:var(--kv-muted);box-shadow:0 0 0 4px var(--kv-line-2)}

.kvsp-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px}
.kvsp-num{padding:14px 16px;border-radius:15px;border:1px solid var(--kv-line);background:var(--kv-soft-2)}
.kvsp-num span{display:block;font-size:12px;color:var(--kv-muted)}
.kvsp-num b{display:block;margin-top:5px;font-size:19px;font-weight:750;letter-spacing:-.02em}

.kvsp-bars{display:flex;gap:2px;align-items:stretch;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.kvsp-bar{flex:1 0 5px;min-width:5px;height:38px;border-radius:3px;display:block}
.kvsp-bar.is-ok{background:#3FCB92}
.kvsp-bar.is-warn{background:#F5B23E}
.kvsp-bar.is-bad{background:#E0413A}
.kvsp-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.8px;color:var(--kv-muted)}
.kvsp-legend span{display:inline-flex;align-items:center;gap:6px}
.kvsp-legend .kvsp-bar{flex:none;width:10px;min-width:10px;height:10px;border-radius:3px}
.kvsp-legend-t{margin-left:auto}

.kvsp-inc{padding:15px 16px;border-radius:15px;border:1px solid var(--kv-line);background:var(--kv-soft-2);margin-bottom:10px}
.kvsp-inc:last-child{margin-bottom:0}
.kvsp-inc.is-live{border-color:var(--kvsp-warn-line);background:var(--kvsp-warn-bg)}
.kvsp-inc-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kvsp-inc-h b{flex:1;min-width:180px;font-size:14.4px;font-weight:680;letter-spacing:-.01em}
.kvsp-inc-m{margin-top:5px;font-size:12.2px;color:var(--kv-muted)}
.kvsp-inc-b{margin-top:8px;font-size:13.2px;line-height:1.6;color:var(--kv-body)}

.kvsp-empty{padding:26px 20px;text-align:center;font-size:14px;color:var(--kv-muted)}
.kvsp-empty i{display:block;font-size:26px;margin-bottom:10px;color:var(--kv-ok)}

.kvsp-text{margin-bottom:10px;font-size:13.4px;line-height:1.65;color:var(--kv-body)}
.kvsp-text:last-child{margin-bottom:0}
.kvsp-text a{color:var(--kv-accent-2);font-weight:650}
.kvsp-text a:hover{text-decoration:underline}

@media (max-width:640px){
    .kvsp-page{padding:22px 16px 36px}
    .kvsp-hero{padding:16px 16px;gap:12px}
    .kvsp-hero-ic{width:44px;height:44px;border-radius:14px;font-size:18px}
    .kvsp-hero-b h1{font-size:20px}
    .kvsp-hero-t{flex:1 1 100%}
    .kvsp-box{padding:16px 16px;margin-top:12px}
    .kvsp-bar{flex:1 0 3px;min-width:3px;height:32px}
    .kvsp-legend-t{margin-left:0;flex:1 1 100%}
}