:root{--color-black: #000000;--color-white: #ffffff;--color-gray-50: #fafafa;--color-gray-100: #f5f5f5;--color-gray-200: #e5e5e5;--color-gray-300: #d4d4d4;--color-gray-400: #a3a3a3;--color-gray-500: #737373;--color-gray-600: #525252;--color-gray-700: #404040;--color-gray-800: #262626;--color-gray-900: #171717;--color-success: #22c55e;--color-error: #ef4444;--color-warning: #f59e0b;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--border-width: 1px;--border-radius-sm: 2px;--border-radius: 4px;--border-radius-lg: 6px;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-white);color:var(--color-gray-900);font-size:var(--text-base);line-height:1.5}.container{max-width:1200px;margin:0 auto;padding:0 var(--space-4)}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background-color:var(--color-white);border-bottom:var(--border-width) solid var(--color-gray-200);padding:var(--space-4) 0}.app-title{margin:0 0 var(--space-2) 0;font-size:var(--text-2xl);font-weight:600;color:var(--color-black)}.app-subtitle{margin:0 0 var(--space-4) 0;font-size:var(--text-sm);color:var(--color-gray-600)}.app-main{flex:1;padding:var(--space-6) 0;background-color:var(--color-gray-50)}.app-footer{background-color:var(--color-gray-900);color:var(--color-white);padding:var(--space-4) 0;text-align:center;font-size:var(--text-sm)}.navigation{background-color:var(--color-white);border-bottom:var(--border-width) solid var(--color-gray-200);padding:0}.nav-links{display:flex;gap:0}.nav-link{padding:var(--space-3) var(--space-4);text-decoration:none;color:var(--color-gray-600);font-size:var(--text-sm);font-weight:500;border-bottom:2px solid transparent;transition:all .2s}.nav-link:hover{color:var(--color-black);background-color:var(--color-gray-50)}.nav-link.active{color:var(--color-black);border-bottom-color:var(--color-black);background-color:var(--color-gray-50)}.card{background:var(--color-white);border:var(--border-width) solid var(--color-gray-200);border-radius:var(--border-radius);padding:var(--space-4);margin-bottom:var(--space-4)}.card h2,.card h3{margin-top:0;margin-bottom:var(--space-3);font-size:var(--text-lg);font-weight:600;color:var(--color-black)}.form-group{margin-bottom:var(--space-3)}.form-label{display:block;margin-bottom:var(--space-2);font-weight:500;font-size:var(--text-sm);color:var(--color-gray-700)}.form-input,.form-select,.form-textarea{width:100%;padding:var(--space-2);border:var(--border-width) solid var(--color-gray-300);border-radius:var(--border-radius);font-size:var(--text-sm);transition:border-color .2s;background-color:var(--color-white)}.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--color-black)}.form-textarea{resize:vertical;min-height:80px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.form-actions{display:flex;gap:var(--space-3);margin-top:var(--space-4)}.char-count,.batch-stats{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-gray-500);margin-top:var(--space-1)}.btn{padding:var(--space-2) var(--space-4);border:var(--border-width) solid var(--color-gray-300);border-radius:var(--border-radius);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block;text-align:center;background-color:var(--color-white);color:var(--color-gray-900)}.btn:hover{border-color:var(--color-gray-400);background-color:var(--color-gray-50)}.btn-primary{background-color:var(--color-black);color:var(--color-white);border-color:var(--color-black)}.btn-primary:hover{background-color:var(--color-gray-800);border-color:var(--color-gray-800)}.btn-secondary{background-color:var(--color-gray-100);color:var(--color-gray-900);border-color:var(--color-gray-300)}.btn-secondary:hover{background-color:var(--color-gray-200);border-color:var(--color-gray-400)}.btn:disabled{opacity:.6;cursor:not-allowed}.api-key-container{background-color:var(--color-gray-50);border:var(--border-width) solid var(--color-gray-200);border-radius:var(--border-radius);padding:var(--space-3)}.api-key-input-group{margin-bottom:var(--space-2)}.api-key-label{display:block;margin-bottom:var(--space-2);font-size:var(--text-sm);font-weight:500;color:var(--color-gray-700)}.api-key-controls{display:flex;gap:var(--space-2)}.api-key-input{flex:1;padding:var(--space-2);border:var(--border-width) solid var(--color-gray-300);border-radius:var(--border-radius);font-size:var(--text-sm);background-color:var(--color-white)}.btn-toggle-visibility,.btn-clear{padding:var(--space-2);border:var(--border-width) solid var(--color-gray-300);border-radius:var(--border-radius);background-color:var(--color-white);cursor:pointer;font-size:var(--text-sm)}.connection-status{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs)}.connection-status.connected{color:var(--color-success)}.connection-status.disconnected{color:var(--color-error)}.error-card{border-left:3px solid var(--color-error);background-color:#fef2f2}.result-card{border-left:3px solid var(--color-success)}.result-content{display:flex;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-3)}.translated-text{flex:1;padding:var(--space-3);background-color:var(--color-gray-50);border:var(--border-width) solid var(--color-gray-200);border-radius:var(--border-radius);white-space:pre-wrap;font-size:var(--text-sm)}.copy-btn{flex-shrink:0}.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-2)}.score-item{display:flex;justify-content:space-between;padding:var(--space-2);background-color:var(--color-gray-50);border:var(--border-width) solid var(--color-gray-200);border-radius:var(--border-radius);font-size:var(--text-xs)}.usage-info{margin-top:var(--space-3);padding-top:var(--space-3);border-top:var(--border-width) solid var(--color-gray-200);font-size:var(--text-xs);color:var(--color-gray-500)}.batch-textarea{min-height:120px}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-3)}.batch-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-bottom:var(--space-4)}.summary-item{display:flex;justify-content:space-between;padding:var(--space-3);background-color:var(--color-gray-50);border:var(--border-width) solid var(--color-gray-200);border-radius:var(--border-radius);font-size:var(--text-sm)}.summary-item.success{border-left:3px solid var(--color-success)}.summary-item.failed{border-left:3px solid var(--color-error)}.results-list{max-height:300px;overflow-y:auto;border:var(--border-width) solid var(--color-gray-200);border-radius:var(--border-radius)}.result-item{padding:var(--space-3);border-bottom:var(--border-width) solid var(--color-gray-200);font-size:var(--text-sm)}.result-item:last-child{border-bottom:none}.result-item.success{background-color:#f0fdf4}.result-item.failed{background-color:#fef2f2}.original-text{font-weight:600;margin-bottom:var(--space-2);color:var(--color-gray-700)}.translated-text{color:var(--color-success)}.error-text{color:var(--color-error);font-style:italic}@media (max-width: 768px){.container{padding:0 var(--space-3)}.app-title{font-size:var(--text-xl)}.app-main{padding:var(--space-4) 0}.form-row{grid-template-columns:1fr}.form-actions{flex-direction:column}.batch-summary{grid-template-columns:1fr}.nav-links{flex-direction:column}.nav-link{padding:var(--space-2) var(--space-4)}.result-content{flex-direction:column}.result-header{flex-direction:column;gap:var(--space-3);align-items:stretch}}@media (max-width: 480px){.container{padding:0 var(--space-2)}.card{padding:var(--space-3)}.api-key-controls{flex-direction:column}.score-grid{grid-template-columns:1fr}}