@import"https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=Source+Sans+3:wght@400;500;600&display=swap";:root{--bg-primary: #FDF6E3;--bg-secondary: #FAF3E0;--bg-card: #FFFDF7;--text-primary: #3D3D3D;--text-secondary: #6B6B6B;--accent: #D4A574;--accent-hover: #C4956A;--accent-light: rgba(212, 165, 116, .1);--border: #E8DCC8;--success: #7CB342;--error: #E57373;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);--shadow-md: 0 4px 12px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);--shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);--transition: .2s ease}html.dark{--bg-primary: #2C2825;--bg-secondary: #352F2B;--bg-card: #3A3330;--text-primary: #E8E0D6;--text-secondary: #A89E94;--accent: #D4A574;--accent-hover: #E0B585;--accent-light: rgba(212, 165, 116, .12);--border: #4A423D;--success: #7CB342;--error: #EF9A9A;--shadow-sm: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.16);--shadow-md: 0 4px 12px rgba(0,0,0,.16), 0 1px 4px rgba(0,0,0,.12);--shadow-lg: 0 8px 24px rgba(0,0,0,.2), 0 2px 8px rgba(0,0,0,.12)}html.dark .header{background-color:#3a3330eb}html.dark .loading-overlay{background-color:#2c2825d9}*{box-sizing:border-box;margin:0;padding:0}html{font-family:"Source Sans 3",sans-serif;background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100vh;display:flex;flex-direction:column}h1,h2,h3,h4,h5,h6{font-family:Crimson Pro,serif}a{color:var(--accent);text-decoration:none;transition:color var(--transition)}a:hover{color:var(--accent-hover)}.header{background-color:var(--bg-card);border-bottom:1px solid var(--border);padding:.875rem 1.5rem;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-sm);position:sticky;top:0;z-index:100;backdrop-filter:blur(8px);background-color:#fffdf7eb}.header-center{display:flex;flex-direction:column;align-items:center;gap:.2rem}.header-title{font-size:1.5rem;font-weight:700;color:var(--text-primary);font-family:Crimson Pro,serif;letter-spacing:-.02em}.header-model{font-size:.7rem;color:var(--text-secondary);background-color:var(--bg-secondary);padding:.125rem .5rem;border-radius:var(--radius-sm);letter-spacing:.02em}.header-controls{display:flex;align-items:center;gap:.5rem}.mobile-only{display:none}.desktop-only{display:flex}@media (max-width: 768px){.mobile-only{display:flex}.desktop-only{display:none}}.model-selector,.language-selector{position:relative}.model-selector select,.language-selector select{appearance:none;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.45rem 2rem .45rem .75rem;font-size:.85rem;color:var(--text-primary);cursor:pointer;transition:all var(--transition);font-family:"Source Sans 3",sans-serif}.model-selector select:hover,.model-selector select:focus,.language-selector select:hover,.language-selector select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-light)}.model-selector:after,.language-selector:after{content:"";position:absolute;right:.7rem;top:50%;transform:translateY(-50%);width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--text-secondary);pointer-events:none}.model-badge{background-color:var(--accent);color:#fff;font-size:.75rem;padding:.25rem .5rem;border-radius:var(--radius-sm);font-weight:500}.main-content{flex:1;padding:2rem 1.5rem;max-width:1800px;margin:0 auto;width:100%;display:flex;justify-content:center}.translation-container{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:stretch;max-width:1400px;margin:0 auto;width:100%}@media (max-width: 768px){.main-content{padding:1.25rem 1rem}.translation-container{grid-template-columns:1fr;gap:1rem}}@media (min-width: 1024px){.translation-container{gap:2rem}.translation-panel{min-width:700px}}.translation-panel{background-color:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow-md);display:flex;flex-direction:column;transition:box-shadow var(--transition)}.translation-panel:focus-within{box-shadow:var(--shadow-lg)}.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.char-count{font-size:.75rem;color:var(--text-secondary);opacity:.8}.text-area{flex:1;min-height:300px;width:100%;border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem;font-size:1rem;font-family:"Source Sans 3",sans-serif;resize:vertical;background-color:var(--bg-card);color:var(--text-primary);transition:border-color var(--transition),box-shadow var(--transition);line-height:1.7}@media (min-width: 1024px){.text-area{min-height:400px}}.text-area::placeholder{color:var(--text-secondary);opacity:.6}.text-area:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.text-area:disabled{background-color:var(--bg-secondary);cursor:not-allowed}.swap-button-container{display:flex;align-items:center;justify-content:center;padding:.5rem}@media (max-width: 768px){.swap-button-container{padding:0}}.swap-button{width:44px;height:44px;border-radius:50%;background-color:var(--bg-card);border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);color:var(--text-secondary);box-shadow:var(--shadow-sm)}.swap-button:hover{background-color:var(--accent);border-color:var(--accent);color:#fff;box-shadow:var(--shadow-md);transform:scale(1.05)}.swap-button:hover svg{transform:rotate(180deg)}.swap-button svg{width:18px;height:18px;transition:transform .3s ease}.swap-button:disabled{opacity:.5;cursor:not-allowed}.swap-button:disabled:hover{background-color:var(--bg-card);border-color:var(--border);color:var(--text-secondary);box-shadow:var(--shadow-sm);transform:none}.swap-button:disabled:hover svg{transform:none}.swap-button.translating{background-color:var(--accent);border-color:var(--accent-hover);color:#fff;box-shadow:0 0 0 4px var(--accent-light)}.swap-button.translating svg{animation:spin 1s linear infinite}.swap-button.translating:hover{background-color:var(--accent-hover);border-color:var(--accent-hover)}.action-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.875rem}.btn{padding:.55rem 1.15rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;cursor:pointer;transition:all var(--transition);font-family:"Source Sans 3",sans-serif;display:inline-flex;align-items:center;gap:.4rem}.btn svg{width:15px;height:15px}.btn-primary{background-color:var(--accent);border:1px solid var(--accent);color:#fff}.btn-primary:hover{background-color:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 2px 8px #d4a57459;transform:translateY(-1px)}.btn-primary:active{transform:translateY(0);box-shadow:none}.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background-color:transparent;border:1px solid var(--border);color:var(--text-secondary)}.btn-secondary:hover{border-color:var(--accent);color:var(--text-primary);background-color:var(--accent-light)}.btn-clear{background-color:transparent;border:1px solid var(--border);color:var(--text-secondary)}.btn-clear:hover{border-color:var(--error);color:var(--error);background-color:#e573730f}.spinner{width:16px;height:16px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.queue-banner{display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:linear-gradient(135deg,#d4a5741f,#d4a5740f);border:1px solid rgba(212,165,116,.3);border-radius:var(--radius-md);margin-bottom:.5rem;font-size:.85rem;color:var(--accent-hover);animation:queue-pulse 2s ease-in-out infinite}.queue-banner .queue-icon{flex-shrink:0;animation:queue-spin 3s linear infinite}@keyframes queue-pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes queue-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{background-color:#e5737314;border:1px solid rgba(229,115,115,.3);color:var(--error);padding:.75rem 1rem;border-radius:var(--radius-md);margin-top:.75rem;font-size:.875rem}.footer{background-color:var(--bg-card);border-top:1px solid var(--border);padding:1.25rem 1.5rem;text-align:center;color:var(--text-secondary);font-size:.8rem;display:flex;flex-direction:column;gap:.3rem}.footer p:first-child{font-size:.825rem;letter-spacing:.01em}.footer a{color:var(--accent);font-weight:500;text-decoration:none;transition:color var(--transition);border-bottom:1px solid transparent}.footer a:hover{color:var(--accent-hover);border-bottom-color:var(--accent-hover)}.refresh-button{background:none;border:none;cursor:pointer;padding:.375rem;color:var(--text-secondary);transition:all var(--transition);border-radius:var(--radius-sm)}.refresh-button:hover{color:var(--accent);background-color:var(--accent-light)}.refresh-button svg{width:18px;height:18px}.refresh-button:disabled{opacity:.5;cursor:not-allowed}.refresh-button:disabled svg{animation:spin 1s linear infinite}.loading-overlay{position:fixed;inset:0;background-color:#fdf6e3d9;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.loading-overlay .spinner{width:36px;height:36px;border-width:3px;border-top-color:var(--accent)}.loading-overlay p{margin-top:1rem;color:var(--text-secondary);font-size:.9rem}.translation-stats{display:flex;gap:1rem;padding:.5rem .75rem;margin-top:.625rem;font-size:.725rem;color:var(--text-secondary);background-color:var(--bg-secondary);border-radius:var(--radius-sm)}.stat-item{display:flex;align-items:center;gap:.35rem}.stat-item:before{content:"";display:inline-block;width:5px;height:5px;background-color:var(--accent);border-radius:50%}.settings-button{background:none;border:none;cursor:pointer;padding:.375rem;color:var(--text-secondary);transition:all var(--transition);border-radius:var(--radius-sm)}.settings-button:hover{color:var(--accent);background-color:var(--accent-light)}.settings-button svg{width:22px;height:22px}.mobile-settings-modal{position:fixed;inset:0;background-color:#0006;backdrop-filter:blur(4px);display:flex;align-items:flex-end;z-index:1000}.mobile-settings-content{background-color:var(--bg-card);width:100%;border-radius:20px 20px 0 0;padding:1.5rem;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.mobile-settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.mobile-settings-header h3{font-size:1.25rem;font-weight:600;color:var(--text-primary);font-family:Crimson Pro,serif}.close-modal{background:none;border:none;cursor:pointer;padding:.5rem;color:var(--text-secondary);border-radius:50%;transition:all var(--transition)}.close-modal:hover{background-color:var(--bg-secondary);color:var(--text-primary)}.close-modal svg{width:24px;height:24px}.mobile-settings-body{display:flex;flex-direction:column;gap:1rem}.mobile-settings-body .model-selector{display:flex;flex-direction:column;gap:.5rem}.mobile-settings-body .model-selector label{font-size:.875rem;color:var(--text-secondary);font-weight:500}.mobile-settings-body .model-selector select{width:100%}.mobile-settings-body .refresh-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;background-color:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;transition:all var(--transition)}.mobile-settings-body .refresh-button:hover{border-color:var(--accent);color:var(--accent)}.mobile-settings-body .refresh-button svg{width:18px;height:18px}.mobile-settings-body .refresh-button span{font-size:.875rem}@media (min-width: 769px){.mobile-settings-modal{display:none!important}}.theme-toggle{background:none;border:none;cursor:pointer;padding:.375rem;color:var(--text-secondary);transition:all var(--transition);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.theme-toggle:hover{color:var(--accent);background-color:var(--accent-light)}.theme-toggle svg{width:20px;height:20px}.theme-toggle .icon-moon{display:block}.theme-toggle .icon-sun,html.dark .theme-toggle .icon-moon{display:none}html.dark .theme-toggle .icon-sun{display:block}
