/* Voice notes, agreement and Pro (dashboard). */
.vn-card,.vn-settings,.vn-pro-card{max-width:640px}
.vn-order{display:grid;gap:12px}
.vn-label{font-weight:700;font-size:13px;margin:6px 0 0}
.vn-length{display:flex;align-items:center;gap:14px}.vn-length input{flex:1;accent-color:#ff697c}.vn-length output{font:700 18px/1 system-ui;min-width:52px;text-align:end}
.vn-price{display:flex;align-items:baseline;gap:8px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:#111114}.vn-price b{font-size:26px}.vn-price small{margin-inline-start:auto;color:var(--muted)}
.vn-order textarea{width:100%;resize:vertical;border-radius:12px;border:1px solid var(--border);background:#111114;color:inherit;padding:10px 12px;font:inherit}
.vn-rules{margin:4px 0;padding-inline-start:18px;color:var(--muted);font-size:13px;line-height:1.55}.vn-rules b{color:#fff}
.vn-submit{justify-self:start}
.vn-rec{display:grid;gap:10px;padding:14px;border:1px solid var(--border);border-radius:16px;background:#111114}
.vn-rec.is-live{border-color:#ff697c;box-shadow:0 0 0 3px rgba(255,105,124,.15)}
.vn-meter{position:relative;height:8px;border-radius:9px;background:#26262b;overflow:hidden}.vn-meter span{position:absolute;inset:0 auto 0 0;background:var(--gradient);border-radius:9px;transition:width .2s linear}.vn-meter i{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;opacity:.7}
.vn-rec-row{display:flex;justify-content:space-between;align-items:baseline}.vn-time{font:700 20px/1 ui-monospace,monospace}.vn-time small{font-size:13px;color:var(--muted)}
.vn-rec audio,.vn-item audio{width:100%;height:40px}
.vn-rec-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vn-rec-actions .btn,.vn-item .btn{display:inline-flex;align-items:center;gap:6px}.vn-rec-actions svg,.vn-empty svg{width:18px;height:18px}
.vn-rec-actions .btn[disabled]{opacity:.55;cursor:not-allowed}
.vn-list{display:grid;gap:12px;max-width:640px}
.vn-item{display:grid;gap:8px}.vn-item header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vn-quote{margin:0;font-size:15px;line-height:1.5}
.vn-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:#26262b;color:#d8d8de;white-space:nowrap}
.vn-due{background:rgba(255,218,114,.14);color:#ffda72}.vn-answered .vn-badge{background:rgba(80,200,140,.15);color:#7fe0ad}.vn-expired .vn-badge{background:rgba(255,105,124,.14);color:#ff98a6}
.vn-pro{background:linear-gradient(105deg,#ffda72,#ff697c);color:#1a0d10}
.vn-report{justify-self:start;font-size:12px;opacity:.75}
.vn-empty{display:flex;gap:10px;align-items:center;flex-wrap:wrap;max-width:640px;color:var(--muted)}
.vn-h{font-size:16px;margin:22px 0 10px}
.vn-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0;max-width:640px}.vn-stats .card{display:grid;gap:4px;padding:14px}.vn-stats small{color:var(--muted)}.vn-stats b{font-size:22px}
.vn-rate{display:flex;align-items:center;gap:6px}.vn-rate input{width:68px;padding:7px 8px;border-radius:10px;border:1px solid var(--border);background:#111114;color:inherit;font:inherit;text-align:center}
.vn-example{margin:10px 0 0;font-size:12px}
.vn-agreement{max-width:520px;width:calc(100% - 32px);border:1px solid var(--border);border-radius:20px;background:var(--panel);color:#f4f4f6;padding:24px}
.vn-agreement::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(3px)}
.vn-agreement h2{margin:0 0 4px}.vn-agreement ol{padding-inline-start:20px;line-height:1.55;font-size:14px;display:grid;gap:8px;margin:16px 0}
.vn-agreement .vn-check{display:flex;flex-direction:row;gap:10px;align-items:center;justify-content:flex-start;margin:14px 0;font-weight:600;cursor:pointer}.vn-agreement .vn-check input{width:18px;height:18px;margin:0;flex:none;accent-color:#ff697c}
.vn-agreement .btn{width:100%}
.vn-warning{margin:12px 20px 0;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,218,114,.4);background:rgba(255,218,114,.08);font-size:13px;line-height:1.5}.vn-warning a{color:#ffda72}
.vn-features{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:10px}.vn-features li{display:flex;gap:10px;align-items:flex-start}.vn-features span{color:#7fe0ad;font-weight:700}.vn-features .is-soon{color:var(--muted)}.vn-features .is-soon span{color:#ffda72}
.vn-table{display:grid;gap:2px}.vn-row{display:grid;grid-template-columns:2fr 1fr 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}.vn-row small{display:block;color:var(--muted)}.vn-bad{color:#ff98a6;font-weight:700}
.always-on small{display:block}
@media (max-width:640px){.vn-row{grid-template-columns:1fr auto;}.vn-row>span:nth-child(2),.vn-row>span:nth-child(3){font-size:12px}.vn-stats b{font-size:18px}.vn-warning{margin:10px 12px 0}}
.vn-demo-pro{margin-top:14px;border-style:dashed}
/* Plans (30 Oct 2026): tier cards side by side */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.tier{display:flex;flex-direction:column;border:1px solid var(--border,#26262c);border-radius:22px;padding:28px 26px;background:#0b0b0d;text-align:center}
.tier h3{margin:0 0 26px;font-size:17px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.tier-save{padding:2px 8px;border-radius:999px;background:#6022f5;color:#fff;font-size:11px;font-weight:700}
.tier-price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-bottom:22px}.tier-price strong{font-size:46px;font-weight:600;letter-spacing:-.02em}.tier-price span{font-size:30px;color:#d0d0d6}
.tier hr{width:100%;border:0;border-top:1px solid var(--border,#26262c);margin:0}
.tier-sub{margin:20px 0;font-weight:600;font-size:15px}
.tier ul{list-style:none;margin:22px 0 28px;padding:0;display:grid;gap:14px;text-align:left;flex:1}
.tier li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.35}.tier li svg{width:20px;height:20px;flex:none;fill:none;stroke:#34d399;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tier li.is-off{color:#9a9aa3}.tier li.is-off svg{stroke:#9a9aa3}
.tier-btn{width:100%;min-height:48px;border-radius:999px;border:1px solid #2c2c33;background:#17171b;color:#fff;font:600 15px inherit;cursor:pointer}
.tier-btn:not(:disabled):hover{border-color:#7b5cff;background:#1d1830}.tier-btn:disabled{opacity:.45;cursor:default}
.tier-manage{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.tier-note{margin-top:14px}
@media(max-width:900px){.tiers{grid-template-columns:1fr}.tier{padding:24px 20px}}