html,body{width:100%;min-height:100vh;margin:0;padding:0}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}:root{--font-heading:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--color-primary:#312e81;--color-primary-hover:#1e1b4b;--color-primary-light:#eef2ff;--color-primary-subtle:#f8fafc;--color-gold:#b45309;--color-gold-hover:#92400e;--color-gold-light:#fef3c7;--color-gold-glow:#f59e0b40;--color-emerald:#059669;--color-emerald-light:#d1fae5;--color-rose:#e11d48;--color-rose-light:#ffe4e6;--bg-app:#fbf9f5;--bg-surface:#fff;--bg-surface-elevated:#faf8f5;--bg-card:#fff;--bg-card-hover:#f8f7f4;--color-text-main:#1e293b;--color-text-muted:#64748b;--color-text-light:#94a3b8;--border-color:#e7e3d8;--border-color-focus:#b45309;--border-radius-sm:8px;--border-radius-md:14px;--border-radius-lg:20px;--border-radius-xl:28px;--border-radius-full:9999px;--shadow-sm:0 1px 3px #0000000d;--shadow-md:0 6px 16px -2px #312e810f, 0 2px 6px -1px #00000008;--shadow-lg:0 14px 30px -4px #312e811a, 0 6px 12px -2px #0000000a;--shadow-gold:0 8px 24px -2px #b4530933;--transition-fast:.15s ease;--transition-normal:.25s cubic-bezier(.4, 0, .2, 1)}html.dark{--bg-app:#0b0f19;--bg-surface:#131a2a;--bg-surface-elevated:#1b2438;--bg-card:#141b2d;--bg-card-hover:#1c263d;--color-primary:#818cf8;--color-primary-hover:#a5b4fc;--color-primary-light:#1e1b4b;--color-primary-subtle:#131a2a;--color-gold:#fbbf24;--color-gold-hover:#f59e0b;--color-gold-light:#2a2111;--color-gold-glow:#fbbf2433;--color-text-main:#f8fafc;--color-text-muted:#94a3b8;--color-text-light:#64748b;--border-color:#242e46;--border-color-focus:#fbbf24;--shadow-sm:0 1px 3px #0006;--shadow-md:0 6px 20px -2px #00000080;--shadow-lg:0 16px 36px -4px #0009;--shadow-gold:0 8px 24px -2px #fbbf2440}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;max-width:100%;position:relative;overflow-x:hidden}body{font-family:var(--font-body);background-color:var(--bg-app);color:var(--color-text-main);-webkit-font-smoothing:antialiased;min-height:100vh;transition:background-color var(--transition-normal), color var(--transition-normal);line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em;color:var(--color-text-main);line-height:1.25}button{font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--border-color-focus);outline-offset:2px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--border-radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-light)}html,body,#root,.app-container{width:100%!important;max-width:100%!important;overflow-x:hidden!important}.app-container{flex-direction:column;min-height:100dvh;display:flex}.main-content{box-sizing:border-box;flex:1;width:100%;max-width:1140px;margin:0 auto;padding:1.5rem 1rem 4rem}.main-content-tutor{flex-direction:column;height:calc(100dvh - 80px);max-height:calc(100dvh - 80px);padding:.75rem 1rem 1rem;display:flex;overflow:hidden}@media (width<=768px){.main-content-tutor{padding:.35rem .5rem calc(68px + env(safe-area-inset-bottom,0px))!important;height:100dvh!important;max-height:100dvh!important;overflow:hidden!important}}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-sm);transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);padding:1.5rem}.card:hover{box-shadow:var(--shadow-md);border-color:#b4530940}.badge{border-radius:var(--border-radius-full);letter-spacing:.02em;align-items:center;gap:.35rem;padding:.3rem .75rem;font-size:.78rem;font-weight:600;display:inline-flex}.badge-gold{background:var(--color-gold-light);color:var(--color-gold)}.badge-indigo{background:var(--color-primary-light);color:var(--color-primary)}.badge-emerald{background:var(--color-emerald-light);color:var(--color-emerald)}.badge-rose{background:var(--color-rose-light);color:var(--color-rose)}.btn{border-radius:var(--border-radius-md);cursor:pointer;min-height:40px;transition:all var(--transition-fast);justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1.25rem;font-size:.92rem;font-weight:600;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#312e81 0%,#4338ca 100%);box-shadow:0 4px 12px #312e8140}.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px #312e8159}.btn-gold{color:#fff;box-shadow:var(--shadow-gold);background:linear-gradient(135deg,#b45309 0%,#d97706 100%)}.btn-gold:hover{filter:brightness(1.05);transform:translateY(-1px)}.btn-outline{border:1px solid var(--border-color);background:var(--bg-surface);color:var(--color-text-main)}.btn-outline:hover{background:var(--bg-surface-elevated);border-color:var(--color-gold);color:var(--color-gold)}.btn-ghost{color:var(--color-text-muted);padding:.5rem .75rem}.btn-ghost:hover{background:var(--color-primary-light);color:var(--color-primary)}@keyframes audioPulse{0%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}to{opacity:.9;transform:scale(1)}}.speaking-pulse{animation:1.2s ease-in-out infinite audioPulse;color:var(--color-gold)!important}.interactive-word{cursor:pointer;color:var(--color-gold);border-bottom:2px dashed var(--color-gold);transition:background-color var(--transition-fast), color var(--transition-fast);border-radius:3px;padding:0 2px;font-weight:600;position:relative}.interactive-word:hover{background-color:var(--color-gold-light);color:var(--color-gold-hover)}.modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:1000;background:#0b0f19a6;justify-content:center;align-items:center;padding:1rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-content{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--border-radius-xl);width:100%;max-width:580px;max-height:90vh;box-shadow:var(--shadow-xl);padding:1.75rem;animation:.25s cubic-bezier(.16,1,.3,1) slideUp;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.streak-pill{color:#b45309;border-radius:var(--border-radius-full);background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:1px solid #f59e0b4d;align-items:center;gap:.4rem;padding:.35rem .85rem;font-size:.82rem;font-weight:700;display:flex}html.dark .streak-pill{color:#fbbf24;background:#241c10;border-color:#593e11}.nav-tab-btn{border-radius:var(--border-radius-md);color:var(--color-text-muted);transition:all var(--transition-fast);white-space:nowrap;align-items:center;gap:.5rem;padding:.6rem 1rem;font-size:.9rem;font-weight:600;display:flex}.nav-tab-btn:hover{color:var(--color-text-main);background:var(--bg-surface-elevated)}.nav-tab-btn.active{color:#fff;background:linear-gradient(135deg,#312e81 0%,#4338ca 100%);box-shadow:0 4px 12px #312e8140}html.dark .nav-tab-btn.active{color:#fff;background:linear-gradient(135deg,#4338ca 0%,#6366f1 100%)}*{-webkit-tap-highlight-color:transparent}button,a,input,select,textarea,.card,.nav-tab-btn,.mobile-nav-item{touch-action:manipulation}[style*="overflowX: auto"],[style*="overflow-x: auto"],.desktop-nav-tabs,.mobile-bottom-nav{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.mobile-bottom-nav{display:none}.desktop-nav-tabs{display:flex}.header-inner{box-sizing:border-box;justify-content:space-between;align-items:center;gap:.5rem;width:100%;max-width:1140px;margin:0 auto;padding:.65rem 1rem;display:flex}.header-brand{cursor:pointer;flex-shrink:1;align-items:center;gap:.55rem;min-width:0;display:flex}.brand-title{font-family:var(--font-heading);letter-spacing:-.02em;color:var(--color-text-main);font-size:1.18rem;font-weight:800;line-height:1.1}.brand-subtitle{color:var(--color-gold);letter-spacing:.04em;font-size:.68rem;font-weight:700}.header-controls{flex-shrink:0;align-items:center;gap:.45rem;display:flex}.profile-switch-btn{border-radius:var(--border-radius-full);background:var(--bg-app);border:1px solid var(--border-color);cursor:pointer;align-items:center;gap:.4rem;max-width:130px;padding:.35rem .65rem;display:flex}.profile-switch-name{color:var(--color-text-main);text-overflow:ellipsis;white-space:nowrap;max-width:75px;font-size:.8rem;font-weight:700;overflow:hidden}@media (width<=768px){input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{font-size:16px!important}.desktop-nav-tabs{display:none!important}.header-inner{gap:.35rem!important;padding:.4rem .65rem!important}.brand-subtitle{display:none!important}.brand-title{white-space:nowrap;font-size:1.05rem!important}.desktop-only-btn{display:none!important}.header-controls{gap:.3rem!important}.streak-pill{gap:.2rem!important;padding:.28rem .55rem!important;font-size:.74rem!important}.profile-switch-btn{gap:.25rem!important;max-width:100px!important;padding:.3rem .5rem!important}.profile-switch-name{max-width:58px!important;font-size:.75rem!important}header{padding-top:max(.55rem, env(safe-area-inset-top,0px))!important;padding-left:max(.65rem, env(safe-area-inset-left,0px))!important;padding-right:max(.65rem, env(safe-area-inset-right,0px))!important}.main-content{padding-top:.85rem;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px));padding-left:max(.75rem, env(safe-area-inset-left,0px));padding-right:max(.75rem, env(safe-area-inset-right,0px));overflow-x:hidden}.mobile-bottom-nav{height:calc(62px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--bg-surface);border-top:1px solid var(--border-color);-webkit-backdrop-filter:blur(20px);z-index:999;padding-left:max(.35rem, env(safe-area-inset-left,0px));padding-right:max(.35rem, env(safe-area-inset-right,0px));scrollbar-width:none;-webkit-overflow-scrolling:touch;box-sizing:border-box;justify-content:flex-start;align-items:center;width:100%;max-width:100vw;display:flex;position:fixed;bottom:0;left:0;right:0;overflow-x:auto;box-shadow:0 -4px 20px #00000017}.mobile-bottom-nav::-webkit-scrollbar{display:none}.mobile-nav-item{min-width:62px;height:100%;color:var(--color-text-muted);cursor:pointer;white-space:nowrap;background:0 0;border:none;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:2px;padding:3px 4px;font-size:.65rem;font-weight:600;text-decoration:none;transition:color .15s,transform .15s;display:flex}.mobile-nav-item:active{transform:scale(.94)}.mobile-nav-item.active{color:var(--color-gold);font-weight:800}.mobile-nav-item.active svg{color:var(--color-gold);transform:scale(1.12)}.modal-overlay{overscroll-behavior-y:none;align-items:flex-end;padding:0}.modal-content{max-height:calc(88dvh - env(safe-area-inset-top,0px));padding:1.5rem 1.15rem calc(2rem + env(safe-area-inset-bottom,0px));overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:24px 24px 0 0}h1{word-break:break-word;font-size:1.35rem!important;line-height:1.25!important}h2{word-break:break-word;font-size:1.18rem!important;line-height:1.3!important}.interactive-verse-text{font-size:1.12rem!important;line-height:1.6!important}.card{border-radius:var(--border-radius-md);padding:1rem}.btn{min-height:44px;font-size:.88rem}}