:root{--bg: #0a0e12;--panel: #11161c;--panel-2: #161d25;--line: #232c36;--text: #e8eef4;--muted: #8a98a8;--accent: #22d3ee;--accent-dim: #0e7490;--good: #34d399;--warn: #fbbf24;--danger: #f87171;--radius: 12px;font-synthesis:none}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:radial-gradient(1200px 600px at 50% -10%,#0f1822 0%,var(--bg) 60%);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}.app{max-width:880px;margin:0 auto;padding:0 24px 80px}.topbar{padding:40px 0 28px}.brand{display:flex;align-items:center;gap:10px}.brand__mark{font-size:28px;color:var(--accent);line-height:1}.brand__name{font-size:24px;font-weight:700;letter-spacing:-.02em}.brand__pro{font-size:11px;font-weight:700;letter-spacing:.12em;color:#04222a;background:var(--accent);padding:3px 7px;border-radius:5px}.brand__tag{margin:12px 0 0;color:var(--muted);font-size:15px}.step{margin-top:28px}.step__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.step__num{width:24px;height:24px;border-radius:50%;background:var(--accent);color:#04222a;font-size:13px;font-weight:700;display:grid;place-items:center}.step__title{font-size:17px;margin:0;font-weight:600}.dropzone{border:1.5px dashed var(--line);border-radius:var(--radius);background:var(--panel);padding:44px 24px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone--drag{border-color:var(--accent);background:var(--panel-2)}.dropzone--disabled{opacity:.5;pointer-events:none}.dropzone__arrow{font-size:30px;color:var(--muted);margin-bottom:10px}.dropzone__title{font-size:16px;font-weight:600}.dropzone__formats{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0 8px}.tag{font-size:11px;font-weight:600;color:var(--accent);border:1px solid var(--accent-dim);border-radius:5px;padding:2px 7px}.dropzone__hint{color:var(--muted);font-size:13px;margin-top:6px}.profiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}.profile-card{text-align:left;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer;color:var(--text);transition:border-color .15s,background .15s}.profile-card:hover{border-color:#34404d}.profile-card--active{border-color:var(--accent);background:var(--panel-2)}.profile-card:disabled{cursor:default}.profile-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.profile-card__name{font-weight:600;font-size:15px}.profile-card__badge{font-size:11px;color:var(--accent);border:1px solid var(--accent-dim);border-radius:999px;padding:2px 8px}.profile-card__desc{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 10px}.profile-card__target{font-size:12px;color:#6f7e8e;font-variant-numeric:tabular-nums}.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.format-card{background:var(--panel);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px;cursor:pointer;color:var(--text);display:flex;flex-direction:column;gap:4px;transition:border-color .15s,background .15s}.format-card--active{border-color:var(--accent);background:var(--panel-2)}.format-card__name{font-weight:600}.format-card__desc{font-size:12px;color:var(--muted)}.cta{margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}.btn{font:inherit;font-weight:600;border:none;border-radius:10px;padding:12px 18px;cursor:pointer;color:var(--text);background:var(--panel-2);border:1px solid var(--line);transition:filter .15s,opacity .15s}.btn:hover{filter:brightness(1.12)}.btn:disabled{opacity:.45;cursor:default;filter:none}.btn--primary{background:var(--accent);color:#04222a;border-color:transparent}.btn--lg{padding:14px 26px;font-size:16px}.btn--ghost{background:transparent}.btn--play{width:48px;height:48px;border-radius:50%;font-size:15px;display:grid;place-items:center}.progress{margin-top:28px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.progress__row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px;font-variant-numeric:tabular-nums}.progress__track{height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden}.progress__bar{height:100%;background:linear-gradient(90deg,var(--accent-dim),var(--accent));transition:width .25s ease}.result{margin-top:16px}.result__head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}.result__head h2{margin:0;font-size:22px}.waveform{width:100%;height:130px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;display:block}.transport{display:flex;align-items:center;gap:16px;margin:16px 0;flex-wrap:wrap}.ab{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}.ab__btn{border:none;background:transparent;color:var(--muted);font:inherit;font-weight:600;padding:7px 16px;border-radius:7px;cursor:pointer}.ab__btn--active{background:var(--accent);color:#04222a}.match{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);cursor:pointer}.time{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px}.meters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 20px}.meter{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.meter__label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}.meter__values{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.meter__note{font-size:11px;color:#6f7e8e;margin-top:6px}.arrow{color:var(--muted)}.good{color:var(--good)}.warn{color:var(--warn)}.result__actions{display:flex;gap:12px}.btn--sm{padding:7px 12px;font-size:13px}.ab__btn--ref.ab__btn--active{background:var(--warn);color:#2a1f04}.refbar{margin:2px 0 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}.refbar__loaded{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.refbar__dot{width:10px;height:10px;border-radius:50%;background:var(--warn);flex:none}.muted{color:var(--muted);font-size:14px}.error{margin-top:24px;background:#f871711a;border:1px solid rgba(248,113,113,.4);color:var(--danger);border-radius:var(--radius);padding:14px 16px;font-size:14px}.foot{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);text-align:center}@media(max-width:640px){.profiles,.meters{grid-template-columns:1fr 1fr}.formats{grid-template-columns:1fr}}
