:root{--primary: #58cc02;--primary-hover: #46a302;--secondary: #1cb0f6;--accent: #ffc800;--text: #3c3c3c;--text-light: #777777;--bg: #ffffff;--gray-light: #f7f7f7;--border: #e5e5e5;--radius: 12px}body{margin:0;font-family:Outfit,Inter,-apple-system,sans-serif;background-color:var(--gray-light);color:var(--text);-webkit-font-smoothing:antialiased}.app-container{display:flex;min-height:100vh}.sidebar{width:260px;background:#fff;border-right:2px solid var(--border);padding:24px;position:sticky;top:0;height:100vh;box-sizing:border-box}.main-content{flex:1;padding:40px;max-width:900px;margin:0 auto}.lesson-card{background:#fff;padding:32px;border-radius:var(--radius);border:2px solid var(--border);box-shadow:0 4px 0 var(--border);margin-bottom:24px}.btn-primary{background:var(--primary);color:#fff;padding:12px 24px;border-radius:var(--radius);border:none;border-bottom:4px solid var(--primary-hover);cursor:pointer;font-weight:700;font-size:16px;transition:transform .1s}.btn-primary:active{transform:translateY(2px);border-bottom-width:2px}.ruby-text{font-size:1.2rem;line-height:2}rt{font-size:.6em;color:var(--secondary)}.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}.word-card{border:2px solid var(--border);padding:16px;border-radius:var(--radius);transition:border-color .2s}.word-card:hover{border-color:var(--secondary)}.grammar-item{border-left:4px solid var(--accent);padding-left:20px;margin-bottom:30px}:root{--primary: #0398d4;--primary-light: #e1f5fe;--secondary: #7c3aed;--accent: #f59e0b;--success: #10b981;--text-dark: #1a202c;--text-light: #718096;--text-muted: #a0aec0;--bg-light: #f7fafc;--bg-white: #ffffff;--border-color: #e2e8f0;--sidebar-width: 360px;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);--ease-out-expo: cubic-bezier(.19, 1, .22, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-light);color:var(--text-dark);line-height:1.6;overflow:hidden;height:100vh}#root{height:100vh;overflow:hidden}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes glow{0%,to{box-shadow:0 0 5px #3b82f680}50%{box-shadow:0 0 20px #3b82f6cc,0 0 30px #3b82f666}}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(4);opacity:0}}@keyframes typing{0%{width:0}to{width:100%}}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%{transform:scale(1)}}.app-container{display:flex;flex-wrap:wrap;min-height:100vh}.mobile-header{display:none;position:fixed;top:0;left:0;right:0;height:56px;background:linear-gradient(135deg,#1f2937,#111827);border-bottom:1px solid #374151;z-index:200;padding:0 16px;align-items:center;justify-content:space-between}.menu-toggle{width:40px;height:40px;background:#ffffff1a;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.menu-toggle:hover{background:#ffffff26}.hamburger{display:flex;flex-direction:column;gap:4px}.hamburger span{display:block;width:18px;height:2px;background:#fff;border-radius:1px;transition:all .3s}.mobile-title{font-size:1.1rem;font-weight:600;color:#fff}.mobile-progress{width:40px;height:40px;background:#10b98133;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;color:#10b981}.sidebar-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:150;opacity:0;transition:opacity .3s;pointer-events:none}.sidebar-overlay.open{opacity:1;pointer-events:auto}.sidebar{background:var(--bg-white);border-right:1px solid var(--border-color);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:100;animation:fadeInLeft .3s var(--ease-out-expo);transition:width .05s ease-out;min-width:240px;max-width:600px;overscroll-behavior:contain}.sidebar-header{padding:24px 20px;border-bottom:1px solid var(--border-color)}.sidebar-header h1{font-size:1.5rem;font-weight:700;color:var(--text-dark);margin-bottom:4px}.sidebar-header .subtitle{font-size:.85rem;color:var(--text-light);margin-bottom:16px}.overall-progress{display:flex;flex-direction:column;gap:8px}.overall-progress-bar{flex:1;height:6px;background:var(--border-color);border-radius:3px;overflow:hidden}.overall-progress-fill{height:100%;background:linear-gradient(90deg,#10b981,#3b82f6);border-radius:3px;transition:width .5s var(--ease-out-expo)}.overall-progress-fill.gojuon{background:linear-gradient(90deg,#10b981,#059669);transition:width .3s ease}.overall-progress-text{font-size:.75rem;color:var(--text-light);white-space:nowrap}.sidebar-streak{display:flex;align-items:center;gap:6px;padding:8px 12px;margin-bottom:12px;background:linear-gradient(135deg,#f59e0b1a,#fbbf2414);border:1px solid rgba(245,158,11,.2);border-radius:10px;font-size:.85rem}.streak-fire{font-size:1.1rem;animation:streak-glow 2s ease-in-out infinite}@keyframes streak-glow{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.15);filter:brightness(1.2)}}.streak-count{font-weight:700;color:#d97706;font-size:1.05rem}.streak-label{color:#92400e;font-weight:500;font-size:.8rem}.streak-nudge{margin-left:auto;font-size:.7rem;color:#d97706;font-weight:500;animation:nudge-pulse 2s ease-in-out infinite}@keyframes nudge-pulse{0%,to{opacity:.7}50%{opacity:1}}.sidebar-nav{flex:1;overflow-y:auto;padding:12px;overscroll-behavior:contain}.sidebar-nav a{text-decoration:none;color:inherit;display:block}.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border-color)}.sidebar-footer p{font-size:.75rem;color:var(--text-muted);margin:0;text-align:center}.sidebar-user{display:flex;align-items:center;gap:10px}.sidebar-user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#0284c7);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.sidebar-user-avatar img{width:100%;height:100%;object-fit:cover}.sidebar-user-avatar span{font-size:.8rem;font-weight:600;color:#fff}.sidebar-user-email{flex:1;font-size:.78rem;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-logout-btn{width:32px;height:32px;border:none;background:transparent;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all .2s;flex-shrink:0}.sidebar-logout-btn:hover{background:#fef2f2;color:#dc2626}.sidebar-anon{display:flex;align-items:center;justify-content:space-between;gap:8px}.sidebar-anon-label{font-size:.78rem;color:var(--text-muted)}.sidebar-login-btn{padding:6px 14px;border:1.5px solid var(--primary);border-radius:8px;background:transparent;font-size:.78rem;font-family:inherit;font-weight:500;color:var(--primary);cursor:pointer;transition:all .2s}.sidebar-login-btn:hover{background:var(--primary);color:#fff}.auth-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:.9rem}.level-group{margin-bottom:8px;background:var(--bg-white);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}.level-group.coming-soon{opacity:.6}.level-group.coming-soon .level-header{cursor:default}.level-group.coming-soon .level-header:hover{background:transparent;transform:none}.coming-soon-text{color:var(--accent);font-style:italic}.level-header{display:flex;align-items:center;padding:16px;cursor:pointer;transition:all .3s var(--ease-smooth);gap:12px}.level-header:hover{background:var(--bg-light);transform:translate(4px)}.level-header:active{transform:translate(2px) scale(.99)}.level-header.static{cursor:default}.level-header.static:hover{background:transparent;transform:none}.level-badge{padding:6px 12px;border-radius:6px;font-size:.8rem;font-weight:700;color:#fff;min-width:50px;text-align:center}.level-info{flex:1}.level-title{font-weight:600;font-size:.95rem;color:var(--text-dark)}.level-meta{font-size:.8rem;color:var(--text-light);margin-top:2px}.level-toggle{width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--text-light);transition:transform .2s;border-radius:6px}.level-toggle:hover{background:var(--border-color)}.level-toggle.expanded{transform:rotate(180deg)}.lessons-list{border-top:1px solid var(--border-color);background:var(--bg-light);max-height:none;overflow:visible;scrollbar-gutter:auto;animation:fadeInDown .4s var(--ease-out-expo);overscroll-behavior:auto}.lessons-list .lesson-item{animation:fadeInUp .2s var(--ease-out-expo) backwards}.lessons-list .lesson-item:nth-child(1){animation-delay:.01s}.lessons-list .lesson-item:nth-child(2){animation-delay:.02s}.lessons-list .lesson-item:nth-child(3){animation-delay:.03s}.lessons-list .lesson-item:nth-child(4){animation-delay:.04s}.lessons-list .lesson-item:nth-child(5){animation-delay:.05s}.lessons-list .lesson-item:nth-child(6){animation-delay:.06s}.lessons-list .lesson-item:nth-child(7){animation-delay:.07s}.lessons-list .lesson-item:nth-child(8){animation-delay:.08s}.lessons-list .lesson-item:nth-child(9){animation-delay:.09s}.lessons-list .lesson-item:nth-child(10){animation-delay:.1s}.lessons-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:24px;color:var(--text-light);font-size:.9rem}.spinner-small{width:18px;height:18px;border:2px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.lesson-item{border-bottom:1px solid var(--border-color)}.lesson-item:last-child{border-bottom:none}.lesson-item-main{display:flex;align-items:center;padding:12px 16px;cursor:pointer;transition:all .25s var(--ease-smooth);gap:12px;position:relative;overflow:hidden}.lesson-item-main:hover{background:#eaf4fb;transform:translate(4px)}.lesson-item-main:active{transform:translate(2px) scale(.99)}.lesson-item.active .lesson-item-main{background:var(--primary-light);border-left:3px solid var(--primary)}.lesson-checkbox{width:20px;height:20px;border:2px solid var(--border-color);border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s var(--ease-spring);flex-shrink:0;position:relative;overflow:hidden}.lesson-checkbox:hover{border-color:var(--primary);transform:scale(1.1)}.lesson-checkbox:active{transform:scale(.9)}.lesson-checkbox.checked{background:var(--success);border-color:var(--success);animation:pop-check .4s var(--ease-spring)}.lesson-checkbox.readonly{cursor:default}.lesson-checkbox.readonly:hover,.lesson-checkbox.readonly:active{border-color:var(--border-color);transform:none}.lesson-checkbox.readonly.checked:hover,.lesson-checkbox.readonly.checked:active{border-color:var(--success)}@keyframes pop-check{0%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(.9)}to{transform:scale(1)}}.lesson-item-content{flex:1;min-width:0}.lesson-item-day{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;font-weight:600;letter-spacing:.5px}.lesson-item-title{font-size:.85rem;color:var(--text-dark);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lesson-expand{width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);border-radius:4px;transition:all .15s;flex-shrink:0}.lesson-expand:hover{background:var(--border-color);color:var(--text-dark)}.lesson-expand.expanded{transform:rotate(180deg)}.lesson-preview{padding:12px 16px 12px 48px;background:var(--bg-white);border-top:1px solid var(--border-color)}.lesson-preview-task{display:flex;align-items:flex-start;gap:8px;font-size:.8rem;color:var(--text-light);margin-bottom:6px}.task-bullet{color:var(--primary)}.lesson-preview-more{font-size:.75rem;color:var(--text-muted);margin-top:8px}.sidebar-resizer{position:fixed;top:0;width:6px;height:100vh;background:transparent;cursor:col-resize;z-index:110;transition:background .2s}.sidebar-resizer:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:4px;height:40px;background:var(--border-color);border-radius:2px;opacity:0;transition:opacity .2s}.sidebar-resizer:hover,.sidebar-resizer.active{background:#3b82f61a}.sidebar-resizer:hover:after,.sidebar-resizer.active:after{opacity:1;background:var(--primary)}.main-content{flex:1;height:100vh;overflow-y:auto;display:flex;justify-content:center;margin:0;max-width:none;padding:0;animation:fadeIn .3s var(--ease-out-expo);transition:margin-left .05s ease-out;-webkit-overflow-scrolling:touch}.main-content.has-playback-bar{padding-bottom:80px}.main-content-inner{--main-content-pad-x: 48px;width:100%;max-width:1240px;padding:32px var(--main-content-pad-x)}.top-progress{background:var(--bg-white);border-radius:16px;padding:20px 24px;margin-bottom:24px;box-shadow:0 1px 3px #0000000a;animation:fadeInDown .25s var(--ease-out-expo);transition:all .3s var(--ease-smooth)}.top-progress:hover{box-shadow:0 8px 30px #00000014;transform:translateY(-2px)}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.progress-title{font-weight:600;color:var(--text-dark);font-size:.95rem}.progress-stats{font-size:.85rem;color:var(--text-light)}.progress-bar{height:8px;background:var(--border-color);border-radius:4px;overflow:hidden}.progress-fill{height:100%;border-radius:4px;transition:width .8s var(--ease-out-expo);position:relative;overflow:hidden}.progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shimmer 2s infinite;background-size:200% 100%}.lesson-card{background:var(--bg-white);border-radius:16px;padding:28px;margin-bottom:20px;box-shadow:0 1px 3px #0000000a;animation:fadeInUp .3s var(--ease-out-expo);transition:all .4s var(--ease-smooth)}.lesson-card:hover{box-shadow:0 20px 50px #0000001a;transform:translateY(-4px)}.lesson-header{margin-bottom:24px}.lesson-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.lesson-level-badge{padding:6px 14px;border-radius:6px;font-size:.8rem;font-weight:700;color:#fff}.mark-complete-btn{padding:8px 16px;border-radius:8px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .3s var(--ease-spring);border:2px solid var(--border-color);background:var(--bg-white);color:var(--text-dark);position:relative;overflow:hidden}.mark-complete-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#10b98133;border-radius:50%;transform:translate(-50%,-50%);transition:width .4s,height .4s}.mark-complete-btn:hover{border-color:var(--success);color:var(--success);transform:translateY(-2px)}.mark-complete-btn:hover:before{width:200px;height:200px}.mark-complete-btn:active{transform:translateY(0) scale(.97)}.mark-complete-btn.completed{background:var(--success);border-color:var(--success);color:#fff;animation:pop-check .5s var(--ease-spring)}.lesson-title{font-size:1.75rem;font-weight:700;color:var(--text-dark);margin-bottom:8px;line-height:1.3}.lesson-subtitle{color:var(--text-light);font-size:.95rem}.tasks-section{background:var(--bg-light);border-radius:12px;padding:20px;margin-bottom:20px}.tasks-title{font-size:1rem;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px;color:var(--text-dark)}.task-grid{display:flex;flex-direction:column;gap:10px}.task-item{display:flex;align-items:center;gap:12px;background:var(--bg-white);padding:12px 14px;border-radius:10px;border:1px solid var(--border-color);transition:all .3s var(--ease-smooth);animation:fadeInUp .25s var(--ease-out-expo) backwards}.task-item:nth-child(1){animation-delay:.02s}.task-item:nth-child(2){animation-delay:.04s}.task-item:nth-child(3){animation-delay:.06s}.task-item:nth-child(4){animation-delay:.08s}.task-item:hover{border-color:var(--primary);transform:translate(8px);box-shadow:0 4px 15px #0398d426}.task-text{font-size:.9rem;color:var(--text-dark);font-weight:600}.task-dot{width:20px;height:20px;border-radius:999px;border:2px solid var(--border-color);display:inline-flex;align-items:center;justify-content:center;color:transparent;font-size:.75rem;font-weight:700;flex-shrink:0}.task-dot.done{background:var(--success);border-color:var(--success);color:#fff}.task-meta{margin-left:auto;font-size:.8rem;color:var(--text-light)}.dialogue-complete-toast{margin-top:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#10b9811f;color:#0f766e;font-size:.82rem;font-weight:600}.lesson-task-done-badge{margin-left:8px;padding:4px 10px;border-radius:999px;background:#10b9811f;color:#0f766e;font-size:.78rem;font-weight:700}.section-title{font-size:1.15rem;font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:10px;color:var(--text-dark)}.section-icon{font-size:1.2rem}.grammar-item{margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--border-color)}.grammar-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.grammar-title{font-size:1.05rem;font-weight:600;color:var(--secondary);margin-bottom:8px}.grammar-explanation{color:var(--text-light);margin-bottom:14px;line-height:1.6;font-size:.95rem}.example-list{display:flex;flex-direction:column;gap:10px}.example-card{background:var(--bg-light);padding:14px 18px;border-radius:10px;border-left:3px solid var(--secondary)}.example-content{display:flex;align-items:center;justify-content:space-between;gap:16px}.example-text{flex:1}.example-jp{font-size:1.1rem;margin-bottom:4px;color:var(--text-dark)}ruby{ruby-position:over;ruby-align:center}rt{font-size:.6em;color:var(--text-light);font-weight:400;-webkit-user-select:none;user-select:none}.line-jp ruby rt,.example-jp ruby rt,.word-example-jp ruby rt{color:var(--secondary);font-weight:500}.example-cn{color:var(--text-light);font-size:.9rem}.example-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.analysis-btn{width:36px;height:36px;border:none;background:var(--bg-white);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-light);transition:all .2s;box-shadow:0 2px 8px #00000014}.analysis-btn:hover{background:var(--secondary);color:#fff;transform:scale(1.1)}.analysis-btn.active{background:var(--secondary);color:#fff}.analysis-panel{margin-top:16px;padding:20px;background:linear-gradient(135deg,#f8f5ff,#f0f7ff);border-radius:12px;border:1px solid rgba(124,58,237,.15);animation:slide-down .3s ease}@keyframes slide-down{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.analysis-header{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--secondary);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(124,58,237,.15)}.analysis-icon{font-size:1.25rem}.analysis-section{margin-bottom:16px}.analysis-section:last-child{margin-bottom:0}.analysis-label{font-size:.8rem;font-weight:600;color:var(--secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.analysis-structure{font-family:Monaco,Consolas,monospace;font-size:1rem;background:#fff;padding:12px 16px;border-radius:8px;border:1px solid var(--border-color);color:var(--text-dark)}.analysis-breakdown{display:flex;flex-direction:column;gap:8px}.breakdown-item{display:grid;grid-template-columns:auto auto 1fr;gap:12px;align-items:baseline;padding:10px 14px;background:#fff;border-radius:8px;border:1px solid var(--border-color)}.breakdown-part{font-weight:600;color:var(--text-dark);font-size:1.05rem}.breakdown-role{font-size:.75rem;font-weight:600;color:#fff;background:var(--secondary);padding:2px 8px;border-radius:4px}.breakdown-note{font-size:.9rem;color:var(--text-light)}.analysis-keypoint{background:linear-gradient(135deg,#fef3c7,#fde68a);padding:12px 16px;border-radius:8px;color:#92400e;font-weight:500;line-height:1.6}.analysis-comparison{background:#fff;padding:12px 16px;border-radius:8px;border:1px solid var(--border-color);font-family:Monaco,Consolas,monospace;font-size:.9rem;white-space:pre-line;color:var(--text-dark);line-height:1.8}.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.word-card{background:var(--bg-white);border:1px solid var(--border-color);border-radius:12px;padding:18px;transition:all .4s var(--ease-spring);animation:scaleIn .2s var(--ease-out-expo) backwards}.word-grid .word-card:nth-child(1){animation-delay:.01s}.word-grid .word-card:nth-child(2){animation-delay:.02s}.word-grid .word-card:nth-child(3){animation-delay:.03s}.word-grid .word-card:nth-child(4){animation-delay:.04s}.word-grid .word-card:nth-child(5){animation-delay:.05s}.word-grid .word-card:nth-child(6){animation-delay:.06s}.word-grid .word-card:nth-child(7){animation-delay:.07s}.word-grid .word-card:nth-child(8){animation-delay:.08s}.word-card:hover{border-color:var(--accent);box-shadow:0 15px 40px #f59e0b26;transform:translateY(-8px) scale(1.02);z-index:100}.word-card:active{transform:translateY(-4px) scale(1.01)}.word-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;gap:12px}.word-main{flex:1}.word-kanji{font-size:1.3rem;font-weight:700;color:var(--text-dark)}.word-furigana{font-size:.8rem;color:var(--secondary);font-weight:500}.word-meaning{font-size:.95rem;color:var(--text-dark);font-weight:500;margin-bottom:10px}.word-type{display:inline-block;background:var(--bg-light);color:var(--text-light);padding:3px 8px;border-radius:4px;font-size:.7rem;margin-bottom:10px}.word-example{border-top:1px dashed var(--border-color);padding-top:10px}.word-example-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.word-example-content>div:first-child{flex:1}.word-example-jp{font-size:.95rem;color:var(--text-dark);margin-bottom:2px}.word-example-cn{font-size:.8rem;color:var(--text-light)}.audio-btn{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;cursor:pointer;transition:all .3s var(--ease-spring);background:var(--primary-light);color:var(--primary);flex-shrink:0;position:relative;overflow:hidden}.audio-btn:before{content:"";position:absolute;top:50%;left:50%;width:100%;height:100%;background:radial-gradient(circle,var(--primary) 0%,transparent 70%);transform:translate(-50%,-50%) scale(0);transition:transform .4s var(--ease-out-expo);opacity:.3}.audio-btn:hover{background:var(--primary);color:#fff;transform:scale(1.15);box-shadow:0 8px 25px #0398d466}.audio-btn:hover:before{transform:translate(-50%,-50%) scale(2)}.audio-btn:active{transform:scale(.9)}.audio-btn.loading{opacity:.7;cursor:wait;animation:pulse .8s ease-in-out infinite}.audio-btn.playing{background:var(--primary);color:#fff;animation:audio-playing .8s ease-in-out infinite;box-shadow:0 0 #0398d466}@keyframes audio-playing{0%,to{transform:scale(1);box-shadow:0 0 #0398d466}50%{transform:scale(1.1);box-shadow:0 0 0 10px #0398d400}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.audio-btn svg{width:50%;height:50%}.audio-btn-small{width:30px;height:30px}.audio-btn-medium{width:36px;height:36px}.audio-btn-large{width:44px;height:44px}.audio-spinner{animation:spin .8s linear infinite}.kana-chart{background:var(--bg-light);border-radius:12px;padding:20px}.kana-chart-title{font-size:1rem;font-weight:600;margin-bottom:16px;color:var(--text-dark)}.kana-row{display:flex;align-items:stretch;margin-bottom:8px;background:var(--bg-white);border-radius:10px;overflow:hidden;border:1px solid var(--border-color)}.kana-row:last-of-type{margin-bottom:0}.kana-row-label{width:56px;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:600;font-size:.85rem;flex-shrink:0}.kana-row-chars{display:flex;flex:1;flex-wrap:wrap}.kana-cell{flex:1;min-width:70px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;border-left:1px solid var(--border-color);transition:background .15s}.kana-cell:hover{background:var(--primary-light)}.kana-cell-empty{background:#f9fafb;cursor:default}.kana-cell-empty:hover{background:#f9fafb}.kana-main{display:flex;flex-direction:column;align-items:center;gap:1px}.kana-hiragana{font-size:1.6rem;font-weight:500;color:var(--text-dark);line-height:1.2}.kana-katakana{font-size:1.1rem;color:var(--secondary);line-height:1.2}.kana-romaji{font-size:.75rem;color:var(--text-light);font-weight:500}.kana-note{margin-top:14px;padding:10px 14px;background:#fef3c7;border-radius:8px;font-size:.85rem;color:#92400e;line-height:1.5}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:20px}.spinner{width:44px;height:44px;border:3px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.loading-text{color:var(--text-light);font-size:.95rem}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:6px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-title{height:28px;width:55%;margin-bottom:14px}.skeleton-text{height:18px;width:100%;margin-bottom:10px}.skeleton-text.short{width:35%}.error-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;padding:20px;text-align:center}.error-title{font-size:1.4rem;color:#ef4444;margin-bottom:10px}.error-message{color:var(--text-light);margin-bottom:20px}.btn-primary{background:var(--primary);color:#fff;border:none;padding:12px 24px;border-radius:10px;font-size:.95rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-primary:hover{background:#0284c7;transform:translateY(-1px)}.no-data{text-align:center;padding:60px 30px}.no-data h1{font-size:1.5rem;color:var(--text-dark);margin-bottom:10px}.no-data p{color:var(--text-light)}ruby{ruby-position:over}ruby rt{font-size:.55em;color:var(--text-light)}@media(max-width:1100px){.main-content-inner{--main-content-pad-x: 32px;padding:24px var(--main-content-pad-x)}}@media(max-width:900px){.lesson-title{font-size:1.5rem}.word-grid{grid-template-columns:1fr}.main-content-inner{--main-content-pad-x: 20px;padding:24px var(--main-content-pad-x);max-width:100%}}@media(max-width:768px){.mobile-header{display:flex}.sidebar-overlay{display:block}.sidebar-resizer{display:none}.sidebar{position:fixed;top:0;left:0;width:85%!important;max-width:320px;height:100vh;transform:translate(-100%);transition:transform .3s var(--ease-out-expo);z-index:160;border-right:1px solid var(--border-color)}.sidebar.open{transform:translate(0)}.main-content{margin-left:0!important;width:100%!important;margin-top:56px;min-height:calc(100vh - 56px)}.main-content-inner{--main-content-pad-x: 16px;padding:20px var(--main-content-pad-x)}.sidebar-header h1{font-size:1.25rem}.sidebar-header .subtitle{font-size:.8rem}.level-badge{padding:4px 10px;font-size:.75rem}.level-title{font-size:.85rem}.level-meta,.lesson-item-day{font-size:.7rem}.lesson-item-title{font-size:.85rem}.lesson-title{font-size:1.35rem}.lesson-subtitle{font-size:.9rem}}@media(max-width:480px){.main-content-inner{--main-content-pad-x: 12px;padding:16px var(--main-content-pad-x)}.lesson-title{font-size:1.2rem}.sidebar{width:90%!important}.grammar-options{flex-direction:column}.grammar-option{min-width:100%}}.vocab-practice{position:fixed;inset:0;background:linear-gradient(135deg,#667eea,#764ba2);z-index:1000;display:flex;flex-direction:column;overflow:hidden;animation:practice-enter .5s var(--ease-out-expo)}@keyframes practice-enter{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.practice-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.practice-close{width:40px;height:40px;border:none;background:#fff3;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s var(--ease-spring);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.practice-close:hover{background:#ffffff4d;transform:scale(1.15) rotate(90deg)}.practice-close:active{transform:scale(.95) rotate(90deg)}.practice-title{font-size:1.25rem;font-weight:600;color:#fff}.practice-game-indicator{display:flex;gap:8px}.game-dot{width:12px;height:12px;border-radius:50%;background:#ffffff4d;transition:all .4s var(--ease-spring)}.game-dot.active{background:#fff;transform:scale(1.4);box-shadow:0 0 15px #fff9;animation:dot-pulse 1.5s ease-in-out infinite}@keyframes dot-pulse{0%,to{box-shadow:0 0 5px #ffffff4d}50%{box-shadow:0 0 20px #fffc}}.game-dot.completed{background:#10b981;animation:dot-complete .5s var(--ease-spring)}@keyframes dot-complete{0%{transform:scale(1)}50%{transform:scale(1.5)}to{transform:scale(1)}}.current-game-info{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#ffffff1a;margin:16px 24px 0;border-radius:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:game-info-enter .5s var(--ease-out-expo) .2s backwards;transition:all .3s var(--ease-smooth)}.current-game-info:hover{background:#ffffff26;transform:translateY(-2px)}@keyframes game-info-enter{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.current-game-info .game-info-text{flex:1}.current-game-info .skip-btn{margin-left:auto}.game-icon{font-size:2.5rem;animation:icon-bounce .6s var(--ease-spring) .3s backwards}@keyframes icon-bounce{0%{opacity:0;transform:scale(0) rotate(-180deg)}60%{transform:scale(1.2) rotate(10deg)}to{opacity:1;transform:scale(1) rotate(0)}}.game-info-text h3{color:#fff;font-size:1.25rem;font-weight:600;margin-bottom:4px}.game-info-text p{color:#fffc;font-size:.9rem}.game-content{flex:1;overflow-y:auto;padding:24px}.practice-loading{display:flex;align-items:center;justify-content:center;height:200px;color:#fff;font-size:1.1rem}.game-progress{display:flex;align-items:center;gap:16px;margin-bottom:24px}.game-progress-bar{flex:1;height:8px;background:#fff3;border-radius:4px;overflow:hidden}.game-progress-fill{height:100%;background:linear-gradient(90deg,#10b981,#34d399);border-radius:4px;transition:width .5s ease}.game-progress-text{color:#fff;font-size:.9rem;font-weight:500;min-width:60px;text-align:right}.question-card{background:#fff;border-radius:20px;padding:32px;text-align:center;margin-bottom:24px;box-shadow:0 10px 40px #0003;position:relative;animation:card-enter .5s var(--ease-spring);transition:all .3s var(--ease-smooth)}@keyframes card-enter{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.question-card:hover{transform:translateY(-5px);box-shadow:0 20px 60px #00000040}.question-label{font-size:.95rem;color:var(--text-light);margin-bottom:20px}.question-word{font-size:3rem;font-weight:700;color:var(--text-dark);margin-bottom:8px}.question-reading{font-size:1.1rem;color:var(--text-light);margin-bottom:16px}.question-kanji-hint{font-size:1rem;color:var(--text-muted);margin-bottom:16px}.question-answer-reveal{font-size:1.25rem;font-weight:600;color:var(--success);margin-bottom:16px;animation:fade-in .3s ease}.question-kanji-reveal{font-size:1.5rem;font-weight:600;color:#6366f1;margin-top:8px;animation:fade-in .3s ease}.question-meaning-reveal{font-size:1.1rem;color:#10b981;margin-top:8px;animation:fade-in .3s ease}.kanji-display{font-family:"Noto Serif JP",serif}@keyframes fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.answer-reading{display:block;font-size:1.75rem;font-weight:700;color:var(--text-dark);margin-bottom:4px}.answer-kanji{font-size:1rem;color:var(--text-light);margin-bottom:8px;display:block}.question-audio-btn{padding:12px 24px;background:var(--primary-light);border:none;border-radius:30px;color:var(--primary);cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px}.question-audio-btn:hover{background:var(--primary);color:#fff;transform:scale(1.05)}.options-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.option-btn{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#fff;border:2px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .35s var(--ease-spring);text-align:left;animation:option-enter .4s var(--ease-out-expo) backwards}.options-grid .option-btn:nth-child(1){animation-delay:.1s}.options-grid .option-btn:nth-child(2){animation-delay:.15s}.options-grid .option-btn:nth-child(3){animation-delay:.2s}.options-grid .option-btn:nth-child(4){animation-delay:.25s}@keyframes option-enter{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.option-btn:hover:not(:disabled){transform:translateY(-4px) scale(1.02);box-shadow:0 12px 35px #0003;border-color:#fff}.option-btn:active:not(:disabled){transform:translateY(-2px) scale(.98)}.option-btn.selected{border-color:var(--primary);background:var(--primary-light);animation:selected-bounce .4s var(--ease-spring)}@keyframes selected-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(.98)}to{transform:scale(1)}}.option-btn.correct{background:#d1fae5;border-color:#10b981;animation:correct-pop .5s var(--ease-spring)}@keyframes correct-pop{0%{transform:scale(1)}25%{transform:scale(1.08)}50%{transform:scale(.95)}75%{transform:scale(1.03)}to{transform:scale(1)}}.option-btn.wrong{background:#fee2e2;border-color:#ef4444;animation:shake-wrong .5s var(--ease-smooth)}@keyframes shake-wrong{0%,to{transform:translate(0)}15%,45%,75%{transform:translate(-8px)}30%,60%,90%{transform:translate(8px)}}.option-letter{width:28px;height:28px;background:var(--bg-light);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;color:var(--text-light)}.option-btn.correct .option-letter{background:#10b981;color:#fff}.option-btn.wrong .option-letter{background:#ef4444;color:#fff}.option-text{flex:1;font-size:1rem;color:var(--text-dark)}.option-meaning{color:#6b7280;font-size:.9rem;margin-left:4px}.next-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;margin-top:20px;background:#fff;border:none;border-radius:12px;font-size:1.1rem;font-weight:600;color:var(--primary);cursor:pointer;transition:all .35s var(--ease-spring);animation:fadeInUp .4s var(--ease-out-expo);position:relative;overflow:hidden}.next-btn:after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#0398d41a;border-radius:50%;transform:translate(-50%,-50%);transition:width .5s,height .5s}.next-btn:hover{transform:scale(1.03) translateY(-2px);box-shadow:0 15px 40px #0003}.next-btn:hover:after{width:300%;height:300%}.next-btn:active{transform:scale(.98)}.retry-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:16px;margin-top:20px;background:linear-gradient(135deg,#f59e0b,#d97706);border:none;border-radius:12px;font-size:1.1rem;font-weight:600;color:#fff;cursor:pointer;transition:all .2s}.retry-btn:hover{transform:scale(1.02);box-shadow:0 5px 20px #f59e0b66}.listening-game{max-width:500px;margin:0 auto}.listening-card{background:#fff;border-radius:20px;padding:40px;text-align:center;margin-bottom:24px;box-shadow:0 10px 40px #0003}.listening-label{font-size:1rem;color:var(--text-light);margin-bottom:24px}.listening-play-btn{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 40px;margin:0 auto;background:linear-gradient(135deg,var(--primary) 0%,#0284c7 100%);border:none;border-radius:16px;color:#fff;cursor:pointer;transition:all .4s var(--ease-spring);position:relative;overflow:hidden}.listening-play-btn:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:#fff3;border-radius:50%;transform:translate(-50%,-50%);transition:width .6s,height .6s}.listening-play-btn:hover{transform:scale(1.08) translateY(-3px);box-shadow:0 15px 40px #0398d480}.listening-play-btn:hover:before{width:300%;height:300%}.listening-play-btn:active{transform:scale(1.02)}.listening-play-btn.played{background:linear-gradient(135deg,#10b981,#059669);animation:played-pop .5s var(--ease-spring)}@keyframes played-pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.listening-play-btn span{font-size:1rem;font-weight:500}.listening-answer{margin-top:24px;padding-top:24px;border-top:1px solid var(--border-color)}.answer-word{display:block;font-size:2rem;font-weight:700;color:var(--text-dark);margin-bottom:8px}.answer-meaning{font-size:1rem;color:var(--text-light)}.listening-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.listening-option{padding:20px 16px;background:#fff;border:2px solid rgba(255,255,255,.3);border-radius:12px;font-size:1.25rem;font-weight:500;cursor:pointer;transition:all .2s}.listening-option:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #0003}.listening-option.correct{background:#d1fae5;border-color:#10b981;animation:pulse-correct .5s ease}.listening-option.wrong{background:#fee2e2;border-color:#ef4444}.listening-options-full{display:flex;flex-direction:column;gap:12px}.listening-option-full{padding:16px 20px;background:#fff;border:2px solid rgba(255,255,255,.3);border-radius:12px;cursor:pointer;transition:all .2s;text-align:left}.listening-option-full:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #0003}.listening-option-full.correct{background:#d1fae5;border-color:#10b981}.listening-option-full.wrong{background:#fee2e2;border-color:#ef4444}.listening-option-full .option-main{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}.listening-option-full .option-reading{font-size:1.25rem;font-weight:600;color:#1f2937}.listening-option-full .option-kanji{font-size:1rem;color:#6b7280}.listening-option-full .option-sub{font-size:.9rem;color:#9ca3af}.skip-btn{padding:8px 16px;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:8px;color:#fff;font-size:.9rem;cursor:pointer;transition:all .3s var(--ease-spring);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.skip-btn:hover{background:#ffffff59;transform:translateY(-2px);box-shadow:0 5px 15px #0003}.skip-btn:active{transform:translateY(0) scale(.97)}.spelling-game{display:flex;flex-direction:column;gap:20px}.spelling-card{background:#fff;border-radius:16px;padding:32px;text-align:center;box-shadow:0 4px 20px #0000001a;position:relative;animation:spelling-card-enter .5s var(--ease-spring);transition:all .3s var(--ease-smooth)}@keyframes spelling-card-enter{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.spelling-card:hover{box-shadow:0 15px 50px #00000026;transform:translateY(-4px)}.spelling-label{font-size:.95rem;color:#6b7280;margin-bottom:16px}.spelling-kanji{font-size:3rem;font-weight:700;color:#1f2937;font-family:"Noto Serif JP",serif;margin-bottom:8px}.spelling-meaning{font-size:1.1rem;color:#6b7280;margin-bottom:16px}.spelling-input-area{display:flex;flex-direction:column;gap:16px;align-items:center}.spelling-input{width:100%;max-width:300px;padding:16px 20px;font-size:1.5rem;text-align:center;border:2px solid #e5e7eb;border-radius:12px;outline:none;transition:all .35s var(--ease-spring)}.spelling-input:focus{border-color:#6366f1;box-shadow:0 0 0 4px #6366f126;transform:scale(1.02)}.spelling-input.correct{border-color:#10b981;background:#d1fae5;animation:input-success .5s var(--ease-spring)}@keyframes input-success{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(.98)}to{transform:scale(1)}}.spelling-input.wrong{border-color:#ef4444;background:#fee2e2;animation:input-error .5s var(--ease-smooth)}@keyframes input-error{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-6px)}20%,40%,60%,80%{transform:translate(6px)}}.spelling-submit{padding:14px 40px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .35s var(--ease-spring);position:relative;overflow:hidden}.spelling-submit:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.spelling-submit:hover:not(:disabled){transform:translateY(-4px) scale(1.02);box-shadow:0 15px 40px #667eea80}.spelling-submit:hover:not(:disabled):before{left:100%}.spelling-submit:active:not(:disabled){transform:translateY(-2px) scale(.98)}.spelling-submit:disabled{opacity:.5;cursor:not-allowed}.spelling-result{display:flex;flex-direction:column;align-items:center;gap:12px}.spelling-result .result-badge{padding:8px 20px;border-radius:20px;font-weight:600;font-size:1rem}.spelling-result .result-badge.correct{background:#d1fae5;color:#059669}.spelling-result .result-badge.wrong{background:#fee2e2;color:#dc2626}.spelling-result .correct-answer{font-size:1rem;color:#6b7280}.spelling-result .answer-text{font-weight:600;color:#1f2937;font-size:1.25rem}.spelling-next{padding:12px 32px;background:#f3f4f6;border:none;border-radius:10px;font-size:1rem;font-weight:500;color:#374151;cursor:pointer;transition:all .2s}.spelling-next:hover{background:#e5e7eb}.results-screen{position:fixed;inset:0;background:linear-gradient(135deg,#667eea,#764ba2);z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;animation:results-bg-enter .6s var(--ease-out-expo)}@keyframes results-bg-enter{0%{opacity:0;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.results-card{background:#fff;border-radius:24px;padding:40px;max-width:420px;width:100%;text-align:center;box-shadow:0 20px 60px #0000004d;position:relative;z-index:1;animation:results-card-enter .7s var(--ease-spring) .2s backwards}@keyframes results-card-enter{0%{opacity:0;transform:translateY(60px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}.results-emoji{font-size:4rem;margin-bottom:16px;animation:results-emoji-bounce .8s var(--ease-spring) .5s backwards,float 2s ease-in-out 1.3s infinite}@keyframes results-emoji-bounce{0%{opacity:0;transform:scale(0) rotate(-180deg)}to{opacity:1;transform:scale(1) rotate(0)}}.results-title{font-size:1.75rem;font-weight:700;color:var(--text-dark);margin-bottom:24px}.results-score-ring{position:relative;width:160px;height:160px;margin:0 auto 24px}.results-score-ring svg{transform:rotate(-90deg);width:100%;height:100%}.score-ring-bg{fill:none;stroke:var(--border-color);stroke-width:8}.score-ring-fill{fill:none;stroke:url(#scoreGradient);stroke:#10b981;stroke-width:8;stroke-linecap:round;transition:stroke-dasharray 1s ease}.score-ring-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:baseline}.score-number{font-size:3rem;font-weight:700;color:var(--text-dark)}.score-percent{font-size:1.5rem;font-weight:500;color:var(--text-light)}.results-breakdown{margin-bottom:28px}.breakdown-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-light);border-radius:10px;margin-bottom:8px}.breakdown-icon{font-size:1.25rem}.breakdown-label{flex:1;text-align:left;font-size:.95rem;color:var(--text-dark)}.breakdown-score{font-weight:600;color:var(--primary)}.results-actions{display:flex;gap:12px}.btn-secondary{flex:1;padding:14px 20px;background:var(--bg-light);border:2px solid var(--border-color);border-radius:12px;font-size:.95rem;font-weight:600;color:var(--text-dark);cursor:pointer;transition:all .2s}.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}.btn-primary{flex:1;padding:14px 20px;background:linear-gradient(135deg,var(--primary) 0%,#0284c7 100%);border:none;border-radius:12px;font-size:.95rem;font-weight:600;color:#fff;cursor:pointer;transition:all .2s}.btn-primary:hover{transform:scale(1.02);box-shadow:0 5px 20px #0398d466}.confetti-container{position:absolute;inset:0;overflow:hidden;pointer-events:none;perspective:1000px}.confetti{position:absolute;width:10px;height:10px;top:-10px;animation:confetti-fall 3s ease-in-out infinite;transform-style:preserve-3d}.confetti:nth-child(odd){animation:confetti-fall-alt 3.5s ease-in-out infinite}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0) rotateX(0) scale(1);opacity:1}50%{transform:translateY(50vh) rotate(360deg) rotateX(180deg) scale(.8)}to{transform:translateY(100vh) rotate(720deg) rotateX(360deg) scale(.5);opacity:0}}@keyframes confetti-fall-alt{0%{transform:translateY(0) rotate(0) rotateY(0) translate(0);opacity:1}25%{transform:translateY(25vh) rotate(180deg) rotateY(90deg) translate(30px)}50%{transform:translateY(50vh) rotate(360deg) rotateY(180deg) translate(-20px)}75%{transform:translateY(75vh) rotate(540deg) rotateY(270deg) translate(15px)}to{transform:translateY(100vh) rotate(720deg) rotateY(360deg) translate(0);opacity:0}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.shake{animation:shake .4s ease}@keyframes pulse-correct{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes bounce-in{0%{opacity:0;transform:scale(.5) translateY(20px)}60%{transform:scale(1.1) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.bounce-in{animation:bounce-in .5s ease}@keyframes scale-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.scale-in{animation:scale-in .4s ease}@keyframes slide-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.slide-in{animation:slide-in .4s ease}@keyframes pop-in{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.vocabulary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:12px}.start-practice-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;margin-top:20px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:12px;font-size:1.05rem;font-weight:600;color:#fff;cursor:pointer;transition:all .3s}.start-practice-btn.header-btn{width:auto;margin-top:0;padding:8px 16px;font-size:.9rem;border-radius:8px}.start-practice-btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px #667eea66}.start-practice-btn:active{transform:translateY(0)}.practice-icon{font-size:1.25rem}@media(max-width:600px){.options-grid,.listening-options{grid-template-columns:1fr}.question-word{font-size:2.25rem}.results-card{padding:28px}.results-score-ring{width:140px;height:140px}}.dialogue-section{margin-top:24px;animation:fadeIn .5s var(--ease-out-expo)}.dialogue-setting{font-size:.9rem;color:var(--text-muted);font-style:italic;margin-bottom:20px;padding:0}.dialogue-task-complete-badge{padding:3px 10px;border-radius:999px;font-size:.78rem;background:#10b9811f;color:#0f766e;font-weight:700}.dialogue-list{display:flex;flex-direction:column;gap:16px}.dialogue-item{display:flex;gap:12px;max-width:85%;animation:dialogue-enter .3s var(--ease-out-expo) backwards;align-items:center}.dialogue-list .dialogue-item:nth-child(1){animation-delay:.02s}.dialogue-list .dialogue-item:nth-child(2){animation-delay:.04s}.dialogue-list .dialogue-item:nth-child(3){animation-delay:.06s}.dialogue-list .dialogue-item:nth-child(4){animation-delay:.08s}.dialogue-list .dialogue-item:nth-child(5){animation-delay:.1s}.dialogue-list .dialogue-item:nth-child(6){animation-delay:.12s}.dialogue-list .dialogue-item:nth-child(7){animation-delay:.14s}.dialogue-list .dialogue-item:nth-child(8){animation-delay:.16s}.dialogue-item.other{align-self:flex-start;animation-name:dialogue-enter-left}@keyframes dialogue-enter-left{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}.dialogue-item.protagonist{align-self:flex-end;flex-direction:row-reverse;animation-name:dialogue-enter-right}@keyframes dialogue-enter-right{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes dialogue-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.char-avatar{width:44px;height:44px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 2px 8px #0000000f;flex-shrink:0;border:1px solid var(--border-color)}.line-played-indicator{width:10px;height:10px;border-radius:50%;border:2px solid #cbd5e1;background:#fff;flex-shrink:0}.line-played-indicator.played{border-color:#10b981;background:#10b981}.dialogue-bubble{background:#fff;padding:18px 24px;border-radius:18px;box-shadow:0 2px 6px #0000000a;position:relative;border:1px solid var(--border-color);transition:all .3s var(--ease-smooth);min-width:320px;max-width:100%}.dialogue-bubble:hover{transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.dialogue-item.other .dialogue-bubble{border-top-left-radius:4px;background:var(--primary-light);border-color:#0398d41a}.dialogue-item.protagonist .dialogue-bubble{border-top-right-radius:4px;background:#fdf2f8;border-color:#ec48991a}.char-name{font-size:.75rem;font-weight:700;color:var(--text-light);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.line-jp{font-size:1.15rem;color:var(--text-dark);margin-bottom:6px;line-height:2.8;letter-spacing:.05em;word-spacing:.1em}.line-jp ruby{ruby-align:center;padding:0 1px}.line-jp ruby rt{font-size:.55em;color:var(--secondary);font-weight:500;text-align:center;white-space:nowrap}.line-cn{font-size:.85rem;color:var(--text-light)}.line-actions{margin-top:8px;display:flex;justify-content:flex-end}@media(max-width:768px){.dialogue-item{width:100%;max-width:100%;gap:8px}.dialogue-bubble{min-width:0;flex:1;padding:14px 16px}.char-avatar{width:36px;height:36px;font-size:1.2rem}.line-jp{font-size:1rem;line-height:2.3;word-break:break-word}}.exercises-section{margin-top:24px}.exercise-card{background:#f8fafc;border-radius:12px;padding:24px;border:1px solid var(--border-color);margin-bottom:16px}.exercise-title{color:var(--primary);font-weight:700;margin-bottom:8px}.exercise-question{font-size:.95rem;color:var(--text-dark);margin-bottom:16px;padding:10px;background:#fff;border-radius:8px;border:1px dashed var(--border-color)}.exercise-items{display:flex;flex-direction:column;gap:20px}.exercise-item{display:flex;flex-direction:column;gap:10px}.item-prompt{font-weight:600;color:var(--text-dark)}.item-input-group{display:flex;gap:10px}.exercise-input{flex:1;padding:10px 14px;border-radius:8px;border:2px solid var(--border-color);font-size:1rem;transition:all .2s}.exercise-input:focus{outline:none;border-color:var(--primary)}.exercise-input.correct{border-color:var(--success);background-color:#f0fdf4}.exercise-input.incorrect{border-color:#ef4444;background-color:#fef2f2}.check-btn{padding:0 20px;background:var(--primary);color:#fff;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:opacity .2s}.check-btn:hover{opacity:.9}.correct-answer{font-size:.85rem;color:#ef4444;font-weight:500;margin-top:4px}.app{min-height:100vh;background:#f8fafc}.app-loading,.app-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:20px}.app-loading .spinner{width:48px;height:48px;border:4px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.app-error h1{color:#dc2626;margin-bottom:8px}.app-error p{color:#6b7280;margin-bottom:16px}.app-error button{padding:10px 24px;background:#3b82f6;color:#fff;border:none;border-radius:8px;cursor:pointer}.lesson-item.disabled{opacity:.6}.lesson-item.disabled .lesson-item-main{cursor:not-allowed}.lesson-item.disabled .lesson-item-main:hover{background:transparent;transform:none}.lesson-item.disabled .lesson-item-main:hover:before{transform:scaleY(0)}.lesson-item.disabled .lesson-checkbox{cursor:not-allowed;opacity:.5}.lesson-lock{color:var(--text-muted);flex-shrink:0}.content-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:var(--text-light);animation:fadeIn .3s var(--ease-out-expo)}.content-loading .spinner{width:48px;height:48px;border:4px solid var(--border-color);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}.content-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;padding:40px;background:#fff;border-radius:16px;animation:fadeInUp .4s var(--ease-out-expo)}.content-error .error-icon{font-size:4rem;margin-bottom:16px;animation:float 3s ease-in-out infinite}.content-error h2{font-size:1.5rem;color:var(--text-dark);margin-bottom:8px}.content-error p{color:var(--text-light);margin-bottom:24px;max-width:300px}.content-error button{padding:12px 32px;background:linear-gradient(135deg,var(--primary),#0284c7);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s var(--ease-spring)}.content-error button:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0398d44d}.j-unit{display:inline-flex;flex-direction:column;align-items:center;vertical-align:bottom;margin:0 1px;padding:0;line-height:normal}.j-romaji{font-size:.65rem;color:#0277bd;font-weight:500;white-space:nowrap;line-height:1;text-align:center;pointer-events:none;letter-spacing:.05em;transition:all .2s ease}.j-romaji:not(:empty){height:1em;margin-bottom:4px}.j-romaji:empty{display:none}.j-furigana{font-size:.65rem;color:#7b1fa2;line-height:1;text-align:center;white-space:nowrap;transition:all .2s ease}.j-unit:has(.j-romaji:not(:empty)) .j-furigana{height:1em;margin-bottom:3px;display:block}.j-unit:has(.j-romaji:empty) .j-furigana:empty{display:none}.j-unit:has(.j-romaji:not(:empty)) .j-furigana:empty:before{content:" ";visibility:hidden}.j-base{font-size:1.3rem;line-height:1.2;color:var(--text-dark);white-space:nowrap;display:block;font-weight:500}.dialogue-bubble .line-jp{display:block;word-break:break-all;padding:4px 0;margin-bottom:2px;line-height:1.4;transition:line-height .2s ease}.dialogue-bubble .line-jp:has(.j-furigana:not(:empty)){line-height:2.2;padding:8px 0}.dialogue-bubble .line-jp:has(.j-romaji:not(:empty)){line-height:3.2;padding:12px 0}.pron-rule{position:relative;display:inline;cursor:help;color:var(--primary);text-decoration:underline dashed var(--primary) 1.5px;text-underline-offset:4px;font-weight:600;transition:all .2s}.j-furigana .pron-rule{text-decoration-thickness:1px;text-underline-offset:2px}.pron-rule:hover{background-color:var(--primary-light);color:#01579b;z-index:1000}.pron-tooltip{visibility:hidden;position:absolute;left:50%;transform:translate(-50%);width:260px;max-width:85vw;background:#fff;color:#1a1a1a;padding:16px;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f,0 0 0 1px #0000000d;border:1px solid #e5e7eb;opacity:0;transition:opacity .2s ease,transform .2s ease;pointer-events:none;z-index:10000;text-align:left;line-height:1.5;font-weight:400;font-size:.875rem;white-space:normal;word-break:break-word}.pron-tooltip.tooltip-bottom{top:100%;margin-top:12px}.pron-tooltip.tooltip-bottom:after{content:"";position:absolute;bottom:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:transparent transparent #ffffff transparent}.pron-tooltip.tooltip-top{bottom:100%;margin-bottom:12px}.pron-tooltip.tooltip-top:after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:#ffffff transparent transparent transparent}.dialogue-item:has(.pron-rule:hover){z-index:99999!important;position:relative}.pron-rule:hover .pron-tooltip{visibility:visible;opacity:1}.pron-tooltip-title{font-weight:800;color:#0277bd;margin-bottom:8px;font-size:1rem;display:flex;align-items:center;gap:6px;border-bottom:2px solid #e1f5fe;padding-bottom:6px}.pron-tooltip-content{color:#37474f;margin-bottom:12px;font-size:.88rem}.pron-tooltip-example{padding:10px 12px;background:#f1f8ff;border-radius:10px;border-left:4px solid #0277bd;font-style:italic;font-size:.85rem;color:#455a64;line-height:1.5}rt .pron-tooltip{top:180%}.completion-toast{position:fixed;bottom:24px;right:24px;z-index:300;cursor:pointer;max-width:320px;width:calc(100% - 48px)}.completion-toast-enter{animation:toast-slide-in .4s cubic-bezier(.34,1.56,.64,1) forwards}.completion-toast-exit{animation:toast-slide-out .3s ease-in forwards}@keyframes toast-slide-in{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toast-slide-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(20px) scale(.95)}}.completion-toast-card{display:flex;align-items:flex-start;gap:12px;background:#fff;padding:16px 20px;border-radius:16px;box-shadow:0 8px 32px #0000001f,0 2px 8px #0000000f;border:1px solid rgba(16,185,129,.2);position:relative;overflow:hidden}.streak-milestone .completion-toast-card{border-color:#f59e0b4d;background:linear-gradient(135deg,#fffbeb,#fff);animation:milestone-shimmer 2s ease-in-out infinite}@keyframes milestone-shimmer{0%,to{box-shadow:0 8px 32px #0000001f,0 0 #f59e0b00}50%{box-shadow:0 8px 32px #0000001f,0 0 20px 2px #f59e0b26}}.completion-toast-icon{font-size:1.5rem;flex-shrink:0;line-height:1;margin-top:2px}.completion-toast-body{display:flex;flex-direction:column;gap:2px;min-width:0}.completion-toast-title{font-size:1rem;font-weight:700;color:#1a1a1a}.completion-toast-lesson{font-size:.8rem;color:#6b7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.completion-toast-streak{font-size:.8rem;color:#d97706;font-weight:600;margin-top:4px;display:flex;align-items:center;gap:6px}.milestone-badge{display:inline-block;padding:1px 8px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-radius:20px;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.toast-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:16px;z-index:-1}.toast-confetti-piece{position:absolute;top:-8px;animation:toast-confetti-fall 2.5s ease-in forwards;opacity:.8}@keyframes toast-confetti-fall{0%{transform:translateY(0) rotate(0) scale(1);opacity:.9}50%{opacity:.7}to{transform:translateY(120px) rotate(360deg) scale(.4);opacity:0}}@media(max-width:768px){.completion-toast{bottom:16px;right:16px;left:16px;max-width:none;width:auto}}.playback-bar{position:fixed;bottom:0;background:var(--bg-white);z-index:100;animation:playbackSlideUp .35s var(--ease-out-expo);box-shadow:0 -2px 16px #0000000f}@keyframes playbackSlideUp{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.playback-progress-track{height:3px;background:var(--border-color)}.playback-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),#38bdf8);border-radius:0 3px 3px 0;transition:width .4s var(--ease-smooth)}.playback-bar-inner{display:flex;align-items:center;padding:10px 16px;max-width:1240px;margin:0 auto}.playback-info{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;margin-right:20px}.playback-avatar{width:36px;height:36px;border-radius:10px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}.playback-text{display:flex;flex-direction:column;min-width:0;gap:2px}.playback-jp{font-size:.88rem;font-weight:600;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}.playback-cn{font-size:.72rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playback-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}.playback-btn{display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;transition:all .18s var(--ease-smooth)}.playback-btn:active:not(:disabled){transform:scale(.9)}.playback-btn:disabled{opacity:.2;cursor:default}.playback-btn-skip{width:34px;height:34px;color:var(--text-dark);background:var(--bg-light);border:1px solid var(--border-color)}.playback-btn-skip:hover:not(:disabled){background:var(--primary-light);border-color:#0398d433;color:var(--primary)}.playback-btn-main{width:44px;height:44px;background:var(--primary);color:#fff;box-shadow:0 3px 12px #0398d44d}.playback-btn-main:hover:not(:disabled){background:#0289be;color:#fff;transform:scale(1.08);box-shadow:0 5px 20px #0398d466}.playback-btn-main:active:not(:disabled){transform:scale(.94)}.playback-btn-icon{display:flex;align-items:center;justify-content:center;animation:playIconPop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes playIconPop{0%{opacity:.4;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.playback-mode-btn{padding:4px 12px;border:1px solid var(--border-color);border-radius:20px;background:var(--bg-light);color:var(--text-muted);font-size:.7rem;cursor:pointer;transition:all .18s var(--ease-smooth);white-space:nowrap;line-height:1.4}.playback-mode-btn:hover{border-color:#0398d44d;color:var(--primary);background:var(--primary-light)}.playback-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:20px;min-width:0}.playback-volume{display:flex;align-items:center;gap:4px}.playback-volume-icon{color:var(--text-muted);flex-shrink:0}.playback-volume-slider{-webkit-appearance:none;appearance:none;width:64px;height:4px;border-radius:2px;background:var(--border-color);outline:none;cursor:pointer}.playback-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 1px 4px #0398d44d}.playback-volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--primary);cursor:pointer;border:none;box-shadow:0 1px 4px #0398d44d}.playback-rate-btn{padding:2px 8px;border:1px solid var(--border-color);border-radius:12px;background:var(--bg-light);color:var(--text-muted);font-size:.68rem;font-weight:600;cursor:pointer;transition:all .18s var(--ease-smooth);white-space:nowrap;line-height:1.4;font-variant-numeric:tabular-nums}.playback-rate-btn:hover{border-color:#0398d44d;color:var(--primary);background:var(--primary-light)}.playback-popup-wrap{position:relative}.playback-popup{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:var(--bg-white);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 24px #0000001f,0 2px 8px #0000000f;padding:4px;z-index:200;animation:popupFadeIn .18s ease-out;min-width:max-content}@keyframes popupFadeIn{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.playback-popup-rate{display:flex;flex-direction:column;gap:2px}.playback-popup-mode{display:flex;flex-direction:column;gap:2px;min-width:140px}.playback-popup-item{display:flex;flex-direction:column;align-items:flex-start;padding:6px 14px;border:none;background:none;border-radius:8px;cursor:pointer;font-size:.75rem;color:var(--text-dark);transition:background .12s;text-align:left;white-space:nowrap}.playback-popup-item:hover{background:var(--bg-light)}.playback-popup-item.selected{color:var(--primary);background:var(--primary-light);font-weight:600}.popup-item-label{font-weight:500}.popup-item-desc{font-size:.65rem;color:var(--text-muted);margin-top:1px}.playback-popup-item.selected .popup-item-desc{color:var(--primary);opacity:.7}.playback-count{font-size:.78rem;font-variant-numeric:tabular-nums;white-space:nowrap;background:var(--bg-light);padding:4px 10px;border-radius:20px;border:1px solid var(--border-color)}.playback-count-left{flex-shrink:0;margin-right:8px}.playback-count-current{font-weight:600;color:var(--primary)}.playback-count-sep{margin:0 2px;color:var(--text-muted)}.playback-count-total{color:var(--text-muted)}.playback-btn-close{width:32px;height:32px;color:var(--text-muted)}.playback-btn-close:hover{color:var(--text-dark);background:var(--bg-light)}.dialogue-item.playing .dialogue-bubble{box-shadow:0 0 0 2px var(--primary),0 4px 16px #0398d426}.dialogue-item.playing .char-avatar{box-shadow:0 0 0 2px var(--primary)}.dialogue-bubble{cursor:pointer}@media(max-width:768px){.playback-bar-inner{padding:8px 16px}.playback-info{display:none}.playback-controls{margin:0 auto}.playback-right .playback-volume,.playback-right .playback-popup-wrap{display:none}.playback-count{font-size:.7rem;padding:3px 8px}}.sidebar-nav{flex:1;overflow-y:auto;padding:14px;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px}.sidebar-section{display:flex;flex-direction:column;gap:8px}.sidebar-header{padding:26px 22px 18px;border-bottom:1px solid #e3e8f1}.sidebar-header h1{font-size:1.95rem;line-height:1.2;letter-spacing:-.01em;margin-bottom:4px}.sidebar-header .subtitle{margin-bottom:0;font-size:.95rem;color:#64748b}.sidebar-footer{padding:10px 16px 14px;border-top:1px solid #e3e8f1}.sidebar-user-trigger{width:100%;min-height:48px;border:none;border-radius:10px;background:transparent;padding:6px 8px;display:flex;align-items:center;justify-content:flex-start;gap:10px;cursor:pointer;text-align:left;transition:background .2s ease}.sidebar-user-trigger:hover{background:#f1f5f9}.sidebar-user-trigger:focus-visible,.sidebar-login-btn:focus-visible,.profile-header-logout:focus-visible,.profile-leaderboard-link:focus-visible{outline:2px solid #0ea5e9;outline-offset:2px}.sidebar-user{min-height:36px;width:100%}.sidebar-user-content{flex:1;min-width:0}.sidebar-user-email{font-size:.9rem;color:#475569}.sidebar-anon{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:8px}.sidebar-login-btn{min-height:44px}.state-text{color:#64748b;font-size:.92rem}.state-text.error{color:#dc2626}@media(max-width:768px){.sidebar-header{padding:20px 16px 14px}.sidebar-header h1{font-size:1.7rem}.sidebar-header .subtitle{font-size:.9rem}}.ai-level-group{border-color:var(--border-color);background:var(--bg-white)}.ai-level-group.ai-active{border-color:var(--border-color);box-shadow:none}.ai-badge{width:52px;min-width:52px;height:52px;padding:0;border-radius:12px;background:linear-gradient(135deg,#1d9dd8,#0a84c1)!important;color:#fff!important;display:inline-flex;align-items:center;justify-content:center}.ai-level-group .level-header{display:flex;align-items:center;gap:12px;padding:16px}.ai-level-group .level-info{min-width:0}.ai-level-group .level-title{font-size:.95rem;line-height:1.25}.ai-level-group .level-meta{margin-top:2px;font-size:.8rem;line-height:1.35}.ai-section-content{border-top:1px solid var(--border-color);background:var(--bg-light);max-height:300px;overflow-y:auto;animation:fadeInDown .3s var(--ease-out-expo)}.ai-history-list{display:flex;flex-direction:column;gap:1px}.ai-history-item{display:flex;align-items:center;justify-content:space-between;padding:10px 38px 10px 16px;cursor:pointer;transition:all .2s;gap:8px;border-bottom:1px solid var(--border-color);position:relative}.ai-history-item:last-child{border-bottom:none}.ai-history-item:hover{background:var(--bg-white);transform:translate(4px)}.ai-history-item.active{background:#8b5cf614;border-left:3px solid #8b5cf6}.ai-history-item-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.ai-history-date{font-size:.7rem;color:var(--text-muted);white-space:nowrap;flex-shrink:0;margin-left:auto}.ai-history-item-title{font-size:.82rem;color:var(--text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ai-history-delete{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:4px;font-size:1.1rem;color:var(--text-muted);cursor:pointer;opacity:0;transition:all .15s;position:absolute;right:12px;top:50%;transform:translateY(-50%)}.ai-history-item:hover .ai-history-delete{opacity:1}.ai-history-delete:hover{background:#fef2f2;color:#ef4444}.auth-page{min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-light);padding:24px 16px;animation:fadeIn .4s ease}.auth-brand{text-align:center;margin-bottom:28px;animation:fadeInDown .5s var(--ease-out-expo)}.auth-brand-icon{font-size:2.5rem;margin-bottom:8px}.auth-brand h1{font-size:1.6rem;font-weight:700;color:var(--text-dark);margin-bottom:4px}.auth-brand p{font-size:.9rem;color:var(--text-light)}.auth-card{width:100%;max-width:420px;background:var(--bg-white);border:1.5px solid var(--border-color);border-radius:18px;padding:28px 24px;box-shadow:0 2px 12px #0000000a;animation:fadeInUp .5s var(--ease-out-expo)}.auth-form{display:flex;flex-direction:column;gap:14px}.auth-field{display:flex;flex-direction:column;gap:6px}.auth-label{font-size:.8rem;font-weight:500;color:var(--text-light)}.auth-input{width:100%;padding:11px 14px;font-size:.9rem;font-family:inherit;color:var(--text-dark);background:var(--bg-white);border:1.5px solid var(--border-color);border-radius:10px;outline:none;transition:border-color .25s,box-shadow .25s}.auth-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #0398d41f}.auth-input::placeholder{color:var(--text-muted)}.auth-submit-btn{width:100%;padding:12px;border:none;border-radius:10px;font-size:.9rem;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--primary),#0284c7);cursor:pointer;transition:all .25s var(--ease-smooth);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px}.auth-submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0398d44d}.auth-submit-btn:active:not(:disabled){transform:translateY(0)}.auth-submit-btn:disabled{opacity:.6;cursor:not-allowed}.auth-btn-spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-divider{display:flex;align-items:center;gap:12px;margin:4px 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border-color)}.auth-divider span{font-size:.78rem;color:var(--text-muted);white-space:nowrap}.auth-google-btn{width:100%;padding:11px;border:1.5px solid var(--border-color);border-radius:10px;font-size:.9rem;font-weight:500;font-family:inherit;color:var(--text-dark);background:var(--bg-white);cursor:pointer;transition:all .25s var(--ease-smooth);display:flex;align-items:center;justify-content:center;gap:10px}.auth-google-btn:hover:not(:disabled){background:var(--bg-light);border-color:#cbd5e0}.auth-google-btn:disabled{opacity:.6;cursor:not-allowed}.auth-google-icon{width:18px;height:18px;flex-shrink:0}.auth-error{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;font-size:.82rem;color:#dc2626;animation:scaleIn .2s var(--ease-smooth);margin-bottom:14px}.auth-error-dismiss{margin-left:auto;background:none;border:none;color:#dc2626;cursor:pointer;font-size:1.1rem;padding:0 2px;line-height:1;opacity:.6}.auth-error-dismiss:hover{opacity:1}.auth-magic-sent{text-align:center;padding:16px 0;animation:scaleIn .3s var(--ease-spring)}.auth-magic-sent-icon{font-size:2.5rem;margin-bottom:12px}.auth-magic-sent h3{font-size:1rem;font-weight:600;color:var(--text-dark);margin-bottom:8px}.auth-magic-sent p{font-size:.85rem;color:var(--text-light);line-height:1.5}.auth-magic-sent-email{font-weight:600;color:var(--primary)}.auth-resend-btn{margin-top:16px;padding:8px 20px;border:1.5px solid var(--border-color);border-radius:8px;background:transparent;font-size:.82rem;font-family:inherit;color:var(--text-light);cursor:pointer;transition:all .2s}.auth-resend-btn:hover{border-color:var(--primary);color:var(--primary)}.auth-skip{margin-top:20px;animation:fadeIn .6s var(--ease-out-expo) .2s both}.auth-skip-btn{background:none;border:none;font-size:.85rem;font-family:inherit;color:var(--text-muted);cursor:pointer;padding:8px 16px;transition:color .2s}.auth-skip-btn:hover{color:var(--text-light)}@media(max-width:768px){.auth-card{padding:24px 20px}}@media(max-width:480px){.auth-page{padding:60px 12px 16px;justify-content:flex-start}.auth-brand h1{font-size:1.4rem}.auth-card{padding:20px 16px;border-radius:14px}.auth-input{padding:10px 12px;font-size:.85rem}}