:root{--vta-va-primary:#6366F1;--vta-va-secondary:#8B5CF6;--vta-va-success:#16A34A;--vta-va-warning:#D97706;--vta-va-danger:#DC2626;--vta-va-text:#172033;--vta-va-muted:#64748B;--vta-va-bg:#F8FAFC;--vta-va-surface:#fff;--vta-va-border:#E2E8F0;--vta-va-radius:18px;--vta-va-shadow:0 14px 40px rgba(15,23,42,.08)}
.vta-va-tool{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vta-va-text);background:var(--vta-va-bg);padding:28px 16px;border-radius:24px}
.vta-va-tool *{box-sizing:border-box}.vta-va-shell{max-width:1050px;margin:0 auto}.vta-va-header{text-align:center;margin-bottom:20px}.vta-va-kicker{display:inline-flex;padding:6px 10px;border-radius:999px;background:#EEF2FF;color:#4338CA;font-size:13px;font-weight:700}.vta-va-header h2{margin:10px 0 8px;font-size:clamp(30px,4vw,44px);line-height:1.08}.vta-va-header p{max-width:760px;margin:0 auto;color:var(--vta-va-muted);font-size:17px;line-height:1.7}
.vta-va-status{display:flex;align-items:center;gap:9px;margin:18px auto 22px;padding:12px 14px;border:1px solid var(--vta-va-border);border-radius:14px;background:#fff;color:var(--vta-va-muted);font-size:14px}.vta-va-status-dot{width:10px;height:10px;border-radius:50%;background:#94A3B8;flex:none}.vta-va-status.is-live .vta-va-status-dot{background:var(--vta-va-success);box-shadow:0 0 0 5px rgba(22,163,74,.12)}.vta-va-status.is-error .vta-va-status-dot{background:var(--vta-va-danger)}
.vta-va-grid{display:grid;gap:18px}.vta-va-grid-main{grid-template-columns:1fr}.vta-va-card{background:var(--vta-va-surface);border:1px solid var(--vta-va-border);border-radius:var(--vta-va-radius);padding:20px;box-shadow:var(--vta-va-shadow)}.vta-va-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.vta-va-card h3,.vta-va-card-head h3{margin:0;font-size:18px}.vta-va-card-head>span:not(.vta-va-badge){font-size:13px;color:var(--vta-va-muted)}.vta-va-badge{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;background:#F1F5F9;color:#475569;font-size:12px;font-weight:800}
.vta-va-field{display:grid;gap:7px;margin-bottom:15px}.vta-va-field>span{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:700}.vta-va-field select,.vta-va-field input[type=range],.vta-va-btn{min-height:48px;font-size:16px}.vta-va-field select{width:100%;padding:0 14px;border:1px solid var(--vta-va-border);border-radius:12px;background:#fff;color:var(--vta-va-text)}.vta-va-field input[type=range]{width:100%;accent-color:var(--vta-va-primary)}.vta-va-button-row{display:flex;flex-wrap:wrap;gap:10px}.vta-va-btn{border:1px solid var(--vta-va-border);border-radius:12px;background:#fff;color:var(--vta-va-text);font-weight:800;padding:0 16px;cursor:pointer;transition:.18s ease}.vta-va-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.08)}.vta-va-btn:focus-visible,.vta-va-field select:focus-visible,.vta-va-field input:focus-visible{outline:3px solid rgba(99,102,241,.25);outline-offset:2px}.vta-va-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.vta-va-btn-primary{background:var(--vta-va-primary);border-color:var(--vta-va-primary);color:#fff}.vta-va-btn-danger{color:var(--vta-va-danger)}
.vta-va-primary-result{text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:390px}.vta-va-pitch{font-size:clamp(46px,8vw,72px);font-weight:900;letter-spacing:-.04em}.vta-va-pitch::after{content:" Hz";font-size:.3em;font-weight:800;color:var(--vta-va-muted);letter-spacing:0}.vta-va-note-line{display:flex;justify-content:center;align-items:baseline;gap:14px;margin:7px 0 18px}.vta-va-note-line strong{font-size:30px}.vta-va-note-line span{color:var(--vta-va-muted);font-weight:700}.vta-va-tuner{position:relative;height:16px;border-radius:999px;background:linear-gradient(90deg,#FEE2E2,#FEF3C7,#DCFCE7,#FEF3C7,#FEE2E2);overflow:hidden}.vta-va-tuner-center{position:absolute;left:50%;top:0;bottom:0;width:2px;background:#111827}.vta-va-tuner-needle{position:absolute;left:50%;top:1px;width:5px;height:14px;border-radius:4px;background:#111827;transform:translateX(-50%);transition:left .1s linear}.vta-va-result-explain{margin:18px 0 0;color:var(--vta-va-muted);line-height:1.55}
.vta-va-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.vta-va-metric{background:#fff;border:1px solid var(--vta-va-border);border-radius:15px;padding:16px;min-width:0}.vta-va-metric span{display:block;color:var(--vta-va-muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.vta-va-metric strong{display:block;margin-top:6px;font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vta-va-metric small{color:var(--vta-va-muted)}
.vta-va-grid-charts{grid-template-columns:1fr}.vta-va-grid-charts canvas{width:100%;height:180px;display:block;border-radius:12px;background:#F8FAFC}.vta-va-summary{margin-top:18px}.vta-va-summary p{color:#475569;line-height:1.7}.vta-va-grid-info{grid-template-columns:1fr;margin-top:18px}.vta-va-grid-info p{margin-bottom:0;color:var(--vta-va-muted);line-height:1.6}.vta-va-history-wrap{margin-top:18px}.vta-va-history{display:grid;gap:10px}.vta-va-history-item{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px 0;border-top:1px solid var(--vta-va-border)}.vta-va-history-item:first-child{border-top:0}.vta-va-history-item strong{display:block}.vta-va-history-item span,.vta-va-history-item time,.vta-va-empty{color:var(--vta-va-muted);font-size:13px}.vta-va-empty{margin:0}
@media(min-width:760px){.vta-va-grid-main{grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr)}.vta-va-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.vta-va-grid-charts{grid-template-columns:repeat(3,minmax(0,1fr))}.vta-va-grid-info{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.vta-va-tool{padding:22px 10px;border-radius:16px}.vta-va-card{padding:16px}.vta-va-metrics{grid-template-columns:1fr 1fr}.vta-va-button-row{flex-direction:column}.vta-va-btn{width:100%}}