*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,Hiragino Sans,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#f5f7fa,#e8ecf1);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:40px 20px 60px}h1{font-size:26px;font-weight:700;color:#1d1d1f;margin-bottom:8px}.subtitle{font-size:14px;color:#888;margin-bottom:32px}.mode-toggle{display:flex;background:#dde1e7;border-radius:14px;padding:4px;margin-bottom:28px;gap:4px}.mode-btn{padding:11px 22px;border:none;background:transparent;border-radius:10px;font-size:15px;font-weight:500;cursor:pointer;color:#666;transition:all .2s;white-space:nowrap}.mode-btn.active{background:white;color:#1d1d1f;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.12)}.card{width:100%;max-width:680px;background:white;border-radius:22px;padding:24px;box-shadow:0 4px 24px rgba(0,0,0,.07);margin-bottom:16px}.card-label{font-size:12px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px}.input-wrap{position:relative}textarea{width:100%;height:150px;border:1.5px solid #e5e5ea;border-radius:14px;padding:16px 60px 16px 16px;font-size:17px;line-height:1.65;resize:none;outline:none;font-family:inherit;color:#1d1d1f;transition:border-color .2s;background:#fafafa}textarea:focus{border-color:#007aff;background:white}textarea::placeholder{color:#bbb}.mic-btn{position:absolute;bottom:12px;right:12px;width:42px;height:42px;border-radius:50%;border:none;background:#f0f0f5;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.1)}.mic-btn:hover{background:#e5e5ea;transform:scale(1.05)}.mic-btn.recording{background:#ff3b30;animation:pulse .9s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1);box-shadow:0 0 0 0 rgba(255,59,48,.4)}50%{transform:scale(1.08);box-shadow:0 0 0 8px rgba(255,59,48,0)}}.translate-btn{width:100%;max-width:680px;padding:17px;background:#007aff;color:white;border:none;border-radius:16px;font-size:17px;font-weight:700;cursor:pointer;margin-bottom:16px;transition:all .2s}.translate-btn:hover{background:#0071f0;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,122,255,.35)}.translate-btn:disabled{background:#b0c4de;cursor:not-allowed;transform:none;box-shadow:none}.output-text{font-size:17px;line-height:1.7;color:#1d1d1f;min-height:60px;white-space:pre-wrap;word-break:break-word}.output-placeholder{color:#ccc}.output-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.action-btn{padding:10px 20px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.speak-btn{background:#34c759;color:white}.speak-btn:hover{background:#2db84e}.speak-btn.playing{background:#ff9500}.copy-btn{background:#f0f0f5;color:#444}.copy-btn:hover{background:#e5e5ea}.copy-btn.copied{background:#34c759;color:white}.error-msg{color:#ff3b30;font-size:14px;margin-top:14px;padding:12px 16px;background:#fff1f0;border-radius:10px}.hint{font-size:13px;color:#aaa;text-align:center;margin-top:4px}