:root{--primary:#6366f1;--primary-hover:#4f46e5;--bg-dark:#0f172a;--card-bg:#1e293b;--text-main:#f8fafc;--text-dim:#94a3b8;--glass:#ffffff0d}*{box-sizing:border-box;margin:0;padding:0;font-family:Outfit,sans-serif}body{background-color:var(--bg-dark);color:var(--text-main);justify-content:center;min-height:100vh;display:flex;overflow:hidden auto}.overlay{z-index:1000;text-align:center;background:radial-gradient(circle,#1e293b 0%,#0f172a 100%);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.logo-large{background:linear-gradient(135deg,#818cf8,#6366f1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:1rem;font-size:4rem;font-weight:800}.primary-btn{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:50px;margin-top:2rem;padding:1rem 2.5rem;font-size:1.1rem;font-weight:600;transition:transform .2s,background .2s;box-shadow:0 10px 25px -5px #6366f166}.primary-btn:hover{background:var(--primary-hover);transform:translateY(-2px)}.app-container{flex-direction:column;width:100%;max-width:480px;padding:1.5rem 1.5rem 3rem;display:flex}header{margin-bottom:1.5rem}.header-content{justify-content:space-between;align-items:center;display:flex}.logo{letter-spacing:-.5px;font-size:1.5rem;font-weight:700}.stat-item{background:var(--glass);border-radius:12px;flex-direction:column;align-items:flex-end;padding:.5rem 1rem;display:flex}.stat-label{color:var(--text-dim);text-transform:uppercase;font-size:.7rem}.stat-value{font-weight:600}.status-card{background:var(--card-bg);text-align:center;border:1px solid #ffffff0d;border-radius:30px;flex-direction:column;justify-content:center;align-items:center;min-height:280px;margin-bottom:1.5rem;padding:2rem;display:flex;position:relative;box-shadow:0 20px 50px #0000004d}.adaptive-badge{white-space:nowrap;background:linear-gradient(135deg,#6366f1,#a855f7);border-radius:50px;padding:6px 16px;font-size:.75rem;font-weight:700;position:absolute;top:-12px;left:50%;transform:translate(-50%);box-shadow:0 5px 15px #6366f166}.accuracy-score{color:#22c55e;background:#22c55e1a;border:1px solid #22c55e;border-radius:8px;padding:4px 10px;font-size:.75rem;font-weight:700;position:absolute;top:20px;right:20px}.status-icon{background:var(--glass);border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin-bottom:1rem;display:flex;position:relative}#status-text{max-width:90%;font-size:1.15rem;line-height:1.4;transition:all .3s}#status-text.speaking-text{color:#fff;text-shadow:0 2px 10px #6366f14d;font-weight:500}.status-icon:after{content:"";border:2px solid var(--primary);opacity:.2;border-radius:50%;position:absolute;inset:-10px}.status-icon.speaking:after{animation:1.5s infinite pulse}.status-icon.recording{background:#ef444433}.status-icon.recording:after{border-color:#ef4444;animation:1s infinite pulse}@keyframes pulse{0%{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.4)}}.teacher-tip{color:#a855f7;opacity:.8;margin-top:10px;font-size:.75rem;font-style:italic}.story-counter{color:var(--text-dim);margin-top:10px;font-size:.8rem}.stats-section{background:var(--glass);border-radius:20px;margin-bottom:1.5rem;padding:1rem}.stats-section h3{color:var(--text-dim);text-transform:uppercase;text-align:center;margin-bottom:10px;font-size:.8rem}.chart-container{justify-content:space-around;align-items:flex-end;height:100px;padding-top:10px;display:flex}.chart-bar{background:linear-gradient(180deg, var(--primary), #a855f7);border-radius:4px;width:20px;transition:height 1s;position:relative}.chart-bar:after{content:attr(data-day);color:var(--text-dim);font-size:.65rem;position:absolute;bottom:-18px;left:50%;transform:translate(-50%)}.control-grid{grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;display:grid}.mode-btn{background:var(--card-bg);color:#fff;cursor:pointer;text-align:left;border:1px solid #ffffff0d;border-radius:20px;padding:1rem;transition:transform .2s}.mode-btn:hover{background:#2d3748}.mode-btn.active{border-color:var(--primary);background:#6366f11a}.btn-icon{margin-bottom:.5rem;font-size:1.2rem}.btn-text strong{font-size:.9rem;display:block}.btn-text span{color:var(--text-dim);font-size:.7rem}footer{margin-top:auto}.footer-stats{background:var(--glass);border-radius:20px;justify-content:space-around;padding:1rem;display:flex}.footer-stat{text-align:center}.footer-stat span{font-size:1.1rem;font-weight:700;display:block}.footer-stat label{color:var(--text-dim);text-transform:uppercase;font-size:.65rem}.footer-stat.highlight span{color:#a855f7}