body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}*{box-sizing:border-box}html{-webkit-tap-highlight-color:transparent}button,select,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}@media(hover:none)and (pointer:coarse){button:active:not(:disabled){transform:scale(.97)}}:root{--bg-base: #0C111A;--bg-card: #151C28;--bg-elevated: #1C2433;--primary: #7A5CFF;--primary-2: #4D8DFF;--accent: #2BEFEF;--waveform: #6C78FF;--waveform-recording: #FF4D6D;--waveform-reversed: #2BEFEF;--text-high: #F0F4FF;--text-med: #A9B4C8;--text-low: #8A94A8;--danger: #E04949;--divider: rgba(255, 255, 255, .04)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;background:var(--bg-base);color:var(--text-high)}.app-header{padding:1.5rem;background:var(--bg-card);border-bottom:1px solid var(--divider)}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.title-section h1{font-size:2.25rem;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--primary-2),var(--primary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.title-section h1:after{content:" ↻";font-size:1.5rem;opacity:.7}.tagline{color:var(--text-low);font-size:.875rem;font-weight:500;letter-spacing:2px;text-transform:uppercase;margin-top:.5rem}.language-switcher{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-elevated);border:1px solid var(--divider);border-radius:8px}.lang-icon{font-size:1.25rem}.lang-select{padding:.25rem .5rem;background:transparent;color:var(--text-high);border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:500;outline:none;transition:all .2s}.lang-select:hover{background:#ffffff0d}.lang-select:focus{background:#ffffff0d}.lang-select option{background:var(--bg-card);color:var(--text-high);padding:.5rem}.app-main{max-width:1200px;margin:0 auto;padding:2rem 1.5rem}.recorder-section{background:var(--bg-card);border:1px solid var(--divider);border-radius:16px;padding:1.5rem;margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:320px;transition:all .5s ease-in-out}.recorder-section.has-content{justify-content:flex-start;min-height:auto}.error-message{background:#e0494926;color:#ff6b6b;padding:1rem;border-radius:10px;border:1px solid rgba(224,73,73,.3);margin-bottom:1.5rem;font-size:.875rem}.error-banner{background:#e049491a;border:1px solid rgba(224,73,73,.25);border-radius:12px;padding:1.25rem;margin-bottom:1.5rem;width:100%;max-width:400px}.error-banner__title{font-size:1rem;font-weight:600;color:#ff6b6b;margin-bottom:.5rem}.error-banner__body{font-size:.9rem;color:var(--text-high);margin-bottom:.5rem;line-height:1.4}.error-banner__mobile{font-size:.8rem;color:var(--text-med);margin-bottom:1rem;line-height:1.4}.error-banner__actions{display:flex;gap:.75rem}.btn-error-action{padding:.6rem 1.25rem;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.btn-error-primary{background:var(--primary);color:#fff;border:none}.btn-error-primary:hover{background:#8b6fff}.btn-error-secondary{background:transparent;color:var(--text-med);border:1px solid var(--divider)}.btn-error-secondary:hover{background:#ffffff0d;color:var(--text-high)}.error-banner__help{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--divider);font-size:.8rem;color:var(--text-med);line-height:1.5}.waveform-container{width:100%;border-radius:12px;background:var(--bg-base);border:1px solid var(--divider);display:flex;flex-direction:column;justify-content:center;align-items:center;max-height:0;opacity:0;overflow:hidden;margin-bottom:0;padding:0;transition:max-height .5s ease-in-out,opacity .4s ease-in-out,margin-bottom .5s ease-in-out,padding .5s ease-in-out}.waveform-container.visible{max-height:280px;opacity:1;margin-bottom:1.5rem;min-height:200px;padding:1rem}.waveform-label{font-size:.7rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-med);margin-bottom:.75rem;text-align:center;background:none;padding:.25rem 0;display:inline-flex;align-items:center;gap:.4rem;cursor:default;-webkit-user-select:none;user-select:none}.waveform-label.recording-state{color:#ff6b75}.waveform-label .recording-dot{animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.waveform-label .flip-icon{font-size:.85rem;display:inline-block;color:var(--accent);opacity:.8}.waveform-label.flipping .flip-icon{animation:spin-icon .4s ease-in-out}@keyframes spin-icon{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.waveform-wrapper{width:100%;display:flex;justify-content:center;transform-origin:center center}.waveform-wrapper.flipping{animation:flip-horizontal .4s ease-in-out}@keyframes flip-horizontal{0%{transform:scaleX(1)}50%{transform:scaleX(0)}to{transform:scaleX(1)}}.waveform-canvas{max-width:100%;height:auto;display:block}.controls{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-bottom:2rem;transition:transform .5s ease-in-out}.btn-record{width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,255,255,.08);background:linear-gradient(145deg,var(--primary-2),var(--primary));color:#fff;font-size:3rem;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 3px 12px #7a5cff33;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem}.btn-record:hover:not(:disabled){transform:scale(1.05);box-shadow:0 4px 18px #7a5cff4d}.btn-record:active:not(:disabled){transform:scale(.92) rotate(-3deg);box-shadow:0 2px 8px #7a5cff33}.btn-record:disabled{opacity:.6;cursor:not-allowed}.btn-record.mic-blocked{opacity:.5;box-shadow:none}.btn-record.mic-blocked:hover{transform:none;box-shadow:none}.btn-record.recording{background:linear-gradient(145deg,#ff6b75,#e04949);border-color:#ffffff1a;box-shadow:0 3px 14px #ff6b754d;animation:pulse-subtle 2s ease-in-out infinite}@keyframes pulse-subtle{0%,to{box-shadow:0 3px 14px #ff6b754d}50%{box-shadow:0 4px 20px #ff6b7573}}.stop-icon{width:28px;height:28px;background-color:currentColor;border-radius:4px}.btn-icon-img{width:60px;height:60px;filter:brightness(0) invert(1)}.btn-text{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.recording-time{font-size:1.5rem;font-weight:600;color:#ff6b75}.processing-indicator{font-size:1rem;color:var(--text-med);font-style:italic}.record-hint{font-size:.9rem;color:var(--text-med);text-align:center;max-width:280px;line-height:1.4}.action-buttons{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;align-items:center;margin-bottom:1.5rem;width:100%}.secondary-actions{display:flex;gap:.5rem}.btn-action{padding:.85rem 1.75rem;border:none;border-radius:10px;background:var(--primary);color:#fff;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .15s ease;min-width:140px;height:50px}.btn-action.btn-small{padding:.6rem 1.25rem;font-size:.875rem;min-width:100px;height:42px}.btn-action:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 15px #7a5cff59}.btn-action:active:not(:disabled){transform:translateY(0)}.btn-action:disabled{opacity:.5;cursor:not-allowed}.btn-action:disabled:focus{outline:none;box-shadow:none}.btn-action.btn-primary{background:var(--primary);box-shadow:0 2px 10px #7a5cff40}.btn-action.btn-secondary{background:var(--bg-elevated);color:var(--text-med)}.btn-action.btn-secondary:hover:not(:disabled){background:#252d3d;color:var(--text-high);box-shadow:0 2px 8px #0000004d}.btn-action.btn-tertiary{background:transparent;border:1px solid rgba(122,92,255,.3);color:var(--text-med)}.btn-action.btn-tertiary:hover:not(:disabled){background:#7a5cff1a;border-color:#7a5cff80;color:var(--text-high);box-shadow:none;transform:translateY(-1px)}.btn-save{display:inline-flex;align-items:center;justify-content:center}.btn-save__label{transition:opacity .15s ease-out}.btn-save__icon{width:0;opacity:0;transform:scale(.5);transition:opacity .18s ease-out,transform .18s ease-out,width .18s ease-out,margin .18s ease-out;color:var(--accent);font-weight:700;margin-left:0;overflow:hidden}.btn-save--saved .btn-save__icon{width:1rem;opacity:1;transform:scale(1);margin-left:.4rem}.btn-save--saved{border-color:#2befef4d;color:var(--accent)}@media(prefers-reduced-motion:reduce){.btn-save__icon,.btn-save__label{transition:none}}.keyboard-shortcuts{text-align:center;color:var(--text-low);font-size:.875rem;padding-top:1rem;border-top:1px solid var(--divider)}.btn-toggle-library{width:100%;padding:1rem;background:var(--bg-card);border:1px solid var(--divider);border-radius:12px;font-size:1.125rem;font-weight:600;color:var(--text-high);cursor:pointer;transition:all .2s;margin-bottom:1rem}.btn-toggle-library:hover{background:var(--bg-elevated)}.library-section{background:var(--bg-card);border:1px solid var(--divider);border-radius:16px;padding:2rem}.recording-list h2{font-size:1.5rem;margin-bottom:1.5rem;color:var(--text-high)}.recording-list-empty{text-align:center;padding:3rem 1rem;color:var(--text-med)}.recordings-grid{display:flex;flex-direction:column;gap:.75rem}.recording-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:var(--bg-elevated);border:1px solid var(--divider);border-radius:12px;transition:all .2s;gap:1rem}.recording-item:hover{background:#1f2937;border-color:#7a5cff33}.recording-info{flex:1;min-width:0}.recording-name{font-weight:600;color:var(--text-high);margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.recording-duration{font-size:.8rem;color:var(--text-med);font-variant-numeric:tabular-nums}.recording-meta{font-size:.875rem;color:var(--text-med)}.recording-actions{display:flex;gap:1rem;flex-shrink:0}.btn-icon{width:44px;height:44px;border:none;border-radius:8px;background:var(--bg-card);color:var(--text-med);font-size:1.25rem;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.btn-icon:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}.btn-icon:active{transform:translateY(0) scale(.97)}.btn-icon.btn-danger{background:var(--bg-card)}.btn-icon.btn-danger:hover{background:var(--danger);color:#fff}@media(max-width:768px){.app-header{padding:1rem 1.5rem}.title-section h1{font-size:1.75rem}.title-section h1:after{font-size:1.25rem}.tagline{font-size:.75rem;letter-spacing:1.5px}.app-main{padding:1.25rem 1.5rem}.recorder-section{padding:1.25rem 1.25rem 1.5rem;border-radius:12px;margin-bottom:1.25rem;min-height:280px}.library-section{padding:1.5rem;border-radius:12px}.btn-toggle-library{margin-bottom:.75rem}.btn-record{width:100px;height:100px;font-size:2.5rem}.stop-icon{width:24px;height:24px}.btn-icon-img{width:50px;height:50px}.btn-text{font-size:.625rem}.controls{margin-bottom:1.5rem}.action-buttons{flex-direction:column;width:100%;margin-bottom:1rem}.secondary-actions{width:100%}.btn-action{width:100%;height:48px}.btn-action.btn-small{width:100%;height:44px}.waveform-container.visible{margin-bottom:1rem;min-height:160px;max-height:220px;padding:.75rem}.waveform-canvas{width:100%}.recording-item{flex-direction:column;align-items:flex-start}.recording-actions{width:100%;justify-content:flex-end}.keyboard-shortcuts{display:none}.app-footer{padding:1rem;margin-top:0}.language-switcher{position:relative;z-index:10}}@media(max-width:480px){.app-header{padding:.875rem 1rem}.header-content{flex-direction:row;align-items:center;justify-content:space-between;gap:.5rem}.title-section h1{font-size:1.5rem}.title-section h1:after{font-size:1rem}.tagline{font-size:.65rem;letter-spacing:1px;margin-top:.25rem}.app-main{padding:.875rem}.recorder-section{padding:1rem 1rem 1.25rem;min-height:260px;margin-bottom:1rem}.language-switcher{padding:.375rem .5rem;transform:translate(4px)}.lang-icon{font-size:1rem}.lang-select{font-size:.8rem;padding:.2rem .35rem}.record-hint{font-size:.8rem;max-width:240px}.waveform-container.visible{min-height:140px;max-height:180px;padding:.5rem}.waveform-label{font-size:.65rem;letter-spacing:1px;margin-bottom:.5rem}.controls{gap:.75rem;margin-bottom:1.25rem}.btn-toggle-library{padding:.875rem;font-size:1rem;margin-bottom:.75rem}.app-footer{padding:.875rem;font-size:.8rem}.footer-divider{margin:0 .5rem}}.app-footer{padding:1.5rem;text-align:center;border-top:1px solid var(--divider);color:var(--text-low);font-size:.875rem}.app-footer a{color:var(--text-med);text-decoration:none;transition:color .15s}.app-footer a:hover{color:var(--text-high)}.footer-divider{margin:0 .75rem;opacity:.5}@media(max-width:480px)and (min-height:700px){.recorder-section{padding-top:1.5rem}.recorder-section:not(.has-content){justify-content:center;padding-top:2rem}}@media(max-width:375px){.title-section h1{font-size:1.35rem}.title-section h1:after{font-size:.9rem}.tagline{font-size:.6rem}.btn-record{width:90px;height:90px}.btn-icon-img{width:45px;height:45px}.btn-text{font-size:.55rem}.recorder-section{min-height:240px}}.error-boundary{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;background:var(--bg-base)}.error-content{text-align:center;max-width:400px}.error-content h2{font-size:1.5rem;margin-bottom:1rem;color:var(--primary)}.error-content p{color:var(--text-med);margin-bottom:1.5rem;line-height:1.6}.error-reset-btn,.error-reload-btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s ease;margin:.5rem}.error-reset-btn{background:var(--primary);color:#fff}.error-reset-btn:hover{background:var(--primary-2);transform:translateY(-2px)}.error-reload-btn{background:transparent;color:var(--text-med);border:1px solid var(--text-med)}.error-reload-btn:hover{color:var(--text-high);border-color:var(--text-high)}