/* Vision Demo styles — scoped .vision-wrap กันชนกับ tokens.css */
@keyframes vdpulse{50%{opacity:.6}}
.vision-wrap{--card:#ffffff;--card2:#f1eff7;--line:#ececf2;--brand2:#5b32d6;--pink:#f0409a;
--dim:#41395c;--mute:#6b6580;--ok:#2e9e6f;--hot:#d6455c;--panel:#fbfbfd;
--grad:linear-gradient(96deg,#6d3bf0 0%,#b02fd0 55%,#f0409a 100%);
max-width:1120px;margin:0 auto}
.vision-wrap .vbanner{display:inline-flex;align-items:center;gap:6px;background:#efeafd;border:1px solid #d9cffa;color:#5b32d6;border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.3px;margin-bottom:12px}
.vision-wrap .num,.vision-wrap .vd-stat .big{font-variant-numeric:tabular-nums}
.vision-wrap .scr-hd{margin-bottom:20px}
.vision-wrap .scr-hd .kick{font-size:11px;letter-spacing:.15em;color:var(--brand);font-weight:700;text-transform:uppercase;margin-bottom:5px}
.vision-wrap .scr-hd h2{font-size:25px;letter-spacing:-.01em;font-weight:700;margin:0}
.vision-wrap .scr-hd p{color:var(--mute);font-size:13.5px;margin-top:4px}
.vision-wrap .vd-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;box-shadow:0 1px 2px rgba(20,16,38,.05)}
.vision-wrap .vd-card.hi{border-color:#d9cffa;box-shadow:0 8px 24px rgba(109,59,240,.12)}
.vision-wrap .vd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.vision-wrap .vd-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.vision-wrap .vd-stat .big{font-size:28px;font-weight:700;letter-spacing:-.02em}
.vision-wrap .vd-stat .lbl{font-size:12px;color:var(--mute);margin-top:3px}
.vision-wrap .vd-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border-radius:999px;padding:4px 11px;border:1px solid var(--line);color:var(--mute);background:var(--card)}
.vision-wrap .vd-chip.ok{color:var(--ok);border-color:rgba(46,158,111,.35);background:#e9f7f1}
.vision-wrap .vd-chip.warn{color:#c2820a;border-color:rgba(194,130,10,.35);background:#fbf3e2}
.vision-wrap .vd-chip.hot{color:var(--hot);border-color:rgba(214,69,92,.3);background:#fdedf0}
.vision-wrap .vd-chip.brand{color:var(--brand2);border-color:#d9cffa;background:#efeafd}
.vision-wrap .vd-tbl{width:100%;border-collapse:collapse;font-size:13px}
.vision-wrap .vd-tbl th{text-align:left;font-size:10.5px;letter-spacing:.09em;color:var(--mute);font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line)}
.vision-wrap .vd-tbl td{padding:10px;border-bottom:1px solid #f4f2f9}
.vision-wrap .vd-tbl tr:last-child td{border-bottom:none}
.vision-wrap .vd-bar{height:7px;border-radius:99px;background:rgba(109,59,240,.1);overflow:hidden}
.vision-wrap .vd-bar i{display:block;height:100%;border-radius:99px;background:var(--grad)}
.vision-wrap .vd-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(109,59,240,.35);background:rgba(109,59,240,.07);color:var(--brand2);font-family:inherit;font-size:12.5px;font-weight:600;border-radius:10px;padding:9px 16px;cursor:pointer;transition:.15s}
.vision-wrap .vd-btn:hover{background:rgba(109,59,240,.16)}
.vision-wrap .vd-btn.primary{background:var(--grad);color:#fff;border:none;box-shadow:0 6px 14px rgba(109,59,240,.25)}
.vision-wrap .up{color:var(--ok)} .vision-wrap .dn{color:var(--hot)}
.vision-2col{display:grid;grid-template-columns:1fr;gap:var(--sp-4);align-items:start}
@media (min-width:1024px){.vision-2col{grid-template-columns:1fr 1fr}}
@media(max-width:900px){
.vision-wrap .vd-grid2,.vision-wrap .vd-grid3{grid-template-columns:1fr}
.vision-wrap .vd-stat .big{font-size:22px}
}