:root{--primary-h: 210;--primary-s: 100%;--primary-l: 50%;--primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));--primary-dark: hsl(var(--primary-h), var(--primary-s), 40%);--primary-light: hsl(var(--primary-h), var(--primary-s), 95%);--success-h: 142;--success-s: 70%;--success-l: 45%;--success: hsl(var(--success-h), var(--success-s), var(--success-l));--success-light: hsl(var(--success-h), var(--success-s), 95%);--error-h: 0;--error-s: 84%;--error-l: 60%;--error: hsl(var(--error-h), var(--error-s), var(--error-l));--error-light: hsl(var(--error-h), var(--error-s), 95%);--bg: #f8fafc;--text-main: #1e293b;--text-muted: #64748b;--white: #ffffff;--card-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--card-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 20px;--radius-full: 9999px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Inter,Hind Siliguri,sans-serif;background-color:var(--bg);color:var(--text-main);line-height:1.5;overflow-x:hidden;min-height:100vh}#app{max-width:500px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;background:var(--white);box-shadow:0 0 50px #0000000d}#main-header{padding:16px 20px;background:var(--white);position:sticky;top:0;z-index:100;border-bottom:1px solid #f1f5f9}.header-content{display:flex;justify-content:space-between;align-items:center}.brand{font-size:1.5rem;font-weight:800;color:var(--primary);letter-spacing:-.5px}.streak-container{display:flex;align-items:center;gap:4px;background:#fff7ed;padding:4px 12px;border-radius:var(--radius-full);border:1px solid #ffedd5}.streak-count{font-weight:700;color:#ea580c}#progress-container{margin-top:12px}#progress-bar{height:8px;background:#e2e8f0;border-radius:var(--radius-full);overflow:hidden}#progress-fill{height:100%;background:var(--success);width:0%;transition:width .5s ease}#view-container{flex:1;display:flex;flex-direction:column}#bottom-nav{display:flex;justify-content:space-around;align-items:center;background:var(--white);padding:12px 0 24px;border-top:1px solid #f1f5f9;position:sticky;bottom:0}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--text-muted);transition:var(--transition)}.nav-icon{font-size:1.25rem}.nav-label{font-size:.75rem;font-weight:600}.nav-item.active{color:var(--primary)}.hidden{display:none!important}.screen{flex:1;display:flex;flex-direction:column;padding:24px 20px;animation:fadeIn .3s ease;position:relative}.back-icon-btn{background:#000;border:none;width:32px;height:32px;border-radius:50%;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--transition);padding:0}.back-icon-btn svg{width:18px;height:18px;margin-right:2px}.back-icon-btn:active{transform:scale(.9);opacity:.8}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:var(--radius-md);font-weight:700;cursor:pointer;transition:var(--transition);border:none;font-size:1rem;width:100%;gap:8px}.btn-primary{background:var(--primary);color:var(--white);box-shadow:0 4px 14px rgba(var(--primary-h),var(--primary-s),var(--primary-l),.39)}.btn-primary:active{transform:scale(.98);background:var(--primary-dark)}.btn-secondary{background:var(--primary-light);color:var(--primary)}#loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;margin-top:40px}.spinner{width:40px;height:40px;border:4px solid var(--primary-light);border-top:4px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.learn-container{flex:1;display:flex;flex-direction:column}.learn-card-wrapper{flex:1;display:flex;align-items:center;justify-content:center;perspective:1000px}.ai-loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;background:#f8fafc;border:2px dashed #cbd5e1;border-radius:var(--radius-lg);margin-top:24px;animation:pulse 2s infinite ease-in-out;text-align:center}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.ai-loader-icon{font-size:2.5rem;margin-bottom:12px}.ai-loader-text{font-family:Hind Siliguri;color:var(--primary);font-weight:600}.learn-card{background:var(--white);width:100%;min-height:300px;padding:32px 24px;border-radius:var(--radius-lg);box-shadow:var(--card-shadow-lg);display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;border:1px solid #f1f5f9;animation:cardEnter .4s cubic-bezier(.175,.885,.32,1.275)}@keyframes cardEnter{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.card-title{font-size:2.5rem;font-weight:800;color:var(--primary);margin-bottom:12px}.card-meaning{font-size:1.5rem;font-family:Hind Siliguri;color:var(--text-main);font-weight:600}.card-explanation{font-size:1.2rem;font-family:Hind Siliguri;color:var(--text-main)}.card-sentence{font-style:italic;font-size:1.1rem;color:var(--text-main);margin-bottom:12px}.card-sentence-bn{font-family:Hind Siliguri;color:var(--text-muted)}.card-related{width:100%;text-align:left}.related-section{margin-bottom:16px}.related-title{font-size:.8rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;font-weight:700}.related-item{display:inline-block;background:var(--primary-light);color:var(--primary);padding:6px 14px;border-radius:var(--radius-full);font-size:.9rem;font-weight:600;margin:4px}.learn-footer{display:flex;gap:12px;margin-top:24px}.question-container{margin-top:20px}.question-text{font-size:1.25rem;font-weight:700;margin-bottom:24px;color:var(--text-main)}.options-grid{display:grid;gap:12px}.option-btn{background:var(--white);border:2px solid #e2e8f0;border-radius:var(--radius-md);padding:18px;text-align:left;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition)}.option-btn:active{transform:scale(.98)}.option-btn.correct{border-color:var(--success);background:var(--success-light);color:var(--success)}.option-btn.wrong{border-color:var(--error);background:var(--error-light);color:var(--error)}.feedback-area{margin-top:24px;padding:20px;border-radius:var(--radius-md);animation:fadeIn .3s ease}.feedback-success{background:var(--success-light);color:var(--success)}.feedback-error{background:var(--error-light);color:var(--error)}
