*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .3s ease,color .3s ease;background:var(--bg-body);color:var(--text-primary)}:root{--bg-body: hsl(var(--h), 42%, 90%);--bg-surface: hsl(var(--h), 44%, 97%);--bg-surface-hover: hsl(var(--h), 40%, 94%);--bg-input: hsl(var(--h), 46%, 96%);--bg-overlay: rgba(0, 0, 0, .35);--bg-drawer: #ffffff;--bg-swatch-active: #ffffff;--text-primary: #1a1a1a;--text-secondary: #64646a;--text-tertiary: #8c8ca0;--text-placeholder: #c0c0c0;--text-inverse: #ffffff;--text-accent: var(--accent);--border-color: hsl(var(--h), 28%, 84%);--border-light: hsl(var(--h), 30%, 91%);--border-input: hsl(var(--h), 34%, 78%);--shadow-sm: 0 2px 8px hsla(var(--h), 28%, 20%, .08);--shadow-md: 0 8px 24px hsla(var(--h), 28%, 18%, .12);--h: 210;--s: 48%;--l: 46%;--accent: hsl(var(--h), var(--s), var(--l));--accent-hover: hsl(var(--h), var(--s), calc(var(--l) - 8%));--accent-active: hsl(var(--h), var(--s), calc(var(--l) - 14%));--accent-subtle: hsl(var(--h), calc(var(--s) + 8%), 93%);--accent-soft: hsla(var(--h), calc(var(--s) + 8%), calc(var(--l) + 8%), .15);--accent-text: hsl(var(--h), var(--s), var(--l));--tr-fast: .15s ease;--tr-med: .25s ease}[data-theme=dark]{--bg-body: hsl(var(--h), 28%, 9%);--bg-surface: hsl(var(--h), 24%, 15%);--bg-surface-hover: hsl(var(--h), 24%, 18%);--bg-input: hsl(var(--h), 24%, 17%);--bg-overlay: rgba(0, 0, 0, .6);--bg-drawer: hsl(var(--h), 18%, 13%);--bg-swatch-active: hsl(var(--h), 18%, 13%);--text-primary: #e0e0e0;--text-secondary: #a2a4b3;--text-tertiary: #717487;--text-placeholder: #555555;--text-inverse: #121212;--text-accent: hsl(var(--h), calc(var(--s) + 10%), 60%);--border-color: hsl(var(--h), 22%, 25%);--border-light: hsl(var(--h), 22%, 20%);--border-input: hsl(var(--h), 22%, 30%);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .24);--shadow-md: 0 8px 28px rgba(0, 0, 0, .36);--accent: hsl(var(--h), calc(var(--s) + 10%), 58%);--accent-hover: hsl(var(--h), calc(var(--s) + 10%), 52%);--accent-active: hsl(var(--h), calc(var(--s) + 10%), 46%);--accent-subtle: hsl(var(--h), calc(var(--s) + 4%), 17%);--accent-soft: hsla(var(--h), calc(var(--s) + 10%), 58%, .18);--accent-text: hsl(var(--h), calc(var(--s) + 10%), 62%)}#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg-body);color:var(--text-primary);transition:background-color var(--tr-med),color var(--tr-med)}#header{display:flex;align-items:center;justify-content:space-between;padding:5px 20px;border-bottom:1px solid var(--border-light);background:var(--bg-surface);position:sticky;top:0;z-index:10;transition:background-color var(--tr-med),border-color var(--tr-med)}.logo{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--accent);transition:color var(--tr-med)}.logo-icon{flex-shrink:0}.header-actions{display:flex;gap:6px}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:none;border-radius:4px;background:transparent;color:var(--text-secondary);cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast)}.icon-btn:hover,.icon-btn:focus-visible{background:var(--accent-subtle);color:var(--accent);outline:none}.icon-btn:active{background:var(--accent-soft)}.icon-btn:disabled{opacity:.4;cursor:not-allowed}#main{flex:1;padding:10px 16px 20px;display:flex;flex-direction:column;gap:10px}.language-selector{display:flex;align-items:center;gap:8px}.lang-select-wrapper{flex:1;min-width:0;position:relative}.lang-select-wrapper select{width:100%;padding:10px 30px 10px 12px;font-size:14px;font-weight:500;color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color var(--tr-fast),background var(--tr-med),color var(--tr-med);font-family:inherit}.lang-select-wrapper select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.lang-select-wrapper:after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-tertiary);pointer-events:none}#swap-btn{flex-shrink:0;color:var(--accent);background:var(--accent-soft);width:46px;height:46px;border-radius:6px}#swap-btn svg{width:22px;height:22px}.lang-select-wrapper.loading .custom-select{border-color:var(--accent);background-image:linear-gradient(90deg,transparent 0%,var(--accent-subtle) 50%,transparent 100%);background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.input-area{position:relative;height:310px;display:flex;flex-direction:column}.input-field-shell{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}#source-text{width:100%;padding:12px 72px 12px 14px;font-size:15px;line-height:1.5;font-family:inherit;color:var(--text-primary);background:var(--bg-input);border:1px solid var(--border-input);border-radius:4px;resize:none;transition:border-color var(--tr-fast),background var(--tr-med),color var(--tr-med),box-shadow var(--tr-fast);flex:1;height:0;overflow-y:auto;position:relative;z-index:1;box-shadow:inset 0 1px 0 var(--accent-soft)}#source-text:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}#source-text::placeholder{color:color-mix(in srgb,var(--text-placeholder) 72%,var(--accent) 28%)}.ocr-status{margin-top:8px;padding:0 2px;font-size:12px;line-height:1.4;color:var(--text-secondary)}.ocr-status.error{color:var(--accent-text)}.ocr-preview{position:absolute;left:10px;bottom:10px;z-index:2;width:48px;height:48px;border-radius:6px;overflow:hidden;border:1px solid var(--accent-soft);background:var(--bg-surface);box-shadow:var(--shadow-sm)}.ocr-preview img{width:100%;height:100%;object-fit:cover;display:block}.input-actions{position:absolute;display:flex;gap:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .2s ease}.input-actions.pos-top-right{top:6px;right:6px}.input-actions.pos-bottom-right{bottom:60px;right:6px}.input-actions.pos-bottom-left{bottom:60px;left:6px}.input-actions.visible{opacity:1;pointer-events:auto}.input-actions:has(.speaking),.input-actions:has(.loading){opacity:1;pointer-events:auto}.input-action-btn{width:34px;height:34px;border-radius:6px;border:none;background:transparent;color:var(--text-tertiary)}.input-action-btn:hover{background:var(--accent-subtle);color:var(--accent)}.input-action-btn.speaking{color:var(--accent);background:var(--accent-subtle)}.input-action-btn.loading{color:var(--text-tertiary);pointer-events:none}.input-action-btn.unsupported{color:var(--text-secondary)}.ocr-upload-tooltip{position:absolute;top:42px;right:0;z-index:4;width:190px;padding:8px 10px;font-size:12px;line-height:1.35;color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--accent-soft);border-radius:6px;box-shadow:var(--shadow-md)}.tts-spinner{animation:tts-spin 1s linear infinite}@keyframes tts-spin{to{transform:rotate(360deg)}}#translate-btn{margin-top:10px}.primary-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 20px;flex-shrink:0;font-size:15px;font-weight:600;font-family:inherit;letter-spacing:.01em;color:var(--text-inverse);background:var(--accent);border:none;border-radius:4px;cursor:pointer;transition:background var(--tr-fast),opacity var(--tr-fast),transform var(--tr-fast)}.primary-btn:hover,.primary-btn:focus-visible{background:var(--accent-hover);outline:none}.primary-btn:active{background:var(--accent-active);transform:translateY(1px)}.primary-btn:disabled{opacity:.5;cursor:not-allowed}.primary-btn.loading{pointer-events:none;opacity:.7}.primary-btn.loading svg{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.output-area{position:relative;background:var(--bg-surface);border:1px solid var(--accent-soft);border-radius:4px;height:310px;display:flex;flex-direction:column;transition:background var(--tr-med),border-color var(--tr-med)}.output-actions{position:absolute;display:flex;gap:0;z-index:2;opacity:0;pointer-events:none;transition:opacity .2s ease}.output-actions.pos-top-right{top:6px;right:6px}.output-actions.pos-bottom-right{bottom:6px;right:6px}.output-actions.pos-bottom-left{bottom:6px;left:6px}.output-actions.visible{opacity:1;pointer-events:auto}.output-actions:has(.speaking),.output-actions:has(.loading),.output-actions:has(.copied){opacity:1;pointer-events:auto}.output-action-btn{width:28px;height:28px;border:none;border-radius:6px;background:transparent;color:var(--text-tertiary)}.output-action-btn:hover{background:var(--accent-subtle);color:var(--accent)}.output-action-btn.copied{color:var(--accent)}.output-action-btn.speaking{color:var(--accent);background:var(--accent-subtle)}.output-action-btn.loading{color:var(--text-tertiary);pointer-events:none}.translation-content{flex:1;padding:14px;font-size:15px;line-height:1.6;color:var(--text-primary);min-height:0;overflow-y:auto;word-wrap:break-word;transition:color var(--tr-med)}.translation-content .placeholder{color:color-mix(in srgb,var(--text-placeholder) 72%,var(--accent) 28%);font-style:italic}.pronunciation{margin-top:8px;font-size:13px;color:var(--text-tertiary);font-family:Georgia,Times New Roman,serif;font-style:italic}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-overlay);z-index:90;opacity:0;visibility:hidden;transition:opacity var(--tr-med),visibility var(--tr-med)}.overlay.open{opacity:1;visibility:visible}.drawer{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:85vw;background:var(--bg-drawer);z-index:100;display:flex;flex-direction:column;transform:translate(100%);transition:transform var(--tr-med),background var(--tr-med);box-shadow:-4px 0 20px #0000001f;overflow:visible}.drawer.open{transform:translate(0)}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border-light);transition:border-color var(--tr-med);gap:12px}.drawer-header h2{font-size:18px;font-weight:600;color:var(--text-primary);transition:color var(--tr-med)}.drawer-tabs{display:flex;gap:4px;flex:1}.drawer-tab{padding:6px 14px;font-size:14px;font-weight:500;font-family:inherit;color:var(--text-secondary);background:transparent;border:none;border-radius:4px;cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast),box-shadow var(--tr-fast)}.drawer-tab:hover{color:var(--accent);background:var(--accent-subtle)}.drawer-tab.active{color:var(--text-inverse);background:var(--accent);box-shadow:var(--shadow-sm)}.history-section-header{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);padding:6px 0 2px;margin-top:4px}.history-divider{height:1px;background:var(--border-light);margin:4px 0}.history-empty{padding:40px 20px;text-align:center;font-size:14px;color:var(--text-tertiary)}.history-list{padding:8px 20px;display:flex;flex-direction:column;gap:10px}.history-item{position:relative;padding:12px 14px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px;transition:border-color var(--tr-fast),background var(--tr-fast)}.history-item:hover{border-color:var(--accent);background:var(--accent-subtle)}.history-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.history-langs{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}.history-time{font-size:11px;color:var(--text-tertiary)}.history-source{font-size:13px;color:var(--text-secondary);margin-bottom:4px;word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.history-translated{font-size:12px;color:var(--text-tertiary);word-wrap:break-word}.history-item .history-source,.history-item .history-translated{padding-right:78px}.history-item-actions{position:absolute;bottom:8px;right:8px;display:flex;align-items:center;gap:2px}.history-copy-btn,.history-tts-btn,.history-favorite-btn,.history-delete{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-tertiary);cursor:pointer;border-radius:4px;opacity:0;visibility:hidden;transition:background var(--tr-fast),color var(--tr-fast),opacity var(--tr-fast),visibility var(--tr-fast)}.history-item:hover .history-copy-btn,.history-item:hover .history-tts-btn,.history-item:hover .history-favorite-btn,.history-item:hover .history-delete,.history-copy-btn:focus-visible,.history-tts-btn:focus-visible,.history-favorite-btn:focus-visible,.history-delete:focus-visible{opacity:1;visibility:visible}.history-copy-btn:hover,.history-tts-btn:hover,.history-favorite-btn:hover,.history-delete:hover{background:var(--accent-subtle)}.history-copy-btn.copied,.history-tts-btn.speaking{color:var(--accent)}.history-item-actions:has(.speaking),.history-item-actions:has(.copied){opacity:1;visibility:visible}.history-item-actions:has(.speaking) .history-tts-btn,.history-item-actions:has(.speaking) .history-favorite-btn,.history-item-actions:has(.speaking) .history-delete,.history-item-actions:has(.copied) .history-copy-btn,.history-item-actions:has(.copied) .history-favorite-btn,.history-item-actions:has(.copied) .history-delete{opacity:1;visibility:visible}.history-favorite-btn{padding:2px}.history-favorite-btn.favorited{color:var(--accent)}.history-favorite-btn.favorited:hover{color:var(--accent-hover)}.history-delete{font-size:18px;line-height:1}.history-delete:hover{color:#c33}.history-clear-btn{padding:10px 12px;font-size:13px;font-weight:500;font-family:inherit;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast),border-color var(--tr-fast)}.history-clear-btn:hover{background:var(--accent-subtle);color:#c33;border-color:#c33}.history-clear-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px}.history-clear-text{flex:1;font-size:12px;font-weight:500;color:var(--text-secondary)}.history-clear-yes,.history-clear-no{padding:4px 10px;font-size:12px;font-weight:600;font-family:inherit;border:1px solid var(--border-color);border-radius:4px;cursor:pointer;transition:background var(--tr-fast)}.history-clear-yes{background:var(--accent);color:var(--text-inverse)}.history-clear-yes:hover{background:var(--accent-hover)}.history-clear-no{background:var(--bg-surface);color:var(--text-secondary)}.history-clear-no:hover{background:var(--bg-surface-hover)}.about-section{text-align:center;padding:24px 20px}.about-logo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:14px;color:var(--text-primary)}.about-name{font-size:18px;font-weight:700;letter-spacing:.02em}.about-description{font-size:13px;line-height:1.6;color:var(--text-secondary);margin-bottom:14px}.about-credit{font-size:12px;color:var(--text-tertiary)}.drawer-body{flex:1;overflow-y:auto;padding:8px 0 24px;-webkit-overflow-scrolling:touch}.settings-section{padding:12px 20px;overflow:visible}.settings-section+.settings-section{border-top:1px solid var(--border-light);margin-top:6px;padding-top:12px;transition:border-color var(--tr-med)}.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-tertiary);margin-top:6px;margin-bottom:10px;transition:color var(--tr-med)}.setting-row{display:flex;flex-direction:column;align-items:stretch;padding:8px 0;gap:6px}.setting-row-toggle{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.setting-label{font-size:13px;font-weight:500;color:var(--text-secondary);transition:color var(--tr-med)}.setting-row-toggle .setting-label{display:inline-flex;align-items:center}.setting-label .setting-tooltip{margin-left:4px}.setting-hint{font-size:12px;color:var(--text-secondary);padding:4px 0 8px;font-style:italic}.setting-label-wrap{display:flex;align-items:center;gap:6px}.setting-tooltip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;cursor:help}.setting-tooltip svg{color:var(--text-tertiary);transition:color var(--tr-fast)}.setting-tooltip:hover svg{color:var(--accent)}.setting-tooltip-text{position:absolute;width:200px;padding:8px 10px;font-size:12px;font-weight:400;line-height:1.4;color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--accent-soft);border-radius:4px;box-shadow:var(--shadow-md);pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-100%);z-index:200;text-align:left}#global-tooltip{position:absolute;z-index:200}.setting-tooltip-text:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border:5px solid transparent;border-top-color:var(--border-color)}.setting-tooltip-text:before{content:"";position:absolute;top:calc(100% - 1px);left:50%;transform:translate(-50%);border:4px solid transparent;border-top-color:var(--accent-subtle);z-index:1}.theme-toggle{display:flex;border:1px solid var(--accent-soft);border-radius:4px;overflow:hidden;transition:border-color var(--tr-med)}.theme-option{display:flex;align-items:center;gap:5px;padding:7px 16px;font-size:13px;font-family:inherit;font-weight:500;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:background var(--tr-fast),color var(--tr-fast),box-shadow var(--tr-fast)}.theme-option:hover{background:var(--accent-subtle);color:var(--accent)}.theme-option:first-child{border-right:1px solid var(--border-color);transition:border-color var(--tr-med)}.theme-option.active{background:var(--accent);color:var(--text-inverse)}.theme-option.active+.theme-option{border-color:transparent}.accent-picker{position:relative;width:140px;flex-shrink:0}.desktop-only{display:none}.delay-slider{display:flex;align-items:center;gap:10px;width:100%}.delay-slider input[type=range]{flex:1;height:4px;background:var(--border-color);border-radius:2px;cursor:pointer;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.delay-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#fff 3px,var(--accent) 3px);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer;margin-top:-8px}.delay-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,#fff 3px,var(--accent) 3px);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer}.delay-slider input[type=range]::-webkit-slider-runnable-track{height:4px;background:var(--border-color);border-radius:2px}.delay-slider input[type=range]::-moz-range-track{height:4px;background:var(--border-color);border-radius:2px}.delay-value{font-size:13px;font-weight:500;color:var(--text-secondary);min-width:32px;text-align:right}#accent-hue{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:28px;background:transparent;position:relative;z-index:2;cursor:pointer;margin:0}#accent-hue::-webkit-slider-runnable-track{height:28px}#accent-hue::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle,#fff 3px,var(--accent) 3px);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer;transition:background var(--tr-fast);margin-top:6px}#accent-hue::-moz-range-thumb{width:22px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff 3px,var(--accent) 3px);border:none;box-shadow:0 1px 4px #0000004d;cursor:pointer;transition:background var(--tr-fast)}.hue-bar{position:absolute;top:4px;right:0;bottom:4px;left:0;border-radius:14px;background:linear-gradient(to right,#c33,#cc8033,#cc3,#3c3,#3cc,#33c,#c3c,#c33);pointer-events:none;z-index:1}.accent-swatches{display:flex;gap:6px;padding-top:4px;padding-bottom:4px;flex-wrap:wrap}.swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;background:hsl(var(--swatch-h),55%,50%);cursor:pointer;transition:border-color var(--tr-fast),transform var(--tr-fast);flex-shrink:0}.swatch:hover{transform:scale(1.12)}.swatch.active{border-color:var(--text-primary);box-shadow:0 0 0 1px var(--bg-swatch-active)}.text-input{width:100%;min-width:0;padding:7px 10px;font-size:13px;font-family:monospace;color:var(--text-primary);background:var(--bg-input);border:1px solid var(--border-input);border-radius:4px;transition:border-color var(--tr-fast),background var(--tr-med),color var(--tr-med)}.text-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.text-input::placeholder{color:var(--text-placeholder)}.text-input:disabled{opacity:.5;cursor:not-allowed}.select-wrapper{position:relative;min-width:0;width:100%}.select-wrapper select{padding:7px 30px 7px 10px;font-size:13px;font-family:inherit;color:var(--text-primary);background:var(--bg-input);border:1px solid var(--border-input);border-radius:4px;-moz-appearance:none;appearance:none;-webkit-appearance:none;cursor:pointer;width:100%;transition:border-color var(--tr-fast),background var(--tr-med),color var(--tr-med)}.select-wrapper select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.select-wrapper:after{content:"";position:absolute;right:11px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--text-tertiary);pointer-events:none}.custom-select{position:relative;width:100%;min-height:40px;padding:10px 30px 10px 12px;font-size:14px;font-weight:500;font-family:inherit;color:var(--text-primary);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px;cursor:pointer;outline:none;transition:border-color var(--tr-fast),background var(--tr-med),color var(--tr-med);-webkit-user-select:none;user-select:none;display:flex;align-items:center}.custom-select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.custom-select.open{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-subtle)}.custom-select-value{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.custom-select-value.placeholder{color:var(--text-placeholder)}.custom-select-arrow{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-tertiary);pointer-events:none;transition:transform .15s ease}.custom-select.open .custom-select-arrow{transform:translateY(-50%) rotate(180deg)}.custom-select-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px;box-shadow:var(--shadow-md);z-index:50;overflow:hidden;padding:0}.custom-select-search{width:100%;display:block;padding:11px 12px;font-size:13px;font-weight:500;font-family:inherit;color:var(--primary-light);background:var(--bg-input);border:none;border-bottom:1px solid var(--border-light);border-radius:0;outline:none;box-shadow:inset 0 1px 0 var(--accent-soft);transition:border-color var(--tr-fast),background var(--tr-fast),box-shadow var(--tr-fast)}.custom-select-search:focus{box-shadow:inset 0 -1px 0 var(--border-light),inset 0 1px 0 var(--primary-light)}.custom-select-search::placeholder{color:var(--text-placeholder)}.custom-select-list{max-height:220px;overflow-y:auto;margin:0;padding:4px 0 0;list-style:none;border-radius:0 0 10px 10px}.custom-select-divider{height:1px;margin:4px 12px;background:var(--border-light)}.custom-select-option{padding:8px 12px;font-size:14px;font-weight:500;color:var(--text-primary);cursor:pointer;transition:background .1s ease}.custom-select-option.highlighted{background:var(--accent-subtle)}.custom-select-option.active{color:var(--accent);font-weight:600}.custom-select-empty{padding:8px 12px;font-size:13px;color:var(--text-tertiary);font-style:italic}.custom-select-list::-webkit-scrollbar{width:4px}.custom-select-list::-webkit-scrollbar-track{background:transparent}.custom-select-list::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.select-wrapper .custom-select{padding:7px 28px 7px 10px;font-size:13px}.lang-select-wrapper .custom-select{width:100%}.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;flex-shrink:0}.toggle input{position:absolute;opacity:0;width:0;height:0}.toggle-track{position:relative;width:44px;height:24px;background:var(--border-color);border-radius:12px;transition:background var(--tr-fast);flex-shrink:0}.toggle input:checked+.toggle-track{background:var(--accent)}.toggle-indicator{position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;transition:transform var(--tr-fast);box-shadow:0 1px 3px #0003}.toggle input:checked+.toggle-track .toggle-indicator{transform:translate(20px)}.drawer-body::-webkit-scrollbar{width:4px}.drawer-body::-webkit-scrollbar-track{background:transparent}.drawer-body::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.toast-container{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:200;width:calc(100% - 32px);max-width:400px}.toast{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--bg-surface);border:1px solid var(--border-color);border-radius:4px;box-shadow:var(--shadow-md);font-size:14px;color:var(--text-primary);transform:translateY(20px);opacity:0;transition:transform .25s ease,opacity .25s ease}.toast.show{transform:translateY(0);opacity:1}.toast.error{border-left:3px solid hsl(0,60%,50%)}.toast.success{border-left:3px solid var(--accent)}.toast-close{background:none;border:none;color:var(--text-tertiary);cursor:pointer;font-size:18px;line-height:1;padding:2px;flex-shrink:0}.translation-content.loading .placeholder{display:block;color:transparent;background:linear-gradient(90deg,var(--border-light) 25%,var(--bg-surface-hover) 50%,var(--border-light) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;-webkit-background-clip:text;background-clip:text}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.translation-content:not(.loading) .result-text{animation:fadeSlideIn .25s ease}@media(min-width:900px){#app{max-width:1200px;padding:0 24px}#header{padding:8px 17px;border-radius:0 0 8px 8px;width:100vw;margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%)}.logo{font-size:19px}.header-actions{gap:8px}.desktop-only{display:flex}#main{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;gap:12px;padding:10px 0 24px;align-items:stretch}#main.fields-center{align-content:center;grid-template-rows:auto auto}#main.fields-center .input-area,#main.fields-center .output-area{min-height:17vh}#main .language-selector{grid-column:1 / -1;width:100%}#main .input-area{grid-column:1;grid-row:2;min-height:17px;max-height:17vh;height:auto}#main .output-area{grid-column:2;grid-row:2;min-height:17px;max-height:17vh;height:auto}#translate-btn{position:absolute;bottom:6px;left:6px;right:6px;z-index:3;padding:10px 20px;border-radius:4px;width:auto;min-width:unset;max-width:unset}#source-text{height:auto;min-height:40px;font-size:18px;padding:14px 76px 52px 16px;border-radius:6px}.translation-content{min-height:40px;font-size:18px;padding:16px}.output-area{border-radius:6px}.input-actions.pos-top-right,.output-actions.pos-top-right{top:8px;right:8px}.input-actions.pos-bottom-right,.output-actions.pos-bottom-right{bottom:8px;right:8px}.input-actions.pos-bottom-left,.output-actions.pos-bottom-left{bottom:8px;left:8px}.input-action-btn,.output-action-btn{width:32px;height:32px}.custom-select{padding:11px 32px 11px 14px;font-size:15px;border-radius:6px}#swap-btn{width:46px;height:46px;border-radius:6px}#swap-btn svg{width:22px;height:22px}.custom-select-dropdown,.custom-select-list{max-height:320px}.drawer{width:440px;max-width:45vw}.drawer .drawer-header{padding:16px 24px}.drawer .drawer-tab{padding:8px 18px;font-size:15px}.drawer .drawer-body{padding:12px 0 32px}.drawer .settings-section{padding:14px 24px}.drawer .section-title{font-size:12px;margin-bottom:12px}.drawer .setting-row{padding:10px 0;gap:8px}.drawer .setting-label{font-size:14px}.drawer .setting-hint{font-size:13px}.drawer .text-input{padding:9px 12px;font-size:14px;border-radius:6px}.drawer .select-wrapper .custom-select{padding:9px 28px 9px 12px;font-size:14px;min-height:42px;border-radius:6px}.drawer .toggle-track{width:48px;height:26px}.drawer .toggle-indicator{width:20px;height:20px}.drawer .toggle input:checked+.toggle-track .toggle-indicator{transform:translate(22px)}.toast-container{max-width:480px}.history-list{padding:10px 24px}.history-item{padding:14px 16px}.pronunciation{font-size:14px}.drawer .about-section{padding:32px 28px}.drawer .about-logo-icon{width:64px;height:64px}.drawer .about-name{font-size:22px}.drawer .about-description{font-size:15px}.drawer .about-credit{font-size:14px}}