@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";:root{--bg-app:#faf6f0;--bg-card:#fff;--bg-input:#f3ede3;--border-color:#e8dec9;--text-primary:#2c2621;--text-secondary:#706354;--text-inverse:#fff;--primary:#d35400;--primary-hover:#e65c00;--primary-light:#fbefe6;--accent-teal:#0d9488;--accent-teal-hover:#0f766e;--accent-teal-light:#edfdfb;--accent-amber:#d97706;--accent-amber-hover:#b45309;--accent-amber-light:#fef3c7;--accent-orange:#ea580c;--accent-orange-hover:#c2410c;--accent-orange-light:#ffedd5;--accent-red:#e11d48;--accent-red-hover:#be123c;--accent-red-light:#ffe4e6;--shadow-sm:0 1px 2px #7063540d;--shadow-md:0 4px 6px -1px #70635414, 0 2px 4px -1px #7063540a;--shadow-lg:0 10px 20px -3px #7063541f, 0 4px 8px -2px #7063540f;--radius-sm:8px;--radius-md:12px;--radius-lg:20px;--transition:all .2s cubic-bezier(.4, 0, .2, 1);--max-width:480px}@media (prefers-color-scheme:dark){:root{--bg-app:#0f172a;--bg-card:#1e293b;--bg-input:#334155;--border-color:#334155;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-inverse:#0f172a;--primary:#ff7a29;--primary-hover:#ff8f4c;--primary-light:#2d251e;--accent-teal:#2dd4bf;--accent-teal-hover:#5eead4;--accent-teal-light:#132e2d;--accent-amber:#f59e0b;--accent-amber-hover:#fbbf24;--accent-amber-light:#2e2512;--accent-orange:#fb923c;--accent-orange-hover:#fdba74;--accent-orange-light:#302014;--accent-red:#fb7185;--accent-red-hover:#fda4af;--accent-red-light:#331a1e;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 6px -1px #0006;--shadow-lg:0 10px 15px -3px #00000080}}*{box-sizing:border-box;-webkit-font-smoothing:antialiased;margin:0;padding:0;font-family:Outfit,system-ui,-apple-system,sans-serif}body{background-color:var(--bg-app);color:var(--text-primary);justify-content:center;align-items:stretch;min-height:100vh;display:flex}#root{width:100%;max-width:var(--max-width);background-color:var(--bg-app);flex-direction:column;min-height:100vh;margin:0 auto;display:flex;position:relative;box-shadow:0 0 40px #00000008}.app-container{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));flex-direction:column;flex:1;display:flex}.main-content{flex-direction:column;flex:1;padding:20px;display:flex;overflow-y:auto}.navbar{width:100%;max-width:var(--max-width);background-color:var(--bg-card);border-top:1px solid var(--border-color);height:calc(68px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);z-index:100;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -4px 10px #00000005}.nav-item{height:100%;color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;font-size:11px;font-weight:500;display:flex}.nav-item svg{stroke-width:2px;width:22px;height:22px;transition:var(--transition)}.nav-item:hover,.nav-item.active{color:var(--primary)}.nav-item.active svg{color:var(--primary);transform:translateY(-2px)}.app-header{background-color:var(--bg-card);border-bottom:1px solid var(--border-color);z-index:90;justify-content:space-between;align-items:center;padding:16px 20px;display:flex;position:sticky;top:0}.logo{color:var(--primary);letter-spacing:-.5px;align-items:center;gap:6px;font-size:19px;font-weight:700;display:flex}.logo span{color:var(--text-primary)}.header-actions{align-items:center;gap:12px;display:flex}.streak-badge{color:var(--primary);background-color:var(--primary-light);border:1px solid #d3540026;border-radius:50px;align-items:center;gap:4px;padding:4px 10px;font-size:14px;font-weight:600;display:flex}.card{background-color:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:var(--transition);margin-bottom:16px;padding:20px}.card:hover{box-shadow:var(--shadow-md)}.btn{border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);text-align:center;border:none;justify-content:center;align-items:center;gap:8px;width:100%;padding:12px 20px;font-size:15px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.98)}.btn-primary{background-color:var(--primary);color:var(--text-inverse)}.btn-primary:hover{background-color:var(--primary-hover)}.btn-secondary{background-color:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background-color:var(--border-color)}.btn-outline{color:var(--primary);border:2px solid var(--primary);background:0 0}.btn-outline:hover{background-color:var(--primary-light)}.title-xl{margin-bottom:8px;font-size:24px;font-weight:700;line-height:1.2}.title-lg{margin-bottom:12px;font-size:20px;font-weight:600}.text-muted{color:var(--text-secondary);font-size:14px;line-height:1.5}.welcome-screen{text-align:center;background:linear-gradient(180deg, var(--bg-card) 0%, var(--bg-app) 100%);flex-direction:column;flex:1;justify-content:center;align-items:center;padding:32px 24px;display:flex}.welcome-logo{background-color:var(--primary-light);border:2px solid var(--primary);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin-bottom:24px;display:flex}.welcome-logo svg{width:42px;height:42px;color:var(--primary)}.dashboard-greeting{margin-bottom:20px}.dashboard-greeting h1{color:var(--text-primary);letter-spacing:-.5px;font-size:26px;font-weight:700}.dashboard-hero{background-color:var(--primary-light);border:1px solid #d3540026;flex-direction:column;gap:12px;display:flex}.hero-badge{background-color:var(--primary);color:#fff;text-transform:uppercase;letter-spacing:.5px;border-radius:6px;align-self:flex-start;padding:3px 8px;font-size:11px;font-weight:700}.stats-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;display:grid}.stat-card{background-color:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);text-align:center;flex-direction:column;align-items:center;padding:16px;display:flex}.stat-val{color:var(--primary);margin-top:4px;font-size:22px;font-weight:700}.progress-container{align-items:center;gap:16px;margin:16px 0;display:flex}.progress-bar-outer{background-color:var(--bg-input);border-radius:10px;height:10px;overflow:hidden}.progress-container .progress-bar-outer{flex:1}.progress-bar-inner{background-color:var(--primary);height:100%;transition:var(--transition);border-radius:10px}.practice-container{flex-direction:column;flex:1;justify-content:space-between;display:flex}.practice-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.practice-progress-text{color:var(--text-secondary);font-size:14px;font-weight:600}.practice-card-box{flex-direction:column;flex:1;justify-content:center;min-height:240px;margin-bottom:20px;display:flex;position:relative}.practice-prompt-card{text-align:center;background-color:var(--bg-card);border:2px solid var(--border-color);border-radius:var(--radius-lg);min-height:220px;box-shadow:var(--shadow-lg);flex-direction:column;justify-content:space-between;align-items:center;padding:24px;display:flex;position:relative}.card-category{color:var(--primary);text-transform:uppercase;background-color:var(--primary-light);border-radius:50px;padding:4px 10px;font-size:12px;font-weight:700}.prompt-english{color:var(--text-primary);margin:20px 0;font-size:22px;font-weight:700;line-height:1.3}.say-out-loud-cue{color:var(--primary);background-color:var(--primary-light);border:1px dashed var(--primary);border-radius:50px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;animation:2s ease-in-out infinite gentlePulse;display:flex}@keyframes gentlePulse{0%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.03)}to{opacity:.9;transform:scale(1)}}.optional-input-wrapper{width:100%;margin-top:16px}.optional-input{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-input);width:100%;color:var(--text-primary);transition:var(--transition);text-align:center;outline:none;padding:12px 16px;font-size:15px}.optional-input:focus{border-color:var(--primary);background-color:var(--bg-card)}.practice-reveal-area{flex-direction:column;align-items:center;gap:16px;width:100%;animation:.25s ease-out slideUp;display:flex}@keyframes slideUp{0%{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.spanish-answer-bubble{background-color:var(--primary-light);border-radius:var(--radius-md);border:1px solid #d3540033;flex-direction:column;align-items:center;gap:8px;width:100%;padding:16px;display:flex;position:relative}.spanish-text{color:var(--primary);font-size:24px;font-weight:700;line-height:1.2}.literal-text{color:var(--text-secondary);font-size:13px;font-style:italic}.btn-tts{background-color:var(--primary);color:#fff;cursor:pointer;width:38px;height:38px;box-shadow:var(--shadow-sm);transition:var(--transition);border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.btn-tts:hover{background-color:var(--primary-hover);transform:scale(1.1)}.teacher-tip{background-color:var(--bg-app);border-left:4px solid var(--primary);border-radius:0 var(--radius-md) var(--radius-md) 0;text-align:left;width:100%;padding:12px 16px;font-size:13px}.teacher-tip strong{color:var(--primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;font-size:11px;display:block}.teacher-message{color:var(--primary);margin-top:4px;font-size:14px;font-style:italic;font-weight:500}.rating-panel{flex-direction:column;gap:12px;width:100%;margin-top:10px;display:flex}.rating-heading{text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);text-align:center;font-size:12px;font-weight:700}.rating-buttons-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.btn-rate{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-card);cursor:pointer;transition:var(--transition);flex-direction:column;align-items:center;gap:4px;padding:10px 4px;display:flex}.btn-rate-val{font-size:14px;font-weight:700}.btn-rate-desc{font-size:9px;font-weight:500}.btn-rate.easy{color:var(--accent-teal);background-color:var(--accent-teal-light);border-color:#0d948833}.btn-rate.easy:hover{background-color:var(--accent-teal);color:#fff}.btn-rate.nearly{color:var(--accent-amber);background-color:var(--accent-amber-light);border-color:#d9770633}.btn-rate.nearly:hover{background-color:var(--accent-amber);color:#fff}.btn-rate.hard{color:var(--accent-orange);background-color:var(--accent-orange-light);border-color:#ea580c33}.btn-rate.hard:hover{background-color:var(--accent-orange);color:#fff}.btn-rate.forgot{color:var(--accent-red);background-color:var(--accent-red-light);border-color:#e11d4833}.btn-rate.forgot:hover{background-color:var(--accent-red);color:#fff}.phrase-bank-controls{flex-direction:column;gap:10px;margin-bottom:16px;display:flex}.search-input{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-card);width:100%;color:var(--text-primary);outline:none;padding:12px 16px;font-size:15px}.search-input:focus{border-color:var(--primary)}.category-filter-scroll{scrollbar-width:none;gap:8px;padding-bottom:6px;display:flex;overflow-x:auto}.category-filter-scroll::-webkit-scrollbar{display:none}.filter-badge{white-space:nowrap;background-color:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-color);cursor:pointer;transition:var(--transition);border-radius:50px;padding:6px 12px;font-size:12px;font-weight:600}.filter-badge.active{background-color:var(--primary);color:var(--text-inverse);border-color:var(--primary)}.phrase-list{flex-direction:column;gap:12px;display:flex}.phrase-item{border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-card);flex-direction:column;gap:8px;padding:16px;display:flex}.phrase-item-top{justify-content:space-between;align-items:flex-start;display:flex}.phrase-item-text{flex:1}.phrase-item-english{font-size:16px;font-weight:700}.phrase-item-spanish{color:var(--primary);margin-top:4px;font-size:17px;font-weight:700}.phrase-item-badge{border-radius:4px;align-self:flex-start;padding:2px 6px;font-size:10px;font-weight:700}.phrase-item-badge.easy{background-color:var(--accent-teal-light);color:var(--accent-teal)}.phrase-item-badge.nearly{background-color:var(--accent-amber-light);color:var(--accent-amber)}.phrase-item-badge.hard{background-color:var(--accent-orange-light);color:var(--accent-orange)}.phrase-item-badge.forgot{background-color:var(--accent-red-light);color:var(--accent-red)}.phrase-item-badge.unrated{background-color:var(--bg-input);color:var(--text-secondary)}.progress-header{text-align:center;margin-bottom:24px}.achievement-icon{background-color:var(--primary-light);border:2px solid var(--primary);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 12px;display:flex}.achievement-icon svg{width:32px;height:32px;color:var(--primary)}.session-summary-box{background-color:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:20px;padding:20px}.session-summary-row{border-bottom:1px solid var(--border-color);justify-content:space-between;padding:10px 0;display:flex}.session-summary-row:last-child{border-bottom:none}.session-summary-label{color:var(--text-secondary);font-weight:500}.session-summary-value{font-weight:700}.settings-group{margin-bottom:20px}.settings-label{margin-bottom:8px;font-weight:600;display:block}.settings-select{border-radius:var(--radius-md);border:1px solid var(--border-color);background-color:var(--bg-card);width:100%;color:var(--text-primary);outline:none;padding:10px 14px;font-size:15px}.settings-slider-container{align-items:center;gap:12px;display:flex}.settings-slider{accent-color:var(--primary);flex:1}.btn-danger{background-color:var(--accent-red);color:#fff}.btn-danger:hover{background-color:var(--accent-red-hover)}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-app)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}