@charset "UTF-8";.reveal{opacity:0;transform:translateY(32px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}.reveal.is-visible{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}.hero__title-main{font-family:"Noto Serif JP","Baloo 2",sans-serif}@keyframes skeleton-shimmer{0%{background-position:-400px 0}to{background-position:400px 0}}.skeleton-block{background:linear-gradient(90deg,var(--skeleton-base, rgba(255, 255, 255, .07)) 25%,var(--skeleton-shine, rgba(255, 255, 255, .13)) 50%,var(--skeleton-base, rgba(255, 255, 255, .07)) 75%);background-size:800px 100%;border-radius:8px;animation:skeleton-shimmer 1.4s infinite linear}.skeleton-block--tag{width:48px;height:28px;border-radius:8px}.skeleton-block--badge{width:56px;height:28px;border-radius:8px}.skeleton-block--title{width:85%;height:22px;margin-bottom:12px}.skeleton-block--text{width:100%;height:14px;margin-bottom:8px}.skeleton-block--short{width:60%;height:14px}.skeleton-block--meta{width:80px;height:14px;border-radius:6px}.skeleton-block--btn{width:100%;height:44px;border-radius:10px;margin-top:4px}.lesson-card--skeleton{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.homepage{min-height:100vh;background:var(--bg-color);color:var(--text-color);font-family:var(--font-family-main);overflow-x:hidden;position:relative}.homepage-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--bg-color);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--accent-color);transition:all var(--transition-slow)}.homepage-header:before{content:"";position:absolute;inset:0;background:var(--bg-color);opacity:.95;z-index:-1}.homepage-header.scrolled{box-shadow:0 4px 20px #00000026;border-bottom-color:var(--accent-color);border-bottom-width:2px}.homepage-header.scrolled:before{opacity:.98}.homepage-header__container{max-width:1400px;margin:0 auto;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.homepage-header__logo{display:flex;align-items:center;text-decoration:none;transition:transform var(--transition-slow)}.homepage-header__logo:hover{transform:scale(1.05)}.homepage-header__logo-img{height:45px;width:auto;color:var(--logo-text)}.homepage-header__nav{display:flex;align-items:center;gap:1.5rem}.nav-links{display:flex;align-items:center;gap:2rem;margin-right:2rem}.nav-links .nav-link{color:var(--text-color);text-decoration:none;font-weight:500;font-size:1rem;transition:color var(--transition-base);position:relative}.nav-links .nav-link:after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent-text);transition:width var(--transition-slow)}.nav-links .nav-link:hover{color:var(--accent-text)}.nav-links .nav-link:hover:after{width:100%}.nav-dropdown{position:relative}.nav-dropdown__trigger{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;font-family:inherit;padding:0}.nav-dropdown__trigger.active{color:var(--accent-text)}.nav-dropdown__trigger.active:after{width:100%}.nav-dropdown__caret{transition:transform var(--transition-base)}.nav-dropdown__trigger.active .nav-dropdown__caret{transform:rotate(180deg)}.nav-dropdown__panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%);display:flex;gap:0;background:var(--bg-color);border:1px solid var(--accent-color);border-radius:14px;box-shadow:0 18px 44px #00000029;padding:10px;z-index:1200;animation:navDropdownIn .18s ease}.nav-dropdown__panel:before{content:"";position:absolute;top:-7px;left:50%;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background:var(--bg-color);border-left:1px solid var(--accent-color);border-top:1px solid var(--accent-color)}.nav-dropdown__col{display:flex;flex-direction:column;min-width:210px;padding:6px}.nav-dropdown__col-title{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--accent-text);padding:6px 10px 10px}.nav-dropdown__item{display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:.95rem;color:var(--text-color);text-align:left;padding:9px 10px;border-radius:8px;transition:background var(--transition-base),color var(--transition-base)}.nav-dropdown__item:hover{background:var(--accent-color);color:var(--text-on-accent-color)}.nav-dropdown__soon-badge{font-size:.66rem;font-weight:600;padding:2px 8px;border-radius:20px;background:color-mix(in srgb,var(--accent-color) 30%,transparent);color:var(--accent-text);white-space:nowrap}.nav-dropdown__item:hover .nav-dropdown__soon-badge{background:rgba(255,255,255,.25);color:var(--text-on-accent-color)}.nav-dropdown__col--tokutei{border-left:1px solid var(--accent-color);justify-content:center;min-width:180px}.nav-dropdown__tokutei{display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:100%;background:var(--accent-color);border:none;border-radius:10px;cursor:pointer;font-family:inherit;color:var(--text-on-accent-color);padding:16px;transition:transform var(--transition-base),filter var(--transition-base)}.nav-dropdown__tokutei:hover{transform:translateY(-2px);filter:brightness(1.05)}.nav-dropdown__tokutei-title{font-size:1.15rem;font-weight:700;font-family:var(--font-family-heading, inherit)}.nav-dropdown__tokutei-desc{font-size:.8rem;opacity:.85}@keyframes navDropdownIn{0%{opacity:0;transform:translate(-50%) translateY(-6px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media (max-width: 640px){.nav-dropdown__panel{flex-direction:column;left:0;transform:none}.nav-dropdown__panel:before{left:30px}.nav-dropdown__col--tokutei{border-left:none;border-top:1px solid var(--accent-color)}}.header-controls{display:flex;align-items:center;gap:.75rem}.header-auth-buttons{display:flex;align-items:center;gap:.5rem}.btn-auth{display:inline-flex;align-items:center;padding:.45rem 1.1rem;border-radius:8px;font-size:.875rem;font-weight:600;text-decoration:none;transition:all var(--transition-base);white-space:nowrap}.btn-auth--outline{border:1.5px solid var(--accent-color);color:var(--accent-text);background:transparent}.btn-auth--outline:hover{background:var(--accent-color);color:var(--text-on-accent-color);transform:translateY(-1px)}.btn-auth--primary{background:var(--accent-color);color:#fff;border:1.5px solid var(--accent-color)}.btn-auth--primary:hover{opacity:.88;transform:translateY(-1px);color:#fff}.header-control-item{display:flex;align-items:center}.header-control-item .language-selector .language-selector__button{padding:.5rem .875rem;border-radius:10px;background:var(--bg-primary-app)!important;border:1px solid var(--accent-color)!important;color:var(--text-color)!important;transition:all var(--transition-slow);font-size:.875rem;font-weight:500}.header-control-item .language-selector .language-selector__button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.header-control-item #theme-toggle-button,.header-control-item .theme-toggle-button{padding:.5rem!important;border-radius:10px!important;background:var(--bg-primary-app)!important;border:1px solid var(--accent-color)!important;transition:all var(--transition-slow)!important;display:flex!important;align-items:center!important;justify-content:center!important;width:40px!important;height:40px!important;color:var(--text-color)!important}.header-control-item #theme-toggle-button:hover,.header-control-item .theme-toggle-button:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.header-control-item #theme-toggle-button svg,.header-control-item .theme-toggle-button svg{width:20px;height:20px}.header-divider{width:1px;height:32px;background:var(--accent-color);opacity:.3;margin:0 .5rem}.cart-button{position:relative;padding:8px;background:transparent;border:none;color:var(--color-text-primary);cursor:pointer;border-radius:8px;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center}.cart-button:hover{background:var(--bg-color);transform:scale(1.05)}.cart-badge{position:absolute;top:2px;right:2px;background:#ff4444;color:#fff;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:0 2px 4px #0003}.user-menu-container{position:relative}.user-menu-btn{display:flex;align-items:center;gap:.625rem;padding:.5rem .875rem;background:var(--bg-primary-app);border:1px solid var(--accent-color);border-radius:10px;cursor:pointer;transition:all .3s ease;font-size:.875rem;font-weight:500;color:var(--text-color);position:relative;overflow:hidden;white-space:nowrap}.user-menu-btn:before{content:"";position:absolute;inset:0;background:var(--accent-color);opacity:.1;z-index:0;transition:opacity .3s ease}.user-menu-btn>*{position:relative;z-index:1}.user-menu-btn:hover{border-color:var(--accent-color);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.user-menu-btn:hover:before{opacity:.15}.user-menu-btn:hover .dropdown-arrow{transform:rotate(180deg)}.user-avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-color);color:var(--text-color);display:flex;align-items:center;justify-content:center;font-size:.875rem;overflow:hidden;border:2px solid var(--accent-color);flex-shrink:0}.user-avatar img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.user-name{font-size:.875rem;font-weight:500;color:var(--text-color);white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis}.dropdown-arrow{font-size:.75rem;color:var(--text-color);opacity:.7;transition:transform var(--transition-slow);flex-shrink:0}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.user-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:280px;background:var(--bg-color);border:1px solid var(--accent-color);border-radius:16px;box-shadow:0 10px 40px #00000026;z-index:1000;overflow:hidden;animation:fadeInDown var(--transition-slow) ease;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%)}.user-dropdown:before{content:"";position:absolute;inset:0;background:var(--bg-color);opacity:.95;z-index:-1}.user-info{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--accent-color);opacity:.8}.user-avatar-large{width:48px;height:48px;border-radius:50%;background:var(--accent-color);color:var(--text-color);display:flex;align-items:center;justify-content:center;font-size:1.25rem;overflow:hidden;border:2px solid var(--accent-color);flex-shrink:0}.user-avatar-large img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.user-details{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.user-name-large{font-size:.875rem;font-weight:600;color:var(--text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{font-size:.75rem;color:var(--text-color);opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-items{padding:8px 0}.menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:none;border:none;font-size:.875rem;color:var(--text-color);cursor:pointer;transition:all var(--transition-base);text-align:left;position:relative}.menu-item:before{content:"";position:absolute;inset:0;background:var(--accent-color);opacity:0;transition:opacity var(--transition-base);z-index:0}.menu-item>*{position:relative;z-index:1}.menu-item:hover:before{opacity:.1}.menu-item.logout{color:#ef4444}.menu-item.logout:hover:before{opacity:.15;background:#ef4444}.menu-item .menu-badge{position:absolute;top:50%;right:12px;transform:translateY(-50%);background:#ff4444;color:#fff;border-radius:10px;padding:2px 6px;font-size:11px;font-weight:700;min-width:18px;text-align:center}.menu-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-divider{margin:8px 0;border:none;border-top:1px solid var(--accent-color);opacity:.3}.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:8rem 2rem 4rem;overflow:hidden;background:var(--bg-color)}.hero__background{position:absolute;inset:0;z-index:0}.hero__gradient{position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-color) 0%,var(--primary-color) 50%,var(--accent-color) 100%);opacity:.08;animation:gradientShift 15s ease infinite}.hero__particles{position:absolute;width:100%;height:100%;overflow:hidden}.hero__container{max-width:1400px;margin:0 auto;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;position:relative;z-index:1}.hero__content{display:flex;flex-direction:column;gap:2rem}.hero__badge{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem 1rem;background:rgba(var(--accent-rgb),.12);border:1px solid var(--accent-color);border-radius:100px;color:var(--accent-color);font-size:.875rem;font-weight:600;width:-moz-fit-content;width:fit-content}.hero__title{display:flex;flex-direction:column;gap:.5rem}.hero__title-accent{font-size:clamp(1rem,2vw,1.375rem);font-weight:600;color:var(--accent-color);letter-spacing:.1em;text-transform:uppercase}.hero__title-main{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;line-height:1.15;color:var(--text-color)}.hero__description{font-size:clamp(1rem,1.5vw,1.25rem);color:var(--secondary-text-color);line-height:1.7;max-width:540px}.hero__actions{display:flex;gap:1rem;flex-wrap:wrap}.hero__button{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;border-radius:12px;font-size:1.05rem;font-weight:600;cursor:pointer;transition:all var(--transition-slow);text-decoration:none;min-height:52px}.hero__button--primary{background:var(--accent-color);color:var(--text-on-accent-color);border:none;box-shadow:0 4px 20px rgba(var(--accent-rgb),.35)}.hero__button--primary:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(var(--accent-rgb),.45);filter:brightness(1.08)}.hero__button--secondary{background:transparent;border:1.5px solid var(--accent-color);color:var(--accent-color)}.hero__button--secondary:hover{background:rgba(var(--accent-rgb),.1);transform:translateY(-2px)}.hero__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;padding:2rem;background:rgba(var(--accent-rgb),.06);border:1px solid var(--card-border);border-radius:20px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.hero__stat{display:flex;flex-direction:column;gap:.25rem;text-align:center}.hero__stat-value{font-size:clamp(1.5rem,2.5vw,2rem);font-weight:800;color:var(--accent-color);line-height:1}.hero__stat-label{font-size:.8125rem;color:var(--secondary-text-color);font-weight:500}.hero__visual{position:relative;display:flex;align-items:center;justify-content:center}.hero__lottie-wrapper{width:100%;max-width:520px;position:relative;z-index:1}.hero__floating-card{position:absolute;background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:1rem 1.25rem;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 32px #0000002e;animation:float 3s ease-in-out infinite;z-index:2}.hero__floating-card--1{bottom:20%;left:-10%;animation-delay:0s}.hero__floating-card--2{top:15%;right:-5%;animation-delay:1.5s}.particle{position:absolute;width:4px;height:4px;background:var(--accent-color);opacity:.4;border-radius:50%;animation:float 3s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.particle{animation:none;opacity:.2}}.section-header{text-align:center;margin-bottom:3rem}.section-header--left{text-align:left}.section-header__title{font-size:clamp(2rem,4vw,3rem);font-weight:800;margin-bottom:1rem;color:var(--text-color)}.section-header__subtitle{font-size:1.25rem;color:var(--secondary-text-color);max-width:700px;margin:0 auto;line-height:1.7}.features{padding:6rem 2rem;background:var(--bg-primary-app);position:relative}.features__container{max-width:1400px;margin:0 auto}.features__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;margin-top:4rem}.feature-card{position:relative;padding:2.5rem;background:var(--bg-color);backdrop-filter:blur(20px) saturate(180%);border-radius:24px;border:1px solid var(--accent-color);box-shadow:0 8px 32px #0000001a;transition:all var(--transition-slow);overflow:hidden;cursor:pointer}.feature-card:after{content:"";position:absolute;inset:0;background:var(--accent-color);opacity:.05;z-index:0;transition:opacity var(--transition-slow)}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--icon-color, var(--accent-color)),transparent);transform:scaleX(0);transition:transform var(--transition-slow)}.feature-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px #00000026}.feature-card:hover:after{opacity:.1}.feature-card:hover:before{transform:scaleX(1)}.feature-card:hover .feature-card__icon-wrapper{transform:scale(1.1) rotate(5deg)}.feature-card:hover .feature-card__arrow{transform:translate(5px)}.feature-card__icon-wrapper{width:80px;height:80px;border-radius:20px;background:var(--bg-primary-app);border:2px solid var(--icon-color, var(--accent-color));display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;transition:transform var(--transition-slow);position:relative;overflow:hidden}.feature-card__icon-wrapper:before{content:"";position:absolute;inset:0;background:var(--icon-color, var(--accent-color));opacity:.1;z-index:0}.feature-card__icon-wrapper>*{position:relative;z-index:1}.feature-card__icon{color:var(--icon-color, var(--accent-color))}.feature-card__title{font-size:1.5rem;font-weight:700;margin-bottom:1rem;color:var(--text-color);position:relative;z-index:1}.feature-card__description{font-size:1rem;color:var(--secondary-text-color);line-height:1.6;margin-bottom:1.5rem;position:relative;z-index:1}.feature-card__arrow{display:inline-flex;align-items:center;color:var(--icon-color, var(--accent-color));transition:transform .3s ease;position:relative;z-index:1}.benefits{padding:6rem 2rem;background:var(--bg-color);position:relative}.benefits__container{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.benefits__content{display:flex;flex-direction:column;gap:2rem}.benefits__list{display:flex;flex-direction:column;gap:1.5rem}.benefits__cta{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2rem;background:var(--accent-color);color:var(--text-on-accent-color);border:none;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all var(--transition-slow);width:-moz-fit-content;width:fit-content;box-shadow:0 4px 20px rgba(var(--accent-rgb),.35)}.benefits__cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(var(--accent-rgb),.45);filter:brightness(1.1)}.benefits__visual{position:relative}.benefits__image-wrapper{position:relative;border-radius:24px;overflow:hidden;background:var(--bg-primary-app);border:1px solid var(--accent-color);padding:2rem}.benefits__image-wrapper:before{content:"";position:absolute;inset:0;background:var(--accent-color);opacity:.05;z-index:0}.benefits__image-wrapper>*{position:relative;z-index:1}.benefits__gradient{position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-color) 0%,var(--primary-color) 100%);opacity:.1;border-radius:24px}.benefit-item{display:flex;align-items:center;gap:1.5rem;padding:1.5rem;background:var(--bg-primary-app);backdrop-filter:blur(20px) saturate(180%);border-radius:16px;border:1px solid var(--accent-color);transition:all var(--transition-slow);position:relative;overflow:hidden}.benefit-item:before{content:"";position:absolute;inset:0;background:var(--accent-color);opacity:.05;z-index:0;transition:opacity var(--transition-slow)}.benefit-item>*{position:relative;z-index:1}.benefit-item:hover{transform:translate(8px);box-shadow:0 8px 24px #00000026}.benefit-item:hover:before{opacity:.1}.benefit-item__icon{width:50px;height:50px;border-radius:12px;background:var(--bg-color);border:2px solid var(--accent-color);display:flex;align-items:center;justify-content:center;color:var(--accent-color);flex-shrink:0;position:relative;overflow:hidden}.benefit-item__icon:before{content:"";position:absolute;inset:0;background:var(--accent-color);opacity:.1;z-index:0}.benefit-item__icon>*{position:relative;z-index:1}.benefit-item__text{font-size:1.1rem;font-weight:600;color:var(--text-color)}.cta{position:relative;padding:6rem 2rem;overflow:hidden;background:var(--bg-primary-app)}.cta__background{position:absolute;inset:0;z-index:0}.cta__gradient{position:absolute;inset:0;background:linear-gradient(135deg,var(--accent-color) 0%,var(--primary-color) 100%);opacity:.15;animation:gradientShift 15s ease infinite}.cta__container{max-width:1000px;margin:0 auto;position:relative;z-index:1;text-align:center}.cta__content{display:flex;flex-direction:column;gap:2rem;align-items:center}.cta__title{font-size:clamp(2rem,4vw,3.5rem);font-weight:800;color:var(--text-color);line-height:1.2}.cta__description{font-size:1.25rem;color:var(--secondary-text-color);max-width:600px;line-height:1.7}.cta__button{display:flex;align-items:center;gap:.75rem;padding:1.25rem 3rem;background:var(--accent-color);color:var(--text-on-accent-color);border:none;border-radius:12px;font-size:1.2rem;font-weight:700;cursor:pointer;transition:all var(--transition-slow);min-height:var(--touch-target, 44px);box-shadow:0 8px 32px rgba(var(--accent-rgb),.35)}.cta__button:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(var(--accent-rgb),.45);filter:brightness(1.1)}.homepage-footer{padding:3rem 2rem;background:var(--bg-primary-app);border-top:1px solid var(--accent-color);position:relative}.homepage-footer:before{content:"";position:absolute;inset:0;background:var(--accent-color);opacity:.03;z-index:0}.homepage-footer>*{position:relative;z-index:1}.homepage-footer__container{max-width:1400px;margin:0 auto}.homepage-footer__content{display:flex;flex-direction:column;align-items:center;gap:1rem}.homepage-footer__logo-img{height:40px;width:auto;color:var(--logo-text)}.homepage-footer__copyright{font-size:.9rem;color:var(--secondary-text-color)}.featured-lessons{padding:80px 20px;background:var(--bg-primary-app)}.featured-lessons__container{max-width:1200px;margin:0 auto}.featured-lessons__empty{text-align:center;padding:60px 20px;color:var(--secondary-text-color)}.featured-lessons__empty svg{margin-bottom:16px;opacity:.5}.featured-lessons__empty p{font-size:1.125rem}.featured-lessons__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:40px}.featured-lessons__footer{text-align:center}.featured-lessons__footer .btn-view-all{padding:14px 32px;background:var(--accent-color);color:var(--text-on-accent-color);border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all .25s ease;box-shadow:0 4px 16px rgba(var(--accent-rgb),.35)}.featured-lessons__footer .btn-view-all:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(var(--accent-rgb),.45);filter:brightness(1.08)}.featured-lessons__footer .btn-view-all:focus-visible{outline:2px solid var(--accent-color);outline-offset:3px}.featured-lessons .lesson-card{background:var(--bg-color);border:1px solid var(--card-border, rgba(var(--accent-rgb), .25));border-radius:16px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;cursor:pointer;display:flex;flex-direction:column}.featured-lessons .lesson-card:hover{transform:translateY(-8px);box-shadow:var(--card-hover-shadow);border-color:var(--accent-color)}.featured-lessons .lesson-card:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.featured-lessons .lesson-card__header{padding:20px 20px 0;display:flex;justify-content:space-between;align-items:center}.featured-lessons .lesson-card__level{padding:6px 12px;border-radius:8px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.featured-lessons .lesson-card__level.n5{background:rgba(16,185,129,.1);color:#10b981}.featured-lessons .lesson-card__level.n4{background:rgba(59,130,246,.1);color:#3b82f6}.featured-lessons .lesson-card__level.n3{background:rgba(139,92,246,.1);color:#8b5cf6}.featured-lessons .lesson-card__level.n2{background:rgba(245,158,11,.1);color:#f59e0b}.featured-lessons .lesson-card__level.n1{background:rgba(239,68,68,.1);color:#ef4444}.featured-lessons .lesson-card__badge{padding:6px 12px;border-radius:8px;font-size:.75rem;font-weight:700;display:flex;align-items:center;gap:4px}.featured-lessons .lesson-card__badge.free{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.featured-lessons .lesson-card__badge.paid{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.featured-lessons .lesson-card__content{padding:20px;flex:1}.featured-lessons .lesson-card__title{font-size:1.25rem;font-weight:700;margin-bottom:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.featured-lessons .lesson-card__description{color:var(--secondary-text-color);font-size:.875rem;line-height:1.6;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.featured-lessons .lesson-card__meta{display:flex;gap:16px}.featured-lessons .lesson-card__meta .meta-item{display:flex;align-items:center;gap:6px;color:var(--secondary-text-color);font-size:.875rem}.featured-lessons .lesson-card__meta .meta-item svg{color:var(--accent-color)}.featured-lessons .lesson-card__footer{padding:0 20px 20px}.featured-lessons .lesson-card__btn{width:100%;padding:12px;background:var(--accent-color);color:var(--text-on-accent-color);border:none;border-radius:10px;font-size:.938rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:filter .2s ease,transform .2s ease;min-height:44px}.featured-lessons .lesson-card__btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.featured-lessons .lesson-card__btn:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}@media (max-width: 1024px){.featured-lessons__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.featured-lessons{padding:60px 20px}.featured-lessons__grid{grid-template-columns:1fr}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@media (max-width: 1024px){.hero__container{grid-template-columns:1fr;text-align:center}.hero__stats{grid-template-columns:repeat(2,1fr)}.hero__description{margin:0 auto}.hero__actions{justify-content:center}.benefits__container{grid-template-columns:1fr}.features__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.homepage-header__container{padding:1rem}.nav-links{display:none}.hero{padding:6rem 1rem 3rem}.hero__actions{flex-direction:column;width:100%}.hero__button{width:100%;justify-content:center}.hero__stats{grid-template-columns:repeat(2,1fr);gap:1rem;padding:1.5rem}.hero__floating-card{display:none}.features,.benefits,.cta{padding:4rem 1rem}.features__grid{grid-template-columns:1fr}.section-header__title{font-size:2rem}.section-header__subtitle{font-size:1rem}}@media (max-width: 480px){.hero__title-main{font-size:2rem}.hero__title-accent{font-size:1.25rem}.hero__description{font-size:1rem}.hero__stats{grid-template-columns:1fr}}.language-selector{position:relative;display:inline-block}.language-selector__button{background:none;border:none;color:var(--color-text-secondary);font-weight:500;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--border-radius);transition:background-color var(--transition-speed),color var(--transition-speed)}.language-selector__button:hover{background-color:var(--color-background);color:var(--color-text-primary)}.language-selector__dropdown{position:absolute;top:100%;right:0;background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);box-shadow:var(--box-shadow);min-width:150px;z-index:100;padding:.5rem 0;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity var(--transition-speed),transform var(--transition-speed),visibility var(--transition-speed)}.language-selector__dropdown--active{opacity:1;visibility:visible;transform:translateY(0)}.language-selector__item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;color:var(--color-text-primary);transition:background-color var(--transition-speed)}.language-selector__item:hover{background-color:var(--color-background)}.language-selector__flag{width:24px;height:18px;border-radius:3px;-o-object-fit:cover;object-fit:cover}.about-page{background:var(--color-background);color:var(--color-text-primary);min-height:100vh}.about-page .container{max-width:1200px;margin:0 auto;padding:0 20px}.about-page .about-titlebar{border-bottom:1px solid var(--color-border);padding:20px 0}.about-page .about-titlebar__row{display:flex;align-items:center;justify-content:space-between;gap:16px}.about-page .about-titlebar__breadcrumb{font-size:13px;color:var(--color-text-secondary);display:flex;align-items:center;gap:6px}.about-page .about-titlebar__breadcrumb a{color:var(--color-text-secondary);text-decoration:none}.about-page .about-titlebar__breadcrumb a:hover{color:var(--color-primary)}.about-page .section-header{text-align:center;margin-bottom:60px}.about-page .section-header h2{font-size:2.5rem;font-weight:700;margin-bottom:16px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.about-page .section-header p{font-size:1.1rem;color:var(--color-text-secondary);max-width:600px;margin:0 auto}.about-page .about-hero{padding:100px 20px 80px;background:linear-gradient(135deg,var(--color-primary-light) 0%,var(--color-background) 50%);position:relative;overflow:hidden}.about-page .about-hero:before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.3}.about-page .about-hero .hero-container{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}.about-page .about-hero .hero-content .badge{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--color-primary);color:#fff;border-radius:50px;font-size:.875rem;font-weight:500;margin-bottom:24px}.about-page .about-hero .hero-content .badge svg{animation:sparkle 2s infinite}.about-page .about-hero .hero-content h1{font-size:3.5rem;font-weight:800;line-height:1.2;margin-bottom:24px}.about-page .about-hero .hero-content h1 .highlight{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.about-page .about-hero .hero-content .subtitle{font-size:1.25rem;color:var(--color-text-secondary);line-height:1.6;margin-bottom:32px}.about-page .about-hero .hero-content .hero-actions{display:flex;gap:16px;flex-wrap:wrap}.about-page .about-hero .hero-content .hero-actions button{padding:14px 32px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;border:none}.about-page .about-hero .hero-content .hero-actions button.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;box-shadow:0 4px 20px #3b82f64d}.about-page .about-hero .hero-content .hero-actions button.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 30px #3b82f666}.about-page .about-hero .hero-content .hero-actions button.btn-secondary{background:var(--color-surface);color:var(--color-text-primary);border:2px solid var(--color-border)}.about-page .about-hero .hero-content .hero-actions button.btn-secondary:hover{border-color:var(--color-primary);background:var(--color-primary-light)}.about-page .about-hero .hero-image{position:relative;height:400px}.about-page .about-hero .hero-image .floating-card{position:absolute;background:var(--color-surface);padding:16px 24px;border-radius:12px;box-shadow:0 4px 20px #0000001a;display:flex;align-items:center;gap:12px;font-weight:600;animation:float 3s ease-in-out infinite}.about-page .about-hero .hero-image .floating-card.card-1{top:20%;right:10%;animation-delay:0s}.about-page .about-hero .hero-image .floating-card.card-2{top:50%;right:30%;animation-delay:.5s}.about-page .about-hero .hero-image .floating-card.card-3{bottom:20%;right:5%;animation-delay:1s}.about-page .about-stats{padding:60px 20px;background:var(--color-surface);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.about-page .about-stats .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}.about-page .about-stats .stat-item{text-align:center}.about-page .about-stats .stat-item .stat-number{font-size:3rem;font-weight:800;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.about-page .about-stats .stat-item .stat-label{font-size:1rem;color:var(--color-text-secondary);font-weight:500}.about-page .about-featured{padding:100px 20px;background:var(--color-background)}.about-page .about-featured__loading{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 0;color:var(--color-text-secondary);font-size:.95rem}.about-page .about-featured__spinner{width:40px;height:40px;border:4px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:afl-spin .9s linear infinite}@keyframes afl-spin{to{transform:rotate(360deg)}}.about-page .about-featured__empty{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 0;color:var(--color-text-secondary);font-size:1rem}.about-page .about-featured__empty svg{opacity:.4}.about-page .about-featured__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}.about-page .about-featured__footer{display:flex;justify-content:center}.about-page .about-featured .btn-view-all{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 20px #3b82f64d}.about-page .about-featured .btn-view-all:hover{transform:translateY(-2px);box-shadow:0 6px 28px #3b82f666}.about-page .afl-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;overflow:hidden;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column}.about-page .afl-card:hover{transform:translateY(-6px);box-shadow:0 12px 36px #0000001f;border-color:var(--color-primary)}.about-page .afl-card__header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}.about-page .afl-card__level{padding:4px 12px;border-radius:6px;font-size:.75rem;font-weight:700;letter-spacing:.05em}.about-page .afl-card .afl-level--n5{background:#d1fae5;color:#065f46}.about-page .afl-card .afl-level--n4{background:#dbeafe;color:#1e40af}.about-page .afl-card .afl-level--n3{background:#ede9fe;color:#5b21b6}.about-page .afl-card .afl-level--n2{background:#fef3c7;color:#92400e}.about-page .afl-card .afl-level--n1{background:#fee2e2;color:#991b1b}.about-page .afl-card__badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:.7rem;font-weight:700;letter-spacing:.06em}.about-page .afl-card .afl-badge--free{background:linear-gradient(135deg,#10b981,#059669);color:#fff}.about-page .afl-card .afl-badge--paid{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.about-page .afl-card__body{padding:16px 20px;flex:1}.about-page .afl-card__title{font-size:1.05rem;font-weight:700;color:var(--color-text-primary);margin:0 0 8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.about-page .afl-card__desc{font-size:.85rem;color:var(--color-text-secondary);margin:0 0 12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.about-page .afl-card__meta{display:flex;gap:16px}.about-page .afl-card__meta span{display:flex;align-items:center;gap:5px;font-size:.8rem;font-weight:500;color:var(--color-text-secondary)}.about-page .afl-card__meta span svg{color:var(--color-primary);flex-shrink:0}.about-page .afl-card__footer{padding:0 20px 20px}.about-page .afl-card__btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;border:none;border-radius:10px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.about-page .afl-card__btn:hover{opacity:.9;transform:translateY(-1px)}.about-page .about-features{padding:100px 20px}.about-page .about-features .features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.about-page .about-features .feature-card{background:var(--color-surface);padding:40px 30px;border-radius:16px;border:1px solid var(--color-border);transition:all .3s ease}.about-page .about-features .feature-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px #0000001a;border-color:var(--color-primary)}.about-page .about-features .feature-card .feature-icon{width:70px;height:70px;border-radius:16px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:24px}.about-page .about-features .feature-card h3{font-size:1.5rem;font-weight:700;margin-bottom:12px}.about-page .about-features .feature-card p{color:var(--color-text-secondary);line-height:1.6}.about-page .about-courses{padding:100px 20px;background:var(--color-surface)}.about-page .about-courses .courses-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px}.about-page .about-courses .course-card{background:var(--color-background);padding:40px;border-radius:20px;border:2px solid var(--color-border);position:relative;overflow:hidden;transition:all .3s ease}.about-page .about-courses .course-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px #0000001a;border-color:var(--accent-color)}.about-page .about-courses .course-card .course-icon{width:70px;height:70px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:20px}.about-page .about-courses .course-card .free-badge{position:absolute;top:20px;right:20px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:8px 16px;border-radius:50px;font-size:.875rem;font-weight:600;display:flex;align-items:center;gap:6px}.about-page .about-courses .course-card h3{font-size:1.5rem;font-weight:700;margin-bottom:12px}.about-page .about-courses .course-card p{color:var(--color-text-secondary);line-height:1.6;margin-bottom:16px}.about-page .about-courses .course-card .course-price{font-size:1.75rem;font-weight:800;color:var(--accent-color)}.about-page .about-cta{padding:100px 20px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));position:relative;overflow:hidden}.about-page .about-cta:before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.about-page .about-cta .cta-content{text-align:center;position:relative;z-index:1}.about-page .about-cta .cta-content h2{font-size:3rem;font-weight:800;color:#fff;margin-bottom:16px}.about-page .about-cta .cta-content p{font-size:1.25rem;color:#ffffffe6;margin-bottom:32px;max-width:700px;margin-left:auto;margin-right:auto}.about-page .about-cta .cta-content .btn-cta{padding:16px 40px;border-radius:12px;font-size:1.125rem;font-weight:700;background:white;color:var(--color-primary);border:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:all .3s ease;box-shadow:0 4px 20px #0003}.about-page .about-cta .cta-content .btn-cta:hover{transform:translateY(-2px);box-shadow:0 6px 30px #0000004d}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes sparkle{0%,to{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}@media (max-width: 1024px){.about-page .about-hero .hero-container{grid-template-columns:1fr;gap:40px}.about-page .about-hero .hero-container .hero-content h1{font-size:2.5rem}.about-page .about-hero .hero-container .hero-image{height:300px}.about-page .about-features .features-grid,.about-page .about-stats .stats-grid,.about-page .about-featured__grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.about-page .about-hero{padding:60px 20px 40px}.about-page .about-hero .hero-content h1{font-size:2rem}.about-page .about-hero .hero-content .subtitle{font-size:1rem}.about-page .about-hero .hero-content .hero-actions button{width:100%;justify-content:center}.about-page .about-features .features-grid,.about-page .about-courses .courses-grid,.about-page .about-stats .stats-grid{grid-template-columns:1fr}.about-page .about-featured{padding:60px 20px}.about-page .about-featured__grid{grid-template-columns:1fr}.about-page .about-cta .cta-content h2{font-size:2rem}}.tokutei-page{background:var(--color-background);color:var(--color-text-primary);min-height:100vh;padding-bottom:40px}.tokutei-page__container{max-width:1100px;margin:0 auto;padding:0 24px}.tokutei-page__titleblock{border-bottom:1px solid var(--color-border);padding:20px 0}.tokutei-page__titleblock-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.tokutei-page__breadcrumb{font-size:13px;color:var(--color-text-secondary);display:flex;align-items:center;gap:6px}.tokutei-page__breadcrumb a{color:var(--color-text-secondary)}.tokutei-page__breadcrumb a:hover{color:var(--color-primary)}.tokutei-page__hero{padding:56px 0 40px}.tokutei-page__eyebrow{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--accent-text, var(--color-primary));text-transform:uppercase;margin-bottom:12px}.tokutei-page__hero h1{font-family:var(--font-family-heading);font-size:clamp(28px,4vw,42px);line-height:1.15;max-width:18ch;margin:0 0 16px}.tokutei-page__lede{font-size:17px;color:var(--color-text-secondary);max-width:62ch;line-height:1.6}.tokutei-page__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-border);border:1px solid var(--color-border);border-radius:12px;overflow:hidden;margin-top:32px}@media (max-width: 700px){.tokutei-page__stats{grid-template-columns:1fr}}.tokutei-page__stat{background:var(--card-bg);padding:20px}.tokutei-page__stat-value{font-size:30px;font-weight:700;color:var(--color-primary);line-height:1}.tokutei-page__stat-label{font-size:13px;color:var(--color-text-secondary);margin-top:8px}.tokutei-page__section{padding:44px 0;border-top:1px solid var(--color-border)}.tokutei-page__section--last{border-top:none}.tokutei-page__section-head{margin-bottom:24px}.tokutei-page__section-head h2{font-family:var(--font-family-heading);font-size:24px;margin:0 0 6px}.tokutei-page__section-head p{font-size:14px;color:var(--color-text-secondary);margin:0}.tokutei-page__toggle{display:inline-flex;border:1.5px solid var(--color-border);border-radius:10px;overflow:hidden;margin-bottom:24px}.tokutei-page__toggle button{font-size:13px;font-weight:600;letter-spacing:.02em;border:none;background:transparent;color:var(--color-text-secondary);padding:10px 20px;cursor:pointer;transition:background .15s ease,color .15s ease}.tokutei-page__toggle button.active{background:var(--color-primary);color:var(--text-on-accent-color)}.tokutei-page__toggle button:not(.active):hover{background:var(--card-bg);color:var(--color-text-primary)}.tokutei-page__track{position:relative;border-left:2px solid var(--color-primary);margin-left:6px;padding-left:24px;display:flex;flex-direction:column;gap:26px}.tokutei-page__node{position:relative}.tokutei-page__node:before{content:"";position:absolute;left:-30.5px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--color-background);border:2px solid var(--color-primary)}.tokutei-page__node-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tokutei-page__node-tag{display:inline-flex;align-items:center;justify-content:center;color:var(--text-on-accent-color);background:var(--color-primary);border-radius:8px;padding:6px}.tokutei-page__node-title{font-family:var(--font-family-heading);font-size:17px;font-weight:600}.tokutei-page__node-desc{font-size:14px;color:var(--color-text-secondary);margin:6px 0 0;max-width:60ch}.tokutei-page__feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media (max-width: 860px){.tokutei-page__feature-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 560px){.tokutei-page__feature-grid{grid-template-columns:1fr}}.tokutei-page__feature{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}.tokutei-page__feature:hover{box-shadow:var(--card-hover-shadow);transform:translateY(-2px)}.tokutei-page__feature h3{font-size:15px;font-weight:600;margin:0;padding:0 18px}.tokutei-page__feature p{font-size:13.5px;color:var(--color-text-secondary);margin:6px 0 0;padding:0 18px;line-height:1.55}.tokutei-page__feature-shot{border-bottom:1px solid var(--card-border)}.tokutei-page__feature-shot img{display:block;width:100%;height:auto}.tokutei-page__feature-icon{width:32px;height:32px;border-radius:8px;background:var(--nav-active-bg);color:var(--color-primary);display:flex;align-items:center;justify-content:center;margin:14px 0 4px 18px}.tokutei-page__feature-metric{padding:10px 18px 16px;border-top:1px dashed var(--card-border);margin-top:14px;font-size:12px;font-weight:600;color:var(--color-success);display:flex;align-items:center;gap:6px}.tokutei-page__format-row{display:flex;gap:0;border:1px solid var(--color-border);border-radius:12px;overflow-x:auto;background:var(--card-bg)}.tokutei-page__format-step{flex:1 0 150px;padding:18px}.tokutei-page__format-step:not(:last-child){border-right:1px dashed var(--card-border)}.tokutei-page__format-step h3{font-size:13.5px;font-weight:600;margin:8px 0 0}.tokutei-page__format-step p{font-size:12.5px;color:var(--color-text-secondary);margin:6px 0 0}.tokutei-page__format-num{font-size:12px;font-weight:700;color:var(--color-text-secondary)}.tokutei-page__panel-split{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}@media (max-width: 760px){.tokutei-page__panel-split{grid-template-columns:1fr}}.tokutei-page__panel{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:26px}.tokutei-page__panel h3{font-size:16px;font-weight:600;margin:0 0 16px}.tokutei-page__panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.tokutei-page__panel li{font-size:13.5px;color:var(--color-text-secondary);display:flex;gap:10px;align-items:flex-start;line-height:1.5}.tokutei-page__panel li svg{color:var(--color-success);margin-top:2px;flex:none}.tokutei-page__panel--accent{background:var(--color-primary);color:var(--text-on-accent-color)}.tokutei-page__panel--accent h3{color:var(--text-on-accent-color)}.tokutei-page__panel--accent p{font-size:13.5px;opacity:.9;margin:0}.tokutei-page__mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.tokutei-page__mini-stat{border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:12px}.tokutei-page__mini-stat b{display:block;font-size:19px;font-weight:700}.tokutei-page__mini-stat span{font-size:11.5px;opacity:.85}.tokutei-page__gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media (max-width: 900px){.tokutei-page__gallery-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 560px){.tokutei-page__gallery-grid{grid-template-columns:1fr}}.tokutei-page__gallery-item p{font-size:12.5px;color:var(--color-text-secondary);text-align:center;margin:10px 0 0}.tokutei-page__gallery-frame{border:1px solid var(--card-border);border-radius:10px;overflow:hidden;box-shadow:var(--card-shadow)}.tokutei-page__gallery-frame img{display:block;width:100%;height:auto}.tokutei-page__cta{background:var(--color-primary);color:var(--text-on-accent-color);border-radius:16px;padding:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}.tokutei-page__cta h2{font-family:var(--font-family-heading);font-size:20px;margin:0;max-width:26ch;color:var(--text-on-accent-color)}.tokutei-page__cta p{font-size:13.5px;opacity:.9;margin:8px 0 0;max-width:42ch}.tokutei-page__cta-btn{font-size:14px;font-weight:600;background:var(--text-on-accent-color);color:var(--color-primary);border:none;border-radius:8px;padding:13px 22px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:filter .15s ease}.tokutei-page__cta-btn:hover{filter:brightness(.95)}.tokutei-page__footnote{font-size:11.5px;color:var(--color-text-secondary);margin-top:14px}.coming-soon{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:40px 20px;background:var(--color-background);text-align:center}.coming-soon__bg{position:absolute;inset:0;z-index:0;pointer-events:none}.coming-soon__blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}.coming-soon__blob--1{width:380px;height:380px;background:var(--color-primary);top:-80px;left:-60px;animation:cs-float 9s ease-in-out infinite}.coming-soon__blob--2{width:300px;height:300px;background:var(--color-success, var(--color-primary));bottom:-60px;right:-40px;opacity:.35;animation:cs-float 11s ease-in-out infinite reverse}.coming-soon__blob--3{width:220px;height:220px;background:var(--color-primary);top:45%;left:55%;opacity:.22;animation:cs-float 13s ease-in-out infinite}.coming-soon__floaters{position:absolute;inset:0;z-index:1;pointer-events:none}.coming-soon__floater{position:absolute;color:var(--color-primary);opacity:.5}.coming-soon__floater--a{top:18%;left:16%;animation:cs-bob 6s ease-in-out infinite}.coming-soon__floater--b{top:28%;right:18%;animation:cs-bob 7.5s ease-in-out infinite .6s}.coming-soon__floater--c{bottom:24%;left:22%;animation:cs-bob 6.8s ease-in-out infinite .3s}.coming-soon__floater--d{bottom:20%;right:20%;animation:cs-bob 8s ease-in-out infinite .9s}.coming-soon__inner{position:relative;z-index:2;max-width:640px;display:flex;flex-direction:column;align-items:center}.coming-soon__badge-ring{position:relative;width:120px;height:120px;margin-bottom:28px;display:flex;align-items:center;justify-content:center}.coming-soon__badge{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-on-accent-color);background:var(--color-primary);box-shadow:0 14px 34px color-mix(in srgb,var(--color-primary) 45%,transparent);animation:cs-pulse 2.6s ease-in-out infinite}.coming-soon__orbit{position:absolute;inset:0;border-radius:50%;border:2px dashed color-mix(in srgb,var(--color-primary) 45%,transparent)}.coming-soon__orbit--1{animation:cs-spin 14s linear infinite}.coming-soon__orbit--2{inset:-14px;border-style:dotted;opacity:.5;animation:cs-spin 20s linear infinite reverse}.coming-soon__eyebrow{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 14%,transparent);padding:6px 16px;border-radius:30px;margin-bottom:16px}.coming-soon__exam{font-family:var(--font-family-heading, inherit);font-size:clamp(2.4rem,6vw,3.6rem);font-weight:800;line-height:1.05;color:var(--color-primary);margin-bottom:8px}.coming-soon__title{font-family:var(--font-family-heading, inherit);font-size:clamp(1.4rem,3.5vw,2rem);font-weight:700;color:var(--color-text-primary);margin:0 0 14px}.coming-soon__message{font-size:1.02rem;line-height:1.7;color:var(--color-text-secondary);max-width:540px;margin:0 0 28px}.coming-soon__progress{width:240px;height:8px;border-radius:20px;background:color-mix(in srgb,var(--color-primary) 16%,transparent);overflow:hidden;margin-bottom:32px}.coming-soon__progress-bar{display:block;width:40%;height:100%;border-radius:20px;background:var(--color-primary);animation:cs-progress 1.9s ease-in-out infinite}.coming-soon__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.coming-soon__btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;border:1.5px solid transparent;transition:transform .15s ease,filter .15s ease,background .15s ease}.coming-soon__btn--primary{background:var(--color-primary);color:var(--text-on-accent-color)}.coming-soon__btn--primary:hover{transform:translateY(-2px);filter:brightness(1.06)}.coming-soon__btn--ghost{background:transparent;border-color:var(--color-border, var(--color-primary));color:var(--color-text-primary)}.coming-soon__btn--ghost:hover{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}@keyframes cs-float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(20px,-24px) scale(1.06)}}@keyframes cs-bob{0%,to{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}@keyframes cs-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes cs-spin{to{transform:rotate(360deg)}}@keyframes cs-progress{0%{transform:translate(-120%)}to{transform:translate(360%)}}@media (prefers-reduced-motion: reduce){.coming-soon *,.coming-soon *:before,.coming-soon *:after{animation:none!important}}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background-color:var(--color-background);color:var(--color-text-primary);font-family:var(--font-family-main);transition:background-color var(--transition-speed),color var(--transition-speed)}.auth-card{background-color:var(--color-surface);padding:2.5rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);width:100%;max-width:400px;text-align:center}.auth-card__title{font-size:2rem;font-weight:700;margin-bottom:.5rem;color:var(--color-primary)}.auth-card__subtitle{font-size:1rem;color:var(--color-text-secondary);margin-bottom:2rem}.auth-form .form-group{margin-bottom:1.5rem;text-align:left}.auth-form label{display:block;font-size:.9rem;font-weight:500;margin-bottom:.5rem;color:var(--color-text-primary)}.password-input-wrapper{position:relative;display:flex;align-items:center}.password-input-wrapper input{width:100%;padding-right:2.75rem!important}.password-toggle-btn{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;cursor:pointer;color:var(--color-text-secondary);display:flex;align-items:center;line-height:1;transition:color .2s}.password-toggle-btn:hover{color:var(--color-primary)}.forgot-password-link{text-align:right;margin-top:.4rem}.forgot-password-link a{font-size:.82rem;color:var(--color-primary);text-decoration:none}.forgot-password-link a:hover{text-decoration:underline}.auth-form input[type=text],.auth-form input[type=email],.auth-form input[type=password]{width:100%;padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--border-radius);background-color:var(--color-background);color:var(--color-text-primary);font-size:1rem;transition:border-color var(--transition-speed),background-color var(--transition-speed)}.auth-form input[type=text]:focus,.auth-form input[type=email]:focus,.auth-form input[type=password]:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.2)}.auth-form input.error{border-color:var(--color-error, #ef4444);box-shadow:0 0 0 2px #ef444433}.error-message{color:var(--color-error, #ef4444);font-size:.8rem;margin-top:.25rem;line-height:1.4}.error-message div{margin-bottom:.25rem}.error-message div:last-child{margin-bottom:0}.auth-form__button{width:100%;padding:.75rem 1rem;border:none;border-radius:var(--border-radius);background-color:var(--color-primary);color:#fff;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color var(--transition-speed),transform var(--transition-speed);margin-top:1rem}.auth-form__button:hover{background-color:var(--color-primary-hover);transform:translateY(-2px)}.auth-form__button:disabled{background-color:var(--color-border);cursor:not-allowed;transform:none}.auth-link{margin-top:1.5rem;font-size:.9rem;color:var(--color-text-secondary)}.auth-link a{color:var(--color-primary);text-decoration:none;font-weight:600}.auth-link a:hover{text-decoration:underline}.auth-error-message{color:var(--color-error);font-size:.9rem;margin-top:1rem}.auth-success-message{color:var(--color-success, #10b981);font-size:.9rem;margin-top:1rem;background-color:#10b9811a;padding:.75rem;border-radius:var(--border-radius);border:1px solid rgba(16,185,129,.2)}.auth-page-root{background-color:#37314b;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px}.auth-page-root .auth-card{background-color:#262231;border:1px solid rgba(255,255,255,.07);box-shadow:0 24px 64px #0006;text-align:left}.auth-logo-mark{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#5f45a9 0%,#7c3aed 100%);display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;margin:0 auto 20px;box-shadow:0 8px 28px #7c3aed66;font-family:"Noto Serif JP",serif;font-weight:700;letter-spacing:-1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.auth-page-title{font-size:1.5rem;font-weight:700;color:#f1f5f9;text-align:center;margin:0 0 6px}.auth-page-subtitle{font-size:.875rem;color:#ffffff80;text-align:center;margin:0 0 24px;line-height:1.6}.auth-error-box{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(233,69,96,.12);border:1px solid rgba(233,69,96,.3);border-radius:8px;color:#fc7f94;font-size:.875rem;margin-bottom:12px;line-height:1.4;flex-shrink:0}.auth-error-box svg{flex-shrink:0}.auth-back-link{display:inline-flex;align-items:center;gap:6px;color:#ffffff73;font-size:.875rem;text-decoration:none;transition:color .2s;margin-top:18px;cursor:pointer;width:100%;justify-content:center}.auth-back-link:hover{color:#fffc}.auth-btn-inner{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%}@keyframes auth-spin{to{transform:rotate(360deg)}}.auth-spin{animation:auth-spin .75s linear infinite;display:block}.auth-result{text-align:center;padding:8px 0 4px}.auth-result__icon-wrap{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px}.auth-result__icon-wrap--success{background:rgba(16,185,129,.14);color:#34d399}.auth-result__icon-wrap--error{background:rgba(233,69,96,.12);color:#fc7f94}.auth-result__title{font-size:1.15rem;font-weight:700;color:#f1f5f9;margin:0 0 8px}.auth-result__body{color:#ffffff8c;font-size:.875rem;line-height:1.6;margin:0 0 6px}.auth-result__hint{color:#ffffff59;font-size:.8rem;margin:0 0 20px}.auth-verifying{text-align:center;padding:28px 0}.auth-verifying__spinner{width:52px;height:52px;border-radius:50%;border:3px solid rgba(124,58,237,.2);border-top-color:#7c3aed;animation:auth-spin .85s linear infinite;margin:0 auto 16px}.auth-verifying__text{color:#ffffff80;font-size:.875rem}.auth-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 28px;background:linear-gradient(135deg,#5f45a9,#7c3aed);color:#fff;border-radius:8px;font-size:.9rem;font-weight:600;text-decoration:none;transition:opacity .2s,transform .2s;cursor:pointer;margin-top:6px}.auth-cta-btn:hover{opacity:.92;transform:translateY(-1px)}.auth-page-root .auth-form input[type=text],.auth-page-root .auth-form input[type=email],.auth-page-root .auth-form input[type=password]{background-color:#ffffff0f;border-color:#ffffff1a;color:#f1f5f9}.auth-page-root .auth-form input::-moz-placeholder{color:#ffffff4d}.auth-page-root .auth-form input::placeholder{color:#ffffff4d}.auth-page-root .auth-form input:focus{border-color:#7c3aedb3;box-shadow:0 0 0 3px #7c3aed2e}.auth-page-root .auth-form label{color:#ffffffb3}.auth-page-root .auth-form__button{background:linear-gradient(135deg,#5f45a9,#7c3aed);color:#fff;font-size:.95rem}.auth-page-root .auth-form__button:hover:not(:disabled){background:linear-gradient(135deg,#7c3aed,#6d28d9);transform:translateY(-1px)}.auth-page-root .auth-form__button:disabled{background:rgba(124,58,237,.35);cursor:not-allowed}.auth-page-root .password-toggle-btn{color:#fff6}.auth-page-root .password-toggle-btn:hover{color:#fffc}.app-toast-container{position:fixed;top:24px;right:24px;z-index:var(--z-toast, 500);display:flex;flex-direction:column;gap:10px;max-width:400px;min-width:320px;pointer-events:none}.app-toast{display:flex;align-items:flex-start;padding:14px 16px;border-radius:var(--radius-md, 12px);color:#fff;transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .35s cubic-bezier(.4,0,.2,1);opacity:0;transform:translate(120%);position:relative;overflow:hidden;pointer-events:auto;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 8px 32px #00000026,0 2px 8px #0000001a}.app-toast-visible{opacity:1;transform:translate(0)}.app-toast-hidden{opacity:0;transform:translate(120%)}.app-toast-success{background:linear-gradient(135deg,#059669 0%,#10b981 100%);border-left:3px solid rgba(255,255,255,.4)}.app-toast-error{background:linear-gradient(135deg,#dc2626 0%,#ef4444 100%);border-left:3px solid rgba(255,255,255,.4)}.app-toast-warning{background:linear-gradient(135deg,#d97706 0%,#f59e0b 100%);border-left:3px solid rgba(255,255,255,.4)}.app-toast-info{background:linear-gradient(135deg,#2563eb 0%,#3b82f6 100%);border-left:3px solid rgba(255,255,255,.4)}.app-toast-icon{width:26px;height:26px;min-width:26px;margin-right:12px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.2);flex-shrink:0}.app-toast-content{flex:1;padding-top:3px}.app-toast-content p{margin:0;font-size:var(--text-sm, .875rem);line-height:1.5;font-weight:500;color:#fff}.app-toast-close{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;padding:0;margin-left:12px;display:flex;align-items:center;justify-content:center;width:24px;height:24px;min-width:24px;border-radius:50%;margin-top:1px;flex-shrink:0;transition:background var(--transition-fast, .12s ease),transform var(--transition-fast, .12s ease)}.app-toast-close:hover{background:rgba(255,255,255,.3);transform:scale(1.1)}.app-toast-close:focus-visible{outline:2px solid rgba(255,255,255,.8);outline-offset:1px}.app-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:rgba(255,255,255,.45);border-radius:0 0 0 var(--radius-md, 12px);animation:app-toast-progress-shrink linear forwards}@keyframes app-toast-progress-shrink{0%{width:100%}to{width:0%}}.app-toast:hover .app-toast-progress{animation-play-state:paused}@media (max-width: 480px){.app-toast-container{top:12px;right:12px;left:12px;max-width:none;min-width:unset}.app-toast{width:100%;border-radius:var(--radius-sm, 8px)}}.xp-notifications{position:fixed;top:20px;right:20px;z-index:1000;display:flex;flex-direction:column;gap:12px;max-width:350px}.xp-notification{display:flex;align-items:center;gap:12px;padding:16px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 4px 12px #00000026;animation:slideInRight .3s ease-out;position:relative;overflow:hidden}.xp-notification:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--primary-color)}.xp-notification--xp-gain{border-left-color:#22c55e}.xp-notification--xp-gain:before{background:#22c55e}.xp-notification--xp-gain .xp-notification__icon{color:#22c55e}.xp-notification--level-up{border-left-color:#f59e0b}.xp-notification--level-up:before{background:#f59e0b}.xp-notification--level-up .xp-notification__icon{color:#f59e0b}.xp-notification--achievement{border-left-color:#8b5cf6}.xp-notification--achievement:before{background:#8b5cf6}.xp-notification--achievement .xp-notification__icon{color:#8b5cf6}.xp-notification__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--color-background)}.xp-notification__content{flex:1;min-width:0}.xp-notification__message{margin:0;font-size:14px;font-weight:500;color:var(--text-color);line-height:1.4}.xp-notification__close{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:50%;background:transparent;color:var(--secondary-text-color);cursor:pointer;transition:all .2s ease}.xp-notification__close:hover{background:var(--color-border);color:var(--text-color)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}[data-theme=dark] .xp-notification{box-shadow:0 4px 12px #0000004d}@media (max-width: 768px){.xp-notifications{top:10px;right:10px;left:10px;max-width:none}.xp-notification{padding:12px;gap:8px}.xp-notification__icon{width:28px;height:28px}.xp-notification__message{font-size:13px}.xp-notification__close{width:20px;height:20px}}.badge-summary-card{position:fixed;bottom:24px;right:24px;z-index:1100;width:320px;background:var(--card-bg);border:1.5px solid var(--card-border);border-radius:14px;box-shadow:0 8px 32px #0000002e;overflow:hidden;animation:slideUp .35s cubic-bezier(.34,1.56,.64,1)}.badge-summary-card__header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 8px;border-bottom:1px solid var(--card-border)}.badge-summary-card__title{font-size:.85rem;font-weight:700;color:#4caf50;text-transform:uppercase;letter-spacing:.5px}.badge-summary-card__close{background:none;border:none;font-size:1.2rem;color:var(--secondary-text-color);cursor:pointer;padding:0 4px;line-height:1;border-radius:4px;transition:color .15s}.badge-summary-card__close:hover{color:var(--text-color)}.badge-summary-card__body{display:flex;align-items:center;gap:12px;padding:12px 14px}.badge-summary-card__icons{display:flex;align-items:center;gap:4px;flex-shrink:0}.badge-summary-card__icon{font-size:1.8rem;animation:badgePop .4s cubic-bezier(.34,1.56,.64,1)}.badge-summary-card__more{font-size:.75rem;font-weight:700;color:var(--secondary-text-color);background:var(--bg-primary-app);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.badge-summary-card__names{flex:1;font-size:.85rem;font-weight:500;color:var(--text-color);line-height:1.35}.badge-summary-card__points{font-size:.8rem;font-weight:700;color:#4caf50;background:rgba(76,175,80,.1);padding:2px 8px;border-radius:4px;flex-shrink:0}.badge-summary-card__footer{position:relative;padding:8px 14px 12px;display:flex;align-items:center;justify-content:flex-end}.badge-summary-card__action{background:none;border:none;font-size:.82rem;font-weight:600;color:var(--primary-color, #4f46e5);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}.badge-summary-card__action:hover{opacity:.8}.badge-summary-card__progress-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,#4CAF50,#8BC34A);transform-origin:left;animation:shrinkWidth linear forwards;animation-duration:inherit}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes badgePop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes shrinkWidth{0%{width:100%}to{width:0%}}@media (max-width: 480px){.badge-summary-card{left:12px;right:12px;width:auto;bottom:16px}}.eb-container{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:2rem}.eb-card{background:var(--color-surface, #fff);border:1px solid rgba(239,68,68,.3);border-radius:20px;padding:2.5rem 2rem;max-width:440px;width:100%;text-align:center;box-shadow:0 4px 24px #ef444414}.eb-icon{width:48px;height:48px;color:#ef4444;margin:0 auto 1rem;display:block}.eb-title{font-size:1.375rem;font-weight:700;color:var(--color-text-primary, #1f2937);margin:0 0 .5rem}.eb-subtitle{color:var(--color-text-secondary, #6b7280);font-size:.9375rem;line-height:1.6;margin:0 0 1.5rem}.eb-detail{text-align:left;background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:.75rem;margin-bottom:1.5rem;font-size:.8125rem}.eb-detail pre{white-space:pre-wrap;word-break:break-all;margin:.5rem 0 0;color:#dc2626;font-family:monospace}.eb-actions{display:flex;gap:.75rem;justify-content:center}.eb-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.625rem 1.25rem;border-radius:10px;font-size:.9375rem;font-weight:600;cursor:pointer;border:none;transition:opacity .15s;min-height:44px}.eb-btn:hover{opacity:.85}.eb-btn-primary{background:#3b82f6;color:#fff}.eb-btn-secondary{background:var(--color-border, #f3f4f6);color:var(--color-text-primary, #374151)}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-09fdaf57b55d5b911d8b0d8748bb86a3.woff2) format("woff2");font-weight:100;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-d8ed13913401341d423cb4c1eb5116bc.woff2) format("woff2");font-weight:100;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-f9dc27a106380481933e9f72c0c9715c.woff2) format("woff2");font-weight:100;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-605354226e44a5bf975079764612f55b.woff2) format("woff2");font-weight:200;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-0ec18ba9d3851351c01937eecbcb43de.woff2) format("woff2");font-weight:200;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-bcb7418247f746650321e0805df16f36.woff2) format("woff2");font-weight:200;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-c692405d0447ee5a40b9f81b6a75aa63.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-f09c464a30efd69094dd45e7cde59079.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-8fd4d0fec94d0a91e7638106fb77397d.woff2) format("woff2");font-weight:300;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-f0b8aae97d7f7da0d783595a5cd98a4e.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-de4e3359f5d3d37400f3275bb140dc8f.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-68f87cc2a634b629cf9fd73f0536eefa.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-7fdc7245c7b21ed078966dff884a02a6.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-0b3c60361f3847c8603e1ba0fde69ef3.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-9660adbb7f400da34fde76c8dada93cb.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-16f48e26c5495c56f8497f84aa0f67aa.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-f3baa9d0824a7f8e1c3564f5ad1c2fe7.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-1ac8a27b096db0cab48d09b17149ab97.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-7519a8cfb41708306d9214ef1de9a429.woff2) format("woff2");font-weight:100;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-4bf7352c3d9e441a3361e1a572031fe2.woff2) format("woff2");font-weight:100;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-fe006d97a6c623b43c9a38faa5ff6db7.woff2) format("woff2");font-weight:100;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-b964de54ccf05fcb1cb85cbe6b2430fa.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-3d35d59dda15c3f8b991d099623855fd.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-988b9bb9cd245ee11b6ba0a8eabd96d1.woff2) format("woff2");font-weight:200;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-6180e57a684d8c859fd192b9bd0c8fe3.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-ee45cfb53ec4c5d537f80c1dc1cd8255.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-d507be144e345d803899b1ba88334a1d.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-b1a8f4e0242af152307da5e6adeaa89b.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-899e75b3ff80b2bcbabb91a2a5d11911.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-d06d2c3d514ec14dfb9fd4e5ffd6cbb2.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-a0076503d32416910cfde5253087daa9.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-250df628fd802411d30dde5cee065383.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-164f5d3b328e46b681be74357d874ba5.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-b60f605508a23e18fda7899f6c3651ae.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-ca95f88b37a02fa14b07d7531dd32972.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-eb61fdb93ab1d8182cc11d5e5c105f35.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-bb837e37c22bb23f381960bc26b66d02.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-f8788fc4c7f30438e2f6093b03415af2.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Be Vietnam Pro;src:url(/src/assets/fonts/Be%20Vietnam%20Pro-fd992239bea5ab536ddde867bf021d28.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@keyframes progressGlow{0%{box-shadow:0 2px 8px #27ae6066}to{box-shadow:0 2px 12px #27ae6099,0 0 20px #27ae604d}}@keyframes progressPulse{0%,to{transform:scaleY(1)}50%{transform:scaleY(1.1)}}@keyframes progressShimmer{0%{left:-100%}to{left:100%}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes answerShake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes answerPop{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}.lesson-container{display:flex;flex-direction:column;width:100%;height:100vh;background-color:var(--bg-color);color:var(--text-color);font-family:Be Vietnam Pro,sans-serif}.lesson-container.light{--bg-color: #FAF3E0;--text-color: #5A4C43;--accent-color: #6A8E7F;--text-on-accent-color: #FFFFFF;--secondary-text-color: #8A7F78;--primary-color: #6A8E7F;--primary-color-light: #6A8E7F;--bg-primary-app: #F2EADF;--primary-rgb: 106, 142, 127;--accent-rgb: 106, 142, 127;--accent-text: #4d6b5e;--card-bg: rgba(255, 255, 255, .75);--card-border: rgba(106, 142, 127, .25);--card-shadow: 0 4px 24px rgba(90, 76, 67, .1);--card-hover-shadow: 0 8px 40px rgba(90, 76, 67, .18);--surface-glow: rgba(106, 142, 127, .1);--sidebar-gradient: linear-gradient(180deg, #F2EADF 0%, #F2EADF 100%);--logo-bg: rgba(255, 255, 255, .9);--logo-text: #3d562d;--nav-active-bg: rgba(106, 142, 127, .12);--skeleton-base: rgba(90, 76, 67, .08);--skeleton-shine: rgba(255, 255, 255, .5);--color-success: #7eb137;--color-success-bg: rgba(126, 177, 55, .12);--color-danger: rgb(187, 75, 66);--color-danger-bg: rgba(187, 75, 66, .1);--color-warning: #F5A623;--color-warning-bg: rgba(245, 166, 35, .12);--color-info: #4A9EFF;--color-info-bg: rgba(74, 158, 255, .12);--color-primary: #6A8E7F;--color-primary-rgb: 106, 142, 127;--color-primary-hover: #557a6c;--color-secondary: #6B8CBA;--color-text-primary: #5A4C43;--color-text-secondary: #8A7F78;--color-background: #FAF3E0;--color-surface: rgba(255, 255, 255, .85);--color-border: rgba(106, 142, 127, .25);--color-error: rgb(187, 75, 66);--color-error-hover: #c0392b;--color-white: #FFFFFF;--input-bg: rgba(255, 255, 255, .9);--input-border: rgba(106, 142, 127, .35);--input-border-focus: #6A8E7F;--input-text: #5A4C43;--input-placeholder: #8A7F78;--input-shadow-focus: 0 0 0 3px rgba(106, 142, 127, .18);--badge-default-bg: rgba(106, 142, 127, .15);--badge-default-text: #6A8E7F}.lesson-container.dark{--bg-color: #313F57;--text-color: #FFFFFF;--accent-color: #F8D673;--text-on-accent-color: #313F57;--secondary-text-color: #BDBDBD;--primary-color: #F8D673;--primary-color-light: #F8D673;--bg-primary-app: #313F57;--primary-rgb: 248, 214, 115;--accent-rgb: 248, 214, 115;--accent-text: #F8D673;--card-bg: rgba(255, 255, 255, .04);--card-border: rgba(248, 214, 115, .18);--card-shadow: 0 4px 24px rgba(0, 0, 0, .25);--card-hover-shadow: 0 8px 40px rgba(0, 0, 0, .35);--surface-glow: rgba(248, 214, 115, .06);--sidebar-gradient: linear-gradient(180deg, #2A3749 0%, #313F57 100%);--logo-bg: rgba(0, 0, 0, .2);--logo-text: #f3ead4;--nav-active-bg: rgba(248, 214, 115, .1);--skeleton-base: rgba(255, 255, 255, .07);--skeleton-shine: rgba(255, 255, 255, .13);--color-success: #7eb137;--color-success-bg: rgba(126, 177, 55, .15);--color-danger: #e07068;--color-danger-bg: rgba(187, 75, 66, .18);--color-warning: #F5A623;--color-warning-bg: rgba(245, 166, 35, .15);--color-info: #4A9EFF;--color-info-bg: rgba(74, 158, 255, .15);--color-primary: #F8D673;--color-primary-rgb: 248, 214, 115;--color-primary-hover: #f9dc8a;--color-secondary: #9F7AEA;--color-text-primary: #FFFFFF;--color-text-secondary: #BDBDBD;--color-background: #313F57;--color-surface: rgba(255, 255, 255, .06);--color-border: rgba(248, 214, 115, .18);--color-error: #e07068;--color-error-hover: #FC8181;--color-white: #FFFFFF;--input-bg: rgba(255, 255, 255, .05);--input-border: rgba(248, 214, 115, .25);--input-border-focus: #F8D673;--input-text: #FFFFFF;--input-placeholder: #BDBDBD;--input-shadow-focus: 0 0 0 3px rgba(248, 214, 115, .18);--badge-default-bg: rgba(248, 214, 115, .15);--badge-default-text: #F8D673}.header-top{display:flex;justify-content:center;align-items:center;padding:.75rem 1rem;top:0;left:0;right:0;z-index:100;box-shadow:var(--box-shadow)}.header-top .progress{width:95%;height:.5rem;border-radius:.25rem}.header-top .progress .progress-bar{background-color:var(--color-primary);transition:width .5s ease-in-out}.question-step{flex-direction:column;display:flex;justify-content:center;align-items:center;padding:2rem}.question-step h2{font-size:var(--text-3xl, 1.875rem);font-weight:700;line-height:1.2;margin-bottom:1.5rem}.question-step h3{font-size:var(--text-2xl, 1.5rem);font-weight:600;line-height:1.3;margin-bottom:1rem}.theory-header{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:2rem;color:var(--color-primary)}.theory-header .theory-title{font-size:2rem;font-weight:700;text-align:center}.theory-content-blocks{display:flex;flex-direction:column;gap:1.5rem;max-width:800px;width:100%}.theory-content-block{background-color:var(--color-surface);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--box-shadow);color:var(--color-text-primary)}.theory-content-block p{font-size:1rem;line-height:1.6}.section-title{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;font-weight:600;margin-bottom:1rem;color:var(--color-primary)}.vocabulary-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--color-border)}.vocabulary-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.vocabulary-item{transition:all .2s ease;display:flex;flex-direction:column;align-items:flex-start;padding:1.5rem;border-radius:var(--border-radius);background-color:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--box-shadow);position:relative;min-height:180px}.vocabulary-item:hover{transform:translateY(-5px);box-shadow:0 12px 24px #0003;border-color:var(--color-primary)}.vocabulary-item__japanese-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem;width:100%}.vocabulary-item__japanese{font-size:1.75rem;font-weight:700;color:var(--color-text-primary);line-height:1.2}.vocabulary-item__audio-button{background:none;border:none;cursor:pointer;padding:.6rem;border-radius:50%;transition:background-color .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.vocabulary-item__audio-button:hover{background-color:rgba(var(--color-primary-rgb),.2)}.vocabulary-item__audio-button .lucide{color:var(--color-primary);width:28px;height:28px}.vocabulary-item__romaji{font-size:1.1rem;color:var(--color-text-secondary);margin-bottom:.75rem}.vocabulary-item__vietnamese{font-size:1.2rem;font-weight:600;color:var(--color-primary);margin-bottom:1rem}.vocabulary-item__usage{font-size:.95rem;color:var(--color-text-secondary);font-style:italic;line-height:1.6;border-top:1px dashed var(--color-border);padding-top:1rem;margin-top:auto;width:100%}.grammar-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--color-border)}.grammar-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1rem}.grammar-item{background-color:var(--color-background);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--box-shadow);border:1px solid var(--color-border)}.grammar-pattern{font-weight:700;color:var(--color-primary);font-size:1.1rem;margin-bottom:.5rem}.grammar-explanation{color:var(--color-text-primary);font-size:1rem;margin-bottom:.5rem}.grammar-examples{list-style:disc;padding-left:1.5rem;margin-top:.75rem;color:var(--color-text-secondary);font-size:.9rem}.grammar-examples li{margin-bottom:.25rem}.level-introduction{animation:fadeIn .5s ease-in-out;max-width:800px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.lesson-scrollable-content{position:relative;padding-top:70px;padding-bottom:100px;height:100vh;width:100%;max-width:1000px;margin:0 auto}.footer-lession{position:fixed;bottom:0;left:0;right:0;padding:1rem;background-color:var(--bg-color);border-top:1px solid rgba(var(--text-color),.1);z-index:100}.footer-lession .content-footer{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto}.footer-lession .content-footer .status-resutl-question{display:flex;justify-content:center;align-items:center}.footer-lession .content-footer .status-resutl-question .text{margin-left:1rem;font-weight:500}.xp-progress{height:8px;border-radius:4px;background:linear-gradient(to right,#4f46e5,#8b5cf6);transition:width .5s ease}.radio{display:flex;flex-direction:column;width:100%}.radio .content-question{display:flex;justify-content:center;align-items:center;justify-content:space-around;width:650px}.radio .content-question.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.radio .content-question .options{width:150px;border:2px solid rgb(55,70,79);border-radius:8px;padding:15px;transition:all .2s ease}.radio .content-question .options:hover{cursor:pointer;background-color:#37464f33}.radio .content-question .options.selected{border:2px solid var(--primary-color)}.radio .content-question .options.selected.success{border:2px solid var(--primary-color-light)!important}.radio .content-question .options.selected.isFail{border:2px solid rgb(187,75,66)!important}.radio .content-question .options img{width:92px;height:160px;margin-bottom:10px}.radio .content-question .options ruby{font-size:19px}.radio .content-question .options ruby rt{font-size:16px;color:rgba(var(--text-color),.6);padding-top:10px}.card-word-japan,.card-word-english{display:flex;flex-direction:column;width:100%;width:600px;align-items:flex-start}.card-word-japan .content-question,.card-word-english .content-question{display:flex;justify-content:center;align-items:center;align-items:baseline}.card-word-japan .content-question .options,.card-word-english .content-question .options,.card-word-japan .content-question .options ruby,.card-word-english .content-question .options ruby{font-size:19px}.card-word-japan .content-question .options ruby rt,.card-word-english .content-question .options ruby rt{font-size:16px;color:rgba(var(--text-color),.6);padding-top:10px}.card-word-japan .answer-choice,.card-word-english .answer-choice{border-top:2px solid rgb(55,70,79);border-bottom:2px solid rgb(55,70,79);height:67px;width:100%;margin:20px 0}.card-word-japan .answer-choice ul,.card-word-english .answer-choice ul{margin:5px 0}.card-word-japan .answer-choice .list-answer,.card-word-english .answer-choice .list-answer{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;list-style-type:none;touch-action:none}.card-word-japan .answer-choice .list-answer li,.card-word-english .answer-choice .list-answer li{border:2px solid rgb(55,70,79);border-radius:8px;padding:10px;font-size:19px;color:var(--text-color);margin-right:10px;cursor:pointer;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.card-word-japan .answer-choice .list-answer li ruby,.card-word-english .answer-choice .list-answer li ruby{font-size:19px}.card-word-japan .answer-choice .list-answer li ruby rt,.card-word-english .answer-choice .list-answer li ruby rt{font-size:16px;color:rgba(var(--text-color),.6);padding-top:10px}.card-word-japan .content-answer,.card-word-english .content-answer{margin:0 auto}.card-word-japan .content-answer .list-answer,.card-word-english .content-answer .list-answer{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;list-style-type:none;touch-action:none}.card-word-japan .content-answer .list-answer li,.card-word-english .content-answer .list-answer li{border:2px solid rgb(55,70,79);border-radius:8px;padding:10px;font-size:19px;color:var(--text-color);margin-right:10px;cursor:pointer}.card-word-japan .content-answer .list-answer li.selected,.card-word-english .content-answer .list-answer li.selected{background-color:#37464f;color:#37464f;cursor:default}.card-word-japan .content-answer .list-answer li.selected rt,.card-word-english .content-answer .list-answer li.selected rt{color:#37464f}.card-word-japan .content-answer .list-answer li ruby,.card-word-english .content-answer .list-answer li ruby{font-size:19px}.card-word-japan .content-answer .list-answer li ruby rt,.card-word-english .content-answer .list-answer li ruby rt{font-size:16px;color:rgba(var(--text-color),.6);padding-top:10px}.card-word-english .content-question{border:2px solid rgb(55,70,79);border-radius:8px;padding:10px 14px}.card-word-japan .answer-choice{height:80px!important}.card-word-japan .content-answer .list-answer li{padding:10px 15px}.mapping-word{display:flex;flex-direction:column;width:100%;align-items:flex-start}.mapping-word .content-answer{display:flex;justify-content:space-between;align-items:center;width:650px}.mapping-word .content-answer .list-answer,.mapping-word .content-answer .list-answer2.options2{display:block}.mapping-word .content-answer .list-answer li,.mapping-word .content-answer .list-answer2.options2 li{display:flex;justify-content:space-between;align-items:center;width:250px;margin-bottom:15px;border:2px solid rgb(55,70,79);border-radius:8px;font-size:19px;color:var(--text-color);margin-right:10px;cursor:pointer;transition:border 1s ease}.mapping-word .content-answer .list-answer li .index-answer,.mapping-word .content-answer .list-answer2.options2 li .index-answer{font-size:15px;color:rgba(var(--text-color),.6);border:2px solid rgba(var(--text-color),.6);padding:2px 8px;border-radius:8px;transition:color 1s ease}.mapping-word .content-answer .list-answer li ruby,.mapping-word .content-answer .list-answer2.options2 li ruby{font-size:19px;transition:color 1s ease}.mapping-word .content-answer .list-answer li ruby rt,.mapping-word .content-answer .list-answer2.options2 li ruby rt{font-size:16px;color:rgba(var(--text-color),.6);padding-top:10px;transition:color 1s ease}.mapping-word .content-answer .list-answer li{padding:6px 10px}.mapping-word .content-answer .list-answer2.options2 li{padding:17px 10px}.mapping-word .active-mapping,.mapping-word .active-mapping .index-answer{border:2px solid var(--primary-color)!important;background-color:#37464f33!important}.mapping-word .active-mapping,.mapping-word .active-mapping .index-answer,.mapping-word .active-mapping ruby,.mapping-word .active-mapping ruby rt{color:var(--primary-color)!important}.mapping-word .success-option,.mapping-word .success-option .index-answer{border:2px solid rgb(55,70,79)!important;cursor:default;transition:border .5s ease}.mapping-word .success-option,.mapping-word .success-option .index-answer,.mapping-word .success-option ruby,.mapping-word .success-option ruby rt{color:#37464f!important;transition:color .5s ease}.mapping-word .error-option,.mapping-word .error-option .index-answer{border:2px solid rgb(187,75,66)!important;transition:border 1s ease}.mapping-word .error-option,.mapping-word .error-option .index-answer,.mapping-word .error-option ruby,.mapping-word .error-option ruby rt{color:#bb4b42!important;transition:color 1s ease}.mapping-word .success-message,.mapping-word .error-message{margin-top:1rem;font-weight:600;font-size:1.1rem}.mapping-word .zoom-in{animation:zoomIn .5s forwards}@keyframes zoomIn{0%{transform:scale(.9)}50%{transform:scale(1.1)}to{transform:scale(1)}}.question-container{display:flex;flex-direction:column;width:100%}.question-container.light{--bg-color: #FAF3E0;--text-color: #5A4C43;--accent-color: #6A8E7F;--text-on-accent-color: #FFFFFF;--secondary-text-color: #8A7F78;--primary-color: #6A8E7F;--primary-color-light: #6A8E7F;--bg-primary-app: #F2EADF;--primary-rgb: 106, 142, 127;--accent-rgb: 106, 142, 127;--accent-text: #4d6b5e;--card-bg: rgba(255, 255, 255, .75);--card-border: rgba(106, 142, 127, .25);--card-shadow: 0 4px 24px rgba(90, 76, 67, .1);--card-hover-shadow: 0 8px 40px rgba(90, 76, 67, .18);--surface-glow: rgba(106, 142, 127, .1);--sidebar-gradient: linear-gradient(180deg, #F2EADF 0%, #F2EADF 100%);--logo-bg: rgba(255, 255, 255, .9);--logo-text: #3d562d;--nav-active-bg: rgba(106, 142, 127, .12);--skeleton-base: rgba(90, 76, 67, .08);--skeleton-shine: rgba(255, 255, 255, .5);--color-success: #7eb137;--color-success-bg: rgba(126, 177, 55, .12);--color-danger: rgb(187, 75, 66);--color-danger-bg: rgba(187, 75, 66, .1);--color-warning: #F5A623;--color-warning-bg: rgba(245, 166, 35, .12);--color-info: #4A9EFF;--color-info-bg: rgba(74, 158, 255, .12);--color-primary: #6A8E7F;--color-primary-rgb: 106, 142, 127;--color-primary-hover: #557a6c;--color-secondary: #6B8CBA;--color-text-primary: #5A4C43;--color-text-secondary: #8A7F78;--color-background: #FAF3E0;--color-surface: rgba(255, 255, 255, .85);--color-border: rgba(106, 142, 127, .25);--color-error: rgb(187, 75, 66);--color-error-hover: #c0392b;--color-white: #FFFFFF;--input-bg: rgba(255, 255, 255, .9);--input-border: rgba(106, 142, 127, .35);--input-border-focus: #6A8E7F;--input-text: #5A4C43;--input-placeholder: #8A7F78;--input-shadow-focus: 0 0 0 3px rgba(106, 142, 127, .18);--badge-default-bg: rgba(106, 142, 127, .15);--badge-default-text: #6A8E7F}.question-container.dark{--bg-color: #313F57;--text-color: #FFFFFF;--accent-color: #F8D673;--text-on-accent-color: #313F57;--secondary-text-color: #BDBDBD;--primary-color: #F8D673;--primary-color-light: #F8D673;--bg-primary-app: #313F57;--primary-rgb: 248, 214, 115;--accent-rgb: 248, 214, 115;--accent-text: #F8D673;--card-bg: rgba(255, 255, 255, .04);--card-border: rgba(248, 214, 115, .18);--card-shadow: 0 4px 24px rgba(0, 0, 0, .25);--card-hover-shadow: 0 8px 40px rgba(0, 0, 0, .35);--surface-glow: rgba(248, 214, 115, .06);--sidebar-gradient: linear-gradient(180deg, #2A3749 0%, #313F57 100%);--logo-bg: rgba(0, 0, 0, .2);--logo-text: #f3ead4;--nav-active-bg: rgba(248, 214, 115, .1);--skeleton-base: rgba(255, 255, 255, .07);--skeleton-shine: rgba(255, 255, 255, .13);--color-success: #7eb137;--color-success-bg: rgba(126, 177, 55, .15);--color-danger: #e07068;--color-danger-bg: rgba(187, 75, 66, .18);--color-warning: #F5A623;--color-warning-bg: rgba(245, 166, 35, .15);--color-info: #4A9EFF;--color-info-bg: rgba(74, 158, 255, .15);--color-primary: #F8D673;--color-primary-rgb: 248, 214, 115;--color-primary-hover: #f9dc8a;--color-secondary: #9F7AEA;--color-text-primary: #FFFFFF;--color-text-secondary: #BDBDBD;--color-background: #313F57;--color-surface: rgba(255, 255, 255, .06);--color-border: rgba(248, 214, 115, .18);--color-error: #e07068;--color-error-hover: #FC8181;--color-white: #FFFFFF;--input-bg: rgba(255, 255, 255, .05);--input-border: rgba(248, 214, 115, .25);--input-border-focus: #F8D673;--input-text: #FFFFFF;--input-placeholder: #BDBDBD;--input-shadow-focus: 0 0 0 3px rgba(248, 214, 115, .18);--badge-default-bg: rgba(248, 214, 115, .15);--badge-default-text: #F8D673}.question-container h3{font-size:var(--text-2xl, 1.5rem);font-weight:600;line-height:1.3;color:var(--text-color);margin:20px 0}@keyframes btn-spin{to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.btn:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn:disabled,.btn[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn{position:relative}.btn--primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.btn--primary:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn--primary:disabled,.btn--primary[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn--primary{background-color:var(--accent-color);color:var(--text-on-accent-color);box-shadow:0 2px 8px rgba(var(--accent-rgb),.3)}.btn--primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 4px 16px rgba(var(--accent-rgb),.4);transform:translateY(-1px)}.btn--primary:active:not(:disabled){transform:translateY(0);filter:brightness(.96);box-shadow:0 1px 4px rgba(var(--accent-rgb),.25)}.btn--secondary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.btn--secondary:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn--secondary:disabled,.btn--secondary[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn--secondary{background-color:transparent;color:var(--accent-color);border:1.5px solid var(--accent-color)}.btn--secondary:hover:not(:disabled){background-color:rgba(var(--accent-rgb),.1);transform:translateY(-1px)}.btn--secondary:active:not(:disabled){transform:translateY(0);background-color:rgba(var(--accent-rgb),.15)}.btn--ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.btn--ghost:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn--ghost:disabled,.btn--ghost[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn--ghost{background-color:transparent;color:var(--text-color);border:none}.btn--ghost:hover:not(:disabled){background-color:rgba(var(--accent-rgb),.08)}.btn--outline{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.btn--outline:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn--outline:disabled,.btn--outline[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn--outline{background-color:transparent;color:var(--accent-color);border:1.5px solid var(--accent-color)}.btn--outline:hover:not(:disabled){background-color:rgba(var(--accent-rgb),.1);transform:translateY(-1px)}.btn--outline:active:not(:disabled){transform:translateY(0);background-color:rgba(var(--accent-rgb),.15)}.btn--success{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.btn--success:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn--success:disabled,.btn--success[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn--success{background-color:var(--color-success);color:#fff;box-shadow:0 2px 8px #7eb1374d}.btn--success:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 4px 16px #7eb13766;transform:translateY(-1px)}.btn--success:active:not(:disabled){transform:translateY(0);filter:brightness(.96)}.btn--danger{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.btn--danger:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn--danger:disabled,.btn--danger[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn--danger{background-color:var(--color-danger);color:#fff;box-shadow:0 2px 8px #bb4b424d}.btn--danger:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 4px 16px #bb4b4266;transform:translateY(-1px)}.btn--danger:active:not(:disabled){transform:translateY(0);filter:brightness(.96)}.btn--warning{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.btn--warning:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.btn--warning:disabled,.btn--warning[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.btn--warning{background-color:var(--color-warning);color:#fff}.btn--warning:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.btn--sm{padding:.375rem .875rem;font-size:var(--text-sm, .875rem);min-height:36px;border-radius:var(--radius-xs, 4px)}.btn--md{padding:.625rem 1.25rem;font-size:var(--text-sm, .875rem);min-height:var(--touch-target, 44px)}.btn--lg{padding:.75rem 1.75rem;font-size:var(--text-base, 1rem);min-height:52px;border-radius:var(--radius-md, 12px)}.btn--full{width:100%;justify-content:center}.btn--icon{padding:0;width:var(--touch-target, 44px);height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);flex-shrink:0}.btn--icon.btn--sm{width:36px;height:36px}.btn--icon.btn--lg{width:52px;height:52px;border-radius:var(--radius-md, 12px)}.btn--loading{cursor:not-allowed;pointer-events:none}.btn--loading .btn__label{opacity:0}.btn--loading .btn__spinner{position:absolute}.btn--disabled,.btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none;transform:none!important;box-shadow:none!important;filter:none!important}.btn__spinner{display:inline-block;width:1em;height:1em;border:2px solid transparent;border-top-color:currentColor;border-right-color:currentColor;border-radius:50%;animation:btn-spin .7s linear infinite;flex-shrink:0}.btn__label{display:inline-flex;align-items:center;gap:var(--space-2, 8px);transition:opacity var(--transition-fast, .12s ease)}@keyframes loading-spin{to{transform:rotate(360deg)}}.loading-fullscreen{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--space-6, 24px);min-height:100vh;background-color:var(--bg-color);color:var(--text-color)}.loading-fullscreen--admin{background-color:#2c3e50;color:#fff}.loading-fullscreen--admin .loading-fullscreen__spinner{border-top-color:#e74c3c}.loading-fullscreen__spinner{display:block;width:48px;height:48px;border:4px solid transparent;border-top-color:var(--accent-color);border-right-color:var(--accent-color);border-radius:50%;animation:loading-spin .9s linear infinite}.loading-fullscreen__text{text-align:center}.loading-fullscreen__title{margin:0 0 var(--space-1, 4px);font-family:var(--font-family-heading, "Baloo 2", sans-serif);font-size:var(--text-xl, 1.25rem);font-weight:700}.loading-fullscreen__message{margin:0;font-size:var(--text-base, 1rem);color:var(--secondary-text-color)}.loading-inline{display:flex;justify-content:center;align-items:center;gap:var(--space-2, 8px);padding:var(--space-4, 16px);color:var(--secondary-text-color)}.loading-inline__spinner{display:inline-block;width:20px;height:20px;border:2.5px solid transparent;border-top-color:var(--accent-color);border-right-color:var(--accent-color);border-radius:50%;animation:loading-spin .8s linear infinite;flex-shrink:0}.loading-inline__message{font-size:var(--text-sm, .875rem)}.loading-overlay{display:flex;justify-content:center;align-items:center;position:absolute;inset:0;background:rgba(255,255,255,.6);backdrop-filter:blur(2px);z-index:var(--z-overlay, 300);border-radius:inherit}.loading-overlay__spinner{display:block;width:32px;height:32px;border:3px solid transparent;border-top-color:var(--accent-color);border-right-color:var(--accent-color);border-radius:50%;animation:loading-spin .8s linear infinite}.error-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--space-3, 12px);padding:var(--space-12, 48px) var(--space-6, 24px);text-align:center}.error-state--compact{padding:var(--space-6, 24px);gap:var(--space-2, 8px)}.error-state__icon{width:48px;height:48px;color:#bb4b42;flex-shrink:0}.error-state--compact .error-state__icon{width:32px;height:32px}.error-state__title{margin:0;font-size:var(--text-xl, 1.25rem);font-weight:700;color:var(--text-color)}.error-state__description{margin:0;font-size:var(--text-sm, .875rem);color:var(--secondary-text-color);max-width:36ch;line-height:1.6}.error-state__retry{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.error-state__retry:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.error-state__retry:disabled,.error-state__retry[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.error-state__retry{background-color:transparent;color:var(--accent-color);border:1.5px solid var(--accent-color)}.error-state__retry:hover:not(:disabled){background-color:rgba(var(--accent-rgb),.1);transform:translateY(-1px)}.error-state__retry:active:not(:disabled){transform:translateY(0);background-color:rgba(var(--accent-rgb),.15)}.error-state__retry{display:inline-flex;align-items:center;gap:var(--space-2, 8px);margin-top:var(--space-2, 8px);cursor:pointer}.empty-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--space-3, 12px);padding:var(--space-12, 48px) var(--space-6, 24px);text-align:center}.empty-state__icon{width:56px;height:56px;color:var(--secondary-text-color);opacity:.5;flex-shrink:0}.empty-state__title{margin:0;font-size:var(--text-xl, 1.25rem);font-weight:700;color:var(--text-color)}.empty-state__description{margin:0;font-size:var(--text-sm, .875rem);color:var(--secondary-text-color);max-width:40ch;line-height:1.6}.empty-state__action{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.empty-state__action:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.empty-state__action:disabled,.empty-state__action[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.empty-state__action{background-color:var(--accent-color);color:var(--text-on-accent-color);box-shadow:0 2px 8px rgba(var(--accent-rgb),.3)}.empty-state__action:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 4px 16px rgba(var(--accent-rgb),.4);transform:translateY(-1px)}.empty-state__action:active:not(:disabled){transform:translateY(0);filter:brightness(.96);box-shadow:0 1px 4px rgba(var(--accent-rgb),.25)}.empty-state__action{margin-top:var(--space-2, 8px);cursor:pointer}.skeleton-lesson-card{background-color:var(--card-bg, var(--bg-color));border:1px solid var(--card-border, transparent);border-radius:var(--radius-lg, 16px);box-shadow:var(--card-shadow, 0 4px 24px rgba(0, 0, 0, .1));transition:box-shadow var(--transition-base, .2s ease),transform var(--transition-base, .2s ease);display:flex;flex-direction:column;gap:var(--space-3, 12px);padding:var(--space-6, 24px)}.skeleton-lesson-card__badge{height:12px}.skeleton-lesson-card__title{height:20px;margin-top:var(--space-1, 4px)}.skeleton-lesson-card__sub{height:14px}.skeleton-lesson-card__progress{height:8px;margin-top:var(--space-2, 8px);border-radius:var(--radius-full, 9999px)}.skeleton-lesson-card__btn{height:44px;margin-top:auto;border-radius:var(--radius-sm, 8px)}.card{background-color:var(--card-bg, var(--bg-color));border:1px solid var(--card-border, transparent);border-radius:var(--radius-lg, 16px);padding:var(--space-6, 24px);box-shadow:var(--card-shadow, 0 4px 24px rgba(0, 0, 0, .1));transition:box-shadow var(--transition-base, .2s ease),transform var(--transition-base, .2s ease)}.card--hoverable{background-color:var(--card-bg, var(--bg-color));border:1px solid var(--card-border, transparent);border-radius:var(--radius-lg, 16px);padding:var(--space-6, 24px);box-shadow:var(--card-shadow, 0 4px 24px rgba(0, 0, 0, .1));transition:box-shadow var(--transition-base, .2s ease),transform var(--transition-base, .2s ease);cursor:pointer}.card--hoverable:hover{box-shadow:var(--card-hover-shadow, 0 8px 40px rgba(0, 0, 0, .18));transform:translateY(-3px)}.card--flat{background-color:var(--card-bg, var(--bg-color));border:1px solid var(--card-border, transparent);border-radius:var(--radius-lg, 16px);padding:var(--space-6, 24px);box-shadow:var(--card-shadow, 0 4px 24px rgba(0, 0, 0, .1));transition:box-shadow var(--transition-base, .2s ease),transform var(--transition-base, .2s ease);box-shadow:none;border:1px solid var(--card-border)}.card--glass{background-color:var(--card-bg, var(--bg-color));border:1px solid var(--card-border, transparent);border-radius:var(--radius-lg, 16px);padding:var(--space-6, 24px);box-shadow:var(--card-shadow, 0 4px 24px rgba(0, 0, 0, .1));transition:box-shadow var(--transition-base, .2s ease),transform var(--transition-base, .2s ease);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.card--sm{padding:var(--space-3, 12px);border-radius:var(--radius-md, 12px)}.card--lg{padding:var(--space-8, 32px);border-radius:var(--radius-xl, 24px)}.card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-4, 16px);padding-bottom:var(--space-4, 16px);border-bottom:1px solid var(--card-border)}.card__title{margin:0;font-size:var(--text-lg, 1.125rem);font-weight:700;color:var(--text-color)}.card__subtitle{margin:var(--space-1, 4px) 0 0;font-size:var(--text-sm, .875rem);color:var(--secondary-text-color)}.card__body{flex:1}.card__footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-4, 16px);padding-top:var(--space-4, 16px);border-top:1px solid var(--card-border)}.card__actions{display:flex;gap:var(--space-2, 8px);align-items:center}.lesson-card{background-color:var(--card-bg, var(--bg-color));border:1px solid var(--card-border, transparent);border-radius:var(--radius-lg, 16px);padding:var(--space-6, 24px);box-shadow:var(--card-shadow, 0 4px 24px rgba(0, 0, 0, .1));transition:box-shadow var(--transition-base, .2s ease),transform var(--transition-base, .2s ease);cursor:pointer}.lesson-card:hover{box-shadow:var(--card-hover-shadow, 0 8px 40px rgba(0, 0, 0, .18));transform:translateY(-3px)}.lesson-card{display:flex;flex-direction:column;gap:var(--space-3, 12px);min-height:180px}.lesson-card__badge{width:60px;height:12px}.lesson-card__title{height:20px;margin-top:var(--space-1, 4px)}.lesson-card__sub{height:14px}.lesson-card__progress{height:8px;margin-top:auto;border-radius:var(--radius-full, 9999px);background-color:var(--card-border);overflow:hidden}.lesson-card__progress-fill{height:100%;background-color:var(--accent-color);border-radius:inherit;transition:width var(--transition-slow, .35s ease)}.stat-card{background-color:var(--card-bg, var(--bg-color));border:1px solid var(--card-border, transparent);border-radius:var(--radius-lg, 16px);padding:var(--space-6, 24px);box-shadow:var(--card-shadow, 0 4px 24px rgba(0, 0, 0, .1));transition:box-shadow var(--transition-base, .2s ease),transform var(--transition-base, .2s ease);display:flex;align-items:center;gap:var(--space-4, 16px)}.stat-card__icon{width:48px;height:48px;border-radius:var(--radius-md, 12px);background-color:rgba(var(--accent-rgb),.12);color:var(--accent-color);display:flex;justify-content:center;align-items:center;flex-shrink:0}.stat-card__value{font-size:var(--text-2xl, 1.5rem);font-weight:800;color:var(--text-color);line-height:1}.stat-card__label{font-size:var(--text-sm, .875rem);color:var(--secondary-text-color);margin-top:var(--space-1, 4px)}.form-group{display:flex;flex-direction:column;gap:var(--space-2, 8px);width:100%}.form-group+.form-group{margin-top:var(--space-4, 16px)}.form-label{font-size:var(--text-sm, .875rem);font-weight:600;color:var(--text-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.form-label--required:after{content:" *";color:var(--color-danger)}.form-input,.form-textarea,.form-select{width:100%;padding:.625rem .875rem;min-height:var(--touch-target, 44px);background-color:var(--input-bg);border:1.5px solid var(--input-border);border-radius:var(--radius-sm, 8px);color:var(--input-text);font-size:var(--text-sm, .875rem);font-family:inherit;line-height:1.5;transition:border-color var(--transition-fast, .12s ease),box-shadow var(--transition-fast, .12s ease),background-color var(--transition-base, .2s ease)}.form-input::-moz-placeholder,.form-textarea::-moz-placeholder,.form-select::-moz-placeholder{color:var(--input-placeholder)}.form-input::placeholder,.form-textarea::placeholder,.form-select::placeholder{color:var(--input-placeholder)}.form-input:hover:not(:disabled):not(:focus),.form-textarea:hover:not(:disabled):not(:focus),.form-select:hover:not(:disabled):not(:focus){border-color:var(--accent-color)}.form-input:focus,.form-textarea:focus,.form-select:focus{outline:none;border-color:var(--input-border-focus);box-shadow:var(--input-shadow-focus)}.form-input:disabled,.form-textarea:disabled,.form-select:disabled{opacity:.5;cursor:not-allowed;background-color:var(--skeleton-base)}.form-input--error,.form-textarea--error,.form-select--error{border-color:var(--color-danger)!important;box-shadow:0 0 0 3px #bb4b4226!important}.form-input--success,.form-textarea--success,.form-select--success{border-color:var(--color-success)!important}.form-textarea{min-height:100px;resize:vertical}.form-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .875rem center;padding-right:2.5rem;cursor:pointer}.form-input-wrapper{position:relative;width:100%}.form-input-wrapper .form-input{padding-left:2.5rem}.form-input-wrapper__icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--secondary-text-color);width:18px;height:18px;pointer-events:none}.form-input-wrapper__action{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;padding:0;color:var(--secondary-text-color);cursor:pointer;display:flex;align-items:center}.form-input-wrapper__action:hover{color:var(--text-color)}.form-input-wrapper__action:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px;border-radius:var(--radius-xs, 4px)}.form-helper{font-size:var(--text-xs, .75rem);color:var(--secondary-text-color);line-height:1.4}.form-error{font-size:var(--text-xs, .75rem);color:var(--color-danger);display:flex;align-items:center;gap:var(--space-1, 4px);line-height:1.4;animation:form-error-in .15s ease}@keyframes form-error-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.form-check{display:flex;align-items:center;gap:var(--space-2, 8px);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.form-check__input{width:18px;height:18px;accent-color:var(--accent-color);cursor:pointer;flex-shrink:0}.form-check__label{font-size:var(--text-sm, .875rem);color:var(--text-color);line-height:1.4}.form-actions{display:flex;gap:var(--space-3, 12px);align-items:center;justify-content:flex-end;margin-top:var(--space-6, 24px)}.form-actions--full{flex-direction:column}.form-actions--full .btn{width:100%}.badge{display:inline-flex;align-items:center;gap:var(--space-1, 4px);padding:.2em .65em;border-radius:var(--radius-full, 9999px);font-size:var(--text-xs, .75rem);font-weight:600;line-height:1.4;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--badge-default-bg);color:var(--badge-default-text)}.badge--success{background-color:var(--color-success-bg);color:var(--color-success)}.badge--danger{background-color:var(--color-danger-bg);color:var(--color-danger)}.badge--warning{background-color:var(--color-warning-bg);color:var(--color-warning)}.badge--info{background-color:var(--color-info-bg);color:var(--color-info)}.badge--neutral{background-color:rgba(var(--accent-rgb),.1);color:var(--secondary-text-color)}.badge--solid{background-color:var(--accent-color);color:var(--text-on-accent-color)}.badge--sm{font-size:.6875rem;padding:.1em .5em}.badge--lg{font-size:var(--text-sm, .875rem);padding:.3em .9em}.badge--dot:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background-color:currentColor;flex-shrink:0}.badge__icon{width:12px;height:12px;flex-shrink:0}.level-badge{display:flex;justify-content:center;align-items:center;width:36px;height:36px;border-radius:var(--radius-full, 9999px);background:linear-gradient(135deg,var(--accent-color),rgba(var(--accent-rgb),.7));color:var(--text-on-accent-color);font-size:var(--text-sm, .875rem);font-weight:800;box-shadow:0 2px 8px rgba(var(--accent-rgb),.35);flex-shrink:0}.level-badge--sm{width:28px;height:28px;font-size:var(--text-xs, .75rem)}.level-badge--lg{width:52px;height:52px;font-size:var(--text-xl, 1.25rem)}.xp-tag{display:inline-flex;align-items:center;gap:var(--space-1, 4px);padding:.2em .6em;border-radius:var(--radius-full, 9999px);background-color:rgba(var(--accent-rgb),.15);color:var(--accent-color);font-size:var(--text-xs, .75rem);font-weight:700}.xp-tag:before{content:"⚡";font-size:.65rem}.admin-table-wrapper{width:100%;overflow-x:auto;border-radius:var(--radius-lg, 16px);border:1px solid var(--admin-border-subtle, #1e293b);scrollbar-width:thin;scrollbar-color:var(--card-border) transparent}.admin-table-wrapper::-webkit-scrollbar{width:6px}.admin-table-wrapper::-webkit-scrollbar-track{background:transparent}.admin-table-wrapper::-webkit-scrollbar-thumb{background-color:var(--card-border);border-radius:var(--radius-full, 9999px)}.admin-table{width:100%;border-collapse:collapse;font-size:var(--text-sm, .875rem);color:var(--admin-text-primary, #f1f5f9)}.admin-table thead{background-color:var(--admin-bg-elevated, #1f2937);position:sticky;top:0;z-index:1}.admin-table th{padding:12px 16px;text-align:left;font-size:var(--text-xs, .75rem);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--admin-text-secondary, #94a3b8);border-bottom:1px solid var(--admin-border-subtle, #1e293b);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}.admin-table th.sortable{cursor:pointer}.admin-table th.sortable:hover{color:var(--admin-text-primary, #f1f5f9)}.admin-table td{padding:12px 16px;border-bottom:1px solid var(--admin-border-subtle, #1e293b);vertical-align:middle;color:var(--admin-text-primary, #f1f5f9)}.admin-table tbody tr{transition:background-color var(--transition-fast, .12s ease)}.admin-table tbody tr:hover{background-color:var(--admin-bg-hover, #252d3d)}.admin-table tbody tr:last-child td{border-bottom:none}.admin-table .col-id{width:60px;color:var(--admin-text-muted, #64748b)}.admin-table .col-actions{width:120px;text-align:right;white-space:nowrap}.admin-table .col-status{width:100px}.admin-table .col-date{width:140px;white-space:nowrap;color:var(--admin-text-secondary, #94a3b8)}.admin-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--radius-full, 9999px);font-size:var(--text-xs, .75rem);font-weight:600;white-space:nowrap}.admin-badge--active,.admin-badge--success{background:var(--admin-success-light, rgba(16, 185, 129, .12));color:var(--admin-success, #10b981);border:1px solid var(--admin-success-border, #34d399)}.admin-badge--inactive,.admin-badge--error{background:var(--admin-error-light, rgba(239, 68, 68, .12));color:var(--admin-error, #ef4444);border:1px solid var(--admin-error-border, #f87171)}.admin-badge--pending,.admin-badge--warning{background:var(--admin-warning-light, rgba(245, 158, 11, .12));color:var(--admin-warning, #f59e0b);border:1px solid var(--admin-warning-border, #fbbf24)}.admin-badge--info{background:var(--admin-info-light, rgba(59, 130, 246, .12));color:var(--admin-info, #3b82f6);border:1px solid rgba(59,130,246,.35)}.admin-badge--default{background:var(--admin-bg-elevated, #1f2937);color:var(--admin-text-secondary, #94a3b8);border:1px solid var(--admin-border-medium, #334155)}.admin-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.admin-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}.admin-btn{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:var(--radius-xs, 4px);border:none;cursor:pointer;transition:all var(--transition-fast, .12s ease);flex-shrink:0}.admin-btn--edit{background:var(--admin-accent-light, rgba(6, 182, 212, .12));color:var(--admin-accent, #06b6d4)}.admin-btn--edit:hover{background:var(--admin-accent, #06b6d4);color:#fff}.admin-btn--delete{background:var(--admin-error-light, rgba(239, 68, 68, .12));color:var(--admin-error, #ef4444)}.admin-btn--delete:hover{background:var(--admin-error, #ef4444);color:#fff}.admin-btn--view{background:var(--admin-primary-light, rgba(139, 92, 246, .12));color:var(--admin-primary, #8b5cf6)}.admin-btn--view:hover{background:var(--admin-primary, #8b5cf6);color:#fff}.admin-btn:focus-visible{outline:2px solid var(--admin-border-focus, #8b5cf6);outline-offset:1px}.admin-form{display:flex;flex-direction:column;gap:var(--space-4, 16px)}.admin-form__group{display:flex;flex-direction:column;gap:var(--space-2, 8px)}.admin-form__label{font-size:var(--text-sm, .875rem);font-weight:600;color:var(--admin-text-secondary, #94a3b8)}.admin-form__label--required:after{content:" *";color:var(--admin-error, #ef4444)}.admin-form__input,.admin-form__textarea,.admin-form__select{width:100%;padding:.625rem .875rem;min-height:42px;background-color:var(--admin-bg-input, #0f1420);border:1px solid var(--admin-border-medium, #334155);border-radius:var(--radius-sm, 8px);color:var(--admin-text-primary, #f1f5f9);font-size:var(--text-sm, .875rem);font-family:inherit;transition:border-color var(--transition-fast, .12s ease),box-shadow var(--transition-fast, .12s ease)}.admin-form__input::-moz-placeholder,.admin-form__textarea::-moz-placeholder,.admin-form__select::-moz-placeholder{color:var(--admin-text-muted, #64748b)}.admin-form__input::placeholder,.admin-form__textarea::placeholder,.admin-form__select::placeholder{color:var(--admin-text-muted, #64748b)}.admin-form__input:hover:not(:disabled):not(:focus),.admin-form__textarea:hover:not(:disabled):not(:focus),.admin-form__select:hover:not(:disabled):not(:focus){border-color:var(--admin-border-strong, #475569)}.admin-form__input:focus,.admin-form__textarea:focus,.admin-form__select:focus{outline:none;border-color:var(--admin-border-focus, #8b5cf6);box-shadow:0 0 0 3px #8b5cf62e}.admin-form__input:disabled,.admin-form__textarea:disabled,.admin-form__select:disabled{opacity:.5;cursor:not-allowed}.admin-form__textarea{min-height:100px;resize:vertical}.admin-form__error{font-size:var(--text-xs, .75rem);color:var(--admin-error, #ef4444);display:flex;align-items:center;gap:4px}.admin-form__actions{display:flex;gap:var(--space-3, 12px);justify-content:flex-end;padding-top:var(--space-2, 8px)}.admin-card{background:var(--admin-bg-card, #1a1f2e);border:1px solid var(--admin-border-subtle, #1e293b);border-radius:var(--radius-lg, 16px);overflow:hidden}.admin-card__header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4, 16px) var(--space-6, 24px);border-bottom:1px solid var(--admin-border-subtle, #1e293b)}.admin-card__title{font-size:var(--text-base, 1rem);font-weight:700;color:var(--admin-text-primary, #f1f5f9);margin:0}.admin-card__body{padding:var(--space-6, 24px)}.admin-loading{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:400px;gap:var(--space-4, 16px)}@keyframes adminSpin{to{transform:rotate(360deg)}}.admin-loading-spinner{width:40px;height:40px;border:3px solid var(--admin-border-subtle, #1e293b);border-top-color:var(--admin-primary, #8b5cf6);border-radius:50%;animation:adminSpin .8s linear infinite}.admin-loading p{color:var(--admin-text-secondary, #94a3b8);font-size:var(--text-sm, .875rem)}.admin-empty{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--space-3, 12px);padding:var(--space-12, 48px) var(--space-6, 24px);text-align:center;color:var(--admin-text-secondary, #94a3b8)}.admin-empty__icon{opacity:.4}.admin-empty__title{font-size:var(--text-lg, 1.125rem);font-weight:700;color:var(--admin-text-primary, #f1f5f9);margin:0}.admin-empty__desc{font-size:var(--text-sm, .875rem);margin:0;max-width:36ch;line-height:1.6}.admin-pagination{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4, 16px) var(--space-6, 24px);border-top:1px solid var(--admin-border-subtle, #1e293b);font-size:var(--text-sm, .875rem);color:var(--admin-text-secondary, #94a3b8);gap:var(--space-4, 16px);flex-wrap:wrap}.admin-pagination__pages{display:flex;align-items:center;gap:4px}.admin-pagination__btn{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:var(--radius-xs, 4px);border:1px solid var(--admin-border-medium, #334155);background:transparent;color:var(--admin-text-secondary, #94a3b8);cursor:pointer;transition:all var(--transition-fast, .12s ease);font-size:var(--text-sm, .875rem)}.admin-pagination__btn:hover:not(:disabled){border-color:var(--admin-primary, #8b5cf6);color:var(--admin-primary, #8b5cf6)}.admin-pagination__btn:disabled{opacity:.4;cursor:not-allowed}.admin-pagination__btn--active{background:var(--admin-primary, #8b5cf6);border-color:var(--admin-primary, #8b5cf6);color:#fff}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes app-spin{to{transform:rotate(360deg)}}.app-loading{position:fixed;inset:0;background-color:#1a1a2e;display:none;align-items:center;justify-content:center;z-index:9999;flex-direction:column;gap:2rem}.app-loading.is-visible{display:flex}.app-loading__spinner{width:56px;height:56px;border:4px solid rgba(255,255,255,.12);border-top-color:var(--accent-color, #F8D673);border-radius:50%;animation:app-spin .9s linear infinite}.app-loading__text{text-align:center;color:#fff}.app-loading__text h2{margin:0 0 .375rem;font-size:1.375rem;font-weight:700}.app-loading__text p{margin:0;color:#fff9;font-size:.9375rem}@keyframes answer-shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes answer-pop{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}.answer-option--incorrect{animation:answer-shake var(--duration-slow, .3s) ease}.answer-option--correct{animation:answer-pop var(--duration-normal, .2s) ease}.radio-question__title{color:var(--text-color);font-size:24px;margin-bottom:40px;text-align:center;font-weight:700}.radio-question__options-container{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;width:100%;max-width:900px}.radio-option{background-color:var(--bg-primary-app);border:2px solid var(--primary-color);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;width:200px;color:var(--text-color);min-height:120px;justify-content:center}.radio-option__image{width:100%;height:160px;-o-object-fit:cover;object-fit:cover;border-radius:8px;margin-bottom:15px}.radio-option__text{color:var(--text-color);font-size:20px;text-align:center;font-weight:500}.radio-option__text rt{font-size:14px;color:var(--secondary-text-color);font-weight:400}.radio-option--selected{border-color:var(--primary-color);transform:translateY(-5px);box-shadow:0 10px 20px #0003;background-color:rgba(var(--primary-color),.1)}.radio-option--success{border-color:#7eb137;background-color:#7eb1371a;color:#7eb137}.radio-option--fail{border-color:#bb4b42;background-color:#bb4b421a;color:#bb4b42}.card-word-question{width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center;font-family:Be Vietnam Pro,sans-serif}.card-word-question__title{color:var(--text-color);font-size:24px;margin-bottom:20px;text-align:center}.card-word-question__hint-container{display:flex;align-items:center;justify-content:center;margin-bottom:30px;padding:20px;border-radius:12px;background-color:var(--bg-primary-app);border:2px solid var(--primary-color);min-height:80px}.card-word-question__play-btn{background:none;border:none;cursor:pointer;color:var(--accent-color);margin-right:15px;transition:transform .2s ease}.card-word-question__play-btn:hover{transform:scale(1.1)}.card-word-question__hint-text{font-size:22px;color:var(--text-color);font-weight:500}.card-word-question__hint-text ruby rt{font-size:16px;color:var(--secondary-text-color)}.card-word-question__dropzone{width:100%;min-height:80px;border-bottom:2px solid var(--primary-color);margin-bottom:30px;padding-bottom:10px;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}.card-word-question__word-bank{width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.word-card{background-color:var(--bg-primary-app);padding:12px 20px;border-radius:12px;cursor:pointer;transition:all .2s ease-in-out;border:2px solid var(--primary-color);font-size:18px;color:var(--text-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;position:relative}.word-card[draggable=true]{cursor:grab}.word-card--dragging{opacity:.5;transform:scale(.95)}.word-card:hover{transform:translateY(-3px);border-color:var(--primary-color)}.word-card:hover .word-card__audio-btn{opacity:1;transform:scale(1)}.word-card--selected{opacity:.4;cursor:not-allowed;background-color:var(--color-surface);border-color:transparent}.word-card--selected:hover{transform:none}.word-card ruby rt{font-size:14px;color:var(--secondary-text-color)}.word-card__audio-btn{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border:none;border-radius:50%;background:var(--primary-color);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:all .2s ease;box-shadow:0 2px 6px #0003;z-index:10}.word-card__audio-btn:hover{background:var(--primary-dark-color, #3730a3);transform:scale(1.1)}.word-card__audio-btn:active{transform:scale(.9)}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}.mapping-question{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center;font-family:Be Vietnam Pro,sans-serif}.mapping-question__title{color:var(--text-color);font-size:24px;margin-bottom:40px;text-align:center}.mapping-question__container{display:flex;justify-content:space-between;width:100%;gap:30px}.mapping-question__column{flex:1;display:flex;flex-direction:column;gap:15px}.mapping-card{background-color:var(--bg-primary-app);border:2px solid var(--primary-color);border-radius:12px;padding:15px 20px;cursor:pointer;transition:all .2s ease;color:var(--text-color);font-size:18px;text-align:center}.mapping-card:hover{border-color:var(--primary-color);transform:translateY(-2px)}.mapping-card--selected{border-color:var(--primary-color);background-color:var(--bg-color);transform:scale(1.02)}.mapping-card--correct{border-color:#7eb137;background-color:#7eb13726;color:#7eb137;cursor:default;opacity:.7}.mapping-card--correct:hover{transform:none}.mapping-card--disabled{cursor:default;opacity:.7}.mapping-card--disabled:hover{transform:none;border-color:#374151}.mapping-card--shake{animation:shake .5s ease-in-out}.mapping-card ruby rt{font-size:14px;color:var(--secondary-text-color)}html[data-theme=light]{--bg-color: #FAF3E0;--text-color: #5A4C43;--accent-color: #6A8E7F;--text-on-accent-color: #FFFFFF;--secondary-text-color: #8A7F78;--primary-color: #6A8E7F;--primary-color-light: #6A8E7F;--bg-primary-app: #F2EADF;--primary-rgb: 106, 142, 127;--accent-rgb: 106, 142, 127;--accent-text: #4d6b5e;--card-bg: rgba(255, 255, 255, .75);--card-border: rgba(106, 142, 127, .25);--card-shadow: 0 4px 24px rgba(90, 76, 67, .1);--card-hover-shadow: 0 8px 40px rgba(90, 76, 67, .18);--surface-glow: rgba(106, 142, 127, .1);--sidebar-gradient: linear-gradient(180deg, #F2EADF 0%, #F2EADF 100%);--logo-bg: rgba(255, 255, 255, .9);--logo-text: #3d562d;--nav-active-bg: rgba(106, 142, 127, .12);--skeleton-base: rgba(90, 76, 67, .08);--skeleton-shine: rgba(255, 255, 255, .5);--color-success: #7eb137;--color-success-bg: rgba(126, 177, 55, .12);--color-danger: rgb(187, 75, 66);--color-danger-bg: rgba(187, 75, 66, .1);--color-warning: #F5A623;--color-warning-bg: rgba(245, 166, 35, .12);--color-info: #4A9EFF;--color-info-bg: rgba(74, 158, 255, .12);--color-primary: #6A8E7F;--color-primary-rgb: 106, 142, 127;--color-primary-hover: #557a6c;--color-secondary: #6B8CBA;--color-text-primary: #5A4C43;--color-text-secondary: #8A7F78;--color-background: #FAF3E0;--color-surface: rgba(255, 255, 255, .85);--color-border: rgba(106, 142, 127, .25);--color-error: rgb(187, 75, 66);--color-error-hover: #c0392b;--color-white: #FFFFFF;--input-bg: rgba(255, 255, 255, .9);--input-border: rgba(106, 142, 127, .35);--input-border-focus: #6A8E7F;--input-text: #5A4C43;--input-placeholder: #8A7F78;--input-shadow-focus: 0 0 0 3px rgba(106, 142, 127, .18);--badge-default-bg: rgba(106, 142, 127, .15);--badge-default-text: #6A8E7F}html[data-theme=dark]{--bg-color: #313F57;--text-color: #FFFFFF;--accent-color: #F8D673;--text-on-accent-color: #313F57;--secondary-text-color: #BDBDBD;--primary-color: #F8D673;--primary-color-light: #F8D673;--bg-primary-app: #313F57;--primary-rgb: 248, 214, 115;--accent-rgb: 248, 214, 115;--accent-text: #F8D673;--card-bg: rgba(255, 255, 255, .04);--card-border: rgba(248, 214, 115, .18);--card-shadow: 0 4px 24px rgba(0, 0, 0, .25);--card-hover-shadow: 0 8px 40px rgba(0, 0, 0, .35);--surface-glow: rgba(248, 214, 115, .06);--sidebar-gradient: linear-gradient(180deg, #2A3749 0%, #313F57 100%);--logo-bg: rgba(0, 0, 0, .2);--logo-text: #f3ead4;--nav-active-bg: rgba(248, 214, 115, .1);--skeleton-base: rgba(255, 255, 255, .07);--skeleton-shine: rgba(255, 255, 255, .13);--color-success: #7eb137;--color-success-bg: rgba(126, 177, 55, .15);--color-danger: #e07068;--color-danger-bg: rgba(187, 75, 66, .18);--color-warning: #F5A623;--color-warning-bg: rgba(245, 166, 35, .15);--color-info: #4A9EFF;--color-info-bg: rgba(74, 158, 255, .15);--color-primary: #F8D673;--color-primary-rgb: 248, 214, 115;--color-primary-hover: #f9dc8a;--color-secondary: #9F7AEA;--color-text-primary: #FFFFFF;--color-text-secondary: #BDBDBD;--color-background: #313F57;--color-surface: rgba(255, 255, 255, .06);--color-border: rgba(248, 214, 115, .18);--color-error: #e07068;--color-error-hover: #FC8181;--color-white: #FFFFFF;--input-bg: rgba(255, 255, 255, .05);--input-border: rgba(248, 214, 115, .25);--input-border-focus: #F8D673;--input-text: #FFFFFF;--input-placeholder: #BDBDBD;--input-shadow-focus: 0 0 0 3px rgba(248, 214, 115, .18);--badge-default-bg: rgba(248, 214, 115, .15);--badge-default-text: #F8D673}:root{--bg-color: #313F57;--text-color: #FFFFFF;--accent-color: #F8D673;--text-on-accent-color: #313F57;--secondary-text-color: #BDBDBD;--primary-color: #F8D673;--primary-color-light: #F8D673;--bg-primary-app: #313F57;--primary-rgb: 248, 214, 115;--accent-rgb: 248, 214, 115;--accent-text: #F8D673;--card-bg: rgba(255, 255, 255, .04);--card-border: rgba(248, 214, 115, .18);--card-shadow: 0 4px 24px rgba(0, 0, 0, .25);--card-hover-shadow: 0 8px 40px rgba(0, 0, 0, .35);--surface-glow: rgba(248, 214, 115, .06);--sidebar-gradient: linear-gradient(180deg, #2A3749 0%, #313F57 100%);--logo-bg: rgba(0, 0, 0, .2);--logo-text: #f3ead4;--nav-active-bg: rgba(248, 214, 115, .1);--skeleton-base: rgba(255, 255, 255, .07);--skeleton-shine: rgba(255, 255, 255, .13);--color-success: #7eb137;--color-success-bg: rgba(126, 177, 55, .15);--color-danger: #e07068;--color-danger-bg: rgba(187, 75, 66, .18);--color-warning: #F5A623;--color-warning-bg: rgba(245, 166, 35, .15);--color-info: #4A9EFF;--color-info-bg: rgba(74, 158, 255, .15);--color-primary: #F8D673;--color-primary-rgb: 248, 214, 115;--color-primary-hover: #f9dc8a;--color-secondary: #9F7AEA;--color-text-primary: #FFFFFF;--color-text-secondary: #BDBDBD;--color-background: #313F57;--color-surface: rgba(255, 255, 255, .06);--color-border: rgba(248, 214, 115, .18);--color-error: #e07068;--color-error-hover: #FC8181;--color-white: #FFFFFF;--input-bg: rgba(255, 255, 255, .05);--input-border: rgba(248, 214, 115, .25);--input-border-focus: #F8D673;--input-text: #FFFFFF;--input-placeholder: #BDBDBD;--input-shadow-focus: 0 0 0 3px rgba(248, 214, 115, .18);--badge-default-bg: rgba(248, 214, 115, .15);--badge-default-text: #F8D673;--jlpt-n5: #10b981;--jlpt-n5-dark: #059669;--jlpt-n5-bg: rgba(16, 185, 129, .12);--jlpt-n4: #3b82f6;--jlpt-n4-dark: #2563eb;--jlpt-n4-bg: rgba(59, 130, 246, .12);--jlpt-n3: #f59e0b;--jlpt-n3-dark: #d97706;--jlpt-n3-bg: rgba(245, 158, 11, .12);--jlpt-n2: #8b5cf6;--jlpt-n2-dark: #7c3aed;--jlpt-n2-bg: rgba(139, 92, 246, .12);--jlpt-n1: #ef4444;--jlpt-n1-dark: #dc2626;--jlpt-n1-bg: rgba(239, 68, 68, .12);--color-star: #f59e0b;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-2xl: 32px;--radius-full: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--transition-fast: .12s ease;--transition-base: .2s ease;--transition-slow: .35s ease;--transition-spring: .3s cubic-bezier(.34, 1.56, .64, 1);--duration-fast: .15s;--duration-normal: .2s;--duration-slow: .3s;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--z-dropdown: 100;--z-sticky: 200;--z-overlay: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600;--touch-target: 44px}@keyframes skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.fill-in-blank{width:100%;display:flex;flex-direction:column;align-items:center;color:var(--text-color);font-family:Be Vietnam Pro,sans-serif}.fill-in-blank__title{font-size:24px;margin-bottom:30px}.fill-in-blank__sentence-container{background-color:var(--bg-primary-app);padding:30px;border-radius:15px;margin-bottom:30px;font-size:22px;min-height:80px;display:flex;align-items:center;justify-content:center;width:100%;max-width:800px}.fill-in-blank__blank-space{border-bottom:2px dotted var(--primary-color);min-width:100px;text-align:center;display:inline-block;color:var(--primary-color);font-weight:700;padding:0 10px}.fill-in-blank__options-container{display:flex;flex-wrap:wrap;justify-content:center;gap:15px}.fill-in-blank__option{background-color:var(--bg-primary-app);padding:12px 25px;border-radius:50px;cursor:pointer;transition:all .2s ease-in-out;border:2px solid transparent;font-size:18px;color:var(--text-color)}.fill-in-blank__option:hover{background-color:var(--bg-color);transform:translateY(-2px)}.fill-in-blank__option.selected{border-color:var(--primary-color);background-color:var(--bg-color)}.fill-in-blank__option.success{border-color:#7eb137;background-color:#7eb13733;color:#7eb137}.fill-in-blank__option.fail{border-color:#bb4b42;background-color:#bb4b4233;color:#bb4b42}.radio-question{width:100%;display:flex;flex-direction:column;align-items:center}.radio-question__title{color:var(--text-color);font-size:24px;margin-bottom:40px;text-align:center}.radio-question__options-container{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4, 16px);width:100%;max-width:900px}.radio-question__options-container--no-select{pointer-events:none}.radio-option{background-color:var(--bg-primary-app);border:2px solid var(--primary-color);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;min-width:160px;flex:1 1 160px;max-width:240px;color:var(--text-color)}.radio-option:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0003;border-color:var(--accent-color)}.radio-option--selected{border-color:var(--primary-color);transform:translateY(-5px);box-shadow:0 10px 20px #0003}.radio-option--success{border-color:#7eb137;background-color:#7eb1371a}.radio-option--fail{border-color:#bb4b42;background-color:#bb4b421a}.radio-option__text{color:var(--text-color);font-size:20px;text-align:center}.radio-option__text rt{font-size:14px;color:var(--secondary-text-color)}.fill-in-blank{width:100%;display:flex;flex-direction:column;align-items:center}.mapping-question{width:100%;max-width:800px;display:flex;flex-direction:column;align-items:center}.card-word-question{width:100%;max-width:700px;display:flex;flex-direction:column;align-items:center}.question-step{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;width:100%;min-height:400px}.question-step h2{font-size:2rem;font-weight:700;margin-bottom:1.5rem;color:var(--text-color);text-align:center}.question-step h3{font-size:1.5rem;font-weight:600;margin-bottom:1rem;color:var(--text-color);text-align:center}.question-step .question-container{width:100%;max-width:900px;display:flex;flex-direction:column;align-items:center}.question-step .question-navigation{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:800px;margin-top:2rem;padding:1rem}.question-step .question-navigation button{padding:.75rem 1.5rem;border-radius:8px;border:none;background-color:var(--primary-color);color:#fff;font-weight:600;cursor:pointer;transition:all .2s ease}.question-step .question-navigation button:hover{background-color:var(--accent-color);transform:translateY(-2px)}.question-step .question-navigation button:disabled{background-color:#ccc;cursor:not-allowed;transform:none}*{box-sizing:border-box}body{margin:0;padding:0;font-family:var(--font-family-main, "Be Vietnam Pro", sans-serif);background-color:var(--bg-color);color:var(--text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.success{color:#7eb137!important}.error,.isFail{color:#bb4b42!important}button:focus-visible,[role=button]:focus-visible,a:focus-visible,input[type=checkbox]:focus-visible,input[type=radio]:focus-visible,select:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}html{scroll-behavior:smooth}.button-check-question{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, 8px);padding:.625rem 1.25rem;min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);border:none;cursor:pointer;font-weight:600;font-size:var(--text-sm, .875rem);line-height:1.4;transition:all var(--transition-base, .2s ease);text-decoration:none;white-space:nowrap}.button-check-question:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.button-check-question:disabled,.button-check-question[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}.button-check-question{background-color:var(--accent-color);color:var(--text-on-accent-color);box-shadow:0 2px 8px rgba(var(--accent-rgb),.3)}.button-check-question:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 4px 16px rgba(var(--accent-rgb),.4);transform:translateY(-1px)}.button-check-question:active:not(:disabled){transform:translateY(0);filter:brightness(.96);box-shadow:0 1px 4px rgba(var(--accent-rgb),.25)}.button-check-question{min-height:var(--touch-target, 44px);border-radius:var(--radius-sm, 8px);font-weight:600}.button-check-question.success{background-color:#7eb137!important;box-shadow:0 2px 8px #7eb13759!important}.button-check-question.disabled{background-color:#37464f;cursor:not-allowed;opacity:.5;box-shadow:none}.skeleton{background:var(--skeleton-base, rgba(255, 255, 255, .07));border-radius:var(--radius-sm, 8px);position:relative;overflow:hidden}.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--skeleton-shine, rgba(255, 255, 255, .13)) 50%,transparent 100%);animation:skeleton-shimmer 1.6s ease-in-out infinite}.skeleton{min-height:1em;border-radius:var(--radius-sm, 8px)}.skeleton--text{background:var(--skeleton-base, rgba(255, 255, 255, .07));border-radius:var(--radius-sm, 8px);position:relative;overflow:hidden}.skeleton--text:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--skeleton-shine, rgba(255, 255, 255, .13)) 50%,transparent 100%);animation:skeleton-shimmer 1.6s ease-in-out infinite}.skeleton--text{height:1em;border-radius:var(--radius-xs, 4px)}.skeleton--rounded{background:var(--skeleton-base, rgba(255, 255, 255, .07));border-radius:var(--radius-sm, 8px);position:relative;overflow:hidden}.skeleton--rounded:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--skeleton-shine, rgba(255, 255, 255, .13)) 50%,transparent 100%);animation:skeleton-shimmer 1.6s ease-in-out infinite}.skeleton--rounded{border-radius:var(--radius-lg, 16px)}.skeleton--circle{background:var(--skeleton-base, rgba(255, 255, 255, .07));border-radius:var(--radius-sm, 8px);position:relative;overflow:hidden}.skeleton--circle:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,var(--skeleton-shine, rgba(255, 255, 255, .13)) 50%,transparent 100%);animation:skeleton-shimmer 1.6s ease-in-out infinite}.skeleton--circle{border-radius:var(--radius-full, 9999px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.radioPlay button{color:var(--accent-color);background:none;box-shadow:none;border:none}.section-2 .title,.section-3 .title{color:var(--primary-color);font-size:theme("fontSize.title-desktop","48px")}.theme-text{color:var(--accent-color)}.theme-bg{background-color:var(--accent-color);color:var(--text-on-accent-color)}.radioPlay{margin-right:7px;color:var(--accent-color)}.radioPlay button{color:var(--accent-color);background:none}.button-check-question,.radioPlay button{box-shadow:none;border:none}body #ja{font-family:Noto Sans JP,sans-serif}body #vi{font-family:Be Vietnam Pro,sans-serif}.bg-app-primary{background-color:var(--bg-primary-app)}#root{margin:0 auto;text-align:center}a{text-decoration:none}.mr-10{margin-right:10px}ul li{list-style:none}.height-80vh{height:80vh}.disabled,.disabled:hover{cursor:unset}button.disabled{background-color:#37464f;border:none}button.bg-primary-color{background-color:var(--accent-color);color:var(--text-on-accent-color)}button.success{background-color:var(--color-success, #48BB78)!important}.success{color:var(--color-success, #48BB78)!important}.isFail{color:var(--false)!important}button:hover:not(.disabled):not(.isFail):not(.success).hv-primary-color{filter:brightness(1.1)!important}.root-bg-gray{background-color:#37464f!important;color:#52656d!important}.w-1000{width:1000px}.no-select>*{pointer-events:none!important}.learn-root{background-color:var(--bg-color);width:100%;height:100vh;color:var(--text-color);font-family:Be Vietnam Pro,sans-serif;justify-content:space-between;align-items:start}.r-64px{right:64px}.r-120px{right:120px}.ml-48{margin-left:48px!important}.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.theme-toggle-container{display:flex;justify-content:center;margin:15px 0}.theme-toggle-button{background-color:var(--accent-color);color:var(--text-on-accent-color);border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.theme-toggle-button:hover{transform:scale(1.1);box-shadow:0 0 10px #0003}.theme-toggle-button svg{width:20px;height:20px}:root{--font-family-main: "Be Vietnam Pro", "Noto Sans JP", sans-serif;--font-family-heading: "Baloo 2", "Be Vietnam Pro", sans-serif;--font-family-jp: "Noto Sans JP", "Noto Serif JP", sans-serif}html[lang=vi]{--font-family-main: "Be Vietnam Pro", sans-serif}html[lang=ja]{--font-family-main: "Noto Sans JP", sans-serif}body{font-family:var(--font-family-main);background-color:var(--color-background);color:var(--color-text-primary);line-height:1.6;font-size:1rem;transition:background-color .2s ease,color .2s ease}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);line-height:1.2}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}