@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--green-main: #027645;--green-light: #02874F;--green-dark: #02643B;--green-subtle: #e8f5ee;--purple-accent: #804AF0;--purple-subtle: #f3edfe;--bg-primary: #FAF7F5;--bg-secondary: #f4f0eb;--bg-card: #ffffff;--border-warm: #E9E5E0;--border-light: #f0ece7;--text-primary: #222222;--text-secondary: #6B6662;--text-muted: #9B9691;--red-main: #e5484d;--red-bg: #fff0f0;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .04);--shadow-md: 0 4px 16px rgba(0, 0, 0, .06);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .1);--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-pill: 999px;--transition-fast: .15s ease;--transition-normal: .25s ease;--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.5;font-size:.875rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:75rem;margin:0 auto;padding:0 1.5rem}.app-wrapper{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg-primary)}.app-layout{display:flex;flex:1;min-height:0}.app-main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-primary)}.sidebar{width:17rem;height:100%;background:var(--bg-secondary);border-right:1px solid var(--border-warm);display:flex;flex-direction:column;flex-shrink:0}.sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:1rem;min-height:3.5625rem;background:var(--bg-secondary);border-bottom:1px solid var(--border-warm)}.sidebar-logo{font-size:1.0625rem;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-.01em}.sidebar-header{padding:1rem;display:flex;align-items:center;gap:.5rem}.new-chat-wrapper{display:flex;flex:1;position:relative}.new-chat-button{display:flex;align-items:center;gap:.5rem;flex:1;padding:.75rem 1rem;background:var(--green-main);color:#fff;border:none;border-radius:.5rem 0 0 .5rem;font-family:var(--font-body);font-size:.9375rem;font-weight:600;cursor:pointer;transition:background var(--transition-fast);min-height:2.75rem}.new-chat-button:hover{background:var(--green-light)}.new-chat-lang-button{display:flex;align-items:center;gap:.25rem;padding:.75rem .875rem;background:var(--green-main);color:#fff;border:none;border-left:1px solid rgba(255,255,255,.2);border-radius:0 .5rem .5rem 0;cursor:pointer;transition:background var(--transition-fast);min-height:2.75rem}.new-chat-lang-button:hover{background:var(--green-light)}.new-chat-lang-button .lang-flag{font-size:1.125rem;line-height:1}.new-chat-lang-dropdown{position:absolute;top:calc(100% + .5rem);left:0;right:0;max-height:60vh;overflow-y:auto;overscroll-behavior:contain;background:var(--bg-card);border:1px solid var(--border-warm);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:100}.sidebar-close-button{display:none;width:2.75rem;height:2.75rem;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;border-radius:.5rem;align-items:center;justify-content:center;transition:all var(--transition-fast)}.sidebar-close-button:hover{background:var(--border-warm);color:var(--text-primary)}.sidebar-conversations{flex:1;overflow-y:auto;padding:.75rem}.sidebar-empty{padding:2rem 1rem;text-align:center;color:var(--text-secondary)}.sidebar-empty p{margin:0;font-size:.875rem}.sidebar-empty-hint{font-size:.75rem;margin-top:.5rem!important;opacity:.7;color:var(--text-muted)}.conversation-list{list-style:none;margin:0;padding:0}.conversation-item{display:flex;align-items:center;border-radius:.5rem;margin-bottom:.125rem;transition:background-color var(--transition-fast)}.conversation-item:hover{background:#0000000a}.conversation-item.active{background:#02764514}.conversation-button{flex:1;display:flex;align-items:center;gap:.625rem;padding:.75rem .875rem;background:none;border:none;font-family:var(--font-body);font-size:.875rem;color:var(--text-primary);cursor:pointer;text-align:left;min-width:0;min-height:2.75rem}.conversation-flag-left{font-size:1.125rem;flex-shrink:0;line-height:1}.conversation-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.conversation-actions{display:none;align-items:center;gap:.125rem;margin-right:.5rem}.conversation-item:hover .conversation-actions{display:flex}.conversation-action-btn{width:2rem;height:2rem;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:.5rem;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.conversation-action-btn:hover{background:var(--border-warm);color:var(--text-primary)}.conversation-action-btn.conversation-delete:hover{color:var(--red-main)}.conversation-edit{flex:1;padding:.25rem .5rem}.conversation-edit-input{width:100%;font-family:var(--font-body);font-size:.875rem;padding:.375rem .625rem;border:1px solid var(--green-main);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary);outline:none}.sidebar-overlay{display:none;position:fixed;inset:0;background:#2226;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:40}.menu-toggle{display:none;width:2.75rem;height:2.75rem;border:none;background:transparent;color:var(--text-primary);cursor:pointer;border-radius:var(--radius-sm);align-items:center;justify-content:center;transition:background-color var(--transition-fast)}.menu-toggle:hover{background:var(--border-light)}.header-left{display:flex;align-items:center;gap:.75rem}.header-logo{font-size:1.0625rem;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-.01em}.header{background:var(--bg-card);border-bottom:1px solid var(--border-warm);padding:0 1rem;height:3.5625rem;flex-shrink:0}.header-content{display:flex;justify-content:space-between;align-items:center;height:100%}.header-right{display:flex;align-items:center;gap:.5rem}.lang-selector{position:relative}.lang-button{width:2.75rem;height:2.75rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast)}.lang-button:hover:not(:disabled){background:var(--border-light)}.lang-button:disabled{opacity:.5;cursor:not-allowed}.lang-flag{font-size:1.375rem;line-height:1}.lang-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:var(--bg-card);border:1px solid var(--border-warm);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:10rem;z-index:100;overflow:hidden}.lang-option{width:100%;display:flex;align-items:center;gap:.625rem;padding:.75rem 1rem;border:none;background:transparent;cursor:pointer;font-family:var(--font-body);font-size:.875rem;color:var(--text-primary);text-align:left;transition:background-color var(--transition-fast);min-height:2.75rem}.lang-option:hover{background:var(--bg-secondary)}.lang-option.active{background:var(--green-subtle);font-weight:500;color:var(--green-dark)}.lang-name{flex:1}.logo-menu-button{width:2.75rem;height:2.75rem;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:background-color var(--transition-fast)}.logo-menu-button:hover{background:var(--border-light)}.logo-icon{width:1.75rem;height:1.75rem}.header-connection-status{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:var(--radius-sm);background:var(--bg-secondary);font-size:.75rem;color:var(--text-primary)}.connection-status-text{font-weight:500}.header-auth-section{position:relative}.header-auth-loading{padding:.375rem .75rem;font-size:.75rem;color:var(--text-secondary)}.header-auth-user{display:flex;align-items:center;gap:.5rem}.header-auth-email{padding:.375rem .75rem;font-size:.75rem;color:var(--text-primary);max-width:12.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--bg-secondary);border-radius:var(--radius-sm)}.header-sign-in-button,.header-sign-out-button{padding:.5rem 1rem;font-size:.875rem;font-weight:500;color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border-warm);border-radius:.5rem;cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body);min-height:2.75rem}.header-sign-in-button:hover,.header-sign-out-button:hover{background:var(--bg-secondary);border-color:var(--border-warm)}.header-auth-form-wrapper{position:absolute;top:calc(100% + .5rem);right:0;z-index:100}.header-auth-form{background:var(--bg-card);border:1px solid var(--border-warm);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:1.25rem;min-width:18.75rem;display:flex;flex-direction:column;gap:.75rem}.header-auth-form-header{display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:.25rem}.header-auth-form-close{background:none;border:none;font-size:1.5rem;line-height:1;color:var(--text-secondary);cursor:pointer;padding:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:.25rem;transition:background-color var(--transition-fast)}.header-auth-form-close:hover{background:var(--bg-secondary);color:var(--text-primary)}.header-auth-error{padding:.5rem .75rem;background:var(--red-bg);color:var(--red-main);border-radius:var(--radius-sm);font-size:.8125rem}.header-auth-input{padding:.625rem .875rem;border:1px solid var(--border-warm);border-radius:var(--radius-sm);font-size:.875rem;font-family:var(--font-body);color:var(--text-primary);background:var(--bg-card);transition:border-color var(--transition-fast)}.header-auth-input:focus{outline:none;border-color:var(--green-main);box-shadow:0 0 0 3px #0276451a}.header-auth-submit{padding:.75rem 1rem;background:var(--green-main);color:#fff;border:none;border-radius:.5rem;font-size:.9375rem;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:background var(--transition-fast);min-height:2.75rem}.header-auth-submit:hover:not(:disabled){background:var(--green-light)}.header-auth-submit:disabled{opacity:.5;cursor:not-allowed}.header-auth-toggle{background:none;border:none;color:var(--text-secondary);font-size:.8125rem;font-family:var(--font-body);cursor:pointer;padding:.25rem;text-align:center;transition:color var(--transition-fast)}.header-auth-toggle:hover{color:var(--green-main)}.header-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:var(--bg-card);border:1px solid var(--border-warm);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:13.75rem;z-index:100;overflow:hidden}.dropdown-item{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.375rem}.dropdown-status{flex-direction:row;align-items:center;gap:.625rem;font-size:.875rem;color:var(--text-primary)}.dropdown-divider{height:1px;background:var(--border-warm)}.dropdown-label{font-size:.6875rem;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03125rem}.dropdown-select{font-family:var(--font-body);font-size:.875rem;padding:.5rem 2rem .5rem .75rem;border:1px solid var(--border-warm);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-primary);cursor:pointer;width:100%;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6662' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center;transition:border-color var(--transition-fast)}.dropdown-select:hover:not(:disabled){border-color:var(--green-main)}.dropdown-select:disabled{opacity:.5;cursor:not-allowed}.dropdown-user{gap:.25rem}.dropdown-email{font-size:.875rem;color:var(--text-primary);word-break:break-all}.dropdown-button{cursor:pointer;background:none;border:none;font-family:var(--font-body);font-size:.875rem;color:var(--text-primary);text-align:left;transition:background-color var(--transition-fast);width:100%;min-height:2.75rem}.dropdown-button:hover{background:var(--bg-secondary)}.dropdown-loading{font-size:.875rem;color:var(--text-secondary)}.dropdown-auth-form{padding:.75rem 1rem;display:flex;flex-direction:column;gap:.625rem}.dropdown-auth-header{font-size:.875rem;font-weight:600;color:var(--text-primary)}.dropdown-auth-error{font-size:.8125rem;color:var(--red-main);background:var(--red-bg);padding:.5rem .625rem;border-radius:var(--radius-sm)}.dropdown-input{font-family:var(--font-body);font-size:.875rem;padding:.625rem .875rem;border:1px solid var(--border-warm);border-radius:var(--radius-sm);outline:none;transition:border-color var(--transition-fast);background:var(--bg-card);color:var(--text-primary)}.dropdown-input:focus{border-color:var(--green-main);box-shadow:0 0 0 3px #0276451a}.dropdown-submit{font-family:var(--font-body);font-size:.875rem;padding:.75rem 1rem;border:none;border-radius:.5rem;background:var(--green-main);color:#fff;cursor:pointer;font-weight:500;transition:background var(--transition-fast);min-height:2.75rem}.dropdown-submit:hover:not(:disabled){background:var(--green-light)}.dropdown-submit:disabled{opacity:.6;cursor:not-allowed}.dropdown-toggle-auth{font-family:var(--font-body);font-size:.8125rem;padding:0;border:none;background:none;color:var(--text-secondary);cursor:pointer;text-align:center}.dropdown-toggle-auth:hover{color:var(--green-main)}.status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#fbbf24;transition:background-color .3s ease}.status-dot.connected{background:var(--green-main)}.status-dot.disconnected{background:var(--red-main)}.status-text{font-size:.875rem;color:var(--text-secondary);font-weight:500}.auth-controls{display:flex;align-items:center}.auth-loading{font-size:.875rem;color:var(--text-secondary)}.user-menu{display:flex;align-items:center;gap:.5rem}.user-email{font-size:.75rem;color:var(--text-secondary);max-width:9.375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sign-in-btn,.sign-out-btn{font-family:var(--font-body);font-size:.9375rem;padding:.625rem 1.25rem;border:1px solid var(--border-warm);border-radius:.5rem;background:var(--bg-card);color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast);font-weight:500;min-height:2.75rem}.sign-in-btn:hover,.sign-out-btn:hover{border-color:var(--green-main);color:var(--green-main);background:var(--green-subtle)}.sign-out-btn{padding:.5rem 1rem;font-size:.8125rem}.auth-dropdown-container{position:relative}.auth-dropdown{position:absolute;top:calc(100% + .5rem);right:0;background:var(--bg-card);border:1px solid var(--border-warm);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:1.25rem;width:18.75rem;z-index:100}.auth-form{display:flex;flex-direction:column;gap:.75rem}.auth-form h3{font-size:1rem;font-weight:600;margin:0 0 .25rem;color:var(--text-primary)}.auth-form input{font-family:var(--font-body);font-size:.875rem;padding:.625rem .875rem;border:1px solid var(--border-warm);border-radius:var(--radius-sm);outline:none;transition:border-color var(--transition-fast);background:var(--bg-card);color:var(--text-primary)}.auth-form input:focus{border-color:var(--green-main);box-shadow:0 0 0 3px #0276451a}.auth-error{font-size:.8125rem;color:var(--red-main);background:var(--red-bg);padding:.5rem .75rem;border-radius:var(--radius-sm)}.auth-submit-btn{font-family:var(--font-body);font-size:.9375rem;padding:.75rem 1.25rem;border:none;border-radius:.5rem;background:var(--green-main);color:#fff;cursor:pointer;font-weight:600;transition:background var(--transition-fast);min-height:2.75rem}.auth-submit-btn:hover:not(:disabled){background:var(--green-light)}.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed}.auth-toggle-btn{font-family:var(--font-body);font-size:.8125rem;padding:0;border:none;background:none;color:var(--text-secondary);cursor:pointer;text-align:center}.auth-toggle-btn:hover{color:var(--green-main)}.main{padding:1.5rem 0;min-height:calc(100vh - 5rem)}.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;height:calc(100dvh - 9rem);overflow:hidden;position:relative}.conversation-switch-loading{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-warm);height:100%;min-height:25rem}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.section-header h2{font-size:1rem;font-weight:600;color:var(--text-primary);display:flex;align-items:center;gap:.5rem;letter-spacing:-.01em}.section-header-flag{font-size:1.25rem;line-height:1}.card-count{font-size:.75rem;color:var(--text-muted);font-weight:500;background:var(--bg-secondary);padding:.25rem .625rem;border-radius:var(--radius-pill)}.chat-section{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-warm);padding:1.5rem;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.button-group{display:flex;align-items:center;gap:.5rem}.restart-button{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--border-warm);background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);color:var(--text-secondary);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.restart-button:hover:not(:disabled){border-color:var(--text-secondary);color:var(--text-primary);background:var(--bg-secondary)}.restart-button:disabled{opacity:.5;cursor:not-allowed}.mic-button{width:3.5rem;height:3.5rem;border-radius:50%;border:2px solid var(--border-warm);background:var(--bg-card);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-normal);color:var(--text-secondary);touch-action:manipulation;-webkit-tap-highlight-color:transparent}.mic-button:hover:not(:disabled){border-color:var(--green-main);color:var(--green-main);background:var(--green-subtle);transform:scale(1.05)}.mic-button:active:not(:disabled){transform:scale(.95)}.mic-button:disabled{opacity:.5;cursor:not-allowed}.mic-button.recording{background:var(--red-main);border-color:var(--red-main);color:#fff;animation:pulse-mic 1.8s ease-in-out infinite;transform:scale(1.05)}@keyframes pulse-mic{0%,to{box-shadow:0 0 #e5484d66}50%{box-shadow:0 0 0 .75rem #e5484d00}}.chat-container{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}.messages{flex:1;overflow-y:auto;padding:1.25rem 0;display:flex;flex-direction:column;position:relative;gap:.75rem;min-height:0}.chat-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-card);z-index:10;width:100%;height:100%}.chat-loading-spinner{width:2rem;height:2rem;border:3px solid var(--border-warm);border-top-color:var(--green-main);border-radius:50%;animation:spin .8s linear infinite}.chat-loading-text{margin-top:.75rem;font-size:.875rem;color:var(--text-secondary);text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.chat-disconnected{text-align:center;color:var(--text-secondary);font-size:.875rem}.chat-disconnected p{margin:0 0 .75rem}.reload-button{padding:.625rem 1.25rem;background:var(--green-main);color:#fff;border:none;border-radius:var(--radius-sm);font-size:.875rem;font-family:var(--font-body);font-weight:500;cursor:pointer;transition:background var(--transition-fast);min-height:2.75rem}.reload-button:hover{background:var(--green-light)}.message{max-width:80%;padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.875rem;line-height:1.55}.message.teacher{background:var(--bg-secondary);color:var(--text-primary);align-self:flex-start;border-bottom-left-radius:.25rem;cursor:help;transition:background-color var(--transition-fast)}.message.teacher:hover{background:var(--border-warm)}.message.learner{background:var(--green-main);color:#fff;align-self:flex-end;border-bottom-right-radius:.25rem;margin-right:.5rem;cursor:help;transition:background-color var(--transition-fast)}.message.learner:hover{background:var(--green-light)}.message.streaming{opacity:.85;position:relative}.message.realtime{opacity:.9;border:1px dashed rgba(2,118,69,.3)}.loading-dots{display:flex;align-items:center;gap:.25rem;margin-left:.25rem}.loading-dots span{width:.375rem;height:.375rem;border-radius:50%;background:#ffffffb3;animation:loading-dot 1.4s ease-in-out infinite}.loading-dots span:nth-child(1){animation-delay:0s}.loading-dots span:nth-child(2){animation-delay:.2s}.loading-dots span:nth-child(3){animation-delay:.4s}@keyframes loading-dot{0%,60%,to{opacity:.3;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}.current-transcript{display:none}.text-input-form{display:flex;gap:.5rem;padding-top:1rem;margin-top:.75rem;border-top:1px solid var(--border-light)}.text-input{flex:1;font-family:var(--font-body);font-size:.875rem;padding:.75rem 1.125rem;border:1px solid var(--border-warm);border-radius:var(--radius-pill);background:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-fast)}.text-input:hover:not(:disabled){border-color:#d5d0ca}.text-input:focus{outline:none;border-color:var(--green-main);background:var(--bg-card);box-shadow:0 0 0 3px #02764514}.text-input:disabled{opacity:.5;cursor:not-allowed}.text-input::placeholder{color:var(--text-muted)}.send-button{width:2.75rem;height:2.75rem;border-radius:50%;border:none;background:var(--green-main);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0;min-height:2.75rem}.send-button:hover:not(:disabled){background:var(--green-light);transform:scale(1.05)}.send-button:active:not(:disabled){transform:scale(.95)}.send-button:disabled{opacity:.35;cursor:not-allowed}.flashcards-section{background:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-warm);padding:1.5rem;display:flex;flex-direction:column;height:100%;min-height:0;overflow-x:hidden;overflow-y:hidden}.flashcards-container{flex:1;min-height:0;position:relative}.flashcards-grid{height:100%;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.flashcard{position:relative;min-height:8rem;cursor:pointer;perspective:1000px;flex:0 0 auto;touch-action:manipulation}.flashcard-inner{position:relative;width:100%;text-align:center;transition:transform .5s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d;display:grid;grid-template-columns:1fr;grid-template-rows:auto}.flashcard-inner>*{grid-column:1;grid-row:1}.flashcard.flipped .flashcard-inner{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{width:100%;min-height:8rem;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--radius-md);padding:1.25rem;display:flex;flex-direction:column;justify-content:center;overflow-y:auto;align-items:center;box-sizing:border-box}.flashcard-front{background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-primary) 100%);color:var(--text-primary);overflow-y:auto;border:1px solid var(--border-warm)}.pronounce-button{position:absolute;bottom:.5rem;right:.5rem;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--border-warm);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:10;padding:0}.pronounce-button:hover:not(:disabled){border-color:var(--green-main);color:var(--green-main);transform:scale(1.08)}.pronounce-button:disabled{opacity:.7;cursor:not-allowed}.pronounce-button.loading{border-color:var(--text-secondary)}.pronounce-button svg{width:.875rem;height:.875rem}.pronounce-spinner{animation:spin-pronounce 1s linear infinite}.example-speaker-icon{width:.75rem;height:.75rem;flex-shrink:0;opacity:.5;margin-left:.25rem}.flashcard-example.pronounceable{cursor:pointer;display:flex;align-items:center;gap:.25rem}.flashcard-example.pronounceable:hover .example-speaker-icon{opacity:1;color:var(--green-main)}.flashcard-example.pronouncing{color:var(--green-main)}@keyframes spin-pronounce{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.flashcard-back{background:var(--bg-card);border:1px solid var(--border-warm);transform:rotateY(180deg);justify-content:flex-start;align-items:stretch;overflow:hidden}.flashcard-back>*:first-child{margin-top:0}.flashcard-spanish,.flashcard-target-word{font-size:1.875rem;font-weight:700;text-align:center;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;padding:0 .5rem;letter-spacing:-.02em;color:var(--text-primary)}.flashcard-english{font-size:1.375rem;font-weight:600;color:var(--text-primary);margin-bottom:1rem;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;flex-shrink:0;letter-spacing:-.01em}.flashcard-example{font-size:.875rem;font-style:italic;color:var(--text-secondary);margin-bottom:1rem;text-align:center;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;flex-shrink:0}.flashcard-mnemonic{font-size:.8125rem;color:var(--text-secondary);padding:.75rem;background:var(--purple-subtle);border-radius:var(--radius-sm);width:100%;text-align:left;word-wrap:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;flex-shrink:0;box-sizing:border-box;line-height:1.5;margin-top:auto;border-left:3px solid var(--purple-accent)}.mnemonic-label{font-weight:600;color:var(--purple-accent);margin-right:.25rem}@media(max-width:768px){.flashcards-grid{flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:0;padding-bottom:0;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;height:100%}.flashcard{min-width:100%;width:100%;height:100%;min-height:0;scroll-snap-align:start;flex:0 0 100%}.flashcard-inner{height:100%}.flashcard-front,.flashcard-back{height:100%;min-height:0;padding:1rem;overflow:hidden}.flashcard-spanish,.flashcard-target-word{font-size:clamp(1rem,4vw,1.5rem)}.flashcard-english{font-size:clamp(.875rem,3vw,1.125rem);margin-bottom:.5rem;flex-shrink:1}.flashcard-example{font-size:clamp(.6875rem,2.5vw,.8125rem);padding:0 .5rem;margin-bottom:.5rem;flex-shrink:1}.flashcard-mnemonic{font-size:clamp(.625rem,2.25vw,.75rem);padding:.5rem;flex-shrink:1}.pronounce-button{width:2.25rem;height:2.25rem;bottom:.5rem;right:.5rem}.pronounce-button svg{width:1rem;height:1rem}}.empty-state{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.875rem;text-align:center}@media(max-width:768px){.header-logo{display:none}.sidebar{position:fixed;left:0;top:0;bottom:0;z-index:50;transform:translate(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:none;width:18.75rem}.sidebar.open{transform:translate(0);box-shadow:.5rem 0 1.875rem #0000001f}.sidebar-overlay{display:block}.sidebar-close-button,.menu-toggle{display:flex}.main{padding:.5rem 0;height:calc(100dvh - 4rem);overflow:hidden}.app-grid{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:.5rem;height:100%;overflow:hidden}.chat-section,.flashcards-section{height:100%;min-height:0;overflow:hidden;padding:.75rem;border-radius:var(--radius-md)}.main>.container{padding:0 .5rem;height:100%}.messages{max-height:none;overflow-y:auto}.flashcards-grid{max-height:none}.mic-button{width:4rem;height:4rem}.message{max-width:88%}}.floating-buttons{position:fixed;bottom:1.5rem;right:1.5rem;display:flex;flex-direction:column;gap:.75rem;z-index:1000}.fab-button{display:flex;align-items:center;justify-content:center;gap:.5rem;border:none;cursor:pointer;text-decoration:none;transition:all var(--transition-normal);box-shadow:0 2px 12px #00000014}.fab-button:hover{transform:scale(1.05);box-shadow:0 4px 20px #00000024}.fab-labeled{height:2.75rem;padding:0 1.25rem;border-radius:var(--radius-pill);background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-primary);font-family:var(--font-body);font-size:.8125rem;font-weight:600;letter-spacing:.01em;width:auto;box-sizing:border-box;border:1px solid var(--border-light)}.fab-labeled:hover{background:#fffffff2}@media(max-width:768px){.floating-buttons{bottom:1rem;right:1rem}}.messages::-webkit-scrollbar,.flashcards-grid::-webkit-scrollbar,.sidebar-conversations::-webkit-scrollbar{width:.3125rem}.messages::-webkit-scrollbar-track,.flashcards-grid::-webkit-scrollbar-track,.sidebar-conversations::-webkit-scrollbar-track{background:transparent}.messages::-webkit-scrollbar-thumb,.flashcards-grid::-webkit-scrollbar-thumb,.sidebar-conversations::-webkit-scrollbar-thumb{background:var(--border-warm);border-radius:.1875rem}.messages::-webkit-scrollbar-thumb:hover,.flashcards-grid::-webkit-scrollbar-thumb:hover,.sidebar-conversations::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.translation-tooltip{position:absolute;z-index:1000;background:var(--text-primary);color:#fff;padding:.625rem .875rem;border-radius:var(--radius-sm);font-size:.875rem;line-height:1.4;max-width:25rem;box-shadow:0 4px 20px #0003;opacity:0;visibility:hidden;transform:translateY(.25rem);transition:opacity .2s ease,transform .2s ease,visibility .2s;pointer-events:none}.translation-tooltip.visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.translation-tooltip:before{content:"";position:absolute;bottom:-.875rem;left:0;right:0;height:.875rem;background:transparent}.translation-tooltip:after{content:"";position:absolute;bottom:-.375rem;left:1.25rem;width:.75rem;height:.75rem;background:var(--text-primary);transform:rotate(45deg);border-radius:0 0 2px}.translation-content{display:block}.translation-text{display:block;word-wrap:break-word}.translation-loading{display:none;align-items:center;justify-content:center;gap:.25rem;padding:.25rem 0}.translation-tooltip.loading .translation-loading{display:flex}.translation-tooltip.loading .translation-content{display:none}.translation-loading span{width:.375rem;height:.375rem;border-radius:50%;background:#ffffffb3;animation:translation-dot 1.2s ease-in-out infinite}.translation-loading span:nth-child(1){animation-delay:0s}.translation-loading span:nth-child(2){animation-delay:.15s}.translation-loading span:nth-child(3){animation-delay:.3s}@keyframes translation-dot{0%,60%,to{opacity:.4;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}.feedback-tooltip{position:absolute;z-index:1000;background:var(--green-dark);color:#fff;padding:.625rem .875rem;border-radius:var(--radius-sm);font-size:.875rem;line-height:1.4;max-width:25rem;box-shadow:0 4px 20px #0003;opacity:0;visibility:hidden;transform:translateY(.25rem);transition:opacity .2s ease,transform .2s ease,visibility .2s;pointer-events:none}.feedback-tooltip.visible{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.feedback-tooltip:before{content:"";position:absolute;bottom:-.875rem;left:0;right:0;height:.875rem;background:transparent}.feedback-tooltip:after{content:"";position:absolute;bottom:-.375rem;left:1.25rem;width:.75rem;height:.75rem;background:var(--green-dark);transform:rotate(45deg);border-radius:0 0 2px}.feedback-content{display:block}.feedback-text{display:block;word-wrap:break-word}.feedback-loading{display:none;align-items:center;justify-content:center;gap:.25rem;padding:.25rem 0}.feedback-tooltip.loading .feedback-loading{display:flex}.feedback-tooltip.loading .feedback-content{display:none}.feedback-loading span{width:.375rem;height:.375rem;border-radius:50%;background:#ffffffb3;animation:feedback-dot 1.2s ease-in-out infinite}.feedback-loading span:nth-child(1){animation-delay:0s}.feedback-loading span:nth-child(2){animation-delay:.15s}.feedback-loading span:nth-child(3){animation-delay:.3s}@keyframes feedback-dot{0%,60%,to{opacity:.4;transform:scale(.8)}30%{opacity:1;transform:scale(1)}}.welcome-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#22222273;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:welcome-fade-in .35s ease-out}.welcome-overlay.hidden{display:none}@keyframes welcome-fade-in{0%{opacity:0}to{opacity:1}}.welcome-modal{position:relative;background:var(--bg-primary);border:1px solid var(--border-warm);border-radius:1rem;box-shadow:0 12px 48px #00000026;max-width:28rem;width:calc(100% - 2rem);padding:2.5rem 2rem 2rem;text-align:center;animation:welcome-modal-in .4s cubic-bezier(.34,1.56,.64,1)}@keyframes welcome-modal-in{0%{opacity:0;transform:translateY(1.5rem) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.welcome-close{position:absolute;top:.75rem;right:.75rem;width:2.25rem;height:2.25rem;border:none;background:transparent;color:var(--text-muted);cursor:pointer;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;line-height:1;transition:all var(--transition-fast)}.welcome-close:hover{background:var(--border-light);color:var(--text-primary)}.welcome-title{font-size:1.5rem;font-weight:700;color:var(--green-main);margin-bottom:.5rem;letter-spacing:-.02em}.welcome-description{font-size:.9375rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem;max-width:22rem;margin-left:auto;margin-right:auto}.welcome-cta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.875rem 2rem;background:var(--green-main);color:#fff;border:none;border-radius:.625rem;font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-height:3rem}.welcome-cta:hover{background:var(--green-light);transform:translateY(-1px);box-shadow:0 4px 16px #02764540}.welcome-cta:active{transform:translateY(0)}.welcome-features{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:1.25rem 0}.welcome-feature{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-secondary, #6B6662);padding:.5rem .75rem;background:var(--bg-secondary, #f4f0eb);border-radius:.5rem}.welcome-links{display:flex;justify-content:center;gap:1rem;margin-bottom:1rem}.welcome-links a{font-size:.8125rem;color:var(--color-primary, #027645);text-decoration:none;font-weight:500}.welcome-links a:hover{text-decoration:underline}.welcome-description a{color:var(--color-primary, #027645);text-decoration:none;font-weight:500}.welcome-description a:hover{text-decoration:underline}.auth-loading-modal{text-align:center;padding:2.5rem 2rem}.auth-loading-spinner{width:2.5rem;height:2.5rem;border:3px solid var(--border-warm, #E9E5E0);border-top-color:var(--color-primary, #027645);border-radius:50%;margin:0 auto 1.25rem;animation:auth-spin .8s linear infinite}@keyframes auth-spin{to{transform:rotate(360deg)}}
