:root { --bg:#0b0f14; --panel:#131a22; --fg:#e6edf3; --muted:#8b98a5; --accent:#38bdf8; --green:#22c55e; --amber:#f59e0b; --blue:#60a5fa; --red:#ef4444; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:17px/1.4 -apple-system,system-ui,Segoe UI,Roboto,sans-serif; overscroll-behavior:none; }
body { display:flex; flex-direction:column; height:100dvh; padding-top:env(safe-area-inset-top); }
header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 16px; }
header label { font-weight:600; display:flex; align-items:center; gap:6px; }
select, input[type=password] { font:inherit; color:var(--fg); background:var(--panel); border:1px solid #243041; border-radius:10px; padding:8px 10px; }
button { font:inherit; color:var(--fg); background:var(--panel); border:1px solid #243041; border-radius:12px; padding:10px 14px; }
#settingsBtn { font-size:22px; line-height:1; padding:6px 12px; }
main { flex:1; overflow-y:auto; padding:8px 16px; display:flex; flex-direction:column; gap:10px; }
.hint { color:var(--muted); text-align:center; margin:auto 0; }
.turn { display:flex; flex-direction:column; gap:4px; background:var(--panel); border-radius:14px; padding:10px 12px; }
.turn .src { color:var(--muted); font-size:15px; }
.turn .dst { font-size:19px; font-weight:500; }
.turn .dst:empty::after { content:"…"; color:var(--muted); }
#status { text-align:center; font-weight:600; padding:10px 16px; margin:6px 16px; border-radius:999px; background:var(--panel); color:var(--muted); transition:background .2s,color .2s; }
#status[data-state=listening] { background:#0f2a1a; color:var(--green); }
#status[data-state=hearing] { background:#14532d; color:#bbf7d0; animation:pulse 1s infinite; }
#status[data-state=translating] { background:#3b2a07; color:var(--amber); }
#status[data-state=speaking] { background:#172554; color:var(--blue); }
#status[data-state=error] { background:#450a0a; color:#fecaca; }
@keyframes pulse { 50% { opacity:.6; } }
footer { padding:8px 16px calc(12px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:6px; align-items:center; }
#startBtn { width:100%; font-size:22px; font-weight:700; padding:18px; border-radius:16px; background:var(--accent); color:#04131c; border:0; }
#startBtn.on { background:var(--red); color:#fff; }
#usage { color:var(--muted); font-size:13px; min-height:1.2em; }
dialog { background:var(--panel); color:var(--fg); border:0; border-radius:16px; width:min(92vw,420px); padding:18px; }
dialog::backdrop { background:rgba(0,0,0,.6); }
dialog form { display:flex; flex-direction:column; gap:14px; }
dialog label { display:flex; flex-direction:column; gap:6px; font-weight:600; }
dialog h2 { margin:0; font-size:20px; }
.row { display:flex; gap:10px; justify-content:flex-end; }
.small { color:var(--muted); font-size:13px; margin:0; }