:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-color: #FFB703;--primary-color-hover: #E5A503;--secondary-color: #118AB2;--success-color: #06D6A0;--danger-color: #EF476F;--bg-color: #121212;--surface-color: #1E1E1E;--surface-color-light: #2C2C2C;--text-main: #FFFFFF;--text-muted: #A0A0A0;--border-color: #333333;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 9999px;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .4);--lesson-selected-border: #1899d6;--lesson-selected-fill: rgba(24, 153, 214, .15);--lesson-correct-fill: rgba(6, 214, 160, .1);--lesson-error-border: #f25d5d;--lesson-error-fill: rgba(242, 93, 93, .1);--lesson-hearts: #ff4b4b;--lesson-check-disabled-bg: #333333;--lesson-check-disabled-text: #777777;--interstitial-bg: #131F24;--interstitial-text: #FFFFFF;--interstitial-border: rgba(255,255,255,.1);--accent-green: #58CC02;--accent-green-shadow: #46A302;--accent-blue: #1CB0F6;--accent-blue-shadow: #1899D6;--accent-pink: #FF8BC1;--accent-gold: #FFD166;--accent-purple: #CE82FF;--accent-red: #FF4B4B;--error-shadow: #c43d3d}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff;--bg-color: #F8F9FA;--surface-color: #FFFFFF;--surface-color-light: #F0F2F5;--text-main: #1A1A1A;--text-muted: #666666;--border-color: #E0E0E0;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .15);--lesson-selected-fill: rgba(24, 153, 214, .1);--lesson-check-disabled-bg: #e5e5e5;--lesson-check-disabled-text: #afafaf}}html{overflow:hidden;height:100dvh;width:100%}body{margin:0;display:flex;min-width:320px;height:100dvh;background-color:var(--bg-color);color:var(--text-main);overflow:hidden;width:100%;-webkit-overflow-scrolling:touch}#root{height:100dvh;width:100%;position:relative;background-color:var(--bg-color);display:flex;flex-direction:column;overflow:hidden}.mobile-app-wrapper{width:100%;height:100dvh;position:relative;background-color:var(--bg-color);display:flex;flex-direction:column;overflow:hidden}@media(min-width:768px){html,body{position:static;overflow:auto}.mobile-app-wrapper{height:100dvh;height:100%}.mobile-app-wrapper:not(:has(.app-container)){max-width:640px;margin:0 auto;box-shadow:var(--shadow-lg)}}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-4);font-weight:700}p{margin-top:0;margin-bottom:var(--spacing-4)}*{box-sizing:border-box}button{border-radius:var(--radius-lg);border:none;padding:14px var(--spacing-6);font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:var(--spacing-2)}button:active{transform:translateY(2px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.primary{background-color:var(--primary-color);color:#1a1a1a;box-shadow:0 4px #cc9202}button.primary:active{box-shadow:0 0 #cc9202;transform:translateY(4px)}button.secondary{background-color:transparent;color:var(--text-main);border:2px solid var(--border-color);box-shadow:0 4px 0 var(--border-color)}button.secondary:active{box-shadow:0 0 0 var(--border-color);transform:translateY(4px)}button.ghost{background-color:transparent;color:var(--primary-color);padding:10px}@media(prefers-color-scheme:light){button.ghost{color:#e5a503}}button.ghost:active{background-color:var(--surface-color-light)}.text-center{text-align:center}.w-full{width:100%}.flex{display:flex}.flex-col{display:flex;flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--spacing-2)}.gap-4{gap:var(--spacing-4)}.gap-6{gap:var(--spacing-6)}.p-4{padding:var(--spacing-4)}.p-6{padding:var(--spacing-6)}.mt-4{margin-top:var(--spacing-4)}.mb-4{margin-bottom:var(--spacing-4)}.mt-auto{margin-top:auto}.glass-panel{background:var(--surface-color);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:var(--spacing-4);box-shadow:var(--shadow-sm)}.modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:flex-end;justify-content:center;z-index:1000}.modal-content{background-color:var(--bg-color);width:100%;max-width:480px;border-radius:24px 24px 0 0;padding:var(--spacing-6);padding-bottom:48px;box-shadow:0 -10px 40px #0000004d}.slide-up{animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.app-container{display:flex;flex-direction:column;height:100%;width:100%;position:relative;overflow:hidden}.content-column{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.main-content{flex:1;overflow-y:auto;position:relative;-ms-overflow-style:none;scrollbar-width:none;animation:tabFadeIn .2s ease-out}.main-content.no-topbar{padding-top:env(safe-area-inset-top,0px)}@keyframes tabFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.main-content::-webkit-scrollbar{display:none}.hide-scrollbar{scrollbar-width:none;-ms-overflow-style:none}.hide-scrollbar::-webkit-scrollbar{display:none}.roadmap-continue-wrapper{position:sticky;bottom:24px;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:0 24px;margin-top:-80px;pointer-events:none}.roadmap-continue-wrapper>*{pointer-events:auto}.path-container{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-6) 0 120px}.path-node{width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:var(--spacing-4) 0;position:relative;z-index:2;transition:transform .2s,box-shadow .2s;cursor:pointer}.path-node.active{background-color:var(--primary-color);border:4px solid #CC9202;color:#1a1a1a;box-shadow:0 6px #cc9202,0 0 0 4px var(--bg-color),0 0 0 8px var(--primary-color)}.path-node.active:active{transform:translateY(4px) scale(.95);box-shadow:0 2px #cc9202,0 0 0 4px var(--bg-color),0 0 0 8px var(--primary-color)}.path-node.completed{background-color:var(--primary-color);border:4px solid #CC9202;color:#1a1a1a;box-shadow:0 6px #cc9202}.path-node.completed:active{transform:translateY(4px) scale(.95);box-shadow:0 2px #cc9202}.path-node.locked{background-color:var(--surface-color-light);border:4px solid var(--border-color);color:var(--text-muted);box-shadow:0 6px 0 var(--border-color)}.path-node.locked:active{transform:translateY(4px) scale(.95);box-shadow:0 2px 0 var(--border-color)}.path-node.skill-node.active{background-color:#a78bfa;border-color:#7c3aed;box-shadow:0 6px #7c3aed,0 0 0 4px var(--bg-color),0 0 0 8px #a78bfa}.path-node.skill-node.active:active{box-shadow:0 2px #7c3aed,0 0 0 4px var(--bg-color),0 0 0 8px #a78bfa}.path-node.skill-node.completed{background-color:#a78bfa;border-color:#7c3aed;box-shadow:0 6px #7c3aed}.path-node.skill-node.completed:active{box-shadow:0 2px #7c3aed}.path-node.test-node.active{background-color:#f97316;border-color:#c2410c;box-shadow:0 6px #c2410c,0 0 0 4px var(--bg-color),0 0 0 8px #f97316}.path-node.test-node.active:active{box-shadow:0 2px #c2410c,0 0 0 4px var(--bg-color),0 0 0 8px #f97316}.path-node.test-node.completed{background-color:#f97316;border-color:#c2410c;box-shadow:0 6px #c2410c}.path-node.test-node.completed:active{box-shadow:0 2px #c2410c}.path-node-icon{width:32px;height:32px}.practice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-4);padding:var(--spacing-4)}.practice-card{background-color:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-4);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--spacing-2);transition:transform .2s,box-shadow .2s;box-shadow:0 4px 0 var(--border-color);cursor:pointer}.practice-card:active{transform:translateY(4px);box-shadow:0 0 0 var(--border-color)}.practice-icon{width:48px;height:48px;color:var(--primary-color);margin-bottom:var(--spacing-2)}.sidebar-brand,.sidebar-footer{display:none}.bottom-nav{min-height:56px;background-color:var(--surface-color);border-top:1px solid var(--border-color);display:flex;align-items:stretch;padding-bottom:env(safe-area-inset-bottom,0px)}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--text-muted);background:transparent;border:none;border-radius:0;padding:8px 0;box-shadow:none;min-width:0}.nav-item:active{transform:scale(.95);box-shadow:none}.nav-item.active{color:var(--primary-color)}.nav-item span{font-size:10px;font-weight:600;line-height:1}.bottom-nav{position:relative;z-index:50}.dict-popup-menu{position:absolute;bottom:100%;left:50%;transform:translate(-50%);background:var(--surface-color);border:1px solid var(--border-color);border-radius:14px;padding:6px;display:flex;gap:4px;box-shadow:0 -8px 32px #0000004d;margin-bottom:8px;animation:popup-in .15s ease-out}@keyframes popup-in{0%{opacity:0;transform:translate(-50%) translateY(8px) scale(.9)}to{opacity:1;transform:translate(-50%) translateY(0) scale(1)}}.dict-popup-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 18px;border:none;background:transparent;color:var(--text-main);border-radius:10px;cursor:pointer;font-size:11px;font-weight:600;font-family:inherit;transition:background .15s}.dict-popup-item:active{background:#ffb70326}.ocr-overlay{position:fixed;inset:0;z-index:1000;background:#000000b3;display:flex;align-items:center;justify-content:center;padding:24px}.ocr-overlay-card{background:var(--surface-color);border-radius:var(--radius-lg);padding:32px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:260px;max-width:320px;box-shadow:0 16px 48px #0006}.ocr-overlay-text{font-size:15px;font-weight:700;color:var(--text-main)}.ocr-progress-bar{width:100%;height:6px;background:var(--border-color);border-radius:3px;overflow:hidden}.ocr-progress-fill{height:100%;background:var(--primary-color);border-radius:3px;transition:width .3s ease}.ocr-cancel-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-muted);padding:8px 16px;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:inherit;transition:background .15s}.ocr-cancel-btn:hover{background:#ffffff0d}.voice-pulse-ring{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffb7031a;animation:voice-pulse 1.5s ease-in-out infinite}@keyframes voice-pulse{0%,to{box-shadow:0 0 #ffb7034d}50%{box-shadow:0 0 0 16px #ffb70300}}.topbar-desktop-only{display:none}.top-bar{display:flex;justify-content:space-between;align-items:center;padding-left:var(--spacing-4);padding-right:var(--spacing-4);padding-bottom:var(--spacing-4);padding-top:calc(env(safe-area-inset-top,0px) + var(--spacing-4));background-color:var(--surface-color);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:10}.stat-badge{display:flex;align-items:center;gap:var(--spacing-1);font-weight:700;font-size:14px}.stat-badge.streak{color:#ff9f1c}.stat-badge.gems{color:var(--secondary-color)}.stat-badge.hearts{color:var(--danger-color)}.onboarding-screen{display:flex;flex-direction:column;height:100%;padding-left:var(--spacing-6);padding-right:var(--spacing-6);padding-top:calc(env(safe-area-inset-top,0px) + var(--spacing-6));padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--spacing-6));animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.onboarding-content{flex:1;display:flex;flex-direction:column;justify-content:center}.onboarding-title{font-size:24px;text-align:center;margin-bottom:var(--spacing-8)}.option-btn{background-color:var(--surface-color);border:2px solid var(--border-color);color:var(--text-main);box-shadow:0 4px 0 var(--border-color);margin-bottom:var(--spacing-4);justify-content:space-between}.option-btn:active{box-shadow:0 0 0 var(--border-color)}.option-btn.selected{border-color:var(--primary-color);background-color:#ffd1661a;color:var(--primary-color)}.bottom-cta{padding:var(--spacing-4) 0;margin-top:auto}@keyframes settingsPanelIn{0%{transform:translate(-100%);opacity:.6}to{transform:translate(0);opacity:1}}@keyframes slideUpSheet{0%{transform:translateY(100%);opacity:.8}to{transform:translateY(0);opacity:1}}@media(min-width:768px){.app-container{flex-direction:row;height:100dvh}.sidebar-brand{display:flex;align-items:center;gap:10px;padding:4px 16px 20px;margin-bottom:8px;border-bottom:1px solid var(--border-color)}.sidebar-brand-icon{width:36px;height:36px;border-radius:8px}.sidebar-brand-name{font-size:18px;font-weight:800;color:var(--primary-color)}.bottom-nav{flex-direction:column;width:220px;min-height:100%;border-top:none;border-right:1px solid var(--border-color);padding:20px 8px;gap:4px;align-items:stretch;order:-1;flex-shrink:0}.nav-item{flex:0;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 16px;border-radius:12px;transition:background .15s}.nav-item:hover{background:var(--surface-color-light)}.nav-item:active{transform:none}.nav-item.active{background:#ffb7031a}.nav-item span{font-size:14px;font-weight:600}.nav-item svg{flex-shrink:0}.main-content{max-width:720px;width:100%;margin:0 auto;padding:0 24px}.main-content.no-topbar{padding-top:0}.top-bar{display:none}.topbar-desktop-only{display:block}.study-tab-container .topbar-desktop-only{display:none!important}.sidebar-footer{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:12px;border-top:1px solid var(--border-color)}.sidebar-profile{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;cursor:pointer;transition:background .15s;margin-top:4px}.sidebar-profile:hover{background:var(--surface-color-light)}.sidebar-avatar{width:34px;height:34px;border-radius:50%;background:var(--primary-color);display:flex;align-items:center;justify-content:center;color:#1a1a1a;flex-shrink:0}.sidebar-profile-info{display:flex;flex-direction:column;min-width:0}.sidebar-profile-name{font-size:14px;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-profile-sub{font-size:11px;color:var(--text-muted)}.sidebar-notif-badge{background:var(--danger-color);color:#fff;font-size:11px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:auto}.practice-grid{grid-template-columns:repeat(3,1fr)}.path-container{padding-bottom:60px}.dict-popup-menu{bottom:auto;top:100%;margin-bottom:0;margin-top:8px;left:100%;transform:translate(-50%)}}.tutorial-overlay{position:absolute;inset:0;z-index:9999;pointer-events:none}.tutorial-backdrop{position:absolute;inset:0;background:transparent;pointer-events:all;transition:background .3s ease}.tutorial-spotlight{position:absolute;border-radius:14px;pointer-events:none;transition:all .45s cubic-bezier(.4,0,.2,1);box-shadow:0 0 0 4px #ffb703b3,0 0 0 9999px #0a0a12d1;z-index:10000}.tutorial-tooltip{position:absolute;z-index:10001;background:var(--surface-color, #1E1E2E);border:1.5px solid rgba(255,183,3,.35);border-radius:20px;padding:16px 16px 14px;box-shadow:0 12px 48px #000000a6,0 3px #ffb7032e;pointer-events:all;animation:tooltipEntrance .3s cubic-bezier(.34,1.2,.64,1) both;display:flex;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}@keyframes tooltipEntrance{0%{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.tutorial-step-badge{display:inline-flex;align-items:center;gap:6px;background:#ffb70326;border:1px solid rgba(255,183,3,.4);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;color:#ffb703;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}.tutorial-step-emoji{font-size:13px}.tutorial-title{font-size:18px;font-weight:800;color:var(--text-main, #F5F5F5);margin:0 0 6px;line-height:1.3}.tutorial-desc{font-size:14px;color:var(--text-muted, #8A8A9A);margin:0 0 18px;line-height:1.6}.tutorial-progress{display:flex;align-items:center;gap:5px;margin-bottom:16px}.tutorial-dot{width:6px;height:6px;border-radius:3px;background:#ffffff2e;transition:all .3s ease;flex-shrink:0}.tutorial-dot.active{width:22px;background:#ffb703}.tutorial-dot.done{background:#ffb7036b}.tutorial-actions{display:flex;gap:10px}.tutorial-skip-btn{flex:0 0 auto;background:transparent;border:1.5px solid rgba(255,255,255,.12);border-radius:12px;color:var(--text-muted, #8A8A9A);font-size:14px;font-weight:600;padding:12px 16px;cursor:pointer;transition:all .2s}.tutorial-skip-btn:hover{border-color:#ffffff40;color:var(--text-main, #F5F5F5)}.tutorial-next-btn{flex:1;background:#ffb703;border:none;border-radius:12px;color:#1a1a1a;font-size:15px;font-weight:800;padding:13px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px #cc8f00;transition:transform .1s,box-shadow .1s}.tutorial-next-btn:active{transform:translateY(3px);box-shadow:0 1px #cc8f00}.tutorial-next-btn.finish{background:linear-gradient(135deg,#06d6a0,#059669);box-shadow:0 4px #037752;color:#fff}.tutorial-tab-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:#a78bfa;font-weight:600;margin-bottom:12px}.tutorial-tab-hint svg{flex-shrink:0}.tutorial-arrow{position:absolute;width:0;height:0;z-index:10001;pointer-events:none}.tutorial-arrow.arrow-down{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid var(--surface-color, #1E1E2E)}.tutorial-arrow.arrow-up{border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid var(--surface-color, #1E1E2E)}.notif-stack{position:fixed;top:58px;left:50%;transform:translate(-50%);width:min(calc(100vw - 24px),366px);display:flex;flex-direction:column;gap:6px;z-index:8000;pointer-events:none}.notif-toast{pointer-events:all;border:1px solid;border-radius:14px;padding:10px 36px 10px 10px;display:flex;align-items:center;gap:10px;position:relative;overflow:hidden;box-shadow:0 4px 20px #00000038,0 1px 4px #00000024;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background-color:var(--surface-color);opacity:0;transform:translateY(-12px) scale(.97);transition:opacity .28s cubic-bezier(.34,1.4,.64,1),transform .28s cubic-bezier(.34,1.4,.64,1)}.notif-toast--in{opacity:1;transform:translateY(0) scale(1)}.notif-toast--out{opacity:0;transform:translateY(-8px) scale(.96);transition:opacity .22s ease,transform .22s ease;pointer-events:none}.notif-accent-bar{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:14px 0 0 14px}.notif-icon-blob{width:36px;height:36px;min-width:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.notif-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.notif-title{font-size:13px;font-weight:700;color:var(--text-main);line-height:1.3}.notif-text{font-size:11.5px;color:var(--text-muted);line-height:1.4}.notif-dismiss{position:absolute;top:8px;right:8px;background:#ffffff1a;border:none;color:var(--text-muted);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;padding:0}.notif-dismiss:hover{background:#fff3}.notif-panel-backdrop{position:fixed;inset:0;z-index:8500;background:#00000059;animation:notifBackdropIn .2s ease}@keyframes notifBackdropIn{0%{opacity:0}to{opacity:1}}.notif-panel{position:fixed;top:0;right:0;bottom:0;width:min(92vw,360px);background:var(--bg-color);border-left:1px solid var(--border-color);z-index:8600;display:flex;flex-direction:column;box-shadow:-8px 0 32px #00000038}.notif-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--border-color);flex-shrink:0}.notif-panel-title{font-size:16px;font-weight:800;color:var(--text-main)}.notif-panel-action-btn{background:none;border:none;color:var(--text-muted);padding:6px;border-radius:8px;cursor:pointer;display:flex;align-items:center;transition:background .15s,color .15s}.notif-panel-action-btn:hover{background:var(--surface-color);color:var(--text-main)}.notif-panel-tabs{display:flex;gap:0;padding:8px 16px;border-bottom:1px solid var(--border-color);flex-shrink:0}.notif-panel-tab{flex:1;background:none;border:none;padding:8px 0;font-size:13px;font-weight:700;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;font-family:inherit}.notif-panel-tab.active{color:var(--text-main);border-bottom-color:var(--primary-color)}.notif-panel-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0}.notif-panel-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center;gap:8px;color:var(--text-muted)}.notif-panel-empty p{margin:0;font-size:15px;font-weight:700;color:var(--text-muted)}.notif-panel-empty span{font-size:13px;color:var(--text-muted);opacity:.7}.notif-panel-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border-color);position:relative;transition:background .15s}.notif-panel-item:last-child{border-bottom:none}.notif-panel-item:hover{background:var(--surface-color)}.notif-panel-item-icon{width:34px;height:34px;min-width:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.notif-panel-item-avatar{width:34px;height:34px;min-width:34px;border-radius:50%;background:var(--primary-color);color:#1a1a1a;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex-shrink:0;margin-top:1px}.notif-panel-item-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.notif-panel-item-title{font-size:13px;font-weight:700;color:var(--text-main);line-height:1.3}.notif-panel-item-body{font-size:12px;color:var(--text-muted);line-height:1.4}.notif-panel-item-time{font-size:11px;color:var(--text-muted);opacity:.65;margin-top:2px}.notif-friend-name{font-weight:800;color:var(--text-main)}.notif-panel-item-accent{position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:0;opacity:.6}.notif-panel-item-icon-sm{margin-top:2px;flex-shrink:0;opacity:.5}.notif-bell-btn{position:relative;background:none;border:none;color:var(--text-muted);padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}.notif-bell-btn:hover{background:var(--surface-color);color:var(--text-main)}.notif-bell-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:#ef4444;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;font-family:inherit;line-height:1;border:1.5px solid var(--bg-color);animation:badgePop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes badgePop{0%{transform:scale(0)}to{transform:scale(1)}}.referral-overlay{display:flex;align-items:center;justify-content:center;background-color:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2000}.referral-modal{max-width:500px;width:90%;max-height:90vh;border-radius:var(--radius-lg);padding:0;overflow-y:auto;overflow-x:hidden;background:var(--bg-color);box-shadow:0 10px 40px #0006;position:relative;-ms-overflow-style:none;scrollbar-width:none}.referral-modal::-webkit-scrollbar{display:none}.referral-close{position:absolute;top:16px;right:16px;padding:8px;background:#0003!important;color:#fff!important;border-radius:50%;z-index:10}.referral-close:hover{background:#0006!important}.referral-header{background:linear-gradient(135deg,var(--primary-color),var(--primary-color-hover));padding:40px 24px 24px;text-align:center;color:#1a1a1a;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.referral-hero-icon{width:80px;height:80px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 8px 16px #0000001a}.referral-headline{font-size:24px;font-weight:900;margin:0 0 12px;line-height:1.2}.referral-subhead{font-size:15px;margin:0;opacity:.9;line-height:1.4}.referral-link-section{padding:24px 24px 16px}.section-label{font-size:12px;font-weight:800;text-transform:uppercase;color:var(--text-muted);margin:0 0 8px;letter-spacing:.5px}.link-box{display:flex;align-items:center;background:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:6px;box-shadow:inset 0 2px 4px #0000001a}.link-text{flex:1;font-family:monospace;font-size:16px;font-weight:700;padding:0 12px;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.copy-btn{padding:10px 16px;border-radius:var(--radius-md);background:var(--primary-color);color:#1a1a1a;font-size:13px;box-shadow:0 3px #cc9202}.copy-btn.copied{background:var(--success-color);box-shadow:0 3px #05a67d;color:#fff}.share-methods{display:flex;gap:12px;padding:0 24px 24px}.share-method-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;padding:0;box-shadow:none;border:none}.share-method-btn:active{transform:scale(.95);box-shadow:none}.share-icon-wrapper{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px #00000026}.share-label{font-size:12px;font-weight:700;color:var(--text-main)}.milestone-tracker{padding:24px;background:var(--surface-color);border-top:1px solid var(--border-color)}.milestone-title{font-size:16px;font-weight:800;margin:0 0 16px}.milestone-progress-bar{height:12px;background:var(--bg-color);border-radius:6px;margin-bottom:24px;position:relative;border:1px solid var(--border-color);overflow:hidden}.milestone-progress-fill{height:100%;background:var(--primary-color);border-radius:6px;transition:width .5s ease}.milestone-nodes{display:flex;flex-direction:column;gap:12px}.milestone-node{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-md);background:var(--bg-color);border:1px solid var(--border-color);opacity:.6;transition:all .3s}.milestone-node.reached{opacity:1;border-color:var(--active-color);background:#ffffff0d}.milestone-icon{width:40px;height:40px;border-radius:50%;background:var(--surface-color);display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.milestone-node.reached .milestone-icon{background:var(--active-color);color:#fff}.milestone-node.reached[style*="#FFD166"] .milestone-icon{color:#1a1a1a}.milestone-info{display:flex;flex-direction:column;justify-content:center}.milestone-count{font-size:12px;font-weight:800;color:var(--text-muted);text-transform:uppercase}.milestone-reward{font-size:15px;font-weight:700;color:var(--text-main)}.milestone-node.reached .milestone-reward{color:var(--active-color)}.partner-banner{margin:0 24px 24px;padding:16px;background:linear-gradient(135deg,#ce82ff1a,#ce82ff33);border:2px solid rgba(206,130,255,.3);border-radius:var(--radius-lg);display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .2s}.partner-banner:hover{transform:translateY(-2px);border-color:#ce82ff;background:linear-gradient(135deg,#ce82ff26,#ce82ff40);box-shadow:0 4px 12px #ce82ff26}.partner-banner-icon{width:44px;height:44px;background:#ce82ff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.partner-banner-text{display:flex;flex-direction:column}.partner-banner-title{font-size:16px;font-weight:800;color:var(--text-main);margin-bottom:2px}.partner-banner-subtitle{font-size:13px;color:var(--text-muted);font-weight:600}.partner-banner-subtitle .arrow{color:#ce82ff;font-weight:800;margin-left:4px;display:inline-block;transition:transform .2s}.partner-banner:hover .arrow{transform:translate(3px)}.install-prompt-overlay{position:fixed;inset:0;background:#00000080;z-index:10000;display:flex;align-items:flex-end;justify-content:center;padding:16px;animation:fadeIn .3s ease}.install-prompt{background:var(--surface-color, #1E1E1E);border-radius:16px;padding:20px;width:100%;max-width:400px;position:relative;animation:slideUp .3s ease}.install-prompt-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--text-secondary, #999);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.install-prompt-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-right:24px}.install-prompt-icon{width:52px;height:52px;border-radius:12px}.install-prompt-header h3{margin:0 0 4px;font-size:17px;color:var(--text-primary, #fff)}.install-prompt-header p{margin:0;font-size:13px;color:var(--text-secondary, #999);line-height:1.3}.install-prompt-steps{display:flex;flex-direction:column;gap:12px}.install-step{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface-color-light, #2C2C2C);border-radius:10px;color:var(--text-primary, #fff);font-size:14px}.install-step svg{flex-shrink:0;color:var(--primary-color, #FFB703)}.install-note{font-size:14px;color:var(--text-secondary, #999);text-align:center;padding:8px 0;margin:0}.install-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:var(--primary-color, #FFB703);color:#000;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer}.install-btn:active{opacity:.9}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}.home-tab{padding:16px 16px 100px;display:flex;flex-direction:column;gap:16px}.home-streak-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:12px 14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm)}.home-streak-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0}.home-streak-header{display:flex;align-items:center;gap:4px;flex-shrink:0}.home-streak-count{font-size:18px;font-weight:900;color:var(--text-main)}.home-streak-label{font-size:13px;font-weight:700;color:var(--text-muted);margin-left:2px}.home-week-dots{display:flex;gap:4px;flex:1;justify-content:flex-end;min-width:0;overflow:hidden}.home-dot{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;max-width:36px}.home-dot-circle{width:100%;aspect-ratio:1 / 1;max-width:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-color-light, #2C2C2C);border:2px solid transparent;font-size:9px;font-weight:800;color:var(--text-muted);transition:all .2s;box-sizing:border-box}.home-dot.checked .home-dot-circle{background:#ff6b35;color:#fff}.home-dot.today .home-dot-circle{border-color:var(--primary-color)}.home-streak-divider{height:1px;background:var(--border-color)}.home-streak-stats{display:flex;align-items:center;justify-content:space-around}.home-dict-search{display:flex;flex-direction:column;gap:8px}.home-progress-stat{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}.home-progress-number{font-size:22px;font-weight:900;color:var(--text-main);line-height:1}.home-progress-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.home-progress-divider{width:1px;height:36px;background:var(--border-color);flex-shrink:0}.home-wotd-card{min-width:160px;max-width:180px;background:var(--surface-color);border:2px solid rgba(255,183,3,.3);border-radius:14px;padding:14px 16px;flex-shrink:0;display:flex;flex-direction:column;gap:6px}.home-wotd-word{display:flex;align-items:center;gap:6px}.home-wotd-vi{font-size:16px;font-weight:800;color:var(--text-main)}.home-speak-btn{background:none;border:none;color:var(--primary-color);cursor:pointer;padding:6px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s}.home-speak-btn:hover{background:#ffb70326}.home-wotd-en{font-size:16px;color:var(--text-muted);font-weight:600}.home-section-header{font-size:18px;font-weight:800;color:var(--text-main);margin-top:4px}.home-tips-scroll{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}.home-tips-scroll::-webkit-scrollbar{display:none}.home-tip-card{min-width:260px;max-width:280px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:14px;padding:16px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}.home-tip-title{font-size:15px;font-weight:800;color:var(--primary-color)}.home-tip-body{font-size:13px;color:var(--text-muted);line-height:1.5}.home-partner-cta{min-width:280px;max-width:320px;width:85vw;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;flex-shrink:0}.home-partner-cta-img{width:100%;height:120px;object-fit:cover}.home-partner-cta-content{padding:var(--spacing-3);display:flex;flex-direction:column;gap:8px}.home-partner-cta-title{font-size:16px;font-weight:800;margin:0;color:var(--text-main)}.home-partner-cta-desc{font-size:14px;color:var(--text-muted);line-height:1.5;margin:0 0 8px}.home-partner-cta-actions{display:flex;flex-direction:column;gap:12px}.home-partner-cta-code-box{display:flex;align-items:center;background:var(--bg-color);border:1px dashed var(--border-color);border-radius:var(--radius-sm);padding:6px 8px;gap:8px}.home-partner-cta-code-label{font-size:11px;font-weight:700;color:var(--text-muted)}.home-partner-cta-code-val{flex:1;font-size:14px;font-weight:800;color:var(--text-main);letter-spacing:.5px}.home-partner-cta-copy-btn{background:transparent;border:none;font-size:12px;font-weight:700;color:var(--primary-color);cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .15s;font-family:inherit}.home-partner-cta-copy-btn:hover{background:#ffd16626}.home-partner-cta-copy-btn.copied{color:#06d6a0}.home-partner-cta-link-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;border-radius:14px;border:none;font-size:15px;font-weight:700;font-family:inherit;text-decoration:none;transition:transform .1s,box-shadow .1s;cursor:pointer;margin-top:4px;box-sizing:border-box}.home-partner-cta-link-btn:active{transform:translateY(4px);box-shadow:0 0 0 transparent!important}.home-actions{display:flex;flex-direction:column;gap:10px}.home-action-card{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border-radius:14px;border:none;cursor:pointer;font-size:15px;font-weight:700;font-family:inherit;transition:transform .1s}.home-action-card:active{transform:translateY(2px)}.home-action-card span{flex:1;text-align:left}.home-action-study{background:#ffb703;color:#1a1a1a;box-shadow:0 4px #e5a503}.home-action-review{background:#06d6a0;color:#1a1a1a;box-shadow:0 4px #05a67d}.voice-overlay{position:fixed;inset:0;background:#00000080;z-index:1000;display:flex;align-items:center;justify-content:center;animation:voiceFadeIn .15s ease;padding:24px}.voice-modal{background:var(--surface-color);border-radius:20px;padding:28px 24px;width:100%;max-width:340px;height:420px;max-height:65vh;animation:voiceScaleIn .2s ease;display:flex;flex-direction:column;align-items:center;overflow:hidden;position:relative}@keyframes voiceFadeIn{0%{opacity:0}to{opacity:1}}@keyframes voiceScaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}.voice-modal-title{font-size:17px;font-weight:800;color:var(--text-main);margin:0 0 18px;text-align:center}.voice-listening-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.voice-listening-icon{width:80px;height:80px;border-radius:50%;background:#ffb7031f;display:flex;align-items:center;justify-content:center;margin-bottom:12px;animation:voicePulse 1.5s ease-in-out infinite}@keyframes voicePulse{0%,to{box-shadow:0 0 #ffb70333}50%{box-shadow:0 0 0 14px #ffb70300}}.voice-interim-text{font-size:15px;color:var(--text-muted);text-align:center;margin:4px 0 16px;line-height:1.4;word-break:break-word;max-height:80px;overflow-y:auto}.voice-modal-actions{display:flex;gap:10px;width:100%;margin-top:auto;padding-top:16px}.voice-modal-cancel-btn{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;padding:12px;border-radius:12px;border:1.5px solid var(--border-color);background:var(--surface-color);color:var(--text-main);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer}.voice-modal-primary-btn{display:flex;align-items:center;justify-content:center;gap:6px;flex:1;padding:12px;border-radius:12px;border:none;background:var(--primary-color);color:#1a1a1a;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .1s}.voice-modal-primary-btn:active{transform:translateY(2px)}.lang-picker-scroll-wrap{flex:1;width:100%;overflow-y:auto;position:relative;-webkit-overflow-scrolling:touch;mask-image:linear-gradient(to bottom,black calc(100% - 32px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black calc(100% - 32px),transparent 100%);padding-bottom:12px}.lang-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%}.lang-picker-btn{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:2px solid var(--border-color);background:var(--surface-color);cursor:pointer;font-family:inherit;transition:all .15s}.lang-picker-btn.active{border-color:var(--primary-color);background:#ffb7031a}.lang-picker-name{font-size:14px;font-weight:600;color:var(--text-main)}.demo-banner{background:linear-gradient(135deg,#ffd1661f,#ff8bc11a);border:1.5px solid rgba(255,209,102,.3);border-radius:var(--radius-lg);padding:14px 16px;display:flex;flex-direction:column;gap:10px;position:relative}.demo-banner-header{display:flex;flex-direction:column;gap:2px}.demo-banner-tag{position:absolute;top:14px;right:48px;display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--primary-color);background:#ffd16626;padding:3px 6px;border-radius:var(--radius-full)}.demo-banner-title{font-size:17px;font-weight:800;margin:0;color:var(--text-main);line-height:1.2}.demo-banner-subtitle{font-size:13px;color:var(--text-muted);margin:2px 0 0;line-height:1.4}.demo-banner-founder{font-size:11px;font-weight:700;color:var(--primary-color);margin:4px 0 0;font-style:italic}.demo-email-row{display:flex;gap:8px}.demo-email-input{flex:1;padding:10px 14px;border-radius:var(--radius-md);border:1.5px solid var(--border-color);background:var(--surface-color);color:var(--text-main);font-size:14px;font-weight:500;outline:none;transition:border-color .2s}.demo-email-input:focus{border-color:var(--primary-color)}.demo-email-input::placeholder{color:var(--text-muted)}.demo-join-btn{padding:10px 20px;border-radius:var(--radius-md);background:var(--primary-color);color:#1a1a1a;font-size:14px;font-weight:800;border:none;box-shadow:0 3px #cc9202;cursor:pointer;white-space:nowrap;transition:transform .1s}.demo-join-btn:active{transform:translateY(2px);box-shadow:0 1px #cc9202}.demo-success{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#06d6a01f;border:1.5px solid rgba(6,214,160,.3);border-radius:var(--radius-md);color:var(--success-color);font-size:14px;font-weight:700}.demo-actions-row{display:flex;gap:8px}.demo-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 12px;border-radius:var(--radius-md);border:1.5px solid var(--border-color);background:var(--surface-color);color:var(--text-main);font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .2s}.demo-action-btn:active{transform:scale(.97)}.demo-community-row{display:flex;flex-direction:column;gap:8px}.demo-community-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.demo-community-links{display:flex;flex-wrap:wrap;gap:6px}.demo-community-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--radius-full);background:var(--surface-color);border:1px solid var(--border-color);color:var(--chip-color, var(--text-main));font-size:12px;font-weight:700;text-decoration:none;transition:all .2s}.demo-community-chip svg{flex-shrink:0}.demo-community-chip:active{transform:scale(.95);border-color:var(--primary-color)}.deck-picker-overlay{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:24px}.deck-picker-modal{background:var(--surface-color);border-radius:20px 20px 16px 16px;width:100%;max-width:400px;max-height:70vh;display:flex;flex-direction:column;border:1px solid var(--border-color);animation:deck-picker-slide-up .25s ease-out}@keyframes deck-picker-slide-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.deck-picker-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--border-color)}.deck-picker-title{margin:0;font-size:17px;font-weight:800;color:var(--text-main);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.deck-picker-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;align-items:center}.deck-picker-list{flex:1;overflow-y:auto;padding:8px}.deck-picker-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:12px;border:none;background:transparent;cursor:pointer;color:var(--text-main);font-family:inherit;font-size:15px;transition:background .15s}.deck-picker-row:hover{background:var(--bg-color)}.deck-picker-row.active{background:#ffd1661a}.deck-picker-row-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.deck-picker-row-icon.saved{background:#06d6a026;color:#06d6a0}.deck-picker-row-icon.custom{background:#ff9f4326;color:#ff9f43}.deck-picker-row-name{flex:1;font-weight:600;text-align:left}.deck-picker-check{color:var(--primary-color);flex-shrink:0}.deck-picker-new-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 16px);margin:8px;padding:12px;border:2px dashed var(--border-color);border-radius:12px;background:transparent;color:var(--text-muted);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s}.deck-picker-new-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.deck-picker-create-form{padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px}.deck-picker-input{width:100%;padding:10px 14px;border:2px solid var(--border-color);border-radius:10px;background:var(--bg-color);color:var(--text-main);font-size:15px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .2s}.deck-picker-input:focus{border-color:var(--primary-color)}.deck-picker-create-actions{display:flex;gap:8px}.deck-picker-btn{flex:1;padding:10px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s}.deck-picker-btn.primary{background:var(--primary-color);color:#1a1a1a;border:none}.deck-picker-btn.primary:disabled{opacity:.4;cursor:default}.deck-picker-btn.ghost{background:transparent;border:1px solid var(--border-color);color:var(--text-muted)}.dictionary-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.dictionary-header{padding:var(--spacing-4);padding-top:var(--spacing-6);padding-bottom:0;margin-bottom:var(--spacing-4)}.dictionary-header h2{font-size:24px;margin-bottom:8px}.dictionary-header p{color:var(--text-muted);font-size:14px;margin-bottom:var(--spacing-4)}.dictionary-language-toggle-wrapper{position:relative;display:flex;align-items:center;gap:6px;width:100%;margin-top:-2px}.dictionary-language-toggle-wrapper.scrolled-left:before{content:"";position:absolute;left:0;top:0;bottom:0;width:32px;background:linear-gradient(to left,transparent,var(--surface-color));pointer-events:none;border-radius:var(--radius-full) 0 0 var(--radius-full);z-index:1}.dictionary-language-toggle-wrapper.has-overflow:after{content:"";position:absolute;right:0;top:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,var(--surface-color));pointer-events:none;border-radius:0 var(--radius-full) var(--radius-full) 0;z-index:1}.dictionary-language-toggle{display:flex;align-items:center;gap:3px;background-color:var(--surface-color);border:1px solid var(--border-color);padding:4px 3px 3px;border-radius:var(--radius-full);flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}.dictionary-language-toggle::-webkit-scrollbar{display:none}.lang-toggle-label{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;color:var(--primary-color);cursor:pointer;background:transparent;border:1.5px solid var(--primary-color);padding:0;margin-left:2px;transition:color .15s ease,background-color .15s ease,border-color .15s ease}.lang-toggle-label:hover{background-color:color-mix(in srgb,var(--primary-color) 15%,transparent)}.lang-toggle-label.active{background-color:var(--primary-color);color:#1a1a1a;border-color:var(--primary-color)}.lang-picker-popup{position:absolute;bottom:calc(100% + 6px);left:0;right:0;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:12px;box-shadow:var(--shadow-lg, 0 4px 20px rgba(0, 0, 0, .15));z-index:50}.lang-picker-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.lang-picker-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.lang-picker-close{background:none;border:none;cursor:pointer;padding:2px;display:flex;color:var(--text-muted)}.lang-picker-grid{display:flex;flex-wrap:wrap;gap:6px}.lang-picker-chip{flex:1 0 calc(33% - 4px);padding:10px 16px;text-align:center;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease;border:2px solid var(--border-color);background-color:transparent;color:var(--text-muted)}.lang-picker-chip.active{border-color:var(--primary-color);background-color:#ffd16626;color:var(--primary-color)}.lang-strip-fade{position:absolute;right:0;top:0;bottom:0;width:40px;background:linear-gradient(to right,transparent,var(--bg-color, #fff));pointer-events:none;border-radius:0 var(--radius-full) var(--radius-full) 0}.lang-gear-btn{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:none;background:var(--surface-color);border:1px solid var(--border-color);color:var(--text-muted);cursor:pointer;opacity:.6;transition:opacity .2s,color .2s}.lang-gear-btn:hover{opacity:1;color:var(--primary-color)}.lang-settings-popup{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:14px 16px;margin-top:8px;box-shadow:var(--shadow-md, 0 4px 12px rgba(0, 0, 0, .1));animation:fadeIn .15s ease-out}.toggle-btn{flex:1 0 48px;padding:6px 18px;border-radius:var(--radius-full);font-weight:700;font-size:13px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .2s ease;white-space:nowrap}.toggle-btn:hover{color:var(--text-main)}.toggle-btn.active{background-color:var(--primary-color);color:#1a1a1a;box-shadow:var(--shadow-sm)}.search-form{position:relative;width:100%}.suggestions-wrapper{position:relative;width:100%;margin-top:-2px}.suggestions-strip{display:flex;flex-wrap:nowrap;gap:6px;padding:4px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-height:28px}.suggestions-strip::-webkit-scrollbar{display:none}.suggestions-wrapper:before{content:"";position:absolute;left:0;top:0;bottom:0;width:28px;background:linear-gradient(to left,transparent,var(--bg-color, #fff));pointer-events:none;z-index:1;opacity:0;transition:opacity .2s}.suggestions-wrapper.scrolled-left:before{opacity:1}.suggestions-wrapper:after{content:"";position:absolute;right:0;top:0;bottom:0;width:28px;background:linear-gradient(to right,transparent,var(--bg-color, #fff));pointer-events:none;z-index:1}.suggestion-chip{padding:4px 10px;background:var(--surface-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);font-size:14px;color:var(--text-main);cursor:pointer;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;transition:all .2s}.suggestion-chip:hover{background-color:var(--primary-color);border-color:var(--primary-color);color:#1a1a1a}.search-input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:4px;transition:border-color .2s}.search-input-wrapper:focus-within{border-color:var(--primary-color)}.search-input{flex:1;min-width:0;background:transparent;border:none;padding:8px 8px 8px 12px;font-size:16px;font-family:inherit;color:var(--text-main);outline:none}.search-clear-btn{display:flex;align-items:center;justify-content:center;background:var(--bg-color);border:none;border-radius:50%;color:var(--text-muted);width:28px;height:28px;padding:0;margin:0 4px;cursor:pointer;flex-shrink:0;opacity:.6;transition:opacity .15s,background .15s}.search-clear-btn:hover{opacity:1}.search-actions-group{display:flex;align-items:center;flex-shrink:0;background-color:#ffd16640;border-radius:var(--radius-md);padding:0 6px;margin-right:4px;gap:2px;height:40px}.mode-btn{background:transparent;border:none;color:var(--text-muted);padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s ease,transform .1s ease;flex-shrink:0}.mode-btn:hover{color:var(--primary-color);transform:scale(1.05)}.mode-btn:active{transform:scale(.95)}.search-button{background-color:var(--primary-color);color:#1a1a1a;border:none;border-radius:var(--radius-md);padding:10px 12px;flex-shrink:0;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center}.search-button:active{transform:translateY(1px)}.search-button .loading-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.results-area{flex:1;overflow-y:auto;padding:var(--spacing-4);display:flex;flex-direction:column;gap:var(--spacing-4)}.results-area>*{animation:fadeIn .2s ease-out}.sources-expand-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;background:var(--surface-color);border:1px dashed var(--border-color);border-radius:var(--radius-lg);color:var(--text-muted);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:color .15s,border-color .15s,background .15s}.sources-expand-btn:hover{color:var(--primary-color);border-color:var(--primary-color);background:#ffd1660f}.sources-expand-btn:active{transform:scale(.98)}.dict-recent{display:flex;flex-direction:column;gap:10px}.dict-recent-header{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.dict-recent-clear{margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;opacity:.6;transition:opacity .15s}.dict-recent-clear:hover{opacity:1}.dict-recent-list{display:flex;flex-wrap:wrap;gap:8px}.dict-recent-item{background:var(--surface-color);border:1px solid var(--border-color);border-radius:20px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--text-main);cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}.dict-recent-item:hover{border-color:var(--primary-color);background:#ffb70314}.dict-idle{display:flex;flex-direction:column;gap:24px}.dict-guide{display:flex;flex-direction:column;gap:14px}.dict-guide-item{display:flex;align-items:flex-start;gap:10px}.dict-guide-icon{width:30px;height:30px;border-radius:8px;background:var(--surface-color-light, #2C2C2C);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--primary-color)}.dict-guide-item p{font-size:13px;color:var(--text-muted);line-height:1.5;margin:0;padding-top:5px}.dictionary-bottom-bar{flex-shrink:0;display:flex;flex-direction:column;gap:4px;padding:6px var(--spacing-4) 8px;background-color:var(--bg-color, #fff);border-top:1px solid var(--border-color)}.word-heading-card{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-4);margin-bottom:var(--spacing-4);display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow-sm)}.word-heading-card-row{display:flex;align-items:center;gap:8px;margin-bottom:var(--spacing-4)}.word-heading-card-row .word-heading-card{flex:1;margin-bottom:0}.word-heading{font-size:32px;font-weight:800;margin:0;line-height:1.1;color:var(--primary-color);flex:1;min-width:0;word-break:break-word}.word-heading-row{display:flex;align-items:center;gap:8px;margin-bottom:0}.word-heading-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}.back-btn{display:flex;align-items:center;gap:4px;border:none;background:none;color:var(--text-muted);cursor:pointer;padding:4px 0;font-size:14px}.back-btn:active{opacity:.5}.word-metrics{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.metric-badge{padding:4px 10px;border-radius:var(--radius-full);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:4px}.ipa-badge{background-color:#118ab21a;color:var(--secondary-color);font-family:monospace;font-size:14px}.freq-badge{background-color:#ffd16626;color:#cca300}.mi-badge{background-color:#06d6a01a;color:#048a66}.tone-indicators{display:flex;gap:6px;flex-wrap:wrap}.tone-tag{font-size:13px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);border:1.5px solid;display:inline-flex;align-items:center;gap:4px}.tone-name{font-size:11px;font-weight:700;opacity:.7;text-transform:uppercase;letter-spacing:.3px}.tier-badge{font-weight:800;letter-spacing:.3px}.disp-badge{background-color:#6b728014;color:var(--text-muted);display:inline-flex;align-items:center;gap:6px}.disp-bar-track{width:40px;height:5px;background-color:#6b728026;border-radius:3px;overflow:hidden;display:inline-block}.disp-bar-fill{height:100%;background:linear-gradient(90deg,#06b6d4,#3b82f6);border-radius:3px;display:block}.word-decomposition{border-top:1px solid var(--border-color);padding-top:10px;margin-top:auto}.premium-audio-request{margin-top:24px;padding:16px;background:linear-gradient(135deg,#ce82ff0d,#ce82ff26);border:2px solid rgba(206,130,255,.2);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:12px}.premium-audio-info{display:flex;align-items:center;gap:8px;color:#ce82ff;font-weight:800;font-size:14px}.premium-audio-btn{background:#ce82ff;color:#1a1a1a;border:none;padding:12px;border-radius:var(--radius-md);font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px #9e52cc;transition:all .2s}.premium-audio-btn:active{box-shadow:0 0 #9e52cc;transform:translateY(4px)}.decomp-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:8px;display:block}.decomp-parts{display:flex;gap:8px;flex-wrap:wrap}.decomp-part{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:var(--radius-md);min-width:80px}.decomp-syllable{font-size:18px;font-weight:800;color:var(--text-main)}.decomp-tier{font-size:11px;font-weight:700}.decomp-meaning{font-size:12px;color:var(--text-muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.speak-btn{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-radius:50%;background:transparent;color:var(--text-muted);cursor:pointer;transition:color .15s,background .15s;flex-shrink:0}.speak-btn:hover{color:var(--primary-color);background:var(--surface-color)}.speak-btn--sm{padding:3px;opacity:.6}.speak-btn--sm:hover{opacity:1}.dict-save-btn{display:flex;align-items:center;justify-content:center;padding:6px;border:none;border-radius:8px;background:none;color:var(--text-muted);cursor:pointer;transition:color .15s,transform .15s;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.dict-save-btn:hover{color:var(--primary-color)}.dict-save-btn.saved{color:var(--primary-color);animation:save-pop .3s ease-out}.dict-save-btn.pressing{transition:transform .3s ease-out;transform:scale(1.3)}@keyframes save-pop{0%{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}.example-vi-row{display:flex;align-items:center;gap:4px}.example-vi-row .example-vi{margin:0;flex:1}.source-section{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-4);box-shadow:var(--shadow-sm)}.source-header{display:flex;align-items:center;gap:8px;margin-bottom:var(--spacing-4);padding-bottom:var(--spacing-2);border-bottom:1px solid var(--border-color)}.source-name{font-size:12px;font-weight:800;color:var(--primary-color);text-transform:uppercase;letter-spacing:.5px}.meaning-item{margin-bottom:var(--spacing-6)}.meaning-header{display:flex;gap:12px;align-items:baseline;margin-bottom:8px}.part-of-speech{font-size:12px;font-weight:700;color:var(--secondary-color);background-color:#118ab21a;padding:2px 8px;border-radius:var(--radius-full);white-space:nowrap}.meaning-text{font-size:18px;font-weight:600;line-height:1.4;margin:0}.examples-list{margin-top:12px;padding-left:12px;border-left:2px solid var(--border-color);display:flex;flex-direction:column;gap:8px}.example-item{background-color:var(--bg-color);padding:10px;border-radius:var(--radius-md)}.example-vi{font-size:14px;font-weight:500;margin:0 0 4px}.example-en{font-size:13px;color:var(--text-muted);font-style:italic;margin:0}.no-results{text-align:center;padding:40px;color:var(--text-muted)}.unstructured-section{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-4)}.raw-content{font-size:14px;color:var(--text-muted);line-height:1.6;overflow-x:auto}.raw-content table{width:100%!important;max-width:100%}.raw-content td#C_C{width:auto!important;max-width:100%;white-space:normal}.raw-content tr{margin-bottom:8px;display:block}.raw-content td#I_C,.raw-content img{display:none}.no-results-action{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.no-results-icon{margin-bottom:16px;color:var(--text-muted)}.fallback-buttons{margin-top:24px;display:flex;gap:12px;justify-content:center}.fallback-btn{display:flex;align-items:center;justify-content:center;padding:10px 20px;border-radius:var(--radius-full);font-weight:700;font-size:14px;text-decoration:none;transition:all .2s ease;box-shadow:var(--shadow-sm)}.fallback-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.fallback-google{background-color:#4285f4;color:#fff}.did-you-mean{margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.dym-label{font-size:14px;font-weight:700;color:var(--text-muted)}.dym-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.dym-chip{padding:8px 16px;border-radius:var(--radius-lg);background-color:var(--surface-color);border:2px solid var(--primary-color);color:var(--primary-color);font-size:16px;font-weight:700;cursor:pointer;transition:all .15s ease;font-family:inherit}.dym-chip:hover{background-color:var(--primary-color);color:#1a1a1a}.local-translation-card{margin-top:24px;padding:var(--spacing-4);background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:var(--shadow-sm);width:100%;max-width:400px}.local-translation-card.translating{flex-direction:row;justify-content:center;color:var(--primary-color);font-weight:600}.ai-badge{background:linear-gradient(135deg,#1a1a1a,#333);color:#fff;font-size:11px;font-weight:800;padding:4px 8px;border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.5px}.local-translation-result{font-size:24px;font-weight:800;color:var(--primary-color);margin:0}.local-translation-result.clickable{cursor:pointer;text-decoration:underline;text-decoration-color:rgba(var(--primary-rgb, 234, 179, 8),.3);text-underline-offset:4px}.local-translation-result.clickable:active{opacity:.7}.correction-label{font-size:13px;color:var(--text-muted);font-weight:600}.fade-in{animation:fadeIn .4s ease-out forwards}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.fallback-google:hover{background-color:#3367d6}.camera-btn{background:transparent;border:none;color:var(--text-muted);padding:8px 12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .2s ease,transform .1s ease}.camera-btn:hover{color:var(--primary-color);transform:scale(1.05)}.camera-btn:active{transform:scale(.95)}.on-demand-section{padding:var(--spacing-4);background:linear-gradient(135deg,#ce82ff0d,#ce82ff1f);border:1px solid rgba(206,130,255,.2);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:10px}.on-demand-header{display:flex;align-items:center;gap:8px;font-weight:800;font-size:14px;color:#ce82ff}.on-demand-subtitle{font-size:12px;color:var(--text-muted);margin:0;line-height:1.4}.on-demand-input{width:100%;background:#ffffff0d;border:1px solid rgba(206,130,255,.25);border-radius:var(--radius-md);padding:12px 14px;font-size:14px;font-family:inherit;color:var(--text-main);outline:none;transition:border-color .2s;box-sizing:border-box}.on-demand-input:focus{border-color:#ce82ff}.on-demand-input::placeholder{color:var(--text-muted);font-size:13px}.on-demand-btn{display:flex;align-items:center;justify-content:center;gap:8px;background:#ce82ff;color:#1a1a1a;border:none;padding:12px;border-radius:var(--radius-md);font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px #9e52cc;transition:all .2s;font-family:inherit}.on-demand-btn:active{box-shadow:0 0 #9e52cc;transform:translateY(4px)}.ocr-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px}.ocr-overlay-card{background:var(--surface-color);border-radius:var(--radius-lg);padding:32px 24px;width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:16px;border:1px solid var(--border-color)}.ocr-overlay-text{font-size:16px;font-weight:700;color:var(--text-main);text-align:center}.ocr-progress-bar{width:100%;height:8px;background:var(--bg-color);border-radius:var(--radius-full);overflow:hidden;margin:8px 0}.ocr-progress-fill{height:100%;background:var(--primary-color);transition:width .3s ease}.ocr-cancel-btn{display:flex;align-items:center;gap:6px;background:var(--bg-color);border:1px solid var(--border-color);padding:8px 16px;border-radius:var(--radius-full);color:var(--text-muted);font-size:14px;font-weight:600;cursor:pointer;margin-top:8px;transition:background .2s,color .2s}.ocr-cancel-btn:hover{background:var(--surface-color-light);color:var(--text-main)}.voice-pulse-ring{width:80px;height:80px;border-radius:50%;background:#ffd16626;display:flex;align-items:center;justify-content:center;margin-bottom:8px;animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 #ffd16666}70%{box-shadow:0 0 0 20px #ffd16600}to{box-shadow:0 0 #ffd16600}}.voice-transcript{min-height:24px;max-height:80px;overflow-y:auto;word-break:break-word;color:var(--primary-color)}.voice-actions{display:flex;gap:12px;margin-top:4px}.voice-confirm-btn{display:flex;align-items:center;gap:6px;background:var(--primary-color);border:none;padding:8px 16px;border-radius:var(--radius-full);color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}.voice-confirm-btn:disabled{opacity:.4;cursor:default}.voice-confirm-btn:active:not(:disabled){opacity:.8}.on-demand-result{display:flex;flex-direction:column;gap:8px;padding:14px;background:#06d6a014;border:1px solid rgba(6,214,160,.2);border-radius:var(--radius-md)}.on-demand-result-text{margin:0;font-weight:800;font-size:14px;color:var(--success-color)}.on-demand-result-sub{margin:0;font-size:12px;color:var(--text-muted);line-height:1.4}.on-demand-premium-link{background:none;border:none;color:#ffd166;font-weight:700;font-size:12px;cursor:pointer;padding:0;text-decoration:underline;font-family:inherit}.on-demand-reset{background:transparent;border:1px solid rgba(206,130,255,.3);color:#ce82ff;padding:8px;border-radius:var(--radius-md);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}.on-demand-reset:hover{background:#ce82ff1a}.hanviet-decomposition{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-4);box-shadow:var(--shadow-sm)}.hanviet-cards{position:relative;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}.hanviet-cards.has-overflow:after{content:"";position:sticky;right:0;top:0;flex-shrink:0;width:32px;margin-left:-32px;align-self:stretch;background:linear-gradient(to right,transparent,var(--surface-color));pointer-events:none;z-index:1}.hanviet-cards::-webkit-scrollbar{display:none}.hanviet-card{flex:0 0 var(--card-basis, calc(25% - 5px) );background:var(--bg-color);border:1px solid var(--border-color);border-radius:12px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;cursor:pointer;transition:background-color .15s}.hanviet-card--best{border-color:var(--primary-color);background:#ffd16614}.hanviet-card:active{background-color:var(--border-color)}.hanviet-card-vi{font-size:15px;font-weight:800;color:var(--primary-color);text-transform:capitalize}.hanviet-card-zh{font-size:28px;font-weight:400;color:var(--text-main);line-height:1.2}.hanviet-card-pinyin{font-size:13px;font-weight:600;color:var(--secondary-color)}.on-demand-entry-desc{font-size:13px;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.hanviet-card-gloss{font-size:11px;color:var(--text-muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.hanviet.on-demand-entry-desc{font-size:13px;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.fvdp-entry{display:flex;flex-direction:column;gap:16px}.fvdp-section{display:flex;flex-direction:column;gap:8px}.fvdp-defs{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.5;color:var(--text-main)}.fvdp-defs li{padding-left:4px}.fvdp-defs li::marker{color:var(--text-muted);font-weight:700}.fvdp-examples{margin-top:4px;padding-left:8px;border-left:2px solid var(--border-color);display:flex;flex-direction:column;gap:4px}.fvdp-examples .example-item{padding:4px 8px;background:none;font-size:13px}.fvdp-examples .example-vi{color:var(--text-main);font-size:13px}.fvdp-examples .example-en{color:var(--text-muted);font-style:italic;font-size:13px}.tappable-word{cursor:pointer;border-bottom:1px dotted var(--text-muted);padding-bottom:1px;border-radius:2px;transition:background-color .15s;-webkit-tap-highlight-color:transparent}.tappable-word:active{background-color:color-mix(in srgb,var(--primary-color) 18%,transparent)}.tappable-word--selected{background-color:color-mix(in srgb,var(--primary-color) 22%,transparent);border-bottom-color:var(--primary-color);border-bottom-style:solid}.word-popup-card{position:fixed;background:var(--surface-color);border:1px solid var(--border-color);border-radius:12px;padding:14px 16px;box-shadow:0 8px 24px #0000002e;z-index:1100;max-width:280px;pointer-events:auto;animation:wordPopupIn .15s ease-out}@keyframes wordPopupIn{0%{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.word-popup-loading{font-size:13px;color:var(--text-muted);padding:4px 0}.word-popup-header{display:flex;align-items:center;gap:8px;margin-bottom:4px}.word-popup-word{font-size:18px;font-weight:700;color:var(--primary-color)}.word-popup-ipa{font-size:12px;color:var(--text-muted);display:block;margin-bottom:4px}.word-popup-pos{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;background:var(--bg-color);padding:2px 6px;border-radius:4px;display:inline-block;margin-bottom:6px}.word-popup-def{font-size:14px;color:var(--text-main);line-height:1.45;margin:0 0 8px}.word-popup-def--empty{color:var(--text-muted);font-style:italic}.word-popup-badge{font-size:9px;color:var(--text-muted);vertical-align:middle;letter-spacing:.3px;background:var(--bg-color);padding:2px 6px;border-radius:4px;display:inline-block;margin-bottom:6px}.word-popup-actions{display:flex;align-items:center;justify-content:space-between;gap:8px}.word-popup-save{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--text-main);background:var(--bg-color);border:1px solid var(--border-color);padding:4px 10px;border-radius:6px;cursor:pointer}.word-popup-more{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--primary-color);background:none;border:none;padding:0;cursor:pointer;margin-left:auto}.lib-landing{padding:0 0 148px;min-height:100%;position:relative}.lib-filter-row{display:flex;align-items:center;gap:8px;padding:12px 16px 4px;overflow-x:auto;scrollbar-width:none}.lib-filter-row::-webkit-scrollbar{display:none}.lib-subtag-row{padding-top:8px}.lib-type-bar{position:fixed;bottom:calc(68px + env(safe-area-inset-bottom,0px));left:50%;transform:translate(-50%);width:calc(100% - 32px);max-width:448px;display:flex;align-items:center;justify-content:space-around;gap:2px;padding:3px 8px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:24px;box-shadow:0 8px 32px #00000047,0 2px 8px #00000029;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:20}.lib-type-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:3px 4px;border-radius:20px;border:none;background:transparent;color:var(--text-muted);font-size:10px;font-weight:700;font-family:inherit;cursor:pointer;transition:color .15s,background .15s;white-space:nowrap}.lib-type-btn:active{transform:scale(.93)}.lib-type-btn.active{background:var(--surface-color-light, rgba(255, 255, 255, .06));font-weight:800}.lib-clear-btn{width:32px;height:32px;min-width:32px;padding:0;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface-color);border:1.5px solid var(--border-color)!important;color:var(--text-main);cursor:pointer;font-size:0}.lib-tag-chip{flex-shrink:0;padding:7px 16px;border-radius:var(--radius-full);font-size:13px;font-weight:700;border:1.5px solid var(--border-color);background:var(--surface-color);color:var(--text-muted);cursor:pointer;white-space:nowrap;font-family:inherit;transition:all .15s}.lib-tag-chip:active{transform:scale(.96)}.lib-tag-chip.active{border-color:var(--primary-color);background:#ffd16626;color:var(--primary-color)}.lib-subtag{font-size:12px;padding:5px 13px;background:transparent;border-color:var(--border-color)}.lib-subtag.active{background:#ffffff1f;border-color:#ffffff4d;color:var(--text-main)}.lib-sort-bar{display:flex;align-items:center;gap:8px;padding:12px 16px 4px}.lib-sort-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:700;border:1px solid var(--border-color);background:var(--surface-color);color:var(--text-muted);cursor:pointer;font-family:inherit}.lib-sort-dir-btn{width:28px;height:28px;min-width:28px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:0;transition:color .15s}.lib-sort-dir-btn:hover{color:var(--text-main)}.lib-result-count{margin-left:auto;font-size:12px;color:var(--text-muted);font-weight:600}.lib-content-list{padding:8px 16px;display:flex;flex-direction:column;gap:6px}.lib-content-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px;background:var(--surface-color);border:1.5px solid var(--border-color);border-radius:14px;cursor:pointer;font-family:inherit;color:inherit;text-align:left;transition:transform .12s,border-color .15s}.lib-content-card:active{transform:scale(.98)}.lib-card-dashed{background:transparent;border-style:dashed;border-width:2px;opacity:.7}.lib-card-dashed:hover,.lib-card-dashed:active{opacity:1}.lib-icon-dashed{background:transparent!important;border-style:dashed;border-width:2px}.lib-card-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.lib-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.lib-card-title{font-size:14px;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lib-card-subtitle{font-size:12px;color:var(--text-muted)}.lib-card-meta{display:flex;align-items:center;gap:6px;flex-shrink:0}.lib-card-type-badge{font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.3px}.lib-view-toggle{width:32px;height:32px;min-width:32px;padding:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--surface-color);border:1.5px solid var(--border-color)!important;color:var(--text-muted);cursor:pointer;flex-shrink:0;font-size:0;transition:color .15s,border-color .15s}.lib-view-toggle:hover{color:var(--text-main);border-color:var(--text-muted)}.lib-content-grid{padding:8px 16px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.lib-grid-card{display:flex;flex-direction:column;align-items:center;padding:20px 12px 16px;background:var(--surface-color);border:1.5px solid var(--border-color);border-radius:16px;cursor:pointer;font-family:inherit;color:inherit;text-align:center;transition:transform .12s}.lib-grid-card:active{transform:scale(.96)}.lib-grid-icon{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.lib-grid-title{font-size:14px;font-weight:700;color:var(--text-main);line-height:1.3}.lib-grid-subtitle{font-size:12px;color:var(--text-muted);margin-top:2px}.lib-empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:48px 24px;color:var(--text-muted);grid-column:1 / -1}.lib-empty-state p{margin:0;font-size:14px}.rlib-container{padding:var(--spacing-4);padding-bottom:100px;height:100%;overflow-y:auto}.rlib-pills-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:var(--spacing-3);scrollbar-width:none}.rlib-pills-row::-webkit-scrollbar{display:none}.rlib-pill{flex-shrink:0;padding:7px 14px;border-radius:var(--radius-full);font-size:13px;font-weight:700;border:2px solid var(--border-color);background:transparent;color:var(--text-muted);cursor:pointer;white-space:nowrap;font-family:inherit}.rlib-pill.active{border-color:var(--primary-color);background:#ffd16626;color:var(--primary-color)}.rlib-pill.secondary{font-size:12px;padding:5px 12px}.rlib-article-card{display:flex;gap:var(--spacing-3);width:100%;padding:var(--spacing-3);background:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);margin-bottom:var(--spacing-3);text-align:left;cursor:pointer;transition:transform .15s;font-family:inherit;color:inherit}.rlib-article-card:active{transform:scale(.98)}.rlib-article-img{width:88px;height:72px;border-radius:var(--radius-md);overflow:hidden;flex-shrink:0}.rlib-article-img img{width:100%;height:100%;object-fit:cover}.rlib-article-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.rlib-article-title{font-size:15px;font-weight:800;margin:0;line-height:1.3}.rlib-article-subtitle{font-size:12px;color:var(--text-muted);margin:0 0 4px}.rlib-article-time{font-size:11px;color:var(--text-muted);font-weight:600}.rlib-empty{text-align:center;padding:48px 24px;color:var(--text-muted)}.rlib-empty p{margin:8px 0 0;font-size:14px}.rlib-reader-container{padding-bottom:80px;min-height:100%;overflow-y:auto}.rlib-reader-back-row{padding:var(--spacing-2) var(--spacing-3)}.rlib-back-btn{display:flex;align-items:center;gap:2px;background:transparent;border:none;color:var(--text-main);font-size:14px;font-weight:600;cursor:pointer;padding:4px;font-family:inherit}.rlib-lang-toggle{display:flex;background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-full);overflow:hidden}.rlib-lang-btn{padding:6px 14px;font-size:12px;font-weight:800;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-family:inherit}.rlib-lang-btn.active{background:var(--primary-color);color:#1a1a1a}.rlib-reader-hero{width:100%;height:180px;object-fit:cover;display:block}.rlib-reader-title-block{padding:var(--spacing-4);border-bottom:1px solid var(--border-color)}.rlib-reader-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-3)}.rlib-reader-title-row .rlib-lang-toggle{flex-shrink:0;margin-top:4px}.rlib-reader-title-vi{font-size:22px;font-weight:800;margin:0 0 4px;line-height:1.3}.rlib-reader-title-en{font-size:14px;color:var(--text-muted);margin:0}.rlib-sentence-list{padding:var(--spacing-4)}.rlib-sentence-row{padding:var(--spacing-4) 0;border-bottom:1px solid var(--border-color);cursor:pointer}.rlib-sentence-row:last-child{border-bottom:none}.rlib-sentence-row:active{opacity:.8}.rlib-sentence-vi-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-3)}.rlib-sentence-vi{font-size:18px;font-weight:600;line-height:1.6;color:var(--text-main);flex:1}.rlib-translation{margin-top:8px;font-size:14px;color:var(--text-muted);line-height:1.6;padding:8px 12px;background:var(--surface-color);border-radius:var(--radius-md);border-left:3px solid var(--primary-color);animation:rlib-slide-in .2s ease-out}@keyframes rlib-slide-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.vocab-browse{padding:0 0 100px;min-height:100%}.vocab-browse-header{display:flex;align-items:center;gap:8px;padding:12px 16px}.vocab-back-btn{background:none;border:none;cursor:pointer;padding:4px;color:var(--text-main);display:flex}.vocab-browse-title{margin:0;font-size:20px;font-weight:800;flex:1}.vocab-browse-count{font-size:13px;color:var(--text-muted);font-weight:600}.vocab-deck-list{padding:0 16px;display:flex;flex-direction:column;gap:8px}.vocab-section-label{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);padding:12px 0 4px}.vocab-deck-card{display:flex;align-items:center;gap:12px;width:100%;padding:14px 12px;background:var(--surface-color);border:2px solid var(--border-color);border-radius:14px;cursor:pointer;font-family:inherit;color:inherit;transition:transform .15s}.vocab-deck-card:active:not(:disabled){transform:scale(.98)}.vocab-deck-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.vocab-deck-icon.saved{background:#06d6a026;color:#06d6a0}.vocab-deck-icon.custom{background:#ff9f4326;color:#ff9f43}.vocab-deck-info{flex:1;display:flex;flex-direction:column;gap:2px;text-align:left}.vocab-deck-name{font-size:15px;font-weight:700;color:var(--text-main)}.vocab-deck-count{font-size:12px;color:var(--text-muted)}.vocab-deck-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px;border-radius:8px;display:flex;transition:color .15s,background .15s}.vocab-deck-delete:hover{color:#ef476f;background:#ef476f1a}.vocab-new-deck-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:calc(100% - 32px);margin:16px;padding:12px;border:2px dashed var(--border-color);border-radius:14px;background:transparent;color:var(--text-muted);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .15s,color .15s}.vocab-new-deck-btn:hover{border-color:var(--primary-color);color:var(--primary-color)}.vocab-create-form{padding:16px;display:flex;flex-direction:column;gap:10px}.vocab-create-input{width:100%;padding:10px 14px;border:2px solid var(--border-color);border-radius:10px;background:var(--bg-color);color:var(--text-main);font-size:15px;font-family:inherit;outline:none;box-sizing:border-box;transition:border-color .2s}.vocab-create-input:focus{border-color:var(--primary-color)}.vocab-create-actions{display:flex;gap:8px}.vocab-create-btn{flex:1;padding:10px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}.vocab-create-btn.primary{background:var(--primary-color);color:#1a1a1a;border:none}.vocab-create-btn.primary:disabled{opacity:.4;cursor:default}.vocab-create-btn.ghost{background:transparent;border:1px solid var(--border-color);color:var(--text-muted)}.vocab-card-list{margin:0 16px;background-color:var(--surface-color);border-radius:12px;border:1px solid var(--border-color);overflow:hidden}.vocab-card-row{display:flex;align-items:center;gap:8px;padding:12px 16px}.vocab-card-row-text{flex:1;cursor:pointer;min-width:0;display:flex;flex-direction:column;gap:2px}.vocab-card-row-text:active{opacity:.6}.vocab-card-vi{font-weight:600;font-size:15px;color:var(--text-main)}.vocab-card-speak{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;flex-shrink:0;transition:color .15s}.vocab-card-speak:hover{color:var(--primary-color)}.vocab-card-remove{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px;display:flex;flex-shrink:0;transition:color .15s}.vocab-card-remove:hover{color:#ef476f}.vocab-empty{text-align:center;padding:48px 24px;color:var(--text-muted)}.vocab-empty p{margin:12px 0 0;font-size:14px;line-height:1.5}.vocab-deck-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}.vocab-study-chip{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:12px;background:var(--primary-color);color:#1a1a1a;font-size:12px;font-weight:700;border:none;cursor:pointer;font-family:inherit;transition:opacity .15s}.vocab-study-chip:hover{opacity:.85}.vocab-study-btn{display:flex;align-items:center;gap:4px;padding:6px 14px;border-radius:12px;background:var(--primary-color);color:#1a1a1a;font-size:13px;font-weight:700;border:none;cursor:pointer;font-family:inherit;margin-left:auto;flex-shrink:0}.vocab-deck-icon.preset{background:#3b82f626;color:#3b82f6}.vocab-card-thumb{width:36px;height:36px;border-radius:8px;overflow:hidden;flex-shrink:0}.vocab-card-thumb img{width:100%;height:100%;object-fit:cover}.vocab-card-en{font-size:12px;color:var(--text-muted)}.fc-study-container{display:flex;flex-direction:column;height:100%;overflow:hidden}.fc-study-header{display:flex;align-items:center;gap:8px;padding:12px 16px;flex-shrink:0}.fc-study-name{font-size:15px;font-weight:700;color:var(--text-main);flex:1;text-align:center}.fc-study-counter{font-size:13px;color:var(--text-muted);font-weight:600;flex-shrink:0}.fc-progress-bar{height:4px;background:var(--border-color);flex-shrink:0}.fc-progress-fill{height:100%;background:var(--primary-color);transition:width .3s;border-radius:2px}.fc-card-zone{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;gap:12px;min-height:0}.fc-zone-label{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:.2;flex-shrink:0;transition:opacity .15s}.fc-zone-label.left{color:#ef476f}.fc-zone-label.right{color:#06d6a0}.fc-zone-label.active{opacity:1}.fc-card{flex:1;max-width:320px;aspect-ratio:3/4;perspective:800px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s}.fc-card.swipe-left{transform:translate(-30px) rotate(-4deg);opacity:.5}.fc-card.swipe-right{transform:translate(30px) rotate(4deg);opacity:.5}.fc-card-inner{width:100%;height:100%;position:relative;transition:transform .4s;transform-style:preserve-3d}.fc-card.revealed .fc-card-inner{transform:rotateY(180deg)}.fc-card-front,.fc-card-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;background:var(--surface-color);border:2px solid var(--border-color);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;gap:12px}.fc-card-back{transform:rotateY(180deg)}.fc-card-img{width:120px;height:90px;border-radius:12px;overflow:hidden}.fc-card-img img{width:100%;height:100%;object-fit:cover}.fc-card-en{font-size:20px;font-weight:600;color:var(--primary-color);text-align:center;line-height:1.4}.fc-card-vi{font-size:28px;font-weight:800;color:var(--text-main);text-align:center}.fc-card-listen{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--secondary-color);font-size:14px;cursor:pointer;padding:4px 0}.fc-card-divider{width:calc(100% + 16px);height:1px;background:var(--border-color)}.fc-card-tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.fc-card-tag{font-size:11px;padding:2px 8px;border-radius:10px;background:#ffd16626;color:var(--primary-color);font-weight:600}.fc-card-tap{font-size:12px;color:var(--text-muted);opacity:.6}.fc-card-hint{font-size:14px;color:var(--text-muted)}.fc-actions{display:flex;gap:12px;padding:16px;flex-shrink:0}.fc-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:14px;border-radius:14px;border:none;cursor:pointer;font-size:15px;font-weight:700;font-family:inherit;transition:transform .1s}.fc-btn:active{transform:translateY(2px)}.fc-btn.dont-know{background:#ef476f26;color:#ef476f}.fc-btn.know{background:#06d6a026;color:#06d6a0}.fc-score-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;gap:16px}.fc-score-circle{width:120px;height:120px;border-radius:50%;background:var(--surface-color);border:4px solid var(--primary-color);display:flex;flex-direction:column;align-items:center;justify-content:center}.fc-score-number{font-size:36px;font-weight:900;color:var(--text-main);line-height:1}.fc-score-label{font-size:14px;color:var(--text-muted)}.fc-score-title{font-size:22px;font-weight:800;color:var(--text-main)}.fc-score-stats{display:flex;gap:24px}.fc-stat{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:700}.fc-stat.know{color:#06d6a0}.fc-stat.unknown{color:#ef476f}.fc-retry-btn{display:flex;align-items:center;gap:6px;padding:12px 24px;border-radius:14px;background:var(--primary-color);color:#1a1a1a;font-size:15px;font-weight:700;border:none;cursor:pointer;font-family:inherit;margin-top:8px}.fc-back-btn{background:none;border:none;color:var(--text-muted);font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;padding:8px}.rlib-partner-cta{margin:var(--spacing-4);background:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column}.rlib-cta-img{width:100%;height:120px;object-fit:cover}.rlib-cta-content{padding:var(--spacing-3);display:flex;flex-direction:column;gap:8px}.rlib-cta-title{font-size:16px;font-weight:800;margin:0;color:var(--text-main)}.rlib-cta-desc{font-size:14px;color:var(--text-muted);line-height:1.5;margin:0 0 8px}.rlib-cta-actions{display:flex;flex-direction:column;gap:12px}.rlib-cta-code-box{display:flex;align-items:center;background:var(--bg-color);border:1px dashed var(--border-color);border-radius:var(--radius-sm);padding:6px 8px;gap:8px}.rlib-cta-code-label{font-size:11px;font-weight:700;color:var(--text-muted)}.rlib-cta-code-val{flex:1;font-size:14px;font-weight:800;color:var(--text-main);letter-spacing:.5px}.rlib-cta-copy-btn{background:transparent;border:none;font-size:12px;font-weight:700;color:var(--primary-color);cursor:pointer;padding:4px 8px;border-radius:4px;transition:background .15s;font-family:inherit}.rlib-cta-copy-btn:hover{background:#ffd16626}.rlib-cta-copy-btn.copied{color:#06d6a0}.rlib-cta-link-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:16px;border-radius:14px;border:none;font-size:15px;font-weight:700;font-family:inherit;text-decoration:none;transition:transform .1s,box-shadow .1s;cursor:pointer;margin-top:4px;box-sizing:border-box}.rlib-cta-link-btn:active{transform:translateY(4px);box-shadow:0 0 0 transparent!important}.vocab-deck-review{border:1px solid rgba(255,87,34,.3);background:#ff57220d}.vocab-deck-icon.review{background:#ff572226;color:#ff5722}.vocab-due-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#ef476f;color:#fff;font-size:11px;font-weight:800}.vocab-study-chip.quiz{background:#a78bfa26;color:#a78bfa}.vocab-study-chip.quiz:hover{background:#a78bfa40}.vocab-study-btn.quiz{background:#a78bfa26;color:#a78bfa}.vocab-header-actions{display:flex;gap:6px;flex-shrink:0}.vocab-card-row-rich{display:flex;align-items:center;gap:10px;padding:10px 0}.vocab-card-row-rich .vocab-card-thumb{width:44px;height:44px;border-radius:10px;overflow:hidden;flex-shrink:0}.vocab-card-row-rich .vocab-card-thumb img{width:100%;height:100%;object-fit:cover}.vocab-card-row-rich .vocab-card-row-text{flex:1;display:flex;flex-direction:column;gap:1px}.vocab-card-example{font-size:11px;color:var(--text-muted);opacity:.7;font-style:italic}.vq-quiz-area{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px 16px;gap:16px;overflow-y:auto}.vq-quiz-image{width:140px;height:100px;border-radius:14px;overflow:hidden}.vq-quiz-image img{width:100%;height:100%;object-fit:cover}.vq-quiz-hint{font-size:16px;font-weight:700;color:var(--primary-color)}.vq-quiz-question{font-size:18px;font-weight:800;color:var(--text-main);text-align:center}.vq-quiz-options{display:flex;flex-direction:column;gap:10px;width:100%;max-width:360px}.vq-option{width:100%;padding:14px 16px;border-radius:14px;border:2px solid var(--border-color);background:var(--surface-color);font-size:16px;font-weight:600;font-family:inherit;color:var(--text-main);cursor:pointer;transition:border-color .15s,background .15s;text-align:left}.vq-option:active{transform:translateY(1px)}.vq-option.selected{border-color:var(--primary-color);background:#ffd1661a}.vq-option.correct{border-color:#06d6a0;background:#06d6a026;color:#06d6a0}.vq-option.wrong{border-color:#ef476f;background:#ef476f26;color:#ef476f}.vq-option.dim{opacity:.4;pointer-events:none}.vq-quiz-bottom{width:100%;max-width:360px;margin-top:auto;padding:16px 0}.vq-action-btn{width:100%;padding:14px;border-radius:14px;border:none;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;transition:transform .1s}.vq-action-btn:active{transform:translateY(2px)}.vq-action-btn.primary{background:var(--primary-color);color:#1a1a1a;box-shadow:0 4px #00000026}.vq-action-btn.disabled{background:var(--border-color);color:var(--text-muted);cursor:default}.vq-action-btn.success{background:#06d6a0;color:#1a1a1a;box-shadow:0 4px #049e75}.vq-action-btn.danger{background:#ef476f;color:#fff;box-shadow:0 4px #b92b49}.practice-layout{display:flex;flex-direction:column;min-height:100dvh;padding:16px 16px 120px;background-color:var(--bg-color);position:relative;overflow-y:auto}.practice-layout.practice-fixed-layout{height:100dvh;min-height:0;overflow:hidden;padding-bottom:0}.practice-scroll-area{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:16px}.practice-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.practice-header-title{display:flex;align-items:center;gap:8px;margin:0;color:var(--text-main);font-size:1.3rem;font-weight:700}.practice-stats{display:flex;gap:12px}.practice-stat-pill{display:flex;align-items:center;gap:6px;font-weight:700;font-size:.95rem}.practice-content-centered{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:500px;margin:0 auto;width:100%}.practice-intro-icon{font-size:4rem;margin-bottom:16px;line-height:1}.practice-title{font-size:1.75rem;font-weight:800;margin-bottom:8px;color:var(--text-main);letter-spacing:-.5px}.practice-subtitle{font-size:1.05rem;color:var(--text-muted);line-height:1.6;margin-bottom:24px;font-weight:500}.practice-grid-flat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 12px;width:100%;margin-bottom:16px}.practice-grid-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--surface-color);border:2px solid var(--border-color);border-radius:12px;padding:10px 8px;cursor:pointer;transition:border-color .15s,box-shadow .15s;box-shadow:0 2px 0 var(--border-color)}.practice-grid-item:active{box-shadow:none;transform:translateY(2px)}.practice-audio-btn{width:64px;height:64px;border-radius:50%;background:var(--surface-color);border:1px solid var(--border-color);color:var(--primary-color);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:var(--shadow-sm);flex-shrink:0;cursor:pointer;transition:transform .2s}.practice-audio-btn:active{transform:scale(.95)}.practice-audio-btn.large{width:96px;height:96px}.practice-bottom-bar{position:fixed;bottom:0;left:0;right:0;padding:12px 16px;background:var(--bg-color);border-top:1px solid var(--border-color);display:flex;flex-direction:column;align-items:center;z-index:10}.practice-fixed-layout>div>.practice-bottom-bar,.practice-fixed-layout>.practice-bottom-bar{position:static;flex-shrink:0}.mobile-app-wrapper .practice-bottom-bar{position:absolute}.practice-action-btn{width:100%;max-width:448px;padding:14px;border-radius:var(--radius-full);font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;transition:all .2s}.practice-action-btn.primary{background-color:var(--primary-color);color:#1a1a1a;box-shadow:0 4px #dcae45}.practice-action-btn.primary:active{box-shadow:0 0 #dcae45;transform:translateY(4px)}.practice-action-btn.disabled{background-color:var(--surface-color-light);color:var(--text-muted);box-shadow:none;cursor:not-allowed}.practice-feedback-bar{width:100%;max-width:448px;display:flex;justify-content:space-between;align-items:center;padding-bottom:8px}.practice-feedback-msg{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.05rem}.practice-feedback-msg.correct{color:var(--success-color)}.practice-feedback-msg.incorrect{color:var(--danger-color)}.practice-icon-circle{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.practice-icon-circle.correct{background:#06d6a033;color:var(--success-color)}.practice-icon-circle.incorrect{background:#ef476f33;color:var(--danger-color)}.grammar-level-cards{display:flex;flex-direction:column;gap:var(--spacing-4);padding:var(--spacing-4);padding-bottom:100px}.grammar-level-card{background:var(--surface-color);border-radius:var(--radius-lg);border:1px solid var(--border-color);padding:var(--spacing-5);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border-left:4px solid var(--accent, var(--primary-color))}.grammar-level-card:active{transform:scale(.98)}.grammar-level-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-3)}.grammar-level-badge{font-size:1.4rem;font-weight:800;letter-spacing:.5px}.grammar-level-count{font-size:.85rem;color:var(--text-muted);font-weight:600}.grammar-level-samples{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.grammar-level-sample{font-size:.75rem;color:var(--text-muted);background:var(--surface-color-light);padding:2px 8px;border-radius:var(--radius-sm)}.grammar-list{display:flex;flex-direction:column;gap:var(--spacing-3);padding:0 var(--spacing-4);padding-bottom:40px}.grammar-pattern-card{background:var(--surface-color);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:var(--spacing-4);cursor:pointer;transition:transform .15s ease}.grammar-pattern-card:active{transform:scale(.98)}.grammar-pattern-pill{display:inline-block;font-family:SF Mono,Fira Code,monospace;font-size:.75rem;font-weight:600;color:var(--primary-color);background:#ffd1661f;padding:2px 10px;border-radius:var(--radius-full);margin-bottom:var(--spacing-2)}.grammar-pattern-title{font-size:1rem;font-weight:600;color:var(--text-main);margin:0 0 var(--spacing-1) 0}.grammar-pattern-example{font-size:.85rem;color:var(--text-muted);font-style:italic;margin:0}.grammar-detail{padding:0 var(--spacing-4);padding-bottom:40px}.grammar-detail-pattern{margin-bottom:var(--spacing-5)}.grammar-detail-example{display:flex;align-items:center;gap:var(--spacing-3);background:var(--surface-color);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:var(--spacing-4);margin-bottom:var(--spacing-5)}.grammar-detail-example>div{flex:1}.grammar-detail-example p{margin:0;font-size:1.05rem;font-style:italic;color:var(--text-main)}.grammar-detail-example .grammar-example-en{font-size:.85rem;color:var(--text-muted);font-style:normal;margin-top:var(--spacing-1)}.grammar-detail-example button{flex-shrink:0;background:none;border:none;color:var(--primary-color);cursor:pointer;padding:var(--spacing-2);border-radius:var(--radius-sm)}.grammar-detail-example button:active{opacity:.7}.grammar-extra-patterns{display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin-bottom:var(--spacing-5)}.grammar-section-heading{font-size:.8rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-2)}.grammar-sections{display:flex;flex-direction:column;gap:var(--spacing-4);margin-bottom:var(--spacing-5)}.grammar-section-card{background:var(--surface-color);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:var(--spacing-4)}.grammar-section-title{font-size:.95rem;font-weight:700;color:var(--text-main);margin:0 0 var(--spacing-3) 0;text-transform:uppercase;letter-spacing:.3px}.grammar-section-explanation{font-size:.88rem;line-height:1.65;color:var(--text-main);margin:0 0 var(--spacing-3) 0}.grammar-section-pattern{margin-bottom:var(--spacing-3)}.grammar-section-note{font-size:.82rem;color:var(--text-muted);font-style:italic;margin:0 0 var(--spacing-3) 0;padding:var(--spacing-2) var(--spacing-3);border-left:3px solid var(--primary-color);background:#ffd1660d;border-radius:0 var(--radius-sm) var(--radius-sm) 0}.grammar-section-examples{display:flex;flex-direction:column;gap:var(--spacing-2)}.grammar-example-row{display:flex;flex-direction:column;gap:2px;padding:var(--spacing-2) var(--spacing-3);background:var(--surface-color-light);border-radius:var(--radius-sm)}.grammar-example-vi{display:flex;align-items:center;gap:var(--spacing-2);font-size:.9rem;font-weight:600;color:var(--text-main)}.grammar-example-vi span{flex:1}.grammar-example-speak{flex-shrink:0;background:none;border:none;color:var(--primary-color);cursor:pointer;padding:2px;border-radius:var(--radius-sm);display:flex;align-items:center}.grammar-example-speak:active{opacity:.7}.grammar-example-en{font-size:.82rem;color:var(--text-muted);font-style:italic}.grammar-faq-list{display:flex;flex-direction:column;gap:var(--spacing-2);margin-bottom:var(--spacing-5)}.grammar-faq-item{background:var(--surface-color);border-radius:var(--radius-md);border:1px solid var(--border-color);overflow:hidden}.grammar-faq-question{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-3) var(--spacing-4);cursor:pointer;font-size:.9rem;font-weight:600;color:var(--text-main);background:none;border:none;width:100%;text-align:left}.grammar-faq-question svg{flex-shrink:0;transition:transform .2s ease}.grammar-faq-question[aria-expanded=true] svg{transform:rotate(180deg)}.grammar-faq-answer{padding:0 var(--spacing-4) var(--spacing-3);font-size:.85rem;color:var(--text-muted);line-height:1.6}.grammar-error{background:var(--surface-color);border-radius:var(--radius-md);border:1px solid var(--border-color);padding:var(--spacing-4);text-align:center;color:var(--text-muted);font-size:.9rem}.legal-page{display:flex;flex-direction:column;height:100dvh;background:var(--bg-color);color:var(--text-main);overflow-y:auto;-webkit-overflow-scrolling:touch}.legal-header{display:flex;align-items:center;gap:12px;padding-left:16px;padding-right:16px;padding-bottom:16px;padding-top:calc(env(safe-area-inset-top,16px) + 8px);background:var(--surface-color);border-bottom:1px solid var(--border-color);position:sticky;top:0;z-index:10}.legal-back-btn{background:none;border:none;padding:8px;border-radius:10px;color:var(--text-main);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}.legal-back-btn:active{background:var(--surface-color-light);transform:none}.legal-title{font-size:18px;font-weight:700;margin:0;color:var(--text-main)}.legal-content{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:24px;padding-left:20px;padding-right:20px;max-width:680px;width:100%;margin:0 auto;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 40px)}.legal-updated{font-size:13px;color:var(--text-muted);margin-bottom:24px}.legal-section{margin-bottom:28px}.legal-section h2{font-size:16px;font-weight:700;color:var(--primary-color);margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border-color)}.legal-section h3{font-size:14px;font-weight:700;color:var(--text-main);margin-top:14px;margin-bottom:6px}.legal-section p{font-size:14px;line-height:1.7;color:var(--text-main);opacity:.85;margin-bottom:10px}.legal-section ul{margin:6px 0 10px;padding-left:20px}.legal-section ul li{font-size:14px;line-height:1.7;color:var(--text-main);opacity:.85;margin-bottom:4px}.legal-section a{color:var(--primary-color);text-decoration:none}.legal-section a:hover{text-decoration:underline}.legal-contact-card{background:var(--surface-color);border:1px solid var(--border-color);border-radius:12px;padding:16px;margin:12px 0}.legal-contact-card p{margin-bottom:6px;opacity:1}.legal-contact-card p:last-child{margin-bottom:0}.legal-governing{font-size:12px!important;color:var(--text-muted)!important;font-style:italic;margin-top:16px}.legal-highlight-box{background:color-mix(in srgb,var(--primary-color) 10%,transparent);border:1px solid color-mix(in srgb,var(--primary-color) 35%,transparent);border-radius:12px;padding:16px 18px;margin-bottom:28px}.legal-highlight-box p{font-size:14px;line-height:1.6;color:var(--text-main);margin-bottom:8px}.legal-highlight-box p:last-child{margin-bottom:0}.legal-highlight-box ul{margin:6px 0 0;padding-left:18px}.legal-highlight-box ul li{font-size:13.5px;line-height:1.65;color:var(--text-main);margin-bottom:4px}.legal-highlight-box a{color:var(--primary-color);text-decoration:none}.legal-table-wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0 16px;border-radius:10px;border:1px solid var(--border-color)}.legal-table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}.legal-table thead{background:var(--surface-color)}.legal-table th{text-align:left;padding:10px 14px;font-weight:700;color:var(--text-main);border-bottom:1px solid var(--border-color);white-space:nowrap}.legal-table td{padding:9px 14px;color:var(--text-main);opacity:.85;line-height:1.5;border-bottom:1px solid var(--border-color);vertical-align:top}.legal-table tbody tr:last-child td{border-bottom:none}.legal-table tbody tr:nth-child(2n){background:color-mix(in srgb,var(--surface-color) 60%,transparent)}.legal-contact-card a{color:var(--primary-color);text-decoration:none}.legal-contact-card a:hover{text-decoration:underline}.kinship-term-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.kinship-term-grid .kinship-term-card:last-child:nth-child(odd){grid-column:1 / -1}.kinship-term-card{background:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden;transition:all .2s;-webkit-tap-highlight-color:transparent}.kinship-term-card.expanded{grid-column:1 / -1}.kinship-term-card.male{border-color:#60a5fa4d}.kinship-term-card.female{border-color:#f472b64d}.kinship-term-card.neutral{border-color:#a78bfa4d}.kinship-term-top{width:100%;background:none;border:none;padding:16px 14px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;color:inherit}.kinship-term-vn{font-size:1.5rem;font-weight:800;color:var(--text-main);display:flex;align-items:center;justify-content:space-between}.kinship-term-speaker{color:var(--text-muted);opacity:.5;flex-shrink:0}.kinship-term-en{font-size:.9rem;font-weight:600;color:var(--text-muted)}.kinship-term-note{font-size:.75rem;color:var(--text-muted);opacity:.7;margin-top:2px;line-height:1.3}.kinship-term-expand-hint{display:flex;justify-content:center;color:var(--text-muted);opacity:.4;margin-top:4px}.kinship-term-contexts{padding:0 14px 14px;display:flex;flex-direction:column;gap:8px;animation:contextReveal .2s ease-out}.kinship-context-row{display:flex;gap:8px;align-items:flex-start;font-size:.8rem;line-height:1.4}.kinship-context-tag{flex-shrink:0;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:4px;margin-top:1px}.kinship-context-tag.family{background:#60a5fa26;color:#60a5fa}.kinship-context-tag.social{background:#a78bfa26;color:#a78bfa}.kinship-context-tag.romantic{background:#f472b626;color:#f472b6}.kinship-context-tag.self{background:#34d39926;color:#34d399}.kinship-context-tag.formal{background:#fbbf2426;color:#fbbf24}.kinship-context-tag.grammar,.kinship-context-tag.example{background:#94a3b826;color:#94a3b8}.kinship-context-desc{color:var(--text-muted)}@keyframes contextReveal{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.engine-form{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.engine-field{display:flex;flex-direction:column;gap:8px}.engine-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.engine-chips{display:flex;flex-wrap:wrap;gap:6px}.engine-chip{padding:8px 14px;border:2px solid var(--border-color);border-radius:var(--radius-full);background:transparent;color:var(--text-muted);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent}.engine-chip.active{background:#ffb7031f;border-color:var(--primary-color);color:var(--primary-color)}.engine-chip:active{transform:scale(.96)}.engine-result{background:var(--surface-color);border:2px solid var(--border-color);border-radius:var(--radius-lg);padding:24px 20px;text-align:center;position:relative}.engine-result-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}.engine-result-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}.engine-result-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.engine-result-term{font-size:1.8rem;font-weight:800;color:var(--primary-color)}.engine-result-term.self{color:var(--success-color);font-size:1.4rem}.engine-result-divider{width:2px;height:48px;background:var(--border-color);border-radius:1px;flex-shrink:0}.engine-speak-btn{background:#ffb7031f;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--primary-color);cursor:pointer;margin:0 auto 12px;transition:background .2s}.engine-speak-btn:active{background:#ffb70340;transform:scale(.95)}.engine-result-note{font-size:.85rem;color:var(--text-muted);line-height:1.5}.calc-container{display:flex;flex-direction:column;gap:2px;border-radius:var(--radius-lg);overflow:hidden;flex:1}.calc-region-toggle{display:flex;gap:2px}.calc-region-btn{flex:1;padding:10px;border:none;font-size:.85rem;font-weight:700;cursor:pointer;background:#2a3444;color:#fff6;transition:all .15s;-webkit-tap-highlight-color:transparent}.calc-region-btn:first-child{border-radius:var(--radius-lg) 0 0 0}.calc-region-btn:last-child{border-radius:0 var(--radius-lg) 0 0}.calc-region-btn.active{background:#3b4a5e;color:var(--primary-color)}@media(prefers-color-scheme:light){.calc-region-btn{background:#cbd5e1;color:#0000004d}.calc-region-btn.active{background:#e2e8f0;color:var(--primary-color)}}.calc-display{background:linear-gradient(135deg,#2d3748,#1a202c);padding:24px 20px;flex:1;min-height:100px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:0}@media(prefers-color-scheme:light){.calc-display{background:linear-gradient(135deg,#e2e8f0,#cbd5e1)}}.calc-display-chain{font-size:1.5rem;font-weight:500;color:#fff9;text-align:right;min-height:1.5em;word-break:break-word}@media(prefers-color-scheme:light){.calc-display-chain{color:#00000080}}.calc-display-result{text-align:right;animation:calcReveal .3s ease-out}.calc-display-result.unknown{opacity:.5}.calc-result-term{font-size:2.5rem;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:flex-end;gap:12px}@media(prefers-color-scheme:light){.calc-result-term{color:#1a202c}}.calc-result-en{font-size:1rem;color:#ffffff80;margin-top:4px}@media(prefers-color-scheme:light){.calc-result-en{color:#00000073}}.calc-speak-btn{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;color:var(--primary-color);cursor:pointer;transition:all .2s;flex-shrink:0}.calc-speak-btn:active{filter:brightness(.85);transform:scale(.95)}.calc-action-row{display:grid;grid-template-columns:1fr 1fr;gap:2px}.calc-keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.calc-btn{border:none;font-size:1.25rem;font-weight:700;padding:22px 8px;cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.calc-btn:active{transform:scale(.96);filter:brightness(.85)}.calc-btn.relation{background:#3b4a5e;color:#e2e8f0}@media(prefers-color-scheme:light){.calc-btn.relation{background:#e2e8f0;color:#2d3748}}.calc-btn.action{background:#2a3444;color:#e2e8f0;font-size:1.15rem}@media(prefers-color-scheme:light){.calc-btn.action{background:#cbd5e1;color:#2d3748}}.calc-btn.operator{background:#e67e22;color:#fff;font-style:italic}.calc-btn.equals{background:var(--danger-color);color:#fff;font-size:1.75rem;font-weight:800}.calc-keypad .calc-btn:nth-last-child(1){border-radius:0 0 var(--radius-lg) 0}.calc-keypad .calc-btn:nth-last-child(4){border-radius:0 0 0 var(--radius-lg)}@keyframes calcReveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUpResult{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.rules-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.rule-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm);border-radius:var(--radius-md);background:var(--bg-color);transition:transform .2s}.rule-item:hover{transform:translate(4px)}.rule-key kbd{background:var(--surface-color);border:1px solid var(--border-color);border-radius:4px;padding:2px 8px;font-family:monospace;font-weight:700;font-size:1.1em;color:var(--primary-color);box-shadow:0 2px 0 var(--border-color)}.rule-effect{display:flex;flex-direction:column}.effect-name{font-weight:500;font-size:.95rem}.effect-example{font-size:.85rem;color:var(--text-muted)}.construction-input:focus{border-color:var(--primary-color)!important;box-shadow:0 0 0 4px #ffd16633!important}.teencode-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.teencode-item{display:flex;align-items:flex-start;gap:var(--spacing-md);padding:12px;background:var(--bg-color);border-radius:var(--radius-md);transition:transform .2s}.teencode-item:hover{transform:translate(4px)}.teencode-code-cell{flex-shrink:0;min-width:80px}.teencode-kbd{background:var(--surface-color);border:1px solid var(--border-color);border-radius:4px;padding:4px 8px;font-family:monospace;font-weight:700;font-size:.95em;color:var(--primary-color);box-shadow:0 2px 0 var(--border-color);white-space:nowrap}.teencode-meaning-cell{display:flex;flex-direction:column;gap:4px}.teencode-meaning{font-weight:600;font-size:.95rem;color:var(--text-main)}.teencode-category-tag{display:inline-block;width:fit-content;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px}.teencode-example{font-size:.82rem;color:var(--text-muted);line-height:1.4}.teencode-target{font-size:2rem;font-weight:800;color:var(--text-main);margin-bottom:8px;line-height:1.2;text-align:center;padding:12px 20px;background:var(--surface-color);border-radius:var(--radius-lg);border:2px solid var(--border-color);font-family:monospace}.teencode-item .construction-input:focus{border-color:var(--primary-color)!important;box-shadow:0 0 0 4px #ffd16633!important}.practice-audio-btn:after{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--primary-color);opacity:0;pointer-events:none}.practice-audio-btn.playing:after{animation:tonePulse 1.5s ease-out infinite}@keyframes tonePulse{0%{opacity:.6;transform:scale(.9)}to{opacity:0;transform:scale(1.3)}}.practice-audio-btn.playing{animation:audioBounce .6s ease}@keyframes audioBounce{0%,to{transform:scale(1)}30%{transform:scale(1.15)}60%{transform:scale(.95)}}.tone-word-display{font-size:2.25rem;font-weight:800;color:var(--text-main);letter-spacing:1px;margin-top:var(--spacing-4);min-height:50px}.tone-word-hint{font-size:1rem;color:var(--text-muted);font-style:italic;min-height:24px}.tone-options-grid{display:flex;flex-direction:column;gap:12px;width:100%;max-width:500px}.tone-option-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 12px;background:transparent;border:2px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s;color:var(--text-main);position:relative}.tone-option-btn:hover{border-color:var(--primary-color);background:var(--surface-color);transform:translateY(-2px)}.tone-option-btn.selected{border-color:var(--primary-color);background:#ffd16614;box-shadow:0 0 0 3px #ffd16626}.tone-option-btn.correct-highlight{border-color:var(--success-color);background:#06d6a01a;color:var(--success-color)}.tone-option-btn.wrong{border-color:var(--danger-color);background:#ef476f1a;color:var(--danger-color)}.tone-option-btn.disabled{pointer-events:none;opacity:.5}.tone-mark{font-size:2rem;font-weight:800;line-height:1}.tone-name{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text-main)}.tone-progress-bar{height:16px;background:var(--surface-color);border-radius:8px;border:1px solid var(--border-color);overflow:hidden;width:100%;margin-bottom:var(--spacing-4)}.tone-progress-fill{height:100%;background:var(--success-color);transition:width .4s ease}.tm-stage-tabs{display:flex;gap:6px;margin-bottom:12px;width:100%}.tm-stage-tab{flex:1;padding:8px 4px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:transparent;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s;text-align:center;color:var(--text-muted)}.tm-stage-tab:hover{border-color:var(--primary-color);color:var(--text-main)}.tm-stage-tab.active{background:var(--surface-color);color:var(--text-main);border-color:var(--primary-color)}.tm-intro{text-align:center;color:var(--text-muted);margin-bottom:10px;font-size:.85rem}.tm-vowel-picker{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 10px;margin-bottom:6px;scrollbar-width:none}.tm-vowel-picker::-webkit-scrollbar{display:none}.tm-vowel-pill{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:2px solid var(--border-color);background:transparent;font-size:1.1rem;font-weight:700;color:var(--text-muted);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.tm-vowel-pill:hover{border-color:var(--primary-color);color:var(--text-main)}.tm-vowel-pill.active{background:var(--primary-color);border-color:var(--primary-color);color:#1a1a1a;transform:scale(1.08);box-shadow:0 2px 8px #ffd1664d}.tm-tone-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:100%}.tm-tone-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px 10px 14px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-color);cursor:pointer;transition:all .2s;position:relative}.tm-tone-card:hover{border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.tm-tone-card:active{transform:scale(.98)}.tm-tone-card.playing{border-color:var(--primary-color);background:#ffd1661a;animation:toneCardPulse .4s ease}.tm-tone-card.no-audio{opacity:.5;cursor:default}.tm-tone-card.no-audio:hover{border-color:var(--border-color);transform:none;box-shadow:none}.tm-tone-card-char{font-size:2.4rem;font-weight:800;color:var(--text-main);line-height:1}.tm-tone-card-name{font-size:.88rem;font-weight:700;color:var(--primary-color)}.tm-tone-card-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.tm-tone-card-meaning{font-size:.75rem;color:var(--text-muted);font-style:italic;margin-top:2px;text-align:center;line-height:1.3}.tm-tone-card-speaker{position:absolute;top:8px;right:8px;color:var(--text-muted);opacity:.3;transition:opacity .2s}.tm-tone-card:hover .tm-tone-card-speaker{opacity:1;color:var(--primary-color)}.tm-tone-card-no-audio{font-size:.7rem;color:var(--text-muted);opacity:.7}@keyframes toneCardPulse{0%{transform:scale(1.03)}to{transform:scale(1)}}.tm-stage-cta{flex-shrink:0;padding:12px 16px;background:var(--bg-color);border-top:1px solid var(--border-color);display:flex;justify-content:center}.tm-stage-cta button{width:100%;max-width:400px;background:var(--primary-color);color:#1a1a1a;padding:14px;border-radius:var(--radius-full);border:none;font-size:1.05rem;font-weight:700;cursor:pointer;box-shadow:0 4px #dcae45;transition:all .2s}.tm-stage-cta button:active{box-shadow:0 0 #dcae45;transform:translateY(4px)}.tm-equation{display:flex;align-items:center;gap:10px;font-size:1.6rem;font-weight:700;flex-wrap:wrap;justify-content:center}.tm-base-vowel{color:var(--primary-color);background:#ffd16614;padding:6px 16px;border-radius:var(--radius-lg);border:2px solid rgba(255,209,102,.2)}.tm-plus{color:var(--text-muted)}.tm-tone-name{color:#ff9800;background:#ff980014;padding:6px 16px;border-radius:var(--radius-lg);border:2px solid rgba(255,152,0,.2);font-size:.95rem}.tm-equals{color:var(--text-muted);font-size:1.4rem}.tm-question-mark{font-size:1.8rem;color:var(--text-muted);font-weight:800}.tm-target-char{font-size:3.5rem;font-weight:800;color:var(--text-main);line-height:1}.tm-decompose-prompt{font-size:.95rem;color:var(--text-muted)}.tm-meaning{font-size:.85rem;color:var(--text-muted);background:#ffd1660f;padding:5px 14px;border-radius:20px;font-style:italic;animation:tmSlideUp .3s ease}@keyframes tmSlideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.tm-options{display:flex;flex-direction:column;gap:12px;width:100%;max-width:500px}.tm-option{padding:14px 8px;background:transparent;border:2px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s;font-size:1.3rem;font-weight:600;color:var(--text-main)}.tm-option.text-option{font-size:.88rem}.tm-option:hover{border-color:var(--primary-color);transform:translateY(-1px);background:var(--surface-color)}.tm-option.selected{border-color:var(--primary-color);background:#ffd16614;box-shadow:0 0 0 3px #ffd16626}.tm-option.correct-highlight{border-color:var(--success-color);background:#06d6a01a;color:var(--success-color)}.tm-option.wrong{border-color:var(--danger-color);background:#ef476f1a;color:var(--danger-color)}.tm-option.disabled{pointer-events:none;opacity:.5}@media(min-width:480px){.tm-tone-cards{grid-template-columns:repeat(3,1fr)}.tm-tone-card-char{font-size:2.8rem}}.vp-tabs{display:flex;gap:6px;margin-bottom:12px;width:100%;overflow-x:auto;scrollbar-width:none}.vp-tabs::-webkit-scrollbar{display:none}.vp-tab{flex-shrink:0;padding:8px 14px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:transparent;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s;text-align:center;color:var(--text-muted);white-space:nowrap}.vp-tab:hover{border-color:var(--primary-color);color:var(--text-main)}.vp-tab.active{background:var(--surface-color);color:var(--text-main);border-color:var(--primary-color)}.vp-intro{text-align:center;color:var(--text-muted);margin:0 0 12px;font-size:.85rem;line-height:1.5}.vp-vowel-cards{display:flex;flex-direction:column;gap:6px;width:100%}.vp-vowel-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-color);cursor:pointer;transition:all .2s;text-align:left;width:100%}.vp-vowel-card:hover{border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.vp-vowel-card:active{transform:scale(.98)}.vp-vowel-card.playing{border-color:var(--primary-color);background:#ffd1661a;animation:vpCardPulse .4s ease}.vp-vowel-card-letter{font-size:1.5rem;font-weight:800;color:var(--primary-color);line-height:1;min-width:44px;flex-shrink:0;text-align:center}.vp-vowel-card-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}.vp-vowel-card-name{font-size:.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.vp-vowel-card-sound{font-size:.78rem;color:var(--text-muted);line-height:1.3}.vp-vowel-card-sound b{color:var(--text-main);font-weight:600}.vp-vowel-card-example{font-size:.75rem;color:var(--text-muted)}.vp-vowel-card-example em{color:var(--primary-color);font-weight:600}.vp-vowel-card-speaker{flex-shrink:0;color:var(--text-muted);opacity:.3;transition:opacity .2s}.vp-vowel-card:hover .vp-vowel-card-speaker{opacity:1;color:var(--primary-color)}@keyframes vpCardPulse{0%{transform:scale(1.02)}to{transform:scale(1)}}.vp-centering-cards{display:flex;flex-direction:column;gap:10px;width:100%;margin-bottom:12px}.vp-centering-card{border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-color);padding:14px}.vp-centering-card-header{margin-bottom:8px}.vp-centering-card-group{font-size:1.4rem;font-weight:800;color:var(--primary-color)}.vp-centering-card-badges{display:flex;align-items:center;gap:8px;margin-bottom:8px}.vp-centering-card-vs{font-size:.8rem;color:var(--text-muted);font-weight:600}.vp-centering-card-approx{font-size:.82rem;color:var(--text-muted);margin:0 0 10px;line-height:1.4}.vp-centering-card-approx b{color:var(--text-main)}.vp-centering-card-examples{display:flex;flex-wrap:wrap;gap:6px}.vp-spelling-badge{display:inline-block;padding:3px 10px;border-radius:6px;font-weight:700;font-size:.88rem}.vp-spelling-badge.open{background:#06d6a01a;color:var(--success-color);border:1px solid var(--success-color)}.vp-spelling-badge.closed{background:#118ab21a;color:var(--secondary-color);border:1px solid var(--secondary-color)}.vp-example-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--radius-full);font-size:.82rem;cursor:pointer;border:1px solid var(--border-color);background:transparent;color:var(--text-main);transition:all .15s}.vp-example-chip:hover{border-color:var(--primary-color);transform:scale(1.03)}.vp-example-chip.playing{border-color:var(--primary-color);background:#ffd1661a}.vp-example-chip em{font-weight:600;color:var(--primary-color)}.vp-example-chip.open{border-left:3px solid var(--success-color)}.vp-example-chip.closed{border-left:3px solid var(--secondary-color)}.vp-gliding-cards{display:flex;flex-direction:column;gap:6px;width:100%;margin-bottom:12px}.vp-gliding-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-color);cursor:pointer;transition:all .2s;text-align:left;width:100%}.vp-gliding-card:hover{border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.vp-gliding-card:active{transform:scale(.98)}.vp-gliding-card.playing{border-color:var(--primary-color);background:#ffd1661a;animation:vpCardPulse .4s ease}.vp-gliding-card-diph{font-size:1.3rem;font-weight:800;color:var(--primary-color);line-height:1;min-width:44px;flex-shrink:0}.vp-gliding-card-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}.vp-gliding-card-approx{font-size:.78rem;color:var(--text-muted);line-height:1.3}.vp-gliding-card-example{font-size:.75rem;color:var(--text-muted)}.vp-gliding-card-example em{color:var(--primary-color);font-weight:600}.vp-gliding-card-speaker{flex-shrink:0;color:var(--text-muted);opacity:.3;transition:opacity .2s}.vp-gliding-card:hover .vp-gliding-card-speaker{opacity:1;color:var(--primary-color)}.vp-triph-cards{display:flex;flex-direction:column;gap:6px;width:100%;margin-bottom:12px}.vp-triph-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:var(--surface-color);cursor:pointer;transition:all .2s;text-align:left;width:100%}.vp-triph-card:hover{border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 8px #0000000f}.vp-triph-card:active{transform:scale(.98)}.vp-triph-card.playing{border-color:var(--primary-color);background:#ffd1661a;animation:vpCardPulse .4s ease}.vp-triph-card-triph{font-size:1.3rem;font-weight:800;color:var(--primary-color);line-height:1;min-width:44px;flex-shrink:0}.vp-triph-card-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}.vp-triph-card-components{font-size:.72rem;color:var(--text-muted);font-style:italic}.vp-triph-card-approx{font-size:.72rem;color:var(--text-muted);line-height:1.3}.vp-triph-card-example{font-size:.75rem;color:var(--text-muted)}.vp-triph-card-example em{color:var(--primary-color);font-weight:600}.vp-triph-card-speaker{flex-shrink:0;color:var(--text-muted);opacity:.3;transition:opacity .2s}.vp-triph-card:hover .vp-triph-card-speaker{opacity:1;color:var(--primary-color)}.vp-rules-box{background:var(--surface-color);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:14px;width:100%}.vp-rules-box h3{margin:0 0 8px;font-size:.88rem;color:var(--text-main)}.vp-rules-box ul{margin:0;padding-left:18px}.vp-rules-box li{margin-bottom:6px;line-height:1.5;color:var(--text-muted);font-size:.82rem}.vp-rules-box li:last-child{margin-bottom:0}.vp-rules-box li em{color:var(--primary-color);font-weight:600}.vp-cta{flex-shrink:0;padding:12px 16px;background:var(--bg-color);border-top:1px solid var(--border-color);display:flex;justify-content:center}.vp-cta button{width:100%;max-width:400px;background-color:var(--primary-color);color:#1a1a1a;box-shadow:0 4px #dcae45;padding:14px;border-radius:var(--radius-full);font-size:1.05rem;font-weight:700;transition:all .2s;border:none;cursor:pointer}.vp-cta button:active{box-shadow:0 0 #dcae45;transform:translateY(4px)}.vp-progress{height:16px;background:var(--surface-color);border-radius:8px;border:1px solid var(--border-color);overflow:hidden;width:100%;margin-bottom:20px}.vp-progress-fill{height:100%;background:var(--success-color);transition:width .4s ease}.vp-quiz-content{width:100%;display:flex;flex-direction:column;align-items:center}.vp-quiz-question{font-size:1.05rem;font-weight:700;color:var(--text-main);max-width:500px;line-height:1.5;margin-bottom:12px;text-align:center}.vp-quiz-options{display:flex;flex-direction:column;gap:12px;width:100%;max-width:500px}.vp-quiz-option{padding:12px 8px;background:transparent;border:2px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s;font-size:1rem;font-weight:700;color:var(--text-main)}.vp-quiz-option:hover{border-color:var(--primary-color);transform:translateY(-1px);background:var(--surface-color)}.vp-quiz-option.selected{border-color:var(--primary-color);background:#ffd16614;box-shadow:0 0 0 3px #ffd16626}.vp-quiz-option.correct-highlight{border-color:var(--success-color);background:#06d6a01a;color:var(--success-color)}.vp-quiz-option.wrong{border-color:var(--danger-color);background:#ef476f1a;color:var(--danger-color)}.vp-quiz-option.disabled{pointer-events:none;opacity:.5}.vp-hint{font-size:.82rem;color:var(--primary-color);background:#ffd16614;padding:8px 14px;border-radius:var(--radius-lg);border:1px solid rgba(255,209,102,.2);margin-top:12px}@media(min-width:480px){.vp-tab{flex:1;flex-shrink:1}}.stage-tabs{display:flex;gap:6px;margin-bottom:12px;width:100%;max-width:500px}.stage-tab{flex:1;padding:8px 14px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:transparent;font-weight:700;font-size:.82rem;cursor:pointer;transition:all .2s;text-align:center;color:var(--text-muted)}.stage-tab:hover{border-color:var(--primary-color);color:var(--text-main)}.stage-tab.active{background:var(--surface-color);color:var(--text-main);border-color:var(--primary-color)}.stage-tab.completed{border-color:var(--success-color);color:var(--success-color)}.number-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}@media(max-width:480px){.number-grid{grid-template-columns:repeat(3,1fr)}}.number-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:16px 8px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:transparent;cursor:pointer;transition:all .2s;position:relative}.number-tile:hover{border-color:var(--primary-color);transform:translateY(-2px);background:var(--surface-color)}.number-tile .digit{font-size:2rem;font-weight:800;color:var(--text-main);line-height:1}.number-tile .vn-word{font-size:.9rem;font-weight:600;color:var(--text-muted)}.number-tile .speaker-icon{position:absolute;top:6px;right:6px;color:var(--text-muted);opacity:0;transition:opacity .2s}.number-tile:hover .speaker-icon{opacity:1}.stage-intro{text-align:center;color:var(--text-muted);margin-bottom:12px;font-size:.85rem;font-weight:500}.stage-cta{flex-shrink:0;padding:12px 16px;background:var(--bg-color);border-top:1px solid var(--border-color);display:flex;justify-content:center}.stage-cta button{width:100%;max-width:448px;background-color:var(--primary-color);color:#1a1a1a;box-shadow:0 4px #dcae45;padding:16px;border-radius:var(--radius-full);font-size:1.1rem;font-weight:700;text-transform:uppercase;transition:all .2s;border:none;cursor:pointer}.stage-cta button:active{box-shadow:0 0 #dcae45;transform:translateY(4px)}.builder-target{font-size:6.5rem;font-weight:800;color:var(--text-main);margin-bottom:10px;padding-top:16px;line-height:1}.builder-subtitle{color:var(--text-muted);font-size:1.1rem;font-weight:500;margin-bottom:16px}.decomposition{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;width:100%}.decomp-part{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 20px;border-radius:var(--radius-lg);background:transparent;border:2px solid var(--border-color);animation:popIn .3s ease backwards}.decomp-part:nth-child(2){animation-delay:.15s}.decomp-part:nth-child(3){animation-delay:.3s}.decomp-part:nth-child(4){animation-delay:.45s}@keyframes popIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.decomp-part .part-digit{font-size:1.4rem;font-weight:700;color:var(--primary-color)}.decomp-part .part-word{font-size:1.1rem;font-weight:700;color:var(--text-main)}.decomp-plus{font-size:1.5rem;font-weight:700;color:var(--text-muted)}.build-answer-area{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;min-height:80px;border-bottom:2px solid var(--border-color);padding:16px 10px;margin-bottom:20px;align-items:center;width:100%}.build-answer-area .placeholder-text{color:var(--text-muted);font-weight:500;font-size:1.1rem}.build-block{padding:12px 20px;background:transparent;border:2px solid var(--primary-color);border-radius:var(--radius-lg);font-size:1.15rem;font-weight:700;cursor:pointer;color:var(--text-main);box-shadow:0 4px 0 var(--primary-color);transition:all .1s}.build-block:active{transform:translateY(4px);box-shadow:0 0 0 var(--primary-color)}.word-bank-builder{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:20px;width:100%}.bank-block{padding:12px 20px;background:transparent;border:2px solid var(--border-color);border-radius:var(--radius-lg);font-size:1.15rem;font-weight:700;cursor:pointer;color:var(--text-main);box-shadow:0 4px 0 var(--border-color);transition:all .1s}.bank-block:hover{border-color:var(--primary-color);box-shadow:0 4px 0 var(--primary-color)}.bank-block:active{transform:translateY(4px);box-shadow:none}.bank-block.used{background:var(--surface-color-light);border-color:transparent;box-shadow:none;color:transparent;pointer-events:none}.challenge-progress{height:16px;background:var(--surface-color);border-radius:8px;border:1px solid var(--border-color);overflow:hidden}.challenge-progress-fill{height:100%;background:var(--success-color);transition:width .4s ease}.challenge-prompt{font-size:1.2rem;color:var(--text-main);font-weight:700;margin-bottom:12px}.challenge-number{font-size:5rem;font-weight:800;color:var(--text-main);line-height:1;margin-bottom:16px}.challenge-input{font-size:1.8rem;text-align:center;padding:12px;width:100%;max-width:300px;border:2px solid var(--border-color);border-radius:var(--radius-lg);background:transparent;outline:none;letter-spacing:2px;color:var(--text-main);font-weight:700}.challenge-input:focus{border-color:var(--primary-color)}.challenge-input.correct-input{border-color:var(--success-color);color:var(--success-color)}.challenge-input.wrong-input{border-color:var(--danger-color);color:var(--danger-color)}.challenge-options{display:flex;flex-direction:column;gap:12px;width:100%;max-width:500px}.challenge-option{padding:16px 12px;background:transparent;border:2px solid var(--border-color);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s;font-size:1.1rem;font-weight:700;color:var(--text-main);display:flex;align-items:center;justify-content:center;text-align:center}.challenge-option:hover{border-color:var(--primary-color);transform:translateY(-2px);background:var(--surface-color)}.challenge-option.selected{border-color:var(--primary-color);background:#ffd16614;box-shadow:0 0 0 3px #ffd16626}.challenge-option.correct-highlight{border-color:var(--success-color);background:#06d6a01a;color:var(--success-color)}.challenge-option.wrong{border-color:var(--danger-color);background:#ef476f1a;color:var(--danger-color)}.challenge-option.disabled{pointer-events:none;opacity:.5}.pitch-intro-visual{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.pitch-hero-icon{color:var(--primary-color)}.pitch-wave-bars{display:flex;align-items:flex-end;gap:4px;height:60px}.pitch-wave-bar{width:6px;border-radius:3px;background:linear-gradient(to top,var(--primary-color),var(--success-color));animation:waveBar 1.2s ease-in-out infinite alternate}@keyframes waveBar{0%{transform:scaleY(.4);opacity:.5}to{transform:scaleY(1);opacity:1}}.pitch-tone-preview{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;margin:var(--spacing-lg) 0}.pitch-tone-chip{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--radius-full);background:color-mix(in srgb,var(--chip-color) 8%,transparent);border:1px solid color-mix(in srgb,var(--chip-color) 20%,transparent);font-size:.85rem;transition:transform .2s}.pitch-tone-chip:hover{transform:translateY(-1px)}.pitch-tone-mark{font-weight:700;font-size:1.1rem}.pitch-tone-label{color:var(--text-muted);font-size:.8rem}.pitch-requirements{display:flex;align-items:center;justify-content:center;gap:6px;font-size:.82rem;color:var(--text-muted);opacity:.7;margin-bottom:var(--spacing-lg)}.pitch-calibrate-icon{width:80px;height:80px;border-radius:var(--radius-full);background:#049e7514;display:flex;align-items:center;justify-content:center;color:var(--primary-color);transition:all .3s;margin-bottom:var(--spacing-lg)}.pitch-calibrate-icon.active{background:#ef44441a;color:var(--danger-color);animation:calibPulse 1.5s ease-in-out infinite}@keyframes calibPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.pitch-calibrate-progress{width:100%;max-width:300px;display:flex;flex-direction:column;gap:var(--spacing-sm);margin:var(--spacing-lg) 0}.pitch-calibrate-bar{height:10px;background:var(--surface-color);border:1px solid var(--border-color);border-radius:5px;overflow:hidden}.pitch-calibrate-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--success-color));border-radius:5px;transition:width .15s ease}.pitch-calibrate-label{font-size:.85rem;color:var(--text-muted);font-weight:500;text-align:center}.pitch-canvas{width:100%;min-height:220px;display:block;border-radius:var(--radius-lg)}.pitch-canvas-wrapper{width:100%;overflow:hidden;padding-bottom:16px;box-sizing:border-box}.pitch-progress-bar{height:6px;background:var(--surface-color)}.pitch-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary-color),var(--success-color));transition:width .4s ease}.pitch-word-area{padding:0 0 16px;width:100%;box-sizing:border-box;text-align:center}.pitch-word-row{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-sm)}.pitch-target-word{font-size:2.4rem;font-weight:700;color:var(--text-main);letter-spacing:.02em}.pitch-listen-btn{width:40px;height:40px;border-radius:var(--radius-full);background:var(--surface-color);color:var(--primary-color);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;border:1px solid var(--border-color)}.pitch-listen-btn:hover{background:#049e751a;border-color:var(--primary-color);transform:scale(1.05)}.pitch-word-meta{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);flex-wrap:wrap}.pitch-word-meaning{font-size:.95rem;color:var(--text-muted);font-style:italic}.pitch-tone-badge{font-size:.8rem;font-weight:600;padding:4px 12px;border-radius:var(--radius-full)}.pitch-canvas-legend{display:flex;gap:var(--spacing-lg);justify-content:center;padding:var(--spacing-sm) 0}.pitch-legend-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-muted)}.pitch-legend-swatch{width:16px;height:3px;border-radius:2px;display:inline-block}.pitch-legend-swatch.live{background:#38bdf8;box-shadow:0 0 6px #38bdf8}.pitch-result-panel{animation:slideUpResult .35s ease-out}@keyframes slideUpResult{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}.pitch-score-ring{position:relative;width:72px;height:72px;flex-shrink:0}.pitch-score-svg{width:100%;height:100%}.pitch-score-number{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;color:var(--primary-color)}.pitch-result-message{font-weight:700;font-size:1.05rem;margin-bottom:2px}.pitch-result-detail{font-size:.88rem;color:var(--text-muted);line-height:1.4}.pitch-tone-breakdown{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);justify-content:center;margin:var(--spacing-md) 0}.pitch-tone-score{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-md);background:var(--surface-color);border:1px solid var(--border-color);font-size:.85rem}.mobile-app-wrapper .pitch-bottom-inline{position:static;border-top:none;padding:0;width:100%}@media(max-width:640px){.pitch-target-word{font-size:2rem}.pitch-result-panel>div{flex-direction:column;text-align:center!important}.pitch-canvas-legend{gap:var(--spacing-sm);flex-wrap:wrap}.pitch-legend-item{font-size:.72rem}}.drill-progress-bar{width:100%;height:8px;background:var(--surface-color);border-radius:4px;overflow:hidden;margin-bottom:16px}.drill-progress-fill{height:100%;background:var(--primary-color);border-radius:4px;transition:width .3s ease}.drill-question-area{padding:8px 0;max-width:500px;margin:0 auto;width:100%}.drill-prompt{font-size:1.2rem;font-weight:700;color:var(--text-main);margin-bottom:20px;line-height:1.5;text-align:center}.drill-options{display:flex;flex-direction:column;gap:10px}.drill-option{display:flex;align-items:center;gap:12px;padding:14px 16px;border:2px solid var(--border-color);border-radius:var(--radius-md);background:var(--surface-color);color:var(--text-main);font-size:1rem;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s;text-align:left;width:100%}.drill-option:active:not(:disabled){transform:translateY(1px)}.drill-option.selected{border-color:var(--primary-color);background:#ffd16614}.drill-option.correct{border-color:var(--success-color);background:#06d6a01a}.drill-option.incorrect{border-color:var(--danger-color);background:#ef476f1a}.drill-option:disabled{cursor:default}.drill-option-letter{width:28px;height:28px;border-radius:6px;background:var(--surface-color-light);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;color:var(--text-muted);flex-shrink:0}.drill-option.selected .drill-option-letter{background:var(--primary-color);color:#1a1a1a}.drill-option.correct .drill-option-letter{background:var(--success-color);color:#fff}.drill-option.incorrect .drill-option-letter{background:var(--danger-color);color:#fff}.drill-option-text{flex:1;line-height:1.4}.drill-explanation{margin-top:16px;padding:12px 16px;border-radius:var(--radius-md);font-size:.9rem;line-height:1.5;color:var(--text-main)}.drill-explanation.correct{background:#06d6a014;border-left:3px solid var(--success-color)}.drill-explanation.incorrect{background:#ef476f14;border-left:3px solid var(--danger-color)}.drill-score-display{display:flex;flex-direction:column;align-items:center;margin:20px 0}.drill-score-circle{width:100px;height:100px;border-radius:50%;background:var(--surface-color);border:4px solid var(--primary-color);display:flex;align-items:center;justify-content:center}.drill-score-circle[data-pct="100"]{border-color:var(--success-color)}.drill-score-number{font-size:2rem;font-weight:800;color:var(--text-main)}.drill-mistakes-review{width:100%;max-width:500px;margin-top:16px;text-align:left}.drill-mistake-card{background:var(--surface-color);border-radius:var(--radius-md);padding:12px 16px;margin-bottom:10px;border:1px solid var(--border-color)}.drill-mistake-q{font-weight:600;margin-bottom:6px;color:var(--text-main);font-size:.95rem}.drill-mistake-wrong{color:var(--danger-color);font-size:.85rem;display:flex;align-items:center;gap:4px;margin-bottom:2px}.drill-mistake-correct{color:var(--success-color);font-size:.85rem;display:flex;align-items:center;gap:4px;margin-bottom:4px}.drill-mistake-explain{color:var(--text-muted);font-size:.8rem;line-height:1.4;margin-top:4px;padding-top:4px;border-top:1px solid var(--border-color)}.practice-back-link{color:var(--text-main);text-decoration:none;display:flex;align-items:center}