*{box-sizing:border-box}
:root{--bg:#081322;--panel:#111f33;--panel2:#0d1a2d;--text:#f7f9fc;--muted:#9fb0c7;--blue:#4f83ff;--blue2:#2f69ed;--line:#22334d;--ok:#24c487;--danger:#ff5c72}
html,body{margin:0;min-height:100%;background:linear-gradient(180deg,#07111f,#0a1627);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body{display:flex;justify-content:center}
.app-shell{width:min(880px,100%);min-height:100vh;padding:18px}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:12px}.brand-icon{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--blue);font-size:22px}
.brand-name{font-weight:800;font-size:22px}.brand-sub{font-size:12px;letter-spacing:3px;color:#c6d3e5}
.small-btn,.secondary{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:14px;padding:11px 14px;font-weight:700}
.hero{text-align:center;margin:18px 0}.hero h1{font-size:34px;margin:0 0 8px}.hero p{color:var(--muted);margin:0}
.count-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:640px;margin:34px auto}
.count-btn{aspect-ratio:1;border:none;border-radius:28px;background:linear-gradient(145deg,var(--blue),var(--blue2));color:white;font-size:44px;font-weight:900;box-shadow:0 16px 40px rgba(79,131,255,.25)}
.setup-note{max-width:680px;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:16px;color:var(--muted);line-height:1.5}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.toggle{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);padding:10px 14px;border-radius:14px;color:var(--muted);font-size:14px}
.language-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.lang-card{background:var(--panel);border:2px solid transparent;border-radius:18px;padding:12px;cursor:pointer;transition:.18s}
.lang-card.active{border-color:var(--blue);box-shadow:0 0 0 4px rgba(79,131,255,.12)}
.lang-card select{width:100%;margin-top:8px;background:#0b1728;color:white;border:1px solid var(--line);border-radius:10px;padding:9px}
.lang-card .title{font-weight:800}.lang-card .hint{font-size:12px;color:var(--muted);margin-top:4px}
.conversation{background:rgba(17,31,51,.92);border:1px solid var(--line);border-radius:24px;min-height:260px;max-height:40vh;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.empty-state{margin:auto;text-align:center;color:var(--muted)}.empty-icon{font-size:42px}
.message{background:#18283f;border-radius:18px;padding:14px}.message .heard{color:#d8e4f5;margin-bottom:10px}
.translation-grid{display:grid;gap:8px}.translation-card{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:#173a75;border:1px solid #2e6fd4;border-radius:14px;padding:12px}
.translation-card button{border:none;background:white;color:#173a75;border-radius:10px;padding:9px 11px;font-weight:800}
.meta{font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:#a9bdd8;margin-bottom:5px}
.status-card{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin:14px 0}
.status-dot{width:12px;height:12px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 5px rgba(36,196,135,.12)}
.status-text{font-weight:800}.direction-text{font-size:13px;color:var(--muted);margin-top:3px}
.mic-wrap{text-align:center;margin:12px 0}.mic-btn{width:145px;height:145px;border-radius:50%;border:none;background:linear-gradient(145deg,var(--blue),var(--blue2));font-size:54px;box-shadow:0 18px 50px rgba(79,131,255,.35)}
.mic-btn:disabled{opacity:.4}.mic-btn.recording{background:linear-gradient(145deg,var(--danger),#d9304b);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,92,114,.35)}50%{box-shadow:0 0 0 18px rgba(255,92,114,0)}}
.mic-hint{margin-top:9px;color:var(--muted);font-weight:700}.actions{display:flex;justify-content:center}
footer{text-align:center;color:var(--muted);font-size:12px;line-height:1.6;margin-top:22px}
@media(max-width:600px){.app-shell{padding:14px 10px}.hero h1{font-size:28px}.count-grid{grid-template-columns:repeat(2,1fr)}.conversation{min-height:240px}.mic-btn{width:130px;height:130px}}