@media(max-width:600px){.main-header{flex-direction:column!important;align-items:stretch!important;width:100%;gap:.5rem}.main-header h1{width:100%;margin-top:2.5rem;margin-bottom:2.5rem;text-align:left;word-break:break-word;display:block}.user-info{width:100%;display:block;text-align:left;font-size:1rem;word-break:break-word;margin-bottom:1.5rem;padding-top:.5rem;border-top:none}.user-info{margin-left:0!important;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}.logout-button{width:100%;min-width:90px;font-size:1rem;margin-top:.5rem}}@media(max-width:600px){body{font-size:1rem;padding:0;margin:0}.container{padding:.5rem;width:100%;box-sizing:border-box}.main-header,.tabs-container,.main-menu-buttons{flex-direction:column!important;align-items:flex-start!important;width:100%}h1{font-size:1.5rem;margin-bottom:1rem}.list-item,.form,.button-group{flex-direction:column!important;width:100%;align-items:stretch!important}input,button,select{font-size:1rem;width:100%;margin-bottom:.5rem;box-sizing:border-box}.suggestion-box,.export-container,.photo-add-container{width:100%;box-sizing:border-box}.notification{font-size:1rem;width:100%;box-sizing:border-box}.progress-bar{height:12px}}:root{--background-color: #121212;--surface-color: #1e1e1e;--primary-color: #3b82f6;--primary-hover-color: #2563eb;--secondary-color: #4f4f4f;--text-color: #e0e0e0;--text-muted-color: #a0a0a0;--success-color: #22c55e;--error-color: #ef4444;--border-color: #333;--border-radius: 8px;--box-shadow: 0 4px 6px rgba(0, 0, 0, .2)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--background-color);color:var(--text-color);line-height:1.6}#root{max-width:800px;margin:2rem auto;padding:1rem}h1,h2,h3{margin-bottom:1.5rem;color:var(--primary-color)}h1{font-size:2.5rem;text-align:center}h2{font-size:2rem;text-align:center}h3{font-size:1.5rem;color:var(--text-color);margin-bottom:.75rem}button,.button-label{background-color:var(--primary-color);color:#fff;border:none;padding:.75rem 1.25rem;border-radius:var(--border-radius);cursor:pointer;font-size:1rem;font-weight:500;transition:background-color .2s ease-in-out;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}button:hover,.button-label:hover{background-color:var(--primary-hover-color)}button.secondary,.button-label.secondary{background-color:var(--secondary-color)}button.secondary:hover,.button-label.secondary:hover{background-color:#666}button.danger{background-color:var(--error-color)}button.danger:hover{background-color:#c53030}button:disabled{background-color:var(--secondary-color);cursor:not-allowed;opacity:.7}.button-group{display:flex;gap:.5rem;align-items:center}.container{background-color:var(--surface-color);padding:1.5rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:2rem}.list{list-style:none;padding:0}.list-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);transition:background-color .2s}.list-item:last-child{border-bottom:none}.list-item:hover{background-color:#ffffff0d}.form{display:flex;flex-direction:column;gap:1rem}.form-inline{display:flex;gap:1rem;align-items:center}.form-inline input{flex-grow:1}input[type=text],input[type=password],select{width:100%;padding:.75rem;border-radius:var(--border-radius);border:1px solid var(--border-color);background-color:#2a2a2a;color:var(--text-color);font-size:1rem}input[type=file]{display:none}.file-input-label{display:inline-block;padding:.75rem 1.25rem;background-color:var(--secondary-color);color:#fff;border-radius:var(--border-radius);cursor:pointer;text-align:center}.file-input-label:hover{background-color:#666}.training-card{text-align:center;padding:2rem}.training-card .word{font-size:2.5rem;font-weight:700;margin:1rem 0;display:flex;align-items:center;justify-content:center;gap:1rem}.training-card .feedback{margin-top:1rem;font-size:1.2rem}.feedback.correct{color:var(--success-color)}.feedback.incorrect{color:var(--error-color)}.ai-insight{margin-top:1rem;font-size:.95rem;color:var(--text-muted-color);background-color:#2a2a2a;padding:.75rem;border-radius:var(--border-radius);text-align:left;line-height:1.5}.progress-bar{width:100%;background-color:var(--secondary-color);border-radius:var(--border-radius);overflow:hidden;margin-bottom:1rem}.progress-bar-fill{height:10px;background-color:var(--success-color);width:0%;transition:width .3s}.header-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.photo-add-container p{color:var(--text-muted-color);margin-bottom:1rem}.suggestion-box{background-color:#2a2a2a;border:1px solid var(--border-color);border-radius:var(--border-radius);padding:.75rem;margin-top:-.5rem;font-size:.9rem;display:flex;justify-content:space-between;align-items:center}.suggestion-box span{color:var(--text-muted-color)}.suggestion-box button{padding:.25rem .75rem;font-size:.9rem}.export-container{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-color)}.tabs-container{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:2rem}.tab-button{flex:1;padding:1rem;background-color:transparent;border:none;color:var(--text-muted-color);font-size:1.2rem;cursor:pointer;transition:color .2s,border-bottom .2s;border-bottom:3px solid transparent;border-radius:0}.tab-button.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.training-setup-view{text-align:center}.training-setup-view p{color:var(--text-muted-color);margin-bottom:1rem}.mode-selection{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}.mode-selection button{background-color:var(--surface-color);border:1px solid var(--border-color);width:100%;padding:1.5rem;text-align:left;color:var(--text-color);transition:background-color .2s,transform .2s}.mode-selection button:hover{background-color:#2a2a2a;transform:translateY(-2px)}.mode-selection h3{margin-bottom:.5rem;color:var(--primary-color)}.mode-selection span{font-size:.9rem;color:var(--text-muted-color);line-height:1.4}.spinner{width:50px;height:50px;border:5px solid var(--secondary-color);border-top:5px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-indicator{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;margin:2rem 0;color:var(--primary-color);font-weight:700;font-size:1.2rem}.spinner-inline{width:1em;height:1em;border:.15em solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .75s linear infinite;display:inline-block;vertical-align:text-bottom}.speak-button{background:none;border:none;color:var(--text-muted-color);cursor:pointer;padding:.25rem;font-size:1.25rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:color .2s,background-color .2s;vertical-align:middle}.speak-button:hover{color:var(--primary-color);background-color:#ffffff1a}.notification{position:fixed;top:1rem;left:50%;transform:translate(-50%);padding:1rem 1.5rem;border-radius:var(--border-radius);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:1rem;z-index:1000;box-shadow:0 4px 12px #0006;animation:notification-fade-in .3s ease-out forwards}.notification.success{background-color:var(--success-color)}.notification.error{background-color:var(--error-color)}.close-button{background:none;border:none;color:#fff;font-size:1.5rem;font-weight:700;line-height:1;cursor:pointer;padding:0 .25rem;opacity:.7;transition:opacity .2s}.close-button:hover{opacity:1}@keyframes notification-fade-in{0%{opacity:0;transform:translate(-50%,-20px)}to{opacity:1;transform:translate(-50%)}}.auth-container{max-width:400px;margin:4rem auto}.auth-switch{text-align:center;margin-top:1rem;font-size:.9rem;color:var(--text-muted-color)}.link-button{background:none;border:none;color:var(--primary-color);text-decoration:underline;cursor:pointer;font-size:inherit}.link-button:hover{color:var(--primary-hover-color)}.main-header{margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.main-header h1{margin-bottom:0}.user-info{display:flex;justify-content:flex-end;align-items:center;gap:1rem;margin-top:-2.5rem;padding-bottom:.5rem}.user-info span{color:var(--text-muted-color)}.logout-button{padding:.5rem 1rem;font-size:.9rem}