cd /data/projects/voice_trainer_pro cat > frontend/src/style.css <<"EOF" :root{--bg: #0b0f14;--card: #111826;--text: #e7eef7;--muted: #9fb0c2;--good: #34d399;--warn: #fbbf24;--bad: #fb7185;--line: rgba(255,255,255,.1);--line2: rgba(255,255,255,.06);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 600px at 20% 0%,rgba(125,211,252,.12),transparent 60%),radial-gradient(900px 500px at 95% 15%,rgba(52,211,153,.1),transparent 50%),var(--bg);color:var(--text)}.container{max-width:560px;margin:0 auto;padding:16px}.card{background:linear-gradient(180deg,#ffffff08,#ffffff05);border:1px solid var(--line2);border-radius:18px;padding:16px;box-shadow:0 14px 50px #00000059}h1{font-size:20px;margin:0 0 10px;letter-spacing:-.01em}p{color:var(--muted);margin:8px 0;line-height:1.35}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line);background:#ffffff0a;color:var(--text);border-radius:14px;padding:12px 14px;min-height:44px;font-weight:650;cursor:pointer}.btn.primary{border-color:#7dd3fc59}.btn.danger{border-color:#fb718559}.btn:disabled{opacity:.55;cursor:not-allowed}.badge{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line);color:var(--muted)}.kpi{font-size:40px;font-weight:850;letter-spacing:-.03em;line-height:1}.sub{margin-top:6px;color:var(--muted)}.grid{display:grid;grid-template-columns:1fr 140px;gap:14px;margin-top:12px}@media (max-width: 430px){.grid{grid-template-columns:1fr}}.meter,.panel{border:1px solid var(--line2);border-radius:16px;padding:12px;background:#00000029}.hr{height:1px;background:var(--line2);margin:12px 0}.slider{width:100%}.small{font-size:12px;color:var(--muted)}.track{position:relative;height:240px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(180deg,#ffffff0d,#ffffff05),radial-gradient(400px 220px at 50% 30%,rgba(125,211,252,.09),transparent 65%);overflow:hidden}.track .zero{position:absolute;left:0;right:0;top:50%;height:1px;background:#ffffff59}.track .band{position:absolute;left:0;right:0;top:calc(50% - 30px);height:60px;background:#34d3991f;border-top:1px solid rgba(52,211,153,.18);border-bottom:1px solid rgba(52,211,153,.18)}.bubble{position:absolute;left:50%;width:18px;height:18px;transform:translate(-50%,-50%);border-radius:999px;background:#e7eef7eb;box-shadow:0 8px 24px #0006;border:1px solid rgba(0,0,0,.25)}.bubble.good{background:#34d399f2}.bubble.warn{background:#fbbf24f2}.bubble.bad{background:#fb7185f2}.labels{margin-top:10px;display:flex;justify-content:space-between;color:var(--muted);font-size:12px}canvas{width:100%;height:120px;background:#0000002e;border-radius:12px;border:1px solid var(--line2)}EOF{}