*{margin:0;padding:0;box-sizing:border-box}:root{--background:#fafafa;--foreground:#09090b;--card:#fff;--primary:#18181b;--secondary:#f8f9fa;--muted:#f1f3f4;--muted-foreground:#4a4d54;--accent:#f8f9fa;--border:#e5e7eb;--input:#e5e7eb;--ring:#3b82f6;--radius:0.75rem}[data-theme=dark]{--background:#161616;--foreground:#fafafa;--card:#1a1a1a;--primary:#fafafa;--secondary:#262626;--muted:#171717;--muted-foreground:#a1a1aa;--accent:#1c1c1c;--border:#262626;--input:#262626;--ring:#3b82f6}[data-theme=black]{--background:#000;--foreground:#fff;--card:#000;--primary:#fff;--secondary:#0a0a0a;--muted:#000;--muted-foreground:#737373;--accent:#050505;--border:#1a1a1a;--input:#1a1a1a;--ring:#3b82f6}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--background);color:var(--foreground);line-height:1.5;-webkit-font-smoothing:antialiased;transition:background-color .3s ease,color .3s ease}.header{background:hsla(0,0%,100%,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);padding:.75rem 0;position:sticky;top:0;z-index:100}[data-theme=dark] .header{background:rgba(22,22,22,.8)}[data-theme=black] .header{background:rgba(0,0,0,.8)}.header-content{max-width:1200px;margin:0 auto;padding:0 1rem;justify-content:space-between}.header-content,.logo-link{display:flex;align-items:center}.logo-link{text-decoration:none;color:var(--foreground);gap:.5rem}.logo{height:32px;width:auto}.logo-icon{width:1.5rem;height:1.5rem;color:var(--foreground)}.logo-content{display:flex;align-items:center;gap:.75rem}.logo-text{font-size:1.25rem;font-weight:800;color:var(--foreground);font-family:League Spartan,sans-serif}.beta-badge{background:var(--primary);color:var(--background);font-size:.75rem;font-weight:700;height:1.5rem;padding:0 .5rem;border-radius:.375rem;display:flex;align-items:center;justify-content:center}[data-theme=black] .beta-badge,[data-theme=dark] .beta-badge{background:var(--foreground);color:var(--background)}.nav-desktop{display:flex;gap:2rem}.nav-desktop a{color:var(--muted-foreground);text-decoration:none;font-size:.9rem;transition:all .3s ease;position:relative;padding:.5rem 1rem;border-radius:.5rem}.nav-desktop a:hover{color:var(--foreground);background:var(--accent);transform:translateY(-2px)}.nav-desktop a:after{content:"";position:absolute;bottom:0;left:50%;width:0;height:2px;background:var(--foreground);transition:all .3s ease;transform:translateX(-50%)}.nav-desktop a:hover:after{width:80%}.hamburger{display:none;background:none;border:none;color:var(--foreground);font-size:1.5rem;cursor:pointer;padding:.5rem;align-items:center;justify-content:center}.hamburger,.hamburger svg{transition:transform .3s ease}.hamburger svg{width:1.5rem;height:1.5rem}.hamburger.active,.hamburger.active svg{transform:rotate(90deg)}.nav-mobile{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);border-bottom:1px solid var(--border);padding:1rem;flex-direction:column;gap:1rem}.nav-mobile.show{display:flex;border:1px solid var(--border)}.nav-mobile a{color:var(--muted-foreground);text-decoration:none;font-size:.9rem;padding:.75rem 1rem;transition:all .3s ease;border-radius:.5rem;position:relative;overflow:hidden}.nav-mobile a:hover{color:var(--foreground);background:var(--accent);transform:translateX(4px)}.nav-mobile a:before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--foreground);transform:translateX(-100%);transition:transform .3s ease}.nav-mobile a:hover:before{transform:translateX(0)}.footer{position:fixed;bottom:0;left:0;z-index:20;width:100%;padding:.75rem 1rem;background:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);display:none}[data-theme=dark] .footer{background:rgba(22,22,22,.8)}[data-theme=black] .footer{background:rgba(0,0,0,.8)}[data-theme=black] .swap-button,[data-theme=dark] .swap-button{color:#fff}.footer-content{display:flex;align-items:center;justify-content:space-between}.footer-text{font-size:.875rem;text-align:center}.footer-text,.footer-text a{color:var(--muted-foreground)}.footer-text a{text-decoration:none}.footer-text a:hover{text-decoration:underline}.footer-social{margin-top:0;gap:1rem}.footer-social,.footer-social a{display:flex;justify-content:center}.footer-social a{color:var(--muted-foreground);transition:all .2s;align-items:center;width:2rem;height:2rem;border:1px solid var(--border);border-radius:50%;background:var(--background);opacity:.7}.footer-social a:hover{opacity:.4;border-color:var(--foreground);background:var(--accent)}.footer-social svg{width:1rem;height:1rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.container{max-width:1200px;margin:0 auto;min-height:calc(100vh - 120px);justify-content:center;gap:2rem;padding:2rem 1rem calc(2rem + 80px)}.container,.translator-section{display:flex;flex-direction:column}.translator-section{gap:1rem}.language-bar{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius)}.language-select{padding:.75rem 1rem;border:1px solid var(--input);appearance:none;border-radius:calc(var(--radius) - 2px);background:var(--background) url("data:image/svg+xml, %3Csvg width='4' height='2' viewBox='0 0 4 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L4 0L0 0L2 2Z' fill='%23667189'/%3E%3C/svg%3E") no-repeat right .5rem center/.5rem auto;color:var(--foreground);font-size:.9rem;outline:none}.language-select:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(59,130,246,.1)}.swap-lang-btn{display:none}.mobile-language-select{display:none;padding:.5rem .75rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);background:var(--secondary);color:var(--foreground);font-size:.8rem;outline:none;margin-top:.5rem}.translation-container{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.text-areas{display:grid;grid-template-columns:1fr 1fr;position:relative}.swap-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;padding:.75rem;background:var(--card);border:1px solid var(--border);border-radius:50%;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;font-size:1.1rem;pointer-events:auto}.swap-button:hover{background:var(--accent);transform:translate(-50%,-50%) scale(1.05)}.swap-button svg{width:1.25rem;height:1.25rem}.text-area-section{display:flex;flex-direction:column}.tasbr{border-right:1px solid var(--border)}.text-area{width:100%;min-height:300px;padding:1.5rem;border:none;background:transparent;color:var(--foreground);font-size:1rem;font-family:inherit;resize:none;outline:none;line-height:1.6;flex:1;transition:all .3s ease}.text-area::placeholder{color:var(--muted-foreground);transition:opacity .3s ease}.text-area:focus{background:var(--accent)}.text-area:focus::placeholder{opacity:.7}.area-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:var(--muted)}.char-count{font-size:.8rem;color:var(--muted-foreground)}.action-buttons{display:flex;gap:.5rem}.button{padding:.5rem;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);background:var(--background);color:var(--foreground);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.button:hover:not(:disabled){background:var(--accent);transform:translateY(-1px)}.button:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.button-enabled:hover{background:var(--accent);border-color:var(--ring)}.button svg{width:1rem;height:1rem}.skeleton-loading{position:absolute;top:0;left:0;right:0;bottom:0;padding:1.5rem;background:var(--card);display:none;flex-direction:column;justify-content:flex-start;z-index:5}.skeleton-loading.active{display:flex}.skeleton-line{height:1.5rem;background:linear-gradient(90deg,var(--muted) 25%,var(--border) 50%,var(--muted) 75%);background-size:200% 100%;border-radius:8px;margin-bottom:1.2rem;animation:skeleton-shimmer 2s ease-in-out infinite;opacity:0;animation-fill-mode:forwards}.skeleton-line:nth-child(2n){animation-duration:2.4s}.skeleton-line:nth-child(3n){animation-duration:1.6s}.skeleton-line.short{width:35%}.skeleton-line.medium{width:75%}.skeleton-line.long{width:90%}.skeleton-sentence{height:1.5rem;background:linear-gradient(90deg,var(--muted) 25%,var(--border) 50%,var(--muted) 75%);background-size:200% 100%;border-radius:8px;margin-bottom:1.2rem;animation:skeleton-shimmer 2s ease-in-out infinite;opacity:0;animation-fill-mode:forwards;width:85%}.skeleton-sentence:nth-child(2n){width:92%}.skeleton-sentence:nth-child(3n){width:78%}.skeleton-sentence:nth-child(4n){width:88%}[data-theme=dark] .skeleton-line,[data-theme=dark] .skeleton-sentence{background:linear-gradient(90deg,#262626 25%,#404040 50%,#262626 75%)}[data-theme=black] .skeleton-line,[data-theme=black] .skeleton-sentence{background:linear-gradient(90deg,#1a1a1a 25%,#333 50%,#1a1a1a 75%)}@keyframes skeleton-shimmer{0%{background-position:200% 0;opacity:0}15%{opacity:.7}50%{opacity:.9}85%{opacity:.7}to{background-position:-200% 0;opacity:.5}}@media (max-width:768px){.nav-desktop{display:none}.hamburger{display:flex}.header{position:relative;padding:.5rem 0}.header-content{flex-direction:row;justify-content:space-between;align-items:center}.logo-text{display:none}.footer{display:none!important}.container{min-height:calc(100vh - 60px);justify-content:flex-start;outline:none;padding:2rem 1rem calc(2rem + 120px)}.language-bar{display:none}.mobile-language-select{display:block;margin:0 0 .75rem;padding:.75rem;font-size:1rem;min-height:44px;width:100%;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--foreground);outline:none}.translator-section{display:flex;flex-direction:column;gap:1rem;height:calc(100vh - 4rem);padding-bottom:0}.translation-container{outline:none}.text-area-section,.text-areas,.translation-container{flex:1;display:flex;flex-direction:column}.text-area-section{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}.text-area-section .mobile-language-select{display:block;margin:0;border:none;border-bottom:1px solid var(--border);border-radius:0;outline:none;transition:all .3s ease;background:var(--background) url("data:image/svg+xml, %3Csvg width='4' height='2' viewBox='0 0 4 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L4 0L0 0L2 2Z' fill='%23667189'/%3E%3C/svg%3E") no-repeat right .5rem center/.5rem auto;appearance:none;color:var(--foreground);font-size:.9rem;padding:.75rem 1rem}.text-area-section .mobile-language-select:focus{background:var(--card);border-bottom-color:var(--ring);background:var(--background) url("data:image/svg+xml, %3Csvg width='4' height='2' viewBox='0 0 4 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 2L4 0L0 0L2 2Z' fill='%23667189'/%3E%3C/svg%3E") no-repeat right .5rem center/.5rem auto;appearance:none;color:var(--foreground);font-size:.9rem;padding:.75rem 1rem}.swap-button{position:static;transform:none;width:3rem;height:3rem;margin:.5rem auto;padding:0;border-radius:50%;border:1px solid var(--border);background:var(--card);order:1;flex-shrink:0;outline:none;pointer-events:auto;align-self:center;display:flex;align-items:center;justify-content:center}.swap-button:hover{background:var(--accent);transform:scale(1.05)}.text-area-section:first-child{order:0}.text-area-section:last-child{order:2}.text-area{min-height:unset;max-height:unset;height:100%;padding:1rem;font-size:1rem;line-height:1.5;border:none;flex:1;resize:none;outline:none}.area-footer{flex-direction:row;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--border);flex-shrink:0;align-items:center;justify-content:space-between}.action-buttons{width:auto;justify-content:flex-end;gap:.75rem;flex-shrink:0}.button{flex:none;max-width:none;min-height:36px;padding:.75rem;border-radius:calc(var(--radius) - 2px);outline:none;min-width:3rem;transition:all .3s ease}.button svg{width:1rem;height:1rem}.char-count{font-size:.85rem;flex-shrink:0}.swap-lang-btn{display:none}}@media (max-width:480px){.container{padding:1rem .75rem;outline:none}.translator-section{height:calc(100vh - 5.5em)}.text-area{padding:.75rem;font-size:1rem;outline:none}.area-footer{padding:.5rem .75rem;gap:.5rem}.button{padding:.5rem;min-height:32px;outline:none;min-width:2.75rem}.button svg{width:.875rem;height:.875rem}.char-count{font-size:.8rem}.translation-container{background:transparent;border:none}}@media (min-width:768px){.footer{display:block}.footer-content{flex-direction:row;justify-content:space-between;align-items:center;padding:0 1.5rem}.footer-social{margin-top:0}}.custom-select{position:relative;width:100%}.select-trigger{width:100%;padding:.75rem 1rem;border:1px solid var(--input);border-radius:calc(var(--radius) - 2px);background:var(--background);color:var(--foreground);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .3s ease;outline:none;min-height:44px}.select-trigger.active,.select-trigger:hover{border-color:var(--ring)}.select-trigger.active{box-shadow:0 0 0 3px rgba(59,130,246,.1)}.select-arrow{width:1rem;height:1rem;transition:transform .3s ease;flex-shrink:0}.select-trigger.active .select-arrow{transform:rotate(180deg)}.select-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);box-shadow:0 10px 25px -5px rgba(0,0,0,.1),0 10px 10px -5px rgba(0,0,0,.04);z-index:1000;max-height:300px;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .3s ease;margin-top:4px}.select-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}.select-search{padding:.75rem;border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.5rem}.select-search input{width:100%;padding:.5rem;border:1px solid var(--input);border-radius:calc(var(--radius) - 4px);background:var(--background);color:var(--foreground);font-size:.875rem;outline:none;transition:all .3s ease}.select-search input:focus{border-color:var(--ring);box-shadow:0 0 0 2px rgba(59,130,246,.1)}.select-close{display:none;padding:.5rem;background:transparent;border:none;color:var(--muted-foreground);cursor:pointer;border-radius:calc(var(--radius) - 4px);transition:all .3s ease;flex-shrink:0}.select-close:hover{background:var(--accent);color:var(--foreground)}.select-close svg{width:1.25rem;height:1.25rem}.select-options{max-height:200px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.select-options::-webkit-scrollbar{width:6px}.select-options::-webkit-scrollbar-track{background:transparent}.select-options::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;transition:background .3s ease}.select-options::-webkit-scrollbar-thumb:hover{background:var(--muted-foreground)}[data-theme=dark] .select-options::-webkit-scrollbar-thumb{background:#404040}[data-theme=dark] .select-options::-webkit-scrollbar-thumb:hover{background:#525252}[data-theme=black] .select-options::-webkit-scrollbar-thumb{background:#333}[data-theme=black] .select-options::-webkit-scrollbar-thumb:hover{background:#404040}.select-option{width:100%;padding:.75rem;border:none;background:transparent;color:var(--foreground);text-align:left;cursor:pointer;transition:all .2s ease;font-size:.875rem;display:flex;align-items:center;position:relative}.select-option svg{flex-shrink:0}.select-option:hover{background:var(--accent)}.select-option.selected{background:var(--ring);color:#fff;font-weight:500}.select-option.selected:after{content:"✓";margin-left:auto;font-weight:700}.mobile-select,.select-option.hidden{display:none}@media (max-width:768px){.language-bar{display:none}.mobile-select{display:block;margin:0 0 .75rem}.mobile-select .select-trigger{padding:.75rem 1rem;font-size:1rem;min-height:44px;border-radius:0;border:none;border-bottom:1px solid var(--border)}.mobile-select .select-dropdown{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;max-height:100vh;border-radius:0;margin-top:0;box-shadow:none;border:none;z-index:9999;background:var(--background)}.mobile-select .select-dropdown.show{transform:translateY(0)}.mobile-select .select-dropdown:not(.show){transform:translateY(100%)}.mobile-select .select-search{padding:1rem;border-bottom:1px solid var(--border);background:var(--card);position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:.75rem}.mobile-select .select-search input{font-size:1rem;padding:.75rem;flex:1}.mobile-select .select-close{display:flex;align-items:center;justify-content:center;padding:.75rem;background:var(--secondary);border:1px solid var(--border);border-radius:calc(var(--radius) - 2px)}.mobile-select .select-options{max-height:calc(100vh - 120px);padding:0}.mobile-select .select-option{padding:1rem;font-size:1rem;border-bottom:1px solid var(--border)}.mobile-select .select-option:last-child{border-bottom:none}}.file-upload-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(59,130,246,.1);border:2px dashed #3b82f6;border-radius:12px;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;background:var(--card)}.file-upload-overlay.drag-over{background:rgba(59,130,246,.2);border-color:#1d4ed8}.file-upload-overlay .upload-content{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.file-upload-overlay .upload-icon{width:48px;height:48px;color:#3b82f6}.file-upload-overlay .upload-text{font-size:18px;font-weight:600;color:#1d4ed8;margin:0}.file-upload-overlay .upload-hint{font-size:14px;color:#3b82f6}.text-area-section{position:relative}.file-upload-area{border:2px dashed #e5e7eb;border-radius:12px;padding:20px;text-align:center;margin-bottom:16px;transition:all .3s ease;cursor:pointer;background:#f9fafb}.file-upload-area.drag-over,.file-upload-area:hover{border-color:#3b82f6;background:#eff6ff}.file-upload-area.drag-over{transform:scale(1.02)}.upload-content{display:flex;flex-direction:column;align-items:center;gap:8px}.upload-icon{width:32px;height:32px;color:#6b7280}.upload-text{font-size:14px;font-weight:500;color:#374151;margin:0}.upload-hint{font-size:12px;color:#6b7280}.file-info{display:none;align-items:center;justify-content:space-between;background:#f3f4f6;border-radius:8px;padding:12px}[data-theme=dark] .file-upload-area{border-color:#374151;background:#1f2937}[data-theme=dark] .file-upload-area.drag-over,[data-theme=dark] .file-upload-area:hover{border-color:#60a5fa;background:#1e3a8a}[data-theme=dark] .upload-icon{color:#9ca3af}[data-theme=dark] .upload-text{color:#f3f4f6}[data-theme=dark] .upload-hint{color:#9ca3af}[data-theme=dark] .file-info{background:#374151}[data-theme=dark] .file-name{color:#f3f4f6}[data-theme=dark] .remove-file{color:#9ca3af}[data-theme=dark] .remove-file:hover{background:#4b5563;color:#f3f4f6}.container.menu-blur{filter:blur(5px);transition:filter .3s ease}.button.recording{background:#dc2626;border-color:#dc2626;color:#fff;animation:pulse 2s infinite}.button.recording:hover{background:#b91c1c;border-color:#b91c1c;transform:translateY(-1px)}.button.mic-disabled{opacity:.5;cursor:not-allowed;background:var(--muted);border-color:var(--border)}.button.mic-disabled:hover{background:var(--muted);transform:none}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.7)}70%{box-shadow:0 0 0 10px rgba(220,38,38,0)}to{box-shadow:0 0 0 0 rgba(220,38,38,0)}}#clearBtn{display:none;opacity:0;transform:scale(.8);transition:all .3s ease}#clearBtn.show{display:flex;opacity:1;transform:scale(1)}@media (max-width:768px){body,html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}body{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}}.select-trigger span{display:flex;align-items:center;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-trigger span svg{flex-shrink:0;margin-right:.5rem}.select-trigger span span{overflow:hidden;text-overflow:ellipsis}@media (max-width:768px){.mobile-select .select-trigger span{display:flex;align-items:center;width:100%}.mobile-select .select-trigger span svg{flex-shrink:0;margin-right:.5rem}}