:root{--bg:#f4f6f3;--ink:#141417;--muted:#626a70;--line:#d5ddd7;--surface:#fff;--surface-soft:#edf3ef;--accent:#0f766e;--accent-live:#2563eb;--accent-record:#d93636;--focus:#14b8a6;--shadow:0 18px 60px #181f1b1a;--font-sans:"Inter","Avenir Next","Segoe UI",sans-serif}*{box-sizing:border-box}html,body{min-height:100%}html{background:linear-gradient(180deg,#ffffffe6,#f4f6f3e6),var(--bg)}body{color:var(--ink);font-family:var(--font-sans);margin:0}button,input,select,textarea{font:inherit}.app-shell{grid-template-rows:auto minmax(0,1fr) auto;gap:16px;width:min(980px,100%);min-height:100svh;margin:0 auto;padding:16px;display:grid}.language-bar{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center;gap:8px;min-height:56px;display:grid}.language-bar select,.swap-button{border:1px solid var(--line);width:100%;min-height:48px;color:var(--ink);background:#ffffffdb;border-radius:999px;box-shadow:0 8px 26px #181f1b0f}.language-bar select{padding:0 14px}.swap-button{cursor:pointer;place-items:center;padding:0;display:grid}.language-bar select:focus-visible,.swap-button:focus-visible,.source-box:focus-within,.round-button:focus-visible{outline-offset:2px;outline:3px solid #14b8a647}.file-input{display:none}.swap-icon{width:24px;height:18px;position:relative}.swap-icon:before,.swap-icon:after{content:"";border-color:var(--accent);border-style:solid;width:22px;height:7px;position:absolute;left:1px}.swap-icon:before{border-width:2px 2px 0 0;top:0}.swap-icon:after{border-width:0 0 2px 2px;bottom:0}.swap-icon{transform:rotate(0)}.text-stage{grid-template-rows:minmax(150px,.78fr) minmax(220px,1.22fr);gap:12px;min-height:0;display:grid}.source-box,.translation-text{border:1px solid var(--line);background:var(--surface);width:100%;min-width:0;box-shadow:var(--shadow);border-radius:14px}.source-box{grid-template-rows:auto minmax(0,1fr);gap:14px;padding:16px;display:grid;overflow:hidden}.source-text{resize:none;width:100%;height:100%;min-height:0;color:var(--ink);background:0 0;border:0;outline:none;padding:0;font-size:1.28rem;line-height:1.45}.source-box:not(.has-image) .source-text{grid-row:1/-1}.source-text::placeholder{color:#9ca1a6}.translation-text{grid-auto-rows:max-content;align-content:start;gap:20px;padding:24px;display:grid;overflow:auto}.image-preview{object-fit:contain;border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;max-width:min(320px,100%);max-height:170px}.source-preview,.translated-preview{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.source-preview{color:var(--muted);font-size:.98rem;line-height:1.45}.translated-preview{color:var(--ink);font-size:clamp(2.2rem,5vw,4.75rem);line-height:1.05}.mic-dock{padding-bottom:max(6px,env(safe-area-inset-bottom));justify-items:center;gap:12px;display:grid}.action-row{justify-content:center;align-items:center;gap:16px;display:flex}.status{min-height:22px;color:var(--muted);text-align:center;margin:0;font-size:.92rem;font-weight:700}.status.error{color:#b42318;font-weight:700}.round-button{background:var(--accent);color:#fff;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;border:0;border-radius:50%;place-items:center;gap:4px;width:98px;height:98px;transition:background .16s,box-shadow .16s,transform .16s;display:grid;box-shadow:0 16px 44px #0f766e57}.round-button:hover:not(:disabled){transform:translateY(-1px)}.round-button:disabled{cursor:progress;opacity:.7}.image-action{background:#2f4151;box-shadow:0 16px 44px #2f415147}.image-action.loading{background:#64748b}.mic-button{background:var(--accent);box-shadow:0 16px 44px #0f766e57}.mic-button.live{background:var(--accent-live);box-shadow:0 16px 44px #2563eb52}.mic-button.recording{background:var(--accent-record);animation:1s ease-in-out infinite record-pulse;box-shadow:0 0 0 12px #d936361f}.mic-icon{border:3px solid;border-radius:999px;width:22px;height:34px;position:relative}.camera-icon{border:3px solid;border-radius:8px;width:36px;height:28px;position:relative}.camera-icon:before{content:"";border:3px solid;border-bottom:0;border-radius:6px 6px 0 0;width:14px;height:7px;position:absolute;top:-9px;left:7px}.camera-icon:after{content:"";border:3px solid;border-radius:50%;width:11px;height:11px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.mic-icon:before{content:"";border:3px solid;border-top:0;border-radius:0 0 999px 999px;width:30px;height:18px;position:absolute;bottom:-12px;left:50%;transform:translate(-50%)}.mic-icon:after{content:"";background:currentColor;width:3px;height:11px;position:absolute;bottom:-21px;left:50%;transform:translate(-50%)}.round-button span:last-child{font-size:.78rem;font-weight:800}@keyframes record-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@media (max-width:640px){.app-shell{gap:12px;padding:12px}.language-bar{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr)}.text-stage{grid-template-rows:minmax(130px,.72fr) minmax(240px,1.28fr)}.source-box{padding:14px}.source-text{font-size:1.1rem}.translation-text{padding:18px}.round-button{width:88px;height:88px}}