:root{--primary-color: #7c3aed;--primary-dark: #6d28d9;--primary-light: #a78bfa;--secondary-color: #f59e0b;--dark-bg: #111827;--light-bg: #f9fafb;--text-dark: #111827;--text-light: #ffffff;--border-color: #e5e7eb;--success-color: #10b981;--error-color: #ef4444;--info-color: #3b82f6;--warning-color: #f97316;--card-shadow: 0 10px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .05);--transition-speed: .3s;--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--surface-1: #ffffff;--surface-2: #f3f4f6;--rounded-sm: .375rem;--rounded-md: .75rem;--rounded-lg: 1rem;--rounded-xl: 1.5rem}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);line-height:1.6;color:var(--text-dark);background-color:var(--light-bg);background-image:linear-gradient(135deg,#f9fafb,#ede9fe);min-height:100vh;font-size:16px}.container{width:100%;max-width:1280px;margin:0 auto;padding:1.5rem}@media (min-width: 768px){.container{padding:2.5rem}}header{display:flex;flex-direction:row;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:2.5rem;padding-bottom:1.5rem}header h1{color:var(--primary-dark);font-weight:800;text-align:center;background:linear-gradient(to right,var(--primary-dark),var(--secondary-color));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.02em;line-height:1.2}.container header h1{margin-bottom:0;font-size:clamp(1.5rem,4vw,2rem)}.source-input-controls{display:flex;flex-direction:column;gap:1rem}.image-upload-container{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.75rem;border-radius:var(--rounded-md);border:1px dashed var(--primary-light)}.image-source-buttons{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}#image-upload-input{display:none}.button-like-label{display:inline-block;padding:.6rem 1.2rem;background-color:var(--primary-color);color:#fff;border-radius:var(--rounded-md);cursor:pointer;font-weight:500;transition:background-color var(--transition-speed) ease}.button-like-label:hover{background-color:var(--primary-dark)}#image-preview-container{position:relative;display:inline-block;max-width:100%}#image-preview{max-width:100%;max-height:200px;border-radius:var(--rounded-sm);border:1px solid var(--border-color);object-fit:contain}#clear-image-btn{position:absolute;top:-12px;right:-12px;background-color:transparent;color:var(--error-color);border:none;border-radius:0;width:32px;height:32px;padding:0;font-size:1.6rem;font-weight:700;line-height:32px;text-align:center;cursor:pointer;box-shadow:none;transition:color var(--transition-speed) ease,transform var(--transition-speed) ease}#clear-image-btn:hover{color:#a00;transform:scale(1.2)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;padding:1rem}.modal-content{background-color:var(--surface-1);padding:1.5rem;border-radius:var(--rounded-lg);box-shadow:var(--card-shadow);display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:90vw;max-height:90vh}#camera-video-feed{width:100%;max-width:640px;max-height:calc(80vh - 100px);border-radius:var(--rounded-md);border:1px solid var(--border-color);background-color:#000}.modal-actions{display:flex;gap:1rem;justify-content:center}.modal-actions .button-like-label.secondary{background-color:#6b7280}.modal-actions .button-like-label.secondary:hover{background-color:#4b5563}#camera-canvas.hidden{display:none}nav ul{display:flex;flex-wrap:wrap;justify-content:center;list-style:none;gap:16px;background-color:var(--surface-1);padding:.75rem;border-radius:var(--rounded-xl);box-shadow:var(--card-shadow)}nav a{text-decoration:none;color:var(--primary-color);font-weight:600;font-size:1.05rem;padding:.8rem 1.5rem;border-radius:var(--rounded-xl);transition:all var(--transition-speed) ease}nav a:hover{background-color:var(--primary-light);color:var(--text-light)}nav a.active{background-color:var(--primary-color);color:var(--text-light);box-shadow:0 4px 12px -2px #7c3aed80}main{margin-bottom:3rem}.warning,.success,.error,.info{border-radius:var(--rounded-md);margin-bottom:1.5rem;font-weight:500;display:flex;align-items:center;box-shadow:0 4px 6px -1px #0000001a;animation:slide-in .3s ease-out;position:relative;padding:1rem 1.5rem 1rem 3.5rem}@keyframes slide-in{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.warning:before,.success:before,.error:before,.info:before{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);font-size:1.5rem;margin-right:.75rem;font-weight:700}.warning{background-color:var(--warning-color);color:#fff}.warning:before{content:"⚠️"}.success{background-color:var(--success-color);color:#fff}.success:before{content:"✅"}.error{background-color:var(--error-color);color:#fff;padding:1rem 1.5rem 1rem 3.5rem;border-radius:var(--rounded-md);margin-bottom:1.5rem;font-weight:500;animation:slide-in .3s ease-out}.error:before{content:"❌"}.info{background-color:var(--info-color);color:#fff}.info:before{content:"ℹ️"}.hidden{display:none}.translation-container{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2.5rem}@media (min-width: 768px){.translation-container{grid-template-columns:1fr auto 1fr;gap:2rem}}.translation-box{border:none;border-radius:var(--rounded-lg);padding:1.75rem;background-color:var(--surface-1);box-shadow:var(--card-shadow);transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.translation-box:hover{transform:translateY(-4px);box-shadow:0 25px 30px -12px #0000001a,0 10px 15px -3px #0000000d}.translation-box h2{margin-bottom:1rem;color:var(--primary-dark);font-size:1.3rem;display:flex;align-items:center;gap:.5rem}.translation-box h2:before{content:"";display:inline-block;width:.5rem;height:1.5rem;background-color:var(--primary-color);border-radius:1rem}.translation-box textarea{width:100%;height:200px;padding:1rem;border:1px solid var(--border-color);border-radius:var(--rounded-md);font-size:1rem;resize:vertical;font-family:inherit;transition:border-color .2s ease,box-shadow .2s ease}.translation-box textarea:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px #7c3aed33}.translation-controls{display:flex;align-items:center;justify-content:center}@media (max-width: 767px){.translation-controls{margin:.5rem 0}}button{background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--rounded-md);padding:12px 24px;font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-speed) ease;box-shadow:0 4px 6px -1px #0000001a}button:hover{background-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}button:active{transform:translateY(0)}button:disabled{background-color:#cbd5e1;cursor:not-allowed;transform:none;box-shadow:none}#translate-btn{font-size:1.05rem;padding:1rem 2rem;border-radius:var(--rounded-lg);position:relative;overflow:hidden;background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);transition:all .4s ease;display:flex;align-items:center;gap:.5rem}#translate-btn:before{content:"→";font-size:1.2em;transition:transform .3s ease}#translate-btn:hover:before{transform:translate(4px)}#translate-btn:hover{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary-color) 100%)}#translate-btn:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(#ffffff1a,#fff0);opacity:0;transition:opacity .3s ease}#translate-btn:hover:after{opacity:1}.translation-history{background-color:var(--surface-1);border:none;border-radius:var(--rounded-lg);padding:1.5rem;box-shadow:var(--card-shadow)}.translation-history h3{color:var(--primary-dark);margin-bottom:1.5rem;border-bottom:2px solid var(--primary-light);padding-bottom:.75rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.translation-history h3:before{content:"📜";font-size:1.2rem}.history-item{border:none;border-radius:var(--rounded-md);padding:1.25rem;margin-bottom:1rem;background-color:var(--surface-2);box-shadow:0 2px 4px #0000000d;transition:all var(--transition-speed) ease;border-left:4px solid var(--primary-light)}.history-item:hover{transform:translateY(-3px);box-shadow:0 8px 16px #00000014;border-left-color:var(--primary-color)}.history-header{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.history-date{font-size:.9rem;color:#6b7280}.history-direction{font-size:.85rem;background-color:var(--primary-color);color:#fff;padding:.25rem .75rem;border-radius:var(--rounded-sm);font-weight:500}.history-actions{display:flex;gap:.5rem}.history-use-btn{background-color:var(--secondary-color);font-weight:500;padding:8px 16px;border-radius:var(--rounded-md);font-size:.8rem;transition:all var(--transition-speed) ease;box-shadow:0 2px 8px #f59e0b4d}.history-use-btn:hover{background-color:#d97706;transform:translateY(-2px)}.history-delete-btn{background-color:var(--error-color);font-weight:500;padding:8px 16px;border-radius:var(--rounded-md);font-size:.8rem;transition:all var(--transition-speed) ease;box-shadow:0 2px 8px #ef44444d}.history-delete-btn:hover{background-color:#dc2626;transform:translateY(-2px)}.button-like,.button-like-label,.history-use-btn,.history-delete-btn{font-weight:500;padding:8px 16px;border-radius:var(--rounded-md)}.history-controls{display:flex;justify-content:flex-end;margin-bottom:1rem}.clear-history-btn{background-color:var(--error-color);color:#fff;border:none;border-radius:var(--rounded-md);padding:.6rem 1.2rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-speed) ease;box-shadow:0 2px 6px #ef444466}.clear-history-btn:hover{background-color:#dc2626;transform:translateY(-2px);box-shadow:0 4px 8px #ef444480}.empty-history{text-align:center;color:#6b7280;padding:2rem;font-style:italic;background-color:var(--surface-2);border-radius:var(--rounded-md)}.settings-container{background-color:var(--surface-1);border:none;border-radius:var(--rounded-lg);padding:2rem;box-shadow:var(--card-shadow)}.settings-container h2{color:var(--primary-dark);margin-bottom:1.75rem;border-bottom:2px solid var(--primary-light);padding-bottom:1rem;font-weight:700;display:flex;align-items:center;gap:.75rem}.settings-container h2:before{content:"⚙️";font-size:1.5rem}.form-group{margin-bottom:1.75rem;background-color:var(--surface-2);padding:1.25rem;border-radius:var(--rounded-md);transition:box-shadow .3s ease,transform .3s ease}.form-group:hover{box-shadow:0 4px 12px #0000000d;transform:translateY(-2px)}.form-group label{display:block;margin-bottom:.75rem;font-weight:600;color:var(--primary-dark)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid var(--border-color);border-radius:var(--rounded-md);font-size:1rem;font-family:inherit;transition:border-color var(--transition-speed) ease,box-shadow var(--transition-speed) ease;background-color:var(--surface-1)}.toggle-container{display:flex;align-items:center;margin-top:.5rem}.switch{position:relative;display:inline-block;width:60px;height:34px;margin-right:10px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--primary-color)}input:focus+.slider{box-shadow:0 0 1px var(--primary-color)}input:checked+.slider:before{transform:translate(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.toggle-label{font-weight:500}.translation-box textarea.streaming{background-image:linear-gradient(to right,#f0f4ff,#fff);background-size:200% 100%;background-position:right bottom;animation:streaming-gradient 2s ease infinite}@keyframes streaming-gradient{0%{background-position:right bottom}50%{background-position:left bottom}to{background-position:right bottom}}#custom-model-container{padding:.75rem;border-radius:8px;margin-top:.5rem;background-color:#f8f9fa;border-left:4px solid var(--primary-color)}#custom-model-container.active{background-color:#f0f4ff;box-shadow:0 4px 6px -1px #6366f133}#custom-model{border-color:var(--primary-light)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-light);box-shadow:0 0 0 3px #6366f133}.form-group textarea{resize:vertical;min-height:100px}.form-group small{display:block;margin-top:5px;color:#666}.form-actions{display:flex;gap:1rem;margin-bottom:2rem}#reset-defaults{background-color:var(--error-color);box-shadow:0 4px 6px -1px #ef44444d}#reset-defaults:hover{background-color:#dc2626}#save-settings{background-color:var(--success-color);box-shadow:0 4px 6px -1px #10b9814d}#save-settings:hover{background-color:#059669}#test-connection{background-color:var(--info-color);box-shadow:0 4px 6px -1px #3b82f64d}#test-connection:hover{background-color:#2563eb}.advanced-settings{margin-top:30px;border-top:1px solid var(--border-color);padding-top:20px}.advanced-settings h3{color:var(--primary-dark);margin-bottom:15px}footer{text-align:center;color:#666;border-top:1px solid var(--border-color);padding-top:20px;padding-bottom:20px}.footer-links{margin-top:10px}.footer-links a{color:var(--primary-color);text-decoration:none;margin:0 10px;transition:color var(--transition-speed) ease}.footer-links a:hover{color:var(--primary-dark);text-decoration:underline}@media (max-width: 768px){header{flex-direction:column}header h1{margin-bottom:1.5rem}.translation-container{grid-template-columns:1fr}.translation-controls{margin:10px 0}.form-actions{flex-direction:column}.form-actions button{width:100%}}.guide-steps,.guide-notes{margin-left:20px;margin-bottom:1.5rem}.guide-steps li,.guide-notes li{margin-bottom:.75rem}.guide-steps ul,.guide-notes ul{margin-top:.5rem;margin-left:20px}.guide-steps code,.guide-notes code{background-color:var(--surface-2);padding:.2em .4em;border-radius:var(--rounded-sm);font-size:.9em}.provider-radio-group .radio-options{display:flex;gap:15px;margin-top:8px}.provider-radio-group label{display:flex;align-items:center;gap:5px;cursor:pointer}.provider-radio-group input[type=radio]{margin:0}#use-camera-btn{font-weight:700}.nav ul .auth-link{text-decoration:none;color:var(--primary-color);padding:.8rem 1.5rem;border-radius:var(--rounded-xl);transition:all var(--transition-speed) ease;display:inline-block}.nav ul .auth-link:hover{background-color:var(--primary-light);color:var(--text-light)}.nav ul .auth-link.login-link{color:var(--primary-color)}nav ul li{display:inline-block}.account-info{margin-bottom:2rem;padding:1.5rem;background-color:var(--surface-2);border-radius:var(--rounded-md);border-left:4px solid var(--primary-color)}.account-actions h3{margin-bottom:1rem;color:var(--primary-dark);padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.warning-section .warning{background-color:#ef44441a;border:1px solid var(--error-color);color:var(--error-color);padding:1rem;border-radius:var(--rounded-md);margin-bottom:1rem}.error-btn{background-color:var(--error-color)!important}.error-btn:hover{background-color:#dc2626!important}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner{display:inline-block;width:1rem;height:1rem;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite;margin-right:.5rem;vertical-align:middle}.toggle-buttons{display:flex;gap:12px;margin-top:8px}.method-button{flex:1;background-color:var(--surface-2);color:var(--text-dark);border:1px solid var(--border-color);border-radius:var(--rounded-md);padding:12px 16px;font-weight:500;text-align:center;cursor:pointer;transition:all var(--transition-speed) ease}.method-button:hover{border-color:var(--primary-light);background-color:var(--primary-light);color:#fff}.method-button.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-dark);box-shadow:0 0 0 2px #7c3aed4d}.button-description{font-size:.85em;font-weight:400;opacity:.8;margin-top:4px}