:root{--background-color: #F9FAFB;--card-background-color: #FFFFFF;--text-color: #1F2937;--subtle-text-color: #6B7280;--border-color: #E5E7EB;--primary-color: #3B82F6;--icon-btn-background-color: #F3F4F6}body.dark{--background-color: #111827;--card-background-color: #1F2937;--text-color: #F9FAFB;--subtle-text-color: #9CA3AF;--border-color: #374151;--icon-btn-background-color: #374151}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body,#root{height:100%;margin:0;background-color:var(--background-color);color:var(--text-color)}.app-container{width:100%;max-width:500px;margin:0 auto;padding:16px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--background-color);min-height:100vh;display:flex;flex-direction:column;gap:16px}.app-header{display:flex;justify-content:space-between;align-items:center}.app-title{font-size:20px;font-weight:700}.theme-toggle-switch{position:relative;display:inline-block;width:60px;height:34px}.theme-toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#2c3e50;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#3498db}input:checked+.slider:before{transform:translate(26px)}.icon-container{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 5px}.sun-icon{color:#f1c40f;opacity:0;transition:opacity .4s}.moon-icon{color:#f1c40f;opacity:1;transition:opacity .4s}input:checked+.slider .sun-icon{opacity:1}input:checked+.slider .moon-icon{opacity:0}.nav-header{display:flex;justify-content:space-between;align-items:center;gap:8px}.lang-pill{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;background-color:var(--card-background-color);border:1px solid var(--border-color);border-radius:9999px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s;color:var(--text-color)}.lang-pill:hover{background-color:var(--icon-btn-background-color)}.swap-btn{padding:8px;background-color:var(--card-background-color);border:1px solid var(--border-color);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--subtle-text-color)}.swap-btn:hover{background-color:var(--icon-btn-background-color)}.card{background-color:var(--card-background-color);border-radius:16px;border:1px solid var(--border-color);padding:16px;display:flex;flex-direction:column;flex-grow:1;min-height:200px}.card.output{border-color:#a5b4fc}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.card-title{font-size:12px;font-weight:600;color:var(--subtle-text-color);text-transform:uppercase;letter-spacing:.5px}.clear-btn{background:var(--icon-btn-background-color);border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--subtle-text-color)}.clear-btn:hover{background:#e5e7eb}textarea{flex-grow:1;border:none;resize:none;font-size:20px;font-family:inherit;background-color:transparent;padding:0;color:var(--text-color)}textarea:focus{outline:none}textarea::placeholder{color:var(--subtle-text-color)}.char-counter{text-align:right;font-size:12px;color:#9ca3af;margin-top:4px}textarea.loading{animation:pulse 1.5s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;border-top:1px solid var(--border-color);padding-top:12px}.icon-btn{background:var(--icon-btn-background-color);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--subtle-text-color)}.icon-btn.primary{background-color:var(--primary-color);color:#fff}.icon-btn:hover{opacity:.9}.icon-btn.speaking{background-color:#ef4444;color:#fff}.recording-container{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;gap:12px;position:relative}.progress-track{position:absolute;top:0;left:0;right:0;height:3px;background-color:var(--border-color);border-radius:3px;overflow:hidden}.progress-fill{height:100%;background-color:var(--primary-color);transition:width .2s linear}.timer-wrap{text-align:center}.timer-val{font-size:24px;font-weight:600;color:var(--text-color)}.timer-hint{font-size:12px;color:var(--subtle-text-color)}.rec-preview{font-size:16px;color:var(--subtle-text-color);min-height:24px}.visualizer-compact{width:120px;height:30px}.stop-btn-compact{background:#ef4444;border:none;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:10px;box-shadow:0 4px 14px #ef44444d}.sheet-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:flex-end;justify-content:center;z-index:1000}.sheet-panel{background-color:var(--card-background-color);width:100%;max-width:500px;padding:16px;border-top-left-radius:16px;border-top-right-radius:16px;animation:slide-up .3s ease-out}@keyframes slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}.lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}.lang-item{padding:12px;border-radius:8px;background-color:var(--icon-btn-background-color);cursor:pointer;font-weight:500;transition:all .2s;display:flex;align-items:center;gap:8px;color:var(--text-color)}.lang-item:hover{background-color:var(--border-color)}.lang-item.selected{background-color:#dbeafe;color:#2563eb;font-weight:700}.toast-notification{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);background-color:var(--card-background-color);color:var(--text-color);padding:16px 24px;border-radius:12px;font-size:16px;font-weight:500;display:flex;align-items:center;gap:12px;z-index:2000;transition:all .3s ease-in-out;opacity:0;box-shadow:0 4px 12px #0000001a;border:1px solid var(--border-color)}.toast-notification.visible{transform:translate(-50%,-50%) scale(1);opacity:1}