:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.left-sidebar{width:256px;border-right:2px solid #e5e5e5;padding:20px 0;position:fixed;left:0;top:0;height:100vh;overflow-y:auto;z-index:100;scrollbar-width:none;-ms-overflow-style:none}.left-sidebar::-webkit-scrollbar{display:none}.logo{padding:0 24px 20px;margin-bottom:20px;border-bottom:2px solid #FF8C42}.logo h1{font-size:32px;font-weight:800;color:#ff6b6b;text-decoration:none;cursor:pointer;transition:all .3s ease;margin:0;text-shadow:1px 1px 0px rgba(255,255,255,.8);font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.logo h1:hover{transform:scale(1.02);color:#ff8c42}.nav-menu{list-style:none;margin:0;padding:0}.nav-item{margin:4px 0}.nav-link{display:flex;align-items:center;padding:12px 24px;color:#ff8c42;text-decoration:none;border-radius:0 24px 24px 0;margin-right:16px;font-size:17px;font-weight:600;transition:all .3s ease;position:relative;min-height:44px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.nav-link:hover{background:linear-gradient(145deg,#ffe4b54d,#ffdab94d);color:#ff6b6b;transform:translate(5px)}.nav-link.active{background:linear-gradient(145deg,#ffe4b5cc,#ffdab999);color:#ff6b6b;border:2px solid #FF8C42;border-right:none;box-shadow:0 4px 12px #ff8c424d}.nav-icon{width:32px;height:32px;margin-right:16px;font-size:20px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .3s ease;flex-shrink:0;box-shadow:0 2px 8px #0003;color:#fff}.nav-link:hover .nav-icon{transform:scale(1.1)}.nav-icon.home{background:linear-gradient(135deg,#ff8c42,#ffd93d)}.nav-icon.vocab{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.nav-icon.library{background:linear-gradient(135deg,#ffb6c1,#ffdab9)}.nav-icon.typing{background:linear-gradient(135deg,#ff8c42,#ffd93d)}.nav-icon.leaderboard{background:linear-gradient(135deg,#ff6b6b,#ffd93d)}.nav-icon.shop{background:linear-gradient(135deg,#ffdab9,#ff6b6b)}.nav-icon.grammar{background:linear-gradient(135deg,#ffd93d,#ffb6c1)}.nav-icon.listening{background:linear-gradient(135deg,#ffb6c1,#ffdab9)}.nav-icon.exam{background:linear-gradient(135deg,#ffb6c1,#ff8c42)}.nav-icon.more{background:linear-gradient(135deg,#ffdab9,#ffe4b5)}@media (max-width: 1024px) and (min-width: 769px){.left-sidebar{width:200px}.nav-link{font-size:15px;padding:10px 20px}.nav-icon{width:28px;height:28px;margin-right:12px;font-size:18px}}@media (max-width: 768px){.left-sidebar{z-index:800;position:fixed!important;inset:auto 0 0!important;width:100%!important;height:55px!important;margin:0!important;padding:0!important;border-right:none;border-top:4px solid #FF6B6B;background:linear-gradient(145deg,#fff8dc,#fffaf0);overflow:hidden!important;border-radius:15px 15px 0 0}.left-sidebar:before,.left-sidebar:after{display:none}.logo{display:none}.nav-menu{display:flex;justify-content:space-around;align-items:center;padding:0!important;margin:0;width:100%;height:100%;box-sizing:border-box}.nav-item{flex:1;min-width:0;max-width:calc(100% / 6);display:flex;justify-content:center;align-items:center;height:100%}.nav-link{flex-direction:column;align-items:center;justify-content:center;padding:6px 2px;margin:0;border-radius:12px;font-size:10px;text-align:center;background:none;border:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .3s ease;height:90%;color:#ff8c42;font-weight:600;width:100%;max-width:55px}.nav-link:hover{background:linear-gradient(145deg,#ffe4b54d,#ffdab94d);transform:translateY(-2px);color:#ff6b6b;box-shadow:0 4px 12px #ff6b6b33}.nav-link.active{background:linear-gradient(145deg,#ffe4b5cc,#ffdab999);border:2px solid #FF8C42;color:#ff6b6b;box-shadow:0 4px 12px #ff8c424d;transform:translateY(-2px)}.nav-link.active:after{display:none}.nav-icon{width:22px;height:22px;margin-right:0;margin-bottom:3px;font-size:13px;border-radius:6px;box-shadow:0 2px 8px #0003;flex-shrink:0}.nav-link:hover .nav-icon{transform:scale(1.05);box-shadow:0 4px 12px #0000004d}}.nav-link:focus{outline:2px solid #FF8C42;outline-offset:2px}.nav-item{animation:slideInLeft .3s ease forwards;opacity:0;transform:translate(-20px)}.nav-item:nth-child(1){animation-delay:.1s}.nav-item:nth-child(2){animation-delay:.15s}.nav-item:nth-child(3){animation-delay:.2s}.nav-item:nth-child(4){animation-delay:.25s}.nav-item:nth-child(5){animation-delay:.3s}.nav-item:nth-child(6){animation-delay:.35s}@keyframes slideInLeft{to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.nav-item{animation:none;opacity:1;transform:none}}@media (max-width: 480px){.left-sidebar{height:55px!important;border-radius:12px 12px 0 0;z-index:800}.nav-link{padding:5px 1px;font-size:9px;max-width:50px}.nav-icon{width:20px;height:20px;font-size:12px;margin-bottom:2px}}@media (prefers-reduced-motion: reduce){.nav-item,.nav-link,.nav-icon{animation:none;transition:none}.nav-item{opacity:1;transform:none}}.notification-dropdown{background:#fff;border:2px solid #e5e5e5;border-radius:16px;box-shadow:0 4px 12px #0000001a;z-index:99999;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .3s ease;overflow:hidden}.notification-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}.notification-dropdown.desktop{position:fixed;width:280px;max-height:320px}.notification-dropdown.mobile{position:fixed!important;top:52px!important;left:12px!important;right:12px!important;width:calc(100vw - 24px)!important;max-width:320px!important;max-height:calc(100vh - 70px)!important;margin:0 auto!important;z-index:99999!important;border:2px solid #e5e5e5!important;border-radius:16px!important}.notification-header{padding:12px 16px;border-bottom:1px solid #e5e5e5;font-size:14px;font-weight:700;color:#3c3c3c;display:flex;justify-content:space-between;align-items:center;background:#fff}.notification-count{background:#ff4b4b;color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px}.notification-list{max-height:240px;overflow-y:auto;overflow-x:hidden;background:#fff}.notification-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #f0f0f0;transition:background .2s;cursor:pointer;position:relative;background:#fff}.notification-item:hover{background:#f8f9ff}.notification-item:last-child{border-bottom:none}.notification-item.unread{background:#f8f9ff;border-left:3px solid #1cb0f6}.notification-item.unread:hover{background:#f0f4ff}.notification-item.read{opacity:.8}.notification-item.read:hover{opacity:1;background:#f8f9ff}.notification-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}.notification-icon.achievement{background:#ffc800}.notification-icon.streak{background:#ff9600}.notification-icon.lesson{background:#58cc02}.notification-content{flex:1;min-width:0}.notification-title{font-size:12px;font-weight:600;color:#3c3c3c;margin-bottom:2px;word-wrap:break-word;overflow-wrap:break-word}.notification-time{font-size:10px;color:#777;word-wrap:break-word;overflow-wrap:break-word}.notification-item button{background:none!important;border:none!important;color:#999!important;font-size:14px!important;cursor:pointer!important;padding:3px!important;border-radius:4px!important;transition:background .2s!important;flex-shrink:0!important}.notification-item button:hover{background:#f0f0f0!important}.notification-header button{background:none!important;border:none!important;color:#1cb0f6!important;font-size:11px!important;font-weight:600!important;cursor:pointer!important;padding:3px 6px!important;border-radius:4px!important;transition:background .2s!important}.notification-header button:hover{background:#f0f8ff!important}.notification-list::-webkit-scrollbar{width:4px}.notification-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}.notification-list::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}.notification-list::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.notification-item{animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}.notification-empty{padding:30px 16px;text-align:center;color:#777;font-size:13px}.notification-empty-icon{font-size:28px;margin-bottom:10px;opacity:.5}.notification-dropdown .notification-list>div[style*="padding: 20px"]{padding:16px!important;font-size:13px!important}@media (max-width: 768px){.notification-dropdown.mobile{top:50px!important;left:10px!important;right:10px!important;width:calc(100vw - 20px)!important;max-width:300px!important}.notification-list{max-height:calc(100vh - 120px)}.notification-header{padding:10px 14px;font-size:13px}.notification-item{padding:8px 14px;gap:8px}.notification-icon{width:22px;height:22px;font-size:11px}.notification-title{font-size:11px}.notification-time{font-size:9px}.notification-count{font-size:9px;padding:1px 5px}}.registration-disabled-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;align-items:center;justify-content:center;animation:fadeIn .3s ease-in-out}.registration-disabled-modal-content{position:relative;background:#fff;border-radius:16px;width:90%;max-width:480px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;border:3px solid #FF6B6B;animation:slideUp .3s ease-out}.registration-disabled-modal-header{background:#ff6b6b;color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center;position:relative}.registration-disabled-modal-title{font-size:18px;font-weight:600;position:absolute;left:50%;transform:translate(-50%);color:#fff;margin:0}.registration-disabled-modal-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.registration-disabled-modal-close:hover{background:#fff3}.registration-disabled-modal-body{padding:0;flex:1;overflow-y:auto}.registration-disabled-section{display:flex;gap:16px;padding:18px 20px;border-bottom:1px solid #eee;transition:all .2s ease}.registration-disabled-section:hover{background:#f8f9fa}.registration-disabled-section:last-child{border-bottom:none}.registration-disabled-section.highlight{background:linear-gradient(145deg,#ff8c421a,#ffb6c11a)}.registration-disabled-section.highlight:hover{background:linear-gradient(145deg,#ff8c4226,#ffb6c126)}.registration-disabled-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.registration-disabled-content{flex:1}.registration-disabled-content h3{font-size:16px;font-weight:700;color:#ff6b6b;margin:0 0 8px}.registration-disabled-content p{font-size:14px;color:#666;margin:0;line-height:1.6}.registration-disabled-content strong{color:#ff6b6b;font-weight:700}.registration-disabled-modal-footer{padding:20px;border-top:1px solid #eee;background:#fff;display:flex;gap:10px}.registration-disabled-modal-button{flex:1;padding:14px;background:#ff6b6b;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.registration-disabled-modal-button:hover{background:#ff5252;transform:translateY(-1px);box-shadow:0 2px 8px #ff6b6b4d}.registration-disabled-modal-button.secondary{background:#95a5a6;color:#fff}.registration-disabled-modal-button.secondary:hover{background:#7f8c8d}@media (max-width: 768px){.registration-disabled-modal-content{max-width:100%;border-radius:16px}.registration-disabled-modal-header{padding:20px 20px 16px}.registration-disabled-modal-title{font-size:18px}.registration-disabled-section{padding:14px;gap:12px}.registration-disabled-icon{font-size:28px;width:44px;height:44px}.registration-disabled-content h3{font-size:15px}.registration-disabled-content p{font-size:13px}.registration-disabled-modal-footer{padding:16px 20px 20px}.registration-disabled-modal-button{padding:12px;font-size:15px}}@media (max-width: 480px){.registration-disabled-modal-overlay{padding:12px}.registration-disabled-modal-header{padding:16px}.registration-disabled-modal-title{font-size:16px}.registration-disabled-section{padding:12px;gap:10px}.registration-disabled-icon{font-size:24px;width:40px;height:40px}.registration-disabled-content h3{font-size:14px}.registration-disabled-content p{font-size:12px}.registration-disabled-modal-footer{padding:12px 16px 16px}}.login-section{padding:20px;text-align:center;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;margin-bottom:20px}.login-section h3{font-size:18px;font-weight:700;color:#333;margin-bottom:16px}.login-buttons-container{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}.login-buttons-container .google-login-btn,.login-buttons-container .kakao-login-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s;text-decoration:none;box-shadow:0 2px 8px #0000001a}.login-buttons-container .google-login-btn{background:#4285f4;color:#fff}.login-buttons-container .google-login-btn:hover{background:#3367d6;transform:translateY(-2px);box-shadow:0 4px 12px #4285f44d}.login-buttons-container .kakao-login-btn{background:#fee500;color:#000}.login-buttons-container .kakao-login-btn:hover{background:#fdd835;transform:translateY(-2px);box-shadow:0 4px 12px #fee5004d}.login-description{font-size:12px;color:#666;line-height:1.4;margin:0}.registration-disabled{background:#fff;border-radius:20px;padding:40px 30px;box-shadow:0 8px 30px #00000026;animation:slideUp .3s ease-out;border:2px solid #ff6b6b}.disabled-icon{font-size:48px;margin-bottom:20px;opacity:.8}.registration-disabled h3{font-size:22px;font-weight:700;color:#ff6b6b;margin-bottom:15px;line-height:1.3}.disabled-message{font-size:16px;color:#666;line-height:1.5;margin-bottom:25px;padding:15px;background:#f8f9fa;border-radius:12px;border-left:4px solid #ff6b6b}.disabled-info{text-align:left;background:#f0f8ff;border-radius:12px;padding:20px;border:1px solid #e3f2fd}.disabled-info p{font-size:14px;color:#555;margin:8px 0;line-height:1.4}.disabled-info p:before{content:"• ";color:#4285f4;font-weight:700}.login-required-message{background:#fffffff2;border-radius:12px;padding:12px 16px;border:2px solid #FF8C42;box-shadow:0 4px 12px #ff8c4233;text-align:center}.login-required-message h3{font-size:14px;font-weight:700;color:#ff8c42;margin:0 0 4px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.login-required-message p{font-size:12px;color:#666;margin:0;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.home-intro-header-resources.unauthenticated .login-buttons-container{display:flex;flex-direction:row;gap:8px;align-items:flex-start;justify-content:flex-end}.home-intro-header-resources .kakao-login-btn,.home-intro-header-resources .google-login-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:#fffffff2;border-radius:20px;padding:8px 12px;border:3px solid;box-shadow:0 4px 12px #0000001a;transition:all .3s ease;cursor:pointer;min-width:80px;font-size:12px;font-weight:700;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.home-intro-header-resources .kakao-login-btn{border-color:#fee500;color:#000;background:linear-gradient(135deg,#fff8dc,#fffaf0)}.home-intro-header-resources .google-login-btn{border-color:#4285f4;color:#4285f4;background:linear-gradient(135deg,#f0f8ff,#e6f3ff)}.home-intro-header-resources .kakao-login-btn:hover{border-color:#fdd835;background:linear-gradient(135deg,#ffe4b5,#ffdab9);transform:translateY(-2px);box-shadow:0 6px 18px #fee5004d}.home-intro-header-resources .google-login-btn:hover{border-color:#3367d6;background:linear-gradient(135deg,#e6f3ff,#cce7ff);transform:translateY(-2px);box-shadow:0 6px 18px #4285f44d}.home-intro-header-resources .login-icon{font-size:16px}.login-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-in-out}.login-container{padding:0;text-align:center;max-width:350px;width:90%}.login-loading{display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff;font-size:14px}.loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;animation:spin 1s linear infinite}.user-profile{padding:0}.user-info{display:flex;align-items:center;gap:15px;margin-bottom:20px}.profile-image{width:60px;height:60px;border-radius:50%;object-fit:cover;border:3px solid #667eea}.user-details{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.user-name{font-size:20px;font-weight:700;color:#333;margin-bottom:5px}.user-provider{font-size:14px;color:#666;text-transform:capitalize}.logout-btn{background:linear-gradient(45deg,#ff6b6b,orange);color:#fff;border:none;border-radius:12px;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s;width:100%}.logout-btn:hover{transform:translateY(-2px)}.login-buttons{background:#fff;border-radius:20px;padding:40px 30px;box-shadow:0 8px 30px #00000026;animation:slideUp .3s ease-out}.login-buttons h3{font-size:24px;font-weight:700;color:#333;margin-bottom:25px;line-height:1.3}.social-login-buttons{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.google-login-btn,.kakao-login-btn{display:flex;align-items:center;justify-content:center;gap:15px;padding:18px 24px;border:none;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;text-decoration:none;box-shadow:0 4px 15px #0000001a}.google-login-btn{background:#4285f4;color:#fff}.google-login-btn:hover{background:#3367d6;transform:translateY(-3px);box-shadow:0 6px 20px #4285f44d}.kakao-login-btn{background:#fee500;color:#000}.kakao-login-btn:hover{background:#fdd835;transform:translateY(-3px);box-shadow:0 6px 20px #fee5004d}.login-icon{font-size:22px}@media (max-width: 768px){.home-intro-header-resources.unauthenticated .login-buttons-container{gap:6px}.home-intro-header-resources .kakao-login-btn,.home-intro-header-resources .google-login-btn{padding:6px 10px;gap:4px;min-width:70px;font-size:11px}.home-intro-header-resources .login-icon{font-size:14px}.login-required-message{padding:10px 12px}.login-required-message h3{font-size:12px}.login-required-message p{font-size:11px}}@media (max-width: 400px){.home-intro-header-resources.unauthenticated .login-buttons-container{flex-direction:column;align-items:flex-end}.home-intro-header-resources .kakao-login-btn,.home-intro-header-resources .google-login-btn{min-width:80px}}@media (max-width: 480px){.login-container{width:95%}.login-buttons{margin:10px;padding:30px 20px}.login-buttons h3{font-size:18px}.google-login-btn,.kakao-login-btn{padding:15px 20px;font-size:14px}.user-info{flex-direction:column;gap:15px}.user-details{align-items:center;text-align:center}.registration-disabled{margin:10px;padding:30px 20px}.disabled-icon{font-size:36px;margin-bottom:15px}.registration-disabled h3{font-size:18px;margin-bottom:12px}.disabled-message{font-size:14px;padding:12px;margin-bottom:20px}.disabled-info{padding:15px}.disabled-info p{font-size:13px;margin:6px 0}.home-intro-header-resources .kakao-login-btn,.home-intro-header-resources .google-login-btn{padding:4px 8px;gap:4px;min-width:60px;font-size:10px}.home-intro-header-resources .login-icon{font-size:12px}.login-required-message{padding:8px 10px}.login-required-message h3{font-size:11px}.login-required-message p{font-size:10px}}.header-stats{background:linear-gradient(145deg,#fff8dc,#fffaf0);border:4px solid #FF6B6B;border-radius:20px;padding:16px;margin-bottom:24px;width:100%;box-sizing:border-box;position:relative;overflow:visible;z-index:1000;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:8px;width:100%;overflow:visible}.notification-container{position:relative;flex-shrink:0;z-index:10000}.notification-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:linear-gradient(135deg,#ffd93d,#ffe4b5);border:2px solid #FF8C42;border-radius:50%;cursor:pointer;transition:all .3s ease;font-size:14px;position:relative;z-index:10001;box-shadow:0 2px 8px #ff8c424d}.notification-button:hover{border-color:#ff6b6b;background:linear-gradient(135deg,#ff8c42,#ffd93d);transform:scale(1.05);box-shadow:0 4px 12px #ff6b6b66}.notification-badge{position:absolute;top:-4px;right:-4px;background:#ff6b6b;color:#fff;border-radius:50%;width:14px;height:14px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;border:2px solid white;z-index:10002}.user-profile{flex:1;text-align:center;display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 4px}.user-nickname{font-size:14px;font-weight:700;color:#ff6b6b;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:.5px .5px 0px rgba(255,255,255,.8)}.user-level{font-size:10px;color:#ff8c42;font-weight:600;padding:2px 6px;background:#fffc;border:1px solid #FFD93D;border-radius:8px;display:inline-block;white-space:nowrap}.right-sidebar-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%}.right-sidebar-stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;border-radius:15px;background:#fffc;border:2px solid #FF8C42;cursor:pointer;transition:all .3s ease;min-height:70px;position:relative;overflow:hidden;z-index:1;box-shadow:0 2px 8px #0000001a}.right-sidebar-stat-item:hover{background:#fffffff2;border-color:#ff6b6b;transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b4d}.right-sidebar-stat-item.fire:hover{border-color:#ff6b6b;background:linear-gradient(145deg,#ff8c421a,#ffd7001a)}.right-sidebar-stat-item.meowcoin:hover{border-color:#ffd93d;background:linear-gradient(145deg,#ffd7001a,#ffb6c11a)}.right-sidebar-stat-item.chicken:hover{border-color:#ff8c42;background:linear-gradient(145deg,#ffb6c11a,#ffdab91a)}.right-sidebar-stat-icon{font-size:18px;margin-bottom:4px;line-height:1;display:flex;align-items:center;justify-content:center}.right-sidebar-stat-icon-image{width:24px;height:24px;object-fit:contain}.right-sidebar-stat-value{font-size:14px;font-weight:800;color:#ff6b6b;margin-bottom:2px;line-height:1;text-shadow:.5px .5px 0px rgba(255,255,255,.8)}.right-sidebar-stat-label{font-size:9px;color:#ff8c42;font-weight:600;text-transform:uppercase;letter-spacing:.3px;text-align:center;line-height:1}@media (max-width: 768px){.mobile-header-container{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-bottom:3px solid #FF6B6B;padding:8px 16px;height:48px;display:flex;flex-direction:column;position:relative;z-index:1000;border-radius:0 0 15px 15px;margin-bottom:0}.mobile-header-content{display:flex;align-items:center;justify-content:space-between;width:100%;height:100%}.mobile-header-user-section{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.mobile-header-user-avatar{width:28px;height:28px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border:2px solid rgba(255,255,255,.8);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;transition:all .3s ease;flex-shrink:0;z-index:1;box-shadow:0 2px 8px #ff8c424d}.mobile-header-user-avatar:hover{transform:scale(1.05);box-shadow:0 4px 12px #ff8c4266}.mobile-header-user-info{display:flex;flex-direction:column;justify-content:center;min-width:0;flex:1;max-width:80px}.mobile-header-user-name{font-size:12px;font-weight:700;color:#ff6b6b;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:.5px .5px 0px rgba(255,255,255,.8)}.mobile-header-user-points{font-size:9px;color:#ff8c42;display:flex;align-items:center;gap:4px;margin-top:1px}.mobile-header-point-item{display:flex;align-items:center;gap:1px;white-space:nowrap}.mobile-header-point-icon{font-size:7px;flex-shrink:0}.mobile-header-point-value{font-weight:600}.mobile-header-user-grade{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:4px 8px;display:flex;align-items:center;gap:4px;color:#fff;font-size:8px;font-weight:700;cursor:pointer;transition:all .3s ease;white-space:nowrap;flex-shrink:0;min-width:32px;z-index:1;box-shadow:0 2px 8px #ff8c424d}.mobile-header-user-grade:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff8c4266;background:linear-gradient(135deg,#ffd93d,#ff8c42)}.mobile-header-grade-icon{font-size:10px;flex-shrink:0}.mobile-header-grade-text{font-size:8px;font-weight:700}.mobile-header-user-level{background:#fffc;border:1px solid #FFD93D;border-radius:10px;padding:3px 6px;font-size:8px;font-weight:600;color:#ff6b6b;white-space:nowrap;cursor:pointer;transition:all .3s ease;flex-shrink:0;min-width:45px;z-index:1}.mobile-header-user-level:hover{background:#ffdab9cc;border-color:#ff8c42;transform:translateY(-1px)}.mobile-header-action-section{display:flex;align-items:center;gap:6px;flex-shrink:0}.mobile-header-streak-display{display:flex;align-items:center;gap:3px;background:linear-gradient(135deg,#ff6b6b,#ff8c42);border-radius:12px;padding:4px 8px;font-size:10px;color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease;white-space:nowrap;min-width:28px;z-index:1;box-shadow:0 2px 8px #ff6b6b4d}.mobile-header-streak-display:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b66;background:linear-gradient(135deg,#ff8c42,#ffd93d)}.mobile-header-streak-icon{font-size:8px}.mobile-header-freeze-display{display:flex;align-items:center;gap:3px;background:linear-gradient(135deg,#ffb6c1,#ffdab9);border-radius:12px;padding:4px 8px;font-size:10px;color:#ff6b6b;font-weight:700;cursor:pointer;transition:all .3s ease;white-space:nowrap;min-width:28px;z-index:1;box-shadow:0 2px 8px #ffb6c14d}.mobile-header-freeze-display:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ffb6c166;background:linear-gradient(135deg,#ffdab9,#ffe4b5)}.mobile-header-freeze-icon{font-size:8px}.mobile-notification-container{position:relative;z-index:20000}.mobile-header-notification-button{width:28px;height:28px;background:linear-gradient(135deg,#ffd93d,#ffe4b5);border:1px solid #FF8C42;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;cursor:pointer;transition:all .3s ease;position:relative;flex-shrink:0;z-index:20001;box-shadow:0 2px 8px #ff8c424d}.mobile-header-notification-button:hover{border-color:#ff6b6b;background:linear-gradient(135deg,#ff8c42,#ffd93d);transform:scale(1.05);box-shadow:0 4px 12px #ff6b6b66}.mobile-header-notification-badge{position:absolute;top:-3px;right:-3px;background:#ff6b6b;color:#fff;border-radius:50%;width:12px;height:12px;font-size:7px;display:flex;align-items:center;justify-content:center;font-weight:700;border:1px solid white;z-index:20002}.mobile-header-menu-button{color:#ff6b6b;width:28px;height:28px;background:#fffc;border:1px solid #FF8C42;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;transition:all .3s ease;flex-shrink:0;z-index:1;box-shadow:0 2px 8px #ff8c4233}.mobile-header-menu-button:hover{background:#ffdab9cc;border-color:#ff6b6b;transform:translateY(-1px)}.header-stats:not(.mobile-header-container){display:none}}.loading-skeleton{background:linear-gradient(90deg,#ffe4b54d 25%,#ffdab980,#ffe4b54d 75%);background-size:200% 100%;animation:loading 1.5s infinite}.quest-tabs{display:flex;background:#f9f9f9;border-radius:8px;padding:2px;margin-bottom:16px}.quest-tab-button{flex:1;background:transparent;border:none;border-radius:6px;padding:8px 6px;font-size:11px;font-weight:600;color:#777;cursor:pointer;transition:all .2s;text-align:center}.quest-tab-button.active{background:#fff;color:#58cc02;box-shadow:0 1px 3px #0000001a}.quest-list{display:flex;flex-direction:column;gap:12px;background:linear-gradient(135deg,#667eea,#764ba2);padding:16px;border-radius:12px;margin:-8px}.quest-item{position:relative;display:flex;align-items:center;background:#0000004d;border-radius:15px;padding:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.1);transition:all .3s;overflow:hidden;opacity:1;min-width:0;width:100%}.quest-item.quest-completed{border-color:#4caf5080;background:#4caf501a}.quest-item.quest-claimed{border-color:#9e9e9e4d;background:#0003;opacity:.6}.quest-trophy-section{margin-right:15px;flex-shrink:0}.quest-trophy-container{width:50px;height:50px;display:flex;align-items:center;justify-content:center}.quest-achievement-content{flex:1;margin-right:15px;min-width:0;overflow:hidden}.quest-achievement-text{margin-bottom:8px}.quest-achievement-title{font-size:16px;font-weight:700;margin:0 0 4px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}.quest-achievement-description{font-size:12px;color:#ffffffb3;margin:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quest-progress-section{margin-top:8px}.quest-progress-bar{width:100%;height:8px;background:#fff3;border-radius:4px;overflow:hidden;margin-bottom:4px}.quest-progress-fill{height:100%;background:linear-gradient(90deg,#ffc800,#ffed4e);border-radius:4px;transition:width .5s ease;position:relative}.quest-item.quest-completed .quest-progress-fill{background:linear-gradient(90deg,#4caf50,#81c784)}.quest-progress-text{font-size:11px;color:#fffc;font-weight:600}.quest-reward-section{flex-shrink:0;text-align:center;min-width:60px}.quest-reward-info{display:flex;flex-direction:column;align-items:center;gap:4px}.quest-reward-icon{display:flex;align-items:center;justify-content:center;margin-bottom:2px}.quest-reward-amount{font-size:18px;font-weight:700;color:#ffc800;line-height:1}.quest-item.quest-completed .quest-reward-amount{color:#4caf50}.quest-reward-type{font-size:10px;color:#fff9;text-transform:uppercase;letter-spacing:.5px;font-weight:600}.quest-summary{margin-top:16px;padding:12px;background:#f8f9ff;border-radius:8px;border:1px solid #e5e5e5}.quest-summary-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}.quest-summary-row:last-child{margin-bottom:0}.quest-summary-label{color:#777}.quest-summary-value{font-weight:700}.quest-summary-value.completed{color:#58cc02}.quest-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s}.quest-item:hover:before{left:100%}.quest-get-button-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.quest-get-button{background:linear-gradient(135deg,gold,orange);color:#2c3e50;border:none;padding:10px 20px;border-radius:25px;font-weight:800;font-size:14px;cursor:pointer;box-shadow:0 4px 15px #ffd70066;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px;animation:quest-get-pulse 2s infinite}.quest-get-button:hover{background:linear-gradient(135deg,orange,gold);transform:scale(1.1);box-shadow:0 6px 20px #ffd70099}.quest-get-button:active{transform:scale(.95)}@keyframes quest-get-pulse{0%{box-shadow:0 4px 15px #ffd70066}50%{box-shadow:0 6px 25px #ffd700b3}to{box-shadow:0 4px 15px #ffd70066}}@media (max-width: 1200px){.quest-get-button{padding:8px 16px;font-size:12px}.quest-tabs{padding:1px}.quest-tab-button{padding:6px 4px;font-size:10px}.quest-item{padding:12px}.quest-trophy-container{width:40px;height:40px}.quest-achievement-title{font-size:14px}.quest-achievement-description{font-size:11px}.quest-reward-amount{font-size:16px}}@media (max-width: 768px){.quest-get-button{padding:6px 12px;font-size:10px}.quest-item{padding:10px}.quest-trophy-container{width:36px;height:36px}.quest-achievement-title{font-size:13px}.quest-achievement-description{font-size:10px}.quest-reward-amount{font-size:14px}.quest-summary{padding:10px}}.right-sidebar{width:380px;min-width:380px;background:#fff;border-left:2px solid #e5e5e5;padding:24px;min-height:100vh;max-height:100vh;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.right-sidebar::-webkit-scrollbar{display:none}.footer-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:32px;padding-top:24px;border-top:1px solid #e5e5e5}.footer-link{color:#777;text-decoration:none;font-size:13px;transition:color .2s}.footer-link:hover{color:#1cb0f6}@media (max-width: 1200px) and (min-width: 1025px){.right-sidebar{width:320px;min-width:320px;scrollbar-width:none;-ms-overflow-style:none}.right-sidebar::-webkit-scrollbar{display:none}}@media (max-width: 1024px) and (min-width: 769px){.right-sidebar{width:280px;min-width:280px;scrollbar-width:none;-ms-overflow-style:none}.right-sidebar::-webkit-scrollbar{display:none}}@media (max-width: 768px){.right-sidebar{width:100%;min-width:auto;min-height:auto;max-height:none;border-left:none;border-top:2px solid #e5e5e5;padding:16px;overflow-y:visible}.footer-links{margin-top:20px;padding-top:16px;justify-content:center}}.conquerthai-container{display:flex;min-height:100vh;width:100vw;background:transparent;overflow:hidden;position:relative}.main-content{flex:1;display:flex;min-height:100vh;margin-left:256px;overflow:hidden;width:calc(100vw - 256px)}.center-content{flex:1;max-width:none;width:calc(100% - 380px);height:100vh;overflow-y:auto;overflow-x:hidden;background:transparent;scrollbar-width:none;-ms-overflow-style:none}.center-content:has(.leaderboard-main){overflow:hidden!important}.center-content:has(.vocab-main){overflow:hidden!important}.center-content:has(.home-main){overflow:hidden!important}.center-content:has(.library-main){overflow-y:auto!important;overflow-x:hidden!important;background:transparent!important}.center-content:has(.thai-story-learning){overflow:hidden!important;background:transparent!important}.center-content::-webkit-scrollbar{display:none}.mobile-header{display:none}@media (max-width: 1200px) and (min-width: 1025px){.main-content{width:calc(100vw - 256px)}.center-content{width:calc(100% - 320px);padding:20px}}@media (max-width: 1024px) and (min-width: 769px){.main-content{margin-left:200px;width:calc(100vw - 200px)}.center-content{width:calc(100% - 280px)}}@media (max-width: 768px){.conquerthai-container{flex-direction:column;position:relative;height:100vh;overflow:hidden;background:transparent}.center-content:has(.library-main){overflow-y:auto!important;overflow-x:hidden!important;background:transparent!important;height:100vh!important;max-height:100vh!important}.mobile-header{display:none!important}.main-content{margin:0 0 80px;flex-direction:column;width:100%;height:calc(100vh - 80px);max-height:calc(100vh - 80px);overflow:hidden;background:transparent}.center-content{width:100%;max-width:100vw;padding:0;margin:0;box-sizing:border-box;min-height:100vh;height:auto;max-height:none;overflow-y:auto;overflow-x:hidden;background:transparent;scrollbar-width:none;-ms-overflow-style:none}.center-content:has(.leaderboard-main){overflow:hidden!important}.center-content:has(.vocab-main){overflow:hidden!important}.center-content:has(.home-page-container){overflow-y:auto!important;height:auto!important;max-height:none!important}.center-content:has(.thai-story-learning){overflow:hidden!important;background:transparent!important}.center-content::-webkit-scrollbar{display:none}}@media (max-width: 480px){.main-content{margin-top:0;margin-bottom:70px;height:calc(100vh - 70px);max-height:calc(100vh - 70px)}.center-content:has(.library-main){height:100vh!important;max-height:100vh!important}}.home-intro{margin-top:0;margin-bottom:0;height:360px;background:url(/assets/SummerBeach2-DxkuDUsu.png) center/cover no-repeat!important;border-radius:0;width:100%;max-width:none;overflow:hidden;flex-shrink:0;position:relative}.home-intro-user-info{position:absolute;top:16px;left:16px;z-index:15}@media (min-width: 769px){.home-intro-user-info{display:none}}.home-intro-header-resources{position:absolute;top:16px;right:16px;z-index:15}.home-intro-header-resources.authenticated{display:grid;grid-template-columns:1fr 1fr;gap:8px}.home-intro-header-resources.unauthenticated{display:flex;justify-content:flex-end;align-items:flex-start}@media (min-width: 769px){.home-intro-header-resources,.home-intro-header-resources.authenticated,.home-intro-header-resources.unauthenticated{display:none!important}}.home-intro-resource{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fffffff2;border-radius:20px;padding:8px 12px;border:3px solid;box-shadow:0 4px 12px #0000001a;transition:all .3s ease;cursor:pointer;min-width:80px}.home-intro-coins{border-color:#ff8c42;background:linear-gradient(135deg,#fff8dc,#fffaf0)}.home-intro-chicken{border-color:#ff6b6b;background:linear-gradient(135deg,#fff0f0,#fff8dc)}.home-intro-info{border-color:#ffd93d;background:linear-gradient(135deg,#fffacd,#fff8dc)}.home-intro-resource:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000026}.home-intro-coins:hover{border-color:#ffd93d;background:linear-gradient(135deg,#ffe4b5,#ffdab9)}.home-intro-chicken:hover{border-color:#ff8c42;background:linear-gradient(135deg,#ffb6c1,#ffdab9)}.home-intro-info:hover{border-color:#ff8c42;background:linear-gradient(135deg,#ffe4b5,#ffdab9)}.home-intro-coin-icon,.home-intro-chicken-icon,.home-intro-info-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;box-shadow:0 2px 8px #0000001a}.home-intro-coin-image,.home-intro-chicken-image,.home-intro-info-image{width:100%;height:100%;object-fit:cover;border-radius:50%}.home-intro-resource-count,.home-intro-resource-name{font-weight:700;font-size:16px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.home-intro-resource-count{text-align:right;flex-shrink:0;min-width:20px}.home-intro-coins .home-intro-resource-count{color:#ff8c42}.home-intro-chicken .home-intro-resource-count{color:#ff6b6b}.home-intro-info .home-intro-resource-name{color:#ff8c42;font-weight:800}.home-introtitle{background:url(/assets/SummerLogo-DBgBWStF.png) center/contain no-repeat!important;width:420px!important;height:105px!important;position:absolute;top:80px!important;left:50%;transform:translate3d(-50%,0,0) scale(1.0123,1.0377);opacity:1;animation:home-titlePulse 3s ease-in-out infinite;z-index:2;filter:drop-shadow(0 0 10px rgba(255,107,107,.3))}.home-introtitle:before,.home-introtitle:after{display:none}.home-introchars{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;z-index:2}.home-introchar2{width:100px!important;height:140px!important;background-image:url(/assets/ChickenMeowRun-CpCOv7Ih.png)!important;background-size:contain;background-repeat:no-repeat;transform:translate(0);flex-shrink:0;animation:home-charFloat 4s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(255,140,66,.4))}.home-introchar2:before{display:none}.home-streak-overlay{position:absolute;bottom:0;left:0;right:0;z-index:10;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 50%,transparent 100%);border-radius:16px 16px 0 0;padding:16px;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.home-streak-overlay .calendar-container{background:transparent;padding:0;margin:0}.home-streak-overlay .calendar-title-container{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.home-streak-overlay .calendar-title{font-size:14px;font-weight:800;color:#fff;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.home-streak-overlay .calendar-help-button{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;color:#fff;font-size:12px;font-weight:800;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #ff8c4266}.home-streak-overlay .calendar-help-button:hover{background:linear-gradient(135deg,#ffd93d,#ff6b6b)!important;color:#fff!important;transform:scale(1.1);box-shadow:0 4px 12px #ff6b6b66}.home-streak-overlay .streak-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;justify-items:center}.home-streak-overlay .calendar-day{width:36px;height:36px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:600;border:2px solid transparent;transition:all .3s ease;cursor:pointer;position:relative;background:#ffffffe6;box-shadow:0 2px 8px #0000001a}.home-streak-overlay .calendar-day.completed{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;border-color:#ff8c42;box-shadow:0 4px 12px #ff8c4266}.home-streak-overlay .calendar-day.today{background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;border-color:#ff6b6b;box-shadow:0 4px 12px #ff6b6b66;animation:home-calendarPulse 2s infinite}.home-streak-overlay .calendar-day.empty{background:#ffffff80;color:#999;border-color:#ff6b6b33}.home-streak-overlay .calendar-day:hover:not(.empty){transform:scale(1.05)}.home-streak-overlay .day-name{font-size:8.4px;margin-bottom:1px;opacity:.9;line-height:1;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8)}.home-streak-overlay .day-number{font-size:12px;font-weight:800;line-height:1;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.8)}@keyframes home-titlePulse{0%,to{transform:translate3d(-50%,0,0) scale(1.0123,1.0377)}50%{transform:translate3d(-50%,0,0) scale(1.05,1.08)}}@keyframes home-charFloat{0%,to{transform:translate(0)}50%{transform:translateY(-8px)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}@keyframes home-calendarPulse{0%{box-shadow:0 4px 12px #ff6b6b66}50%{box-shadow:0 6px 18px #ff6b6b99;transform:scale(1.02)}to{box-shadow:0 4px 12px #ff6b6b66}}.home-intro-resource{animation:resourceGlow 3s ease-in-out infinite}.home-intro-coins{animation-delay:0s}.home-intro-chicken{animation-delay:1.5s}.home-intro-info{animation-delay:.75s}@media (max-width: 768px){.home-intro{height:300px;border-radius:0}.home-intro-user-info{top:12px;left:12px}.home-intro-header-resources{top:12px;right:12px;gap:6px}.home-intro-resource{padding:6px 10px;gap:6px;min-width:70px}.home-intro-coin-icon,.home-intro-chicken-icon,.home-intro-info-icon{width:24px;height:24px}.home-intro-resource-count,.home-intro-resource-name{font-size:14px}.home-introtitle{width:300px;height:75px;top:60px}.home-introchars{right:15px;top:50%;transform:translateY(-50%)}.home-introchar2{width:60px;height:80px}.home-streak-overlay{padding:12px}}@media (max-width: 480px){.home-intro{height:280px}.home-intro-user-info{top:8px;left:8px}.home-intro-header-resources{top:8px;right:8px;gap:4px}.home-intro-resource{padding:4px 8px;gap:4px;min-width:60px}.home-intro-coin-icon,.home-intro-chicken-icon,.home-intro-info-icon{width:20px;height:20px}.home-intro-resource-count,.home-intro-resource-name{font-size:12px}.home-introtitle{width:240px;height:60px;top:50px}.home-introchars{right:10px;top:50%;transform:translateY(-50%)}.home-introchar2{width:50px;height:70px}.home-streak-overlay{padding:8px}}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080;animation:fadeIn .3s ease}.modal.show{display:flex;align-items:center;justify-content:center}@media (min-width: 769px){.modal{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;overflow:hidden;align-items:center;justify-content:center}}.modal-content{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:20px;padding:24px;max-width:450px;width:90%;max-height:80vh;overflow-y:auto;position:relative;animation:slideUp .3s ease;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;border:4px solid #FF6B6B;scrollbar-width:none;-ms-overflow-style:none}.modal-content:before{content:"🐾";position:absolute;top:-15px;left:20px;font-size:24px;background:#fff8dc;padding:5px;border-radius:50%;z-index:5}.modal-content:after{content:"🐾";position:absolute;bottom:-15px;right:20px;font-size:24px;background:#fff8dc;padding:5px;border-radius:50%;z-index:5}.modal-content::-webkit-scrollbar{display:none}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #FF8C42}.modal-title{font-size:20px;font-weight:800;color:#ff6b6b;margin:0;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.close-button{background:none;border:none;font-size:24px;cursor:pointer;color:#ff8c42;padding:4px;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;min-height:44px;min-width:44px}.close-button:hover{background:#ff8c421a;color:#ff6b6b;transform:scale(1.1)}.material-tabs{display:flex;background:#ffe4b580;border-radius:12px;padding:4px;margin-bottom:20px;gap:4px;border:2px solid rgba(255,140,66,.3)}.material-tab-button,.tab-button{flex:1;background:transparent;border:none;border-radius:8px;padding:8px 4px;font-size:12px;font-weight:600;color:#ff8c42;cursor:pointer;transition:all .3s ease;text-align:center;min-height:40px;display:flex;align-items:center;justify-content:center;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.material-tab-button.active,.tab-button.active{background:#ffffffe6;color:#ff6b6b;box-shadow:0 2px 8px #ff6b6b33;border:2px solid #FF8C42}.material-tab-content,.tab-content{display:none}.material-tab-content.active,.tab-content.active{display:block}.material-list{display:flex;flex-direction:column;gap:12px}.material-item{display:flex;align-items:center;gap:16px;padding:16px;border-radius:15px;border:3px solid #FF8C42;cursor:pointer;transition:all .3s ease;min-height:44px;background:#ffffffe6;box-shadow:0 4px 10px #0000001a}.material-item:hover{border-color:#ff6b6b;background:linear-gradient(145deg,#ffe4b54d,#ffdab94d);transform:translateY(-1px);box-shadow:0 6px 15px #00000026}.material-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;background:linear-gradient(135deg,#ff8c42,#ffd93d);flex-shrink:0;box-shadow:0 2px 8px #ff8c424d}.material-content{flex:1;min-width:0}.material-title{font-size:14px;font-weight:700;color:#ff6b6b;margin-bottom:4px;line-height:1.3;text-shadow:.5px .5px 0px rgba(255,255,255,.8)}.material-description{font-size:12px;color:#ff8c42;line-height:1.4;margin:0}.material-arrow{color:#ff8c42;font-size:16px;opacity:.6;flex-shrink:0;font-weight:600}.tab-buttons{display:flex;background:#ffe4b580;border-radius:12px;padding:4px;margin-bottom:20px;gap:4px;border:2px solid rgba(255,140,66,.3)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.modal-content{width:95%;margin:20px;padding:20px;max-height:85vh}.material-item{gap:12px;padding:12px}.material-icon{width:24px;height:24px;font-size:16px}.material-title{font-size:12px}.material-description{font-size:11px}.tab-button{font-size:11px;padding:8px 4px}}@media (max-width: 480px){.modal-content{width:95%;margin:12px;padding:16px;max-height:90vh}.material-item{padding:8px;gap:8px}.modal-title{font-size:18px}}.daily-study-section{padding:24px;width:100%;max-width:none;margin:0;border-radius:0;position:relative;overflow:hidden}.study-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.study-title-container{display:flex;align-items:center;gap:12px}.study-illustration{width:48px;height:48px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;box-shadow:0 4px 15px #ff8c424d;border:3px solid rgba(255,255,255,.8);overflow:hidden}.study-illustration:after{content:"";position:absolute;inset:-2px;border-radius:12px;background:linear-gradient(45deg,#ff8c42,#ffd93d,#ff8c42);z-index:-1;animation:rotate 4s linear infinite}.study-foot-image{width:32px;height:32px;object-fit:contain;z-index:1}.study-info{flex:1}.study-title-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:8px}.study-title{font-size:20px;font-weight:800;color:#ff6b6b;margin:0;line-height:1.2;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.study-help-button{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ff8c42,#ffd93d);border:2px solid white;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #ff8c424d;padding:0;flex-shrink:0}.study-help-button:hover{background:linear-gradient(135deg,#ffd93d,#ff8c42);transform:scale(1.1);box-shadow:0 3px 10px #ff8c4266}.study-help-button:active{transform:scale(.95)}.grade-selector{display:flex;align-items:center;gap:8px}.grade-label{font-size:12px;color:#ff8c42;font-weight:600}.grade-dropdown{background:#fff;border:2px solid #FFD93D;border-radius:8px;padding:4px 8px;font-size:12px;font-weight:600;color:#ff6b6b;cursor:pointer;transition:all .2s ease}.grade-dropdown:hover:not(:disabled){border-color:#ff8c42;background:#fff8f0}.grade-dropdown:disabled{opacity:.5;cursor:not-allowed;background:#f5f5f5;border-color:#ddd}.grade-dropdown option.locked-option{color:#999;background-color:#f5f5f5}.grade-dropdown option:disabled{color:#999;background-color:#f5f5f5}.progress-circle{width:48px;height:48px;border-radius:50%;border:4px solid #FFD93D;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:#ff6b6b;position:relative;flex-shrink:0;background:#ffffffe6;box-shadow:0 2px 8px #ff8c424d}.progress-text-skeleton{width:40px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border-radius:4px;margin:0 auto}@keyframes skeleton-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.start-button{background:linear-gradient(145deg,#ffe4b5,#ffdab9);color:#ff6b6b;border:3px solid #FF8C42;border-radius:15px;padding:16px 24px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;width:100%;margin-bottom:24px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;box-shadow:0 4px 10px #0000001a;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.start-button:hover{box-shadow:0 6px 15px #0003;background:linear-gradient(145deg,#ffdab9,#ffb6c1);transform:translateY(-2px)}.start-button.disabled{opacity:.5;cursor:not-allowed;background:#ccc;border-color:#999;transform:none}.start-button.disabled:hover{background:#ccc;border-color:#999;transform:none;box-shadow:0 4px 10px #0000001a}.study-tabs-container{margin-bottom:0}.study-tabs{display:flex;background:#ffe4b580;border-radius:12px;padding:4px;margin-top:12px;margin-bottom:12px;gap:4px;border:2px solid rgba(255,140,66,.3)}.tab-button{flex:1;background:transparent;border:none;border-radius:8px;padding:12px 8px;font-size:14px;font-weight:600;color:#ff8c42;cursor:pointer;transition:all .3s ease;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.tab-button.active{background:#ffffffe6;color:#ff6b6b;box-shadow:0 2px 8px #ff6b6b33;border:2px solid #FF8C42}.tab-content{display:none}.tab-content.active{display:block}.community-section{margin-top:20px}.community-tabs-container{margin-bottom:0}.community-tab-buttons{display:flex;background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:12px;padding:4px;margin-top:12px;margin-bottom:12px;gap:4px;border:2px solid rgba(255,140,66,.3)}.community-tab-button{flex:1;background:#ffffffe6;border:2px solid #FF8C42;border-radius:8px;padding:12px 8px;font-size:14px;font-weight:600;color:#ff6b6b;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);box-shadow:0 2px 8px #ff6b6b33}.community-tab-button.active{background:#ffffffe6;color:#ff6b6b;box-shadow:0 2px 8px #ff6b6b33;border:2px solid #FF8C42}.community-tab-contents{margin-bottom:0}.community-tab-content{display:none}.community-tab-content.active{display:block}.option-icon.community{background:linear-gradient(135deg,#ff8c42,#ffd93d)}.study-options{margin-bottom:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.study-option{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:20px 16px;border-radius:15px;border:3px solid #FF8C42;margin-bottom:0;cursor:pointer;transition:all .3s ease;min-height:120px;background:#ffffffe6;box-shadow:0 4px 10px #0000001a;justify-content:center}.study-option:hover{border-color:#ff6b6b;background:linear-gradient(145deg,#ffe4b54d,#ffdab94d);transform:translateY(-2px);box-shadow:0 6px 15px #00000026}.study-option:last-child{margin-bottom:0}.option-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;flex-shrink:0;box-shadow:0 2px 8px #0003;overflow:hidden}.option-icon.vocab{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.option-icon.grammar{background:linear-gradient(135deg,#ff8c42,#ffd93d)}.option-icon.listening{background:linear-gradient(135deg,#ffd93d,#ffb6c1)}.option-icon.speaking{background:linear-gradient(135deg,#ffb6c1,#ffdab9)}.option-icon.exam{background:linear-gradient(135deg,#ffdab9,#ff6b6b)}.option-icon.profile{background:linear-gradient(135deg,#ff8c42,#ffd93d)}.option-icon.material.beginner{background:linear-gradient(135deg,#90ee90,#98fb98)}.option-icon.material.basic{background:linear-gradient(135deg,#87ceeb,#87cefa)}.option-icon.material.elementary{background:linear-gradient(135deg,#ffd93d,#ffeb3b)}.option-icon.material.intermediate{background:linear-gradient(135deg,orange,#ff8c00)}.option-icon.material.advanced{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.material-book-image,.library-image{width:24px;height:24px;object-fit:contain}.option-content{flex:1;min-width:0}.option-label{font-size:14px;font-weight:700;color:#ff6b6b;line-height:1.3;text-shadow:.5px .5px 0px rgba(255,255,255,.8)}.option-description{font-size:12px;color:#ff8c42;line-height:1.4;margin:0}@media (min-width: 769px){.option-description{display:none}}.quick-actions{display:flex;justify-content:space-between;gap:12px}.quick-action{flex:1;background:#ffe4b580;border:2px solid #FF8C42;border-radius:12px;padding:12px;text-align:center;cursor:pointer;transition:all .3s ease;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.quick-action:hover{border-color:#ff6b6b;background:#ffdab9b3;transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b33}.quick-action-icon{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;margin:0 auto}.quick-action-icon.settings{background:linear-gradient(135deg,#ff8c42,#ffd93d)}.quick-action-icon.bookmark{background:linear-gradient(135deg,#ffd93d,#ffb6c1)}.quick-action-icon.search{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.quick-action-label{font-size:12px;font-weight:600;color:#ff6b6b;margin:0}@media (max-width: 1024px) and (min-width: 769px){.daily-study-section{padding:20px}.daily-study-section .study-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.daily-study-section .study-option{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:16px;margin-bottom:0;min-height:100px;justify-content:center;border-radius:12px;border:2px solid #FF8C42;background:#ffffffe6;cursor:pointer;transition:all .2s ease}.daily-study-section .study-option:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b33;border-color:#ff6b6b;background:linear-gradient(145deg,#ffe4b54d,#ffdab94d)}.daily-study-section .option-icon{width:32px;height:32px;font-size:16px;margin-bottom:0}.daily-study-section .option-text{font-size:14px;font-weight:600;color:#ff8c42}}@media (max-width: 768px){.daily-study-section{padding:16px;margin-bottom:0;border-radius:0}.daily-study-section .study-header{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px;margin-bottom:16px;text-align:left!important}.daily-study-section .study-title-container{display:flex!important;flex-direction:row!important;align-items:center!important;text-align:left!important;gap:8px}.daily-study-section .study-foot-image{width:24px;height:24px}.daily-study-section .study-title-wrapper{gap:6px;margin-bottom:2px}.daily-study-section .study-title{font-size:16px;margin:0}.daily-study-section .study-help-button{width:18px;height:18px;font-size:11px}.daily-study-section .study-subtitle{font-size:12px}.daily-study-section .study-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}.daily-study-section .study-option{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:12px;margin-bottom:0;min-height:80px;justify-content:center;border-radius:12px;border:2px solid #FF8C42;background:#ffffffe6;cursor:pointer;transition:all .2s ease}.daily-study-section .study-option:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b33;border-color:#ff6b6b;background:linear-gradient(145deg,#ffe4b54d,#ffdab94d)}.daily-study-section .option-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;margin-bottom:6px;box-shadow:0 2px 8px #0003}.daily-study-section .material-book-image{width:20px;height:20px}.daily-study-section .option-label{font-size:12px;font-weight:600;color:#ff6b6b;line-height:1.2;margin:0}.daily-study-section .option-description{display:none!important}.daily-study-section .tab-button{font-size:12px;padding:8px 4px}.daily-study-section .start-button{padding:12px 16px;font-size:16px;margin-bottom:16px}}@media (max-width: 480px){.daily-study-section{padding:12px;margin-bottom:0}.daily-study-section .study-options{gap:4px}.daily-study-section .study-option{padding:8px;min-height:70px}.daily-study-section .option-icon{width:28px;height:28px;font-size:14px;margin-bottom:4px}.daily-study-section .material-book-image,.daily-study-section .library-image{width:18px;height:18px}.daily-study-section .option-label{font-size:11px}.daily-study-section .study-foot-image{width:20px;height:20px}}.cat-chicken-loading-container{font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.particles-container{position:absolute;width:100%;height:100%;overflow:hidden;opacity:.3;pointer-events:none}.particle{position:absolute;border-radius:50%;animation:float 4s ease-in-out infinite}.particle.chicken{font-size:20px}.particle.cat{font-size:16px}.particle.small{width:6px;height:6px;background:#ff8c42}.loading-card{background:linear-gradient(145deg,#fffffff2,#fff8dce6);border:4px solid #FF6B6B;border-radius:20px;padding:40px 30px;text-align:center;box-shadow:0 12px 25px #00000026,0 0 25px #ff6b6b4d;position:relative;max-width:400px;width:90%;overflow:hidden;animation:cardAppear .8s ease-out}.card-glow{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d,#ff8c42,#ff6b6b);background-size:300% 100%;animation:shimmer 2s linear infinite}.game-title{font-size:22px;font-weight:700;color:#ff6b6b;text-shadow:2px 2px 0px #FFE4B5;margin-bottom:10px;animation:titleGlow 2s ease-in-out infinite}.main-character{font-size:60px;margin:20px 0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));position:relative}.cat-icon{display:inline-block;animation:bounce 1.5s ease-in-out infinite}.chicken-icon{display:inline-block;margin-left:10px;animation:wiggle 2s ease-in-out infinite}.loading-message{font-size:16px;color:#ff8c42;font-weight:700;margin-bottom:25px}.loading-dots-text{animation:dotsAnimation 1.5s infinite}.progress-container{width:100%;height:12px;background:#fff8dc;border:2px solid #FF6B6B;border-radius:15px;overflow:hidden;margin-bottom:20px;box-shadow:inset 0 2px 5px #0000001a}.progress-bar{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:10px;transition:width .8s ease;position:relative}.infinite-progress-bar{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:10px;width:30%;animation:infiniteProgress 2s ease-in-out infinite;position:relative}.progress-shine{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progressShine 1.5s ease-in-out infinite}.loading-dots-animation{display:flex;justify-content:center;gap:8px;margin-bottom:20px}.dot{width:12px;height:12px;border-radius:50%;background:#ffe4b5;transition:all .3s ease}.dot.active{background:#ff8c42;transform:scale(1.3);box-shadow:0 0 10px #ff8c4280}.tips-section{background:#ffe4b599;border:2px solid #FF8C42;border-radius:15px;padding:15px;margin-top:10px}.tip-icon{font-size:20px;margin-bottom:5px}.tip-text{font-size:14px;color:#666;line-height:1.4;min-height:40px;display:flex;align-items:center;justify-content:center;animation:tipFade .5s ease-in-out}@keyframes cardAppear{0%{transform:scale(.8) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(180deg)}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1.05)}60%{transform:translateY(-5px) scale(1.02)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}@keyframes shimmer{0%{background-position:-300% 0}to{background-position:300% 0}}@keyframes titleGlow{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}@keyframes dotsAnimation{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}@keyframes infiniteProgress{0%{transform:translate(-100%)}50%{transform:translate(0)}to{transform:translate(233%)}}@keyframes progressShine{0%{transform:translate(-100%)}to{transform:translate(300%)}}@keyframes tipFade{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.loading-card{padding:30px 20px;margin:20px}.game-title{font-size:20px}.main-character{font-size:50px}.loading-message{font-size:14px}}.flash-cards-loading,.flash-cards-error,.flash-cards-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:2rem;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid #e9ecef;border-top:4px solid #58cc02;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.flash-cards-loading p,.flash-cards-error p,.flash-cards-empty p{font-size:1.125rem;color:#6c757d;margin-bottom:1.5rem}.flash-cards-error button,.flash-cards-empty button{background:#58cc02;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease}.flash-cards-error button:hover,.flash-cards-empty button:hover{background:#4fb300;transform:translateY(-1px)}.flash-cards-screen{display:flex;flex-direction:column;height:900px;background:linear-gradient(135deg,#f8f9fa,#e9ecef);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;position:relative;z-index:1000}@media (min-width: 769px){.flash-cards-screen{min-width:500px!important;max-width:800px!important;width:auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important}.vocab-main.flash-cards-active .flash-cards-screen{min-width:500px!important;max-width:800px!important;width:auto!important}.flash-cards-header-content{margin:0!important;max-width:none!important}}@media (min-width: 481px) and (max-width: 768px){.flash-cards-screen{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important}}.flash-cards-header{background:#fff;border-bottom:1px solid #e9ecef;padding:1rem 1.5rem;box-shadow:0 2px 4px #0000000d}.flash-cards-header-content{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;gap:1rem}.flash-cards-back-button{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:.5rem 1rem;font-size:1rem;color:#495057;cursor:pointer;transition:all .2s ease}.flash-cards-back-button:hover{background:#e9ecef;border-color:#adb5bd}.flash-cards-progress-section{flex:1;margin:0 1rem;display:flex;align-items:center}.flash-cards-progress-bar-container{width:100%;height:8px;background:#e9ecef;border-radius:4px;overflow:hidden}.flash-cards-progress-bar-fill{height:100%;background:linear-gradient(90deg,#a855f7,#ec4899);border-radius:4px;transition:width .3s ease}.flash-cards-progress-text{background:#58cc02;color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:600;font-size:.875rem}.flash-cards-content{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;overflow-y:auto}.flash-cards-card-wrapper{width:100%;max-width:500px}.flash-cards-card-modern{background:#fff;border-radius:24px;box-shadow:0 8px 32px #0000001a;overflow:hidden}.flash-cards-image-section{position:relative;aspect-ratio:1 / 1;background:linear-gradient(135deg,#a855f7,#ec4899);display:flex;align-items:center;justify-content:center}.flash-cards-image-bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.flash-cards-emoji{font-size:8rem}.flash-cards-image{width:100%;height:100%;object-fit:cover;object-position:center}.flash-cards-gradient-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 0%,rgba(109,40,217,.3) 50%,rgba(109,40,217,.8) 100%)}.flash-cards-word-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:2rem}.flash-cards-tags{display:flex;gap:.5rem;margin-bottom:.75rem}.flash-cards-tag{background:#ffffff40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:700;border:1px solid rgba(255,255,255,.3)}.flash-cards-thai-word{font-size:3rem;font-weight:700;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.3);margin-bottom:.5rem;text-align:center}.flash-cards-pronunciation-text{font-size:1.25rem;color:#f59e0b;text-shadow:0 2px 8px rgba(0,0,0,.2);margin-bottom:.5rem;font-weight:500}.flash-cards-korean-meaning{font-size:1.875rem;font-weight:700;color:#fff;text-shadow:0 4px 12px rgba(0,0,0,.3);margin-bottom:1rem;text-align:center}.flash-cards-audio-button{width:100%;background:#ffffff40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;border:1px solid rgba(255,255,255,.3);padding:.75rem;border-radius:12px;font-size:.875rem;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.flash-cards-audio-button:hover{background:#ffffff59;transform:translateY(-1px);box-shadow:0 4px 12px #0003}.flash-cards-example-section{padding:1.5rem}.flash-cards-example-box{background:#f9fafb;border-radius:16px;padding:1.25rem}.flash-cards-example-content{margin-bottom:.75rem}.flash-cards-example-thai{font-size:1rem;color:#1f2937;margin-bottom:.25rem;font-weight:500}.flash-cards-example-pronunciation{font-size:.875rem;color:#f59e0b;margin-bottom:.5rem;font-style:italic}.flash-cards-example-korean{font-size:.875rem;color:#4b5563}.flash-cards-example-audio-button{width:100%;background:#ec4899;color:#fff;border:none;padding:.625rem;border-radius:12px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 2px 8px #ec48994d}.flash-cards-example-audio-button:hover{background:#db2777;transform:translateY(-1px);box-shadow:0 4px 12px #ec489966}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.flash-cards-card-skeleton{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 32px #0000001a}.flash-cards-skeleton-image{aspect-ratio:1 / 1;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:1000px 100%;animation:shimmer 2s infinite}.flash-cards-skeleton-example{padding:1.5rem}.flash-cards-skeleton-line{height:1.25rem;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:1000px 100%;animation:shimmer 2s infinite;border-radius:4px;margin-bottom:.5rem}.flash-cards-skeleton-line.short{width:75%}.flash-cards-skeleton-button{height:2.5rem;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:1000px 100%;animation:shimmer 2s infinite;border-radius:12px;margin-top:.75rem}.flash-cards-navigation{background:#fff;border-top:1px solid #e9ecef;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;box-shadow:0 -2px 4px #0000000d;gap:1rem}.flash-cards-nav-button{padding:.75rem;border:1px solid #dee2e6;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;min-width:100px}.flash-cards-prev-button{background:#f8f9fa;color:#495057}.flash-cards-prev-button:hover:not(:disabled){background:#e9ecef;border-color:#adb5bd}.flash-cards-prev-button:disabled{opacity:.5;cursor:not-allowed}.flash-cards-next-button{background:#58cc02;color:#fff;border-color:#58cc02}.flash-cards-next-button:hover:not(:disabled){background:#4fb300;border-color:#4fb300;transform:translateY(-1px)}.flash-cards-next-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.flash-cards-answer-section{display:flex;gap:.75rem;justify-content:center;align-items:center;width:100%}.flash-cards-answer-btn{padding:.75rem;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;flex:1}.flash-cards-difficult-btn{background:#f59e0b;color:#fff}.flash-cards-difficult-btn:hover:not(:disabled){background:#d97706;transform:translateY(-1px);box-shadow:0 4px 12px #f59e0b4d}.flash-cards-memorized-btn{background:#22c55e;color:#fff}.flash-cards-memorized-btn:hover:not(:disabled){background:#16a34a;transform:translateY(-1px);box-shadow:0 4px 12px #22c55e4d}.flash-cards-answer-btn:disabled{opacity:.5;cursor:not-allowed}.flash-cards-feedback{text-align:center;font-size:1rem;font-weight:600;padding:.5rem;flex:1;display:flex;align-items:center;justify-content:center}.flash-cards-feedback-memorized{color:#22c55e}.flash-cards-feedback-difficult{color:#f59e0b}body.flash-cards-fullscreen{overflow:hidden}.vocab-main.flash-cards-active{height:100vh;overflow:hidden}.vocab-main.flash-cards-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important}.home-main.flash-cards-active{display:flex;align-items:center;justify-content:center;padding:20px}.home-main.flash-cards-active .flash-cards-screen{min-width:500px!important;max-width:800px!important;width:auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important;margin:0 auto!important}@media (max-width: 768px){.flash-cards-screen{min-width:auto!important;max-width:none!important;width:100vw!important;margin:0!important;border-radius:0!important;height:100vh!important;max-height:100vh!important;display:flex!important;flex-direction:column!important}.home-main.flash-cards-active .flash-cards-screen{height:100vh!important;border-radius:0!important;margin:0!important;min-width:100vw!important;max-width:100vw!important;width:100vw!important}.home-main.flash-cards-active{padding:0!important}.vocab-main.flash-cards-active .mobile-footer,.vocab-main.flash-cards-active .vocab-tab-navigation{display:none!important}.flash-cards-content{flex:1;overflow-y:auto}}@media (min-width: 481px) and (max-width: 768px){.home-main.flash-cards-active .flash-cards-screen{height:900px!important;min-width:500px!important;max-width:700px!important;width:auto!important;border-radius:15px!important}}@media (max-width: 768px){.flash-cards-content{padding:1rem}.flash-cards-thai-word{font-size:2.5rem}.flash-cards-korean-meaning{font-size:1.5rem}.flash-cards-emoji{font-size:6rem}.flash-cards-answer-section{gap:.5rem}.flash-cards-answer-btn{flex:1}.flash-cards-navigation{display:flex;flex-direction:row;gap:.75rem;align-items:center}.flash-cards-nav-button{flex:1}}@media (max-width: 480px){.flash-cards-header-content{gap:.5rem}.flash-cards-progress-section{margin:0 .5rem}.flash-cards-progress-text{font-size:.75rem;padding:.375rem .75rem}.flash-cards-thai-word{font-size:2rem}.flash-cards-korean-meaning{font-size:1.25rem}.flash-cards-emoji{font-size:5rem}.flash-cards-navigation{display:flex;flex-direction:row;gap:.75rem;align-items:center}.flash-cards-nav-button{flex:1}.flash-cards-answer-section{width:100%}.flash-cards-answer-btn{flex:1}}.flash-cards-completion-overlay{position:absolute;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:2rem;z-index:1000;animation:fadeIn .3s ease}.flash-cards-completion-card{background:#fff;border-radius:20px;padding:2rem 1.5rem;max-width:420px;width:90%;box-shadow:0 20px 60px #0000004d;animation:slideUp .4s ease;text-align:center}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.flash-cards-completion-header{margin-bottom:1.5rem}.flash-cards-completion-icon{font-size:3rem;margin-bottom:.75rem;animation:bounce .6s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.flash-cards-completion-title{font-size:1.5rem;font-weight:800;color:#1cb0f6;margin:0}.flash-cards-completion-stats{display:flex;gap:1rem;margin-bottom:1.5rem;justify-content:center}.flash-cards-completion-stat-item{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;padding:1rem 1.25rem;flex:1;max-width:150px;transition:transform .2s ease}.flash-cards-completion-stat-item:hover{transform:translateY(-3px)}.flash-cards-completion-stat-icon{font-size:2rem;margin-bottom:.5rem}.flash-cards-completion-stat-value{font-size:1.5rem;font-weight:800;color:#1cb0f6;margin-bottom:.25rem}.flash-cards-completion-stat-label{font-size:.75rem;color:#6c757d;font-weight:600}.flash-cards-completion-xp{margin:1.25rem 0}.flash-cards-completion-xp-badge{display:inline-block;background:linear-gradient(135deg,#58cc02,#45a002);color:#fff;font-size:1.25rem;font-weight:800;padding:.625rem 1.5rem;border-radius:50px;box-shadow:0 4px 15px #58cc024d;animation:pulse 1s ease infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.flash-cards-completion-xp-note{margin-top:.5rem;font-size:.875rem;color:#6c757d}.flash-cards-completion-message{font-size:.875rem;color:#495057;margin:1rem 0;padding:.75rem;background:#f8f9fa;border-radius:10px;font-weight:600}.flash-cards-completion-button{background:linear-gradient(135deg,#1cb0f6,#0d8ec9);color:#fff;border:none;padding:.875rem 2.5rem;border-radius:50px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #1cb0f64d;margin-top:1rem}.flash-cards-completion-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #1cb0f666}.flash-cards-completion-button:active{transform:translateY(0)}@media (max-width: 768px){.flash-cards-completion-overlay{padding:1rem}.flash-cards-completion-card{padding:1.5rem 1rem;border-radius:16px;width:95%}.flash-cards-completion-header{margin-bottom:1rem}.flash-cards-completion-icon{font-size:2.5rem;margin-bottom:.5rem}.flash-cards-completion-title{font-size:1.25rem}.flash-cards-completion-stats{gap:.75rem;margin-bottom:1rem}.flash-cards-completion-stat-item{padding:.75rem 1rem;border-radius:10px}.flash-cards-completion-stat-icon{font-size:1.5rem;margin-bottom:.25rem}.flash-cards-completion-stat-value{font-size:1.25rem}.flash-cards-completion-stat-label{font-size:.7rem}.flash-cards-completion-xp{margin:1rem 0}.flash-cards-completion-xp-badge{font-size:1.125rem;padding:.5rem 1.25rem}.flash-cards-completion-xp-note{font-size:.75rem}.flash-cards-completion-message{font-size:.8rem;padding:.625rem;margin:.75rem 0}.flash-cards-completion-button{padding:.75rem 2rem;font-size:.9375rem;margin-top:.75rem}}.flash-cards-completion-progress{width:100%;margin:1.5rem 0;padding:1rem;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:12px;border:2px solid #dee2e6}.flash-cards-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.flash-cards-progress-grade{font-size:1rem;font-weight:700;color:#1971c2;background:#1971c21a;padding:.25rem .75rem;border-radius:20px}.flash-cards-progress-text{font-size:.875rem;color:#495057;font-weight:600}.flash-cards-progress-bar-wrapper{width:100%;height:12px;background:#dee2e6;border-radius:6px;overflow:hidden;margin-bottom:.5rem;position:relative}.flash-cards-progress-bar-inner{height:100%;background:linear-gradient(90deg,#58cc02,#4fb300);border-radius:6px;transition:width .8s cubic-bezier(.4,0,.2,1);position:relative;box-shadow:0 2px 4px #58cc024d}.flash-cards-progress-bar-inner:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff0,#ffffff4d,#fff0);animation:shimmer 2s infinite}.flash-cards-progress-percentage{text-align:center;font-size:.875rem;font-weight:700;color:#58cc02}@media (max-width: 480px){.flash-cards-completion-progress{padding:.75rem;margin:1rem 0}.flash-cards-progress-header{flex-direction:column;align-items:flex-start;gap:.5rem}.flash-cards-progress-grade{font-size:.875rem}.flash-cards-progress-text{font-size:.75rem}.flash-cards-progress-bar-wrapper{height:10px}.flash-cards-progress-percentage{font-size:.75rem}}.flash-cards-spinner{width:16px;height:16px;border:2px solid #e5e7eb;border-top:2px solid #3b82f6;border-radius:50%;animation:flash-cards-spin .8s linear infinite}@keyframes flash-cards-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.home-main{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none;-ms-overflow-style:none;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}@media (max-width: 480px){.home-main{width:100%;max-width:800px;margin:0 auto;min-height:100vh;height:auto;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none;-ms-overflow-style:none;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}}.home-main:before{content:"🐾 🍗 🐾";position:fixed;top:20px;right:20px;font-size:16px;opacity:.3;animation:fadeInOut 3s ease-in-out infinite;z-index:1;pointer-events:none}.home-main:after{content:"🐱 🐔 😸";position:fixed;bottom:20px;left:20px;font-size:16px;opacity:.3;animation:fadeInOut 3s ease-in-out infinite 1.5s;z-index:1;pointer-events:none}.home-main::-webkit-scrollbar{display:none}.home-main>*{margin-bottom:0;position:relative;z-index:10}.home-main>*:not(:last-child){margin-bottom:20px}.home-main>.home-intro{margin-bottom:0!important}.home-main>*:first-child{margin-top:0}.home-main>*:last-child{margin-bottom:24px}@keyframes fadeInOut{0%,to{opacity:.3}50%{opacity:.6}}@media (max-width: 768px){.home-main{height:100%;max-height:100%;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:80px}.home-main::-webkit-scrollbar{display:none}.home-main>*:not(:last-child){margin-bottom:16px}.home-main>.home-intro{margin-bottom:0!important}.home-main>*:last-child{margin-bottom:16px}.home-main:before{top:10px;right:10px;font-size:14px}.home-main:after{bottom:20px;left:10px;font-size:14px}}@media (max-width: 480px){.home-main{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:80px}.home-main::-webkit-scrollbar{display:none}.home-main>*:not(:last-child){margin-bottom:12px}.home-main>.home-intro{margin-bottom:0!important}.home-main>*:last-child{margin-bottom:12px}.home-main:before,.home-main:after{font-size:12px}}.daily-word-help-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;align-items:center;justify-content:center}@media (min-width: 769px){.daily-word-help-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;overflow:hidden;align-items:center;justify-content:center}}.daily-word-help-modal-content{position:relative;background:#fff;border-radius:16px;width:90%;max-width:480px;height:600px;max-height:600px;overflow:hidden;display:flex;flex-direction:column;border:3px solid #FF8C42}@media (min-width: 769px){.daily-word-help-modal-content{width:85%;max-width:420px;max-height:85vh;border-radius:12px}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.daily-word-help-modal-header{background:#2c3e50;color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center;position:relative}.daily-word-help-modal-title{font-size:18px;font-weight:600;position:absolute;left:50%;transform:translate(-50%);color:#fff;margin:0}.daily-word-help-modal-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.daily-word-help-modal-close:hover{background:#ffffff1a}.daily-word-help-modal-body{padding:0;flex:1;overflow-y:auto}.daily-word-help-section{display:flex;gap:16px;padding:18px 20px;border-bottom:1px solid #eee;transition:all .2s ease}.daily-word-help-section:hover{background:#f8f9fa}.daily-word-help-section:last-child{border-bottom:none}.daily-word-help-section.highlight{background:linear-gradient(145deg,#ffe4b566,#ffdab966)}.daily-word-help-section.highlight:hover{background:linear-gradient(145deg,#ffe4b580,#ffdab980)}.daily-word-help-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.daily-word-help-content{flex:1}.daily-word-help-content h3{font-size:16px;font-weight:700;color:#ff6b6b;margin:0 0 8px}.daily-word-help-content p{font-size:14px;color:#666;margin:0;line-height:1.6}.daily-word-help-content strong{color:#ff6b6b;font-weight:700}.daily-word-help-list{list-style:none;padding:0;margin:8px 0 0}.daily-word-help-list li{font-size:14px;color:#666;line-height:1.6;padding:6px 0 6px 24px;position:relative}.daily-word-help-list li:before{content:"•";position:absolute;left:8px;color:#ff6b6b;font-weight:700;font-size:16px}.daily-word-help-list li strong{color:#ff6b6b;font-weight:700}.color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 3px #0003;margin-right:8px}.daily-word-help-modal-footer{padding:20px;border-top:1px solid #eee;background:#fff;display:flex;gap:10px}.daily-word-help-modal-button{flex:1;padding:14px;background:#2c3e50;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease}.daily-word-help-modal-button:hover{background:#34495e;transform:translateY(-1px);box-shadow:0 2px 8px #00000026}.daily-word-help-modal-button.secondary{background:#95a5a6;color:#fff}.daily-word-help-modal-button.secondary:hover{background:#7f8c8d}@media (max-width: 768px){.daily-word-help-modal-content{max-width:100%;border-radius:16px}.daily-word-help-modal-header{padding:20px 20px 16px}.daily-word-help-modal-title{font-size:18px}.daily-word-help-modal-body{padding:20px;gap:16px}.daily-word-help-section{padding:14px;gap:12px}.daily-word-help-icon{font-size:28px;width:44px;height:44px}.daily-word-help-content h3{font-size:15px}.daily-word-help-content p{font-size:13px}.daily-word-help-list li{font-size:13px;padding:5px 0 5px 22px}.daily-word-help-list li:before{left:6px;font-size:15px}.daily-word-help-modal-footer{padding:16px 20px 20px}.daily-word-help-modal-button{padding:12px;font-size:15px}}@media (max-width: 768px){.daily-word-help-modal-content{height:auto;max-height:70vh}}@media (max-width: 480px){.daily-word-help-modal-overlay{padding:12px}.daily-word-help-modal-header{padding:16px}.daily-word-help-modal-title{font-size:16px}.daily-word-help-modal-body{padding:16px;gap:12px}.daily-word-help-section{padding:12px;gap:10px}.daily-word-help-icon{font-size:24px;width:40px;height:40px}.daily-word-help-content h3{font-size:14px}.daily-word-help-content p{font-size:12px}.daily-word-help-list li{font-size:12px;padding:4px 0 4px 20px}.daily-word-help-list li:before{left:4px;font-size:14px}.daily-word-help-modal-footer{padding:12px 16px 16px}}.streak-info-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;align-items:center;justify-content:center}.streak-info-modal-overlay.show{display:flex}@media (min-width: 769px){.streak-info-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;overflow:hidden;align-items:center;justify-content:center}}.streak-info-modal-content{position:relative;background:#fff;border-radius:16px;width:90%;max-width:480px;height:600px;max-height:600px;overflow:hidden;display:flex;flex-direction:column;border:3px solid #FF8C42}@media (min-width: 769px){.streak-info-modal-content{width:85%;max-width:420px;max-height:85vh;border-radius:12px}}.streak-info-modal-header{background:#2c3e50;color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center;position:relative}.streak-info-modal-title{font-size:18px;font-weight:600;position:absolute;left:50%;transform:translate(-50%);color:#fff;margin:0}.streak-info-modal-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color .2s ease}.streak-info-modal-close:hover{background:#ffffff1a}.streak-info-modal-body{padding:0;flex:1;overflow-y:auto}.streak-info-help-section{display:flex;gap:16px;padding:18px 20px;border-bottom:1px solid #eee;transition:all .2s ease}.streak-info-help-section:hover{background:#f8f9fa}.streak-info-help-section:last-child{border-bottom:none}.streak-info-help-section.highlight{background:linear-gradient(145deg,#ffe4b566,#ffdab966)}.streak-info-help-section.highlight:hover{background:linear-gradient(145deg,#ffe4b580,#ffdab980)}.streak-info-help-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000001a}.streak-info-help-content{flex:1}.streak-info-help-content h3{font-size:16px;font-weight:700;color:#ff6b6b;margin:0 0 8px}.streak-info-help-content p{font-size:14px;color:#666;margin:0 0 8px;line-height:1.6}.streak-info-help-content ul{margin:8px 0 0;padding-left:0;list-style:none}.streak-info-help-content li{font-size:14px;color:#666;margin:4px 0;line-height:1.5}.streak-info-help-content strong{color:#ff6b6b;font-weight:700}.streak-info-modal-footer{padding:20px;border-top:1px solid #eee;background:#fff}.streak-info-modal-button{width:100%;padding:14px;background:#2c3e50;color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:background-color .2s ease}.streak-info-modal-button:hover{background:#34495e}@media (max-width: 768px){.streak-info-modal-content{max-width:100%;border-radius:16px}.streak-info-modal-header{padding:20px 20px 16px}.streak-info-modal-title{font-size:18px}.streak-info-help-section{padding:14px;gap:12px}.streak-info-help-icon{font-size:28px;width:44px;height:44px}.streak-info-help-content h3{font-size:15px}.streak-info-help-content p,.streak-info-help-content li{font-size:13px}.streak-info-modal-footer{padding:16px 20px 20px}.streak-info-modal-button{padding:12px;font-size:15px}}@media (max-width: 768px){.streak-info-modal-content{height:auto;max-height:70vh}}@media (max-width: 480px){.streak-info-modal-overlay{padding:12px}.streak-info-modal-header{padding:16px}.streak-info-modal-title{font-size:16px}.streak-info-help-section{padding:12px;gap:10px}.streak-info-help-icon{font-size:24px;width:40px;height:40px}.streak-info-help-content h3{font-size:14px}.streak-info-help-content p,.streak-info-help-content li{font-size:12px}.streak-info-modal-footer{padding:12px 16px 16px}}@media (min-width: 769px){.home-page-container{position:relative;width:500px!important;min-width:500px!important;max-width:500px!important;margin:40px auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.home-page-main{width:100%;height:100%}.home-page-container::-webkit-scrollbar{display:none}}@media (min-width: 481px) and (max-width: 768px){.home-page-container{position:relative;min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important;min-height:100vh;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.home-page-main{width:100%;min-height:100vh;height:auto}}@media (max-width: 480px){.home-page-container{position:relative;width:100%;max-width:800px;margin:0 auto;min-height:100vh;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.home-page-main{width:100%;min-height:100vh;height:auto}}.vocab-tab-navigation{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-bottom:3px solid #FF6B6B;color:#ff6b6b;padding:0 16px;height:48px;border-radius:0 0 15px 15px;position:absolute;top:0;left:0;right:0;z-index:1000;width:100%;box-sizing:border-box;display:flex;align-items:center;margin:0 auto}.vocab-tab-nav{display:flex;justify-content:center;align-items:center;max-width:1200px;margin:0 auto;width:100%;height:100%}.vocab-tab-nav-left{display:flex;gap:25px;align-items:center}.vocab-tab-btn{background:none;border:none;color:#ff6b6b;font-size:16px;font-weight:700;cursor:pointer;opacity:.7;transition:all .3s ease;position:relative;padding:8px 12px;border-radius:12px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);height:auto;display:flex;align-items:center;justify-content:center;gap:6px;min-height:auto}.vocab-tab-btn:hover{opacity:.9;background:#ffffff1a}.vocab-tab-btn.active{opacity:1;font-weight:700;background:#ffffff26;box-shadow:0 2px 8px #0003}@media (max-width: 768px){.vocab-tab-navigation{border-radius:0 0 12px 12px;position:absolute;padding:0 12px}.vocab-tab-nav-left{gap:20px}.vocab-tab-btn{font-size:16px;padding:6px 10px}}@media (max-width: 480px){.vocab-tab-btn{font-size:14px;padding:6px 8px;gap:4px}.vocab-tab-nav-left{gap:15px}.vocab-tab-navigation{padding:0 8px}}.word-quiz-content{width:100%;max-width:500px;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center;gap:25px;box-sizing:border-box;overflow:hidden}.word-quiz-header{text-align:center;width:100%;margin-bottom:10px}.word-quiz-question{font-size:25px;font-weight:700;color:#ff8c42;line-height:1.5}.word-quiz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px;width:100%;max-width:450px;box-sizing:border-box;margin:0 auto;justify-items:center;align-items:center;min-height:300px}.word-quiz-card{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FFD93D;border-radius:16px;padding:15px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;aspect-ratio:1;box-shadow:0 4px 12px #0000001a;width:100%;max-width:200px}.word-quiz-card:hover{transform:translateY(-3px);box-shadow:0 6px 16px #00000026,0 0 20px #ffd7004d}.word-quiz-card.selected{border-color:#ff6b6b;background:linear-gradient(145deg,#ffe4b5,#ffebcdf2);box-shadow:0 6px 16px #ff6b6b66,0 0 20px #ff6b6b4d;transform:translateY(-3px) scale(1.02)}.word-quiz-card.correct{border-color:#4ecdc4;background:linear-gradient(145deg,#4ecdc433,#fffffff2);box-shadow:0 6px 16px #4ecdc466,0 0 20px #4ecdc44d;animation:correct-pulse .6s ease;cursor:default}@keyframes correct-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.word-quiz-card.incorrect{border-color:#f44336;background:linear-gradient(145deg,#f4433633,#fffffff2);box-shadow:0 6px 16px #f4433666;animation:incorrect-shake .6s ease;cursor:default}@keyframes incorrect-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.word-quiz-card.disabled{opacity:.5;cursor:default}.word-quiz-card.disabled:hover{transform:none;box-shadow:0 4px 12px #0000001a}.word-quiz-image-container{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;background:#ffffff80}.word-quiz-image{width:100%;height:100%;object-fit:cover}.word-quiz-placeholder{font-size:64px;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}.word-quiz-text{font-size:16px;font-weight:700;color:#ff6b6b;text-align:center;line-height:1.3;position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.word-quiz-playing-indicator{font-size:14px;animation:sound-wave 1s ease-in-out infinite}@keyframes sound-wave{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.word-quiz-result-icon{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;box-shadow:0 2px 8px #0003}.correct-icon{background:linear-gradient(135deg,#4ecdc4,#45b7af)}.incorrect-icon{background:linear-gradient(135deg,#f44336,#e53935)}.word-quiz-submit-btn{background:linear-gradient(145deg,#ff6b6b,#ff8c42);border:none;border-radius:25px;padding:15px 40px;font-size:18px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 4px 12px #ff6b6b66;transition:all .3s ease;margin-top:10px}.word-quiz-submit-btn:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 6px 16px #ff6b6b80}.word-quiz-submit-btn.disabled{background:#e0e0e0;color:#999;cursor:not-allowed;box-shadow:none}.word-quiz-feedback{width:100%;background:#fffffff2;border-radius:15px;padding:20px;text-align:center;box-shadow:0 4px 12px #0000001a;animation:feedback-appear .4s ease}@keyframes feedback-appear{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.word-quiz-feedback.correct{border:3px solid #4ECDC4;background:linear-gradient(145deg,#4ecdc41a,#fffffff2)}.word-quiz-feedback.incorrect{border:3px solid #F44336;background:linear-gradient(145deg,#f443361a,#fffffff2)}.feedback-icon{font-size:48px;margin-bottom:15px}.feedback-text{font-size:20px;font-weight:700;margin-bottom:10px}.word-quiz-feedback.correct .feedback-text{color:#4ecdc4}.word-quiz-feedback.incorrect .feedback-text{color:#f44336}.feedback-explanation{font-size:14px;color:#666;line-height:1.5;margin-top:10px}@media (max-width: 768px){.word-quiz-content{padding:15px;gap:20px;max-width:100%}.word-quiz-question{font-size:25px}.word-quiz-grid{gap:12px;max-width:100%;margin:0 auto}.word-quiz-card{padding:12px;gap:10px}.word-quiz-placeholder{font-size:56px}.word-quiz-text{font-size:17px}.word-quiz-submit-btn{padding:12px 32px;font-size:16px}}@media (max-width: 480px){.word-quiz-content{padding:10px;gap:15px}.word-quiz-question{font-size:25px}.word-quiz-grid{gap:8px;max-width:100%;margin:0 auto}.word-quiz-card{padding:8px;gap:8px}.word-quiz-placeholder{font-size:48px}.word-quiz-text{font-size:17px}.word-quiz-result-icon{width:24px;height:24px;font-size:14px}.word-quiz-submit-btn{padding:10px 28px;font-size:15px}.feedback-icon{font-size:40px}.feedback-text{font-size:18px}.word-quiz-feedback{padding:15px}}.character-writing-content{width:100%;max-width:500px;margin:0 auto;padding:20px;display:flex;flex-direction:column;align-items:center;gap:20px}.character-writing-header{text-align:center;width:100%}.character-writing-title{font-size:24px;color:#ff6b6b;margin-bottom:10px;font-weight:700}.character-writing-name{font-size:18px;color:#ff8c42;font-weight:700;margin-bottom:8px}.character-writing-pronunciation{font-size:14px;color:#666}.character-writing-canvas-container{position:relative;width:100%;aspect-ratio:1;border-radius:15px;overflow:hidden;border:3px solid #FF8C42;box-shadow:0 4px 12px #0000001a;touch-action:none;background:#fff}.character-writing-guide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:400px;color:#ff8c4226;font-weight:700;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:1}.character-writing-stroke-guide{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;height:90%;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:1;opacity:.5;transition:opacity .3s ease}.stroke-guide-image{width:100%;height:100%;object-fit:contain}.character-writing-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;z-index:2}.toggle-button{background:linear-gradient(135deg,#95a5a6,#7f8c8d)}.toggle-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #00000040}.character-writing-hint{background:#ffd7001a;border:2px solid #FFD700;border-radius:10px;padding:12px;text-align:center;font-size:14px;color:#666;width:100%}.character-writing-buttons{display:flex;gap:10px;width:100%}.character-writing-button{flex:1;border:none;border-radius:15px;padding:15px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #0003;transition:all .3s ease}.reset-button{background:linear-gradient(135deg,#95a5a6,#7f8c8d)}.complete-button{background:linear-gradient(135deg,#4ecdc4,#45b7af);display:flex;align-items:center;justify-content:center;gap:8px}.complete-button:disabled{background:#e0e0e0;cursor:not-allowed;opacity:.5}.character-writing-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #00000040}.toggle-button{background:linear-gradient(135deg,#95a5a6,#7f8c8d);display:flex;align-items:center;justify-content:center;gap:8px}.toggle-button.active{background:linear-gradient(135deg,#6c63ff,#5a52d5)}@media (max-width: 768px){.character-writing-content{padding:15px}.character-writing-guide{font-size:300px}}@media (max-width: 480px){.character-writing-content{padding:10px}.character-writing-guide{font-size:240px}.character-writing-button{font-size:14px;padding:12px}.character-writing-title{font-size:20px}.character-writing-name{font-size:16px}}.lesson-content-renderer{width:100%;max-width:500px;margin:0 auto;padding:20px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);min-height:700px;display:flex;flex-direction:column;justify-content:center}.text-highlight{background:linear-gradient(135deg,#ffd93d,#ffe55c);padding:2px 6px;border-radius:4px;font-weight:700;color:#333}.text-important{background:linear-gradient(135deg,#ff6b6b,#ff8e8e);padding:2px 6px;border-radius:4px;font-weight:700;color:#fff;text-shadow:1px 1px 0px rgba(0,0,0,.3)}.text-emphasis{background:linear-gradient(135deg,#4ecdc4,#6ee3db);padding:2px 6px;border-radius:4px;font-weight:700;color:#fff;text-shadow:1px 1px 0px rgba(0,0,0,.3)}.lesson-intro-content{text-align:center}.lesson-intro-header{margin-bottom:30px}.lesson-intro-icon{font-size:80px;margin-bottom:20px;animation:gentle-bounce 2s ease-in-out infinite}@keyframes gentle-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.lesson-intro-title{font-size:28px;font-weight:700;color:#ff6b6b;margin-bottom:15px;text-shadow:2px 2px 0px #FFE4B5}.lesson-intro-subtitle{font-size:18px;color:#ff8c42;font-weight:700;line-height:1.6;margin-bottom:20px;text-align:left}.lesson-main-image{margin:30px 0;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px #00000026}.lesson-main-image img{width:100%;height:auto;display:block}.lesson-image-placeholder{width:100%;max-width:350px;aspect-ratio:1;background:linear-gradient(135deg,#e8f5e8,#c8e6c9);border-radius:15px;margin:30px auto;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;color:#4caf50;font-size:16px;font-weight:700}.lesson-image-placeholder img{width:100%;height:100%;object-fit:contain;border-radius:15px}.tone-mark{font-size:48px;color:#2196f3;margin:20px 0;font-weight:700;text-align:center}.lesson-description{margin:25px 0;text-align:left}.description-paragraph{font-size:16px;line-height:1.7;color:#666;margin-bottom:15px}.lesson-points-list{display:flex;flex-direction:column;gap:15px;margin-top:25px;text-align:left}.lesson-point-item{display:flex;align-items:flex-start;gap:15px;padding:15px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.point-bullet{font-size:20px;color:#ffd93d;flex-shrink:0;width:25px;text-align:center}.point-text{font-size:16px;font-weight:700;color:#ffffffe6;line-height:1.5}.lesson-character-content{text-align:center}.character-display-section{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FF6B6B;border-radius:20px;padding:40px 20px;margin-bottom:30px;box-shadow:0 8px 20px #00000026}.character-main{font-size:120px;font-weight:700;color:#ff6b6b;margin-bottom:20px;text-shadow:3px 3px 0px rgba(255,255,255,.8);line-height:1}.character-pronunciation{font-size:24px;color:#ff8c42;font-weight:700;margin-bottom:15px;font-style:italic}.character-meaning{font-size:28px;color:#ff6b6b;font-weight:700}.character-explanation{text-align:left;margin:30px 0}.character-explanation h3{font-size:20px;color:#ff6b6b;margin-bottom:15px;font-weight:700}.explanation-paragraph{font-size:16px;line-height:1.7;color:#666;margin-bottom:15px}.character-examples{margin-top:30px}.character-examples h3{font-size:20px;color:#ff6b6b;margin-bottom:20px;font-weight:700;text-align:left}.examples-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px}.example-item{background:#ffffffe6;border:2px solid #FFD93D;border-radius:15px;padding:20px 10px;text-align:center;box-shadow:0 4px 12px #0000001a}.example-character{font-size:36px;font-weight:700;color:#ff6b6b;margin-bottom:10px}.example-meaning{font-size:14px;color:#666;font-weight:700}.lesson-detailed-content{text-align:left}.detailed-header{text-align:center;margin-bottom:30px}.detailed-title{font-size:24px;font-weight:700;color:#ff6b6b;margin-bottom:15px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.detailed-summary{font-size:16px;color:#ff8c42;font-weight:700;line-height:1.6}.detailed-sections{display:flex;flex-direction:column;gap:25px}.detailed-section{background:#ffffffe6;border-radius:15px;padding:20px;border:2px solid #FFD93D;box-shadow:0 4px 12px #0000001a}.section-title{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:15px;border-bottom:2px solid #FFE4B5;padding-bottom:8px}.section-content{margin-bottom:15px}.content-text{font-size:16px;line-height:1.7;color:#666;margin-bottom:15px}.content-highlight{background:linear-gradient(135deg,#ffd93d,#ffe55c);border-radius:10px;padding:15px;margin:15px 0}.highlight-label{font-size:14px;font-weight:700;color:#ff6b6b;margin-bottom:8px}.highlight-text{font-size:16px;font-weight:700;color:#333}.content-example{background:#4ecdc41a;border:2px solid #4ECDC4;border-radius:10px;padding:15px;margin:15px 0}.example-label{font-size:14px;font-weight:700;color:#4ecdc4;margin-bottom:8px}.example-text{font-size:16px;color:#666;font-style:italic}.content-image{text-align:center;margin:20px 0}.content-image img{max-width:100%;height:auto;border-radius:10px;box-shadow:0 4px 12px #00000026}.image-caption{font-size:14px;color:#999;margin-top:10px;font-style:italic}.lesson-tone-content{text-align:center}.tone-header{margin-bottom:30px}.tone-title{font-size:24px;font-weight:700;color:#ff6b6b;margin-bottom:15px}.tone-description{font-size:16px;color:#ff8c42;font-weight:700;line-height:1.6;text-align:left}.tone-display{background:#ffffffe6;border:3px solid #4ECDC4;border-radius:20px;padding:30px;margin-bottom:30px;box-shadow:0 8px 20px #00000026}.tone-character{font-size:80px;font-weight:700;color:#4ecdc4;margin-bottom:30px;text-shadow:2px 2px 0px rgba(255,255,255,.8)}.tone-indicators{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:15px}.tone-example{background:#fffc;border:2px solid #FFD93D;border-radius:15px;padding:15px 10px}.tone-character-example{font-size:32px;font-weight:700;color:#ff6b6b;margin-bottom:8px}.tone-label{font-size:12px;font-weight:700;color:#ff8c42;margin-bottom:5px}.tone-example .tone-description{font-size:11px;color:#666;line-height:1.3}.tone-explanation{text-align:left}.tone-explanation-text{font-size:16px;line-height:1.7;color:#666;margin-bottom:15px}.lesson-visual-content{text-align:center}.visual-header{margin-bottom:30px}.visual-title{font-size:24px;font-weight:700;color:#ff6b6b;margin-bottom:20px}.visual-main{position:relative;margin-bottom:30px;border-radius:15px;overflow:hidden;box-shadow:0 8px 20px #00000026}.main-visual img{width:100%;height:auto;display:block}.visual-annotations{position:absolute;inset:0}.annotation{position:absolute;z-index:2}.annotation-point{width:20px;height:20px;background:#ff6b6b;border:3px solid white;border-radius:50%;box-shadow:0 2px 8px #0000004d;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.annotation-text{background:#fffffff2;border:2px solid #FF6B6B;border-radius:8px;padding:8px 12px;font-size:12px;font-weight:700;color:#333;white-space:nowrap;box-shadow:0 4px 12px #0003;margin-top:25px;margin-left:-50px}.visual-explanation{display:flex;flex-direction:column;gap:20px;text-align:left}.explanation-item{display:flex;align-items:flex-start;gap:15px;background:#ffffffe6;border:2px solid #FFD93D;border-radius:15px;padding:20px;box-shadow:0 4px 12px #0000001a}.explanation-icon{font-size:32px;flex-shrink:0;margin-top:5px}.explanation-content h4{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:10px}.explanation-content p{font-size:16px;line-height:1.6;color:#666}.lesson-default-content{text-align:center;padding:40px 20px;background:#ffffffe6;border:3px solid #E0E0E0;border-radius:20px;box-shadow:0 8px 20px #0000001a}.lesson-default-content h2{font-size:24px;color:#999;margin-bottom:15px}.lesson-default-content p{font-size:16px;color:#666}@media (min-width: 769px){.lesson-content-renderer{min-height:700px;height:700px;overflow-y:auto}}@media (max-width: 768px){.lesson-content-renderer{padding:15px;min-height:auto;height:auto}.lesson-intro-icon{font-size:60px}.lesson-intro-title{font-size:24px}.character-main{font-size:80px}.character-pronunciation{font-size:20px}.character-meaning{font-size:24px}.examples-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}.tone-character{font-size:60px}.tone-indicators{grid-template-columns:repeat(2,1fr)}.explanation-item{flex-direction:column;text-align:center}.explanation-icon{align-self:center}}@media (max-width: 480px){.lesson-content-renderer{padding:10px}.lesson-intro-icon{font-size:50px}.lesson-intro-title{font-size:20px}.character-main{font-size:60px}.detailed-section{padding:15px}.tone-indicators{grid-template-columns:1fr}.annotation-text{font-size:10px;padding:6px 8px}}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.6}}.skeleton-mode{pointer-events:none;-webkit-user-select:none;user-select:none}.learning-path-view-container.skeleton-mode{min-height:100vh;padding:20px;display:flex;flex-direction:column;align-items:center;background:linear-gradient(135deg,#f8f9fa,#f1f3f4,#e8eaed)}.learning-path-view-header.skeleton{background:#f8f9fa;border:2px solid #e9ecef;border-radius:16px;padding:20px;margin-bottom:30px;width:100%;max-width:400px;animation:skeleton-pulse 2s ease-in-out infinite}.learning-path-view-profile-section.skeleton{display:flex;align-items:center;gap:15px;margin-bottom:20px}.learning-path-view-avatar.skeleton-content{width:60px;height:60px;border-radius:50%;flex-shrink:0}.learning-path-view-profile-info.skeleton{flex:1}.learning-path-view-nickname.skeleton-line{width:120px;height:20px;margin-bottom:8px}.learning-path-view-grade-info.skeleton{display:flex;align-items:center;gap:10px}.learning-path-view-current-grade.skeleton-content{width:60px;height:20px;border-radius:10px}.learning-path-view-target-grade.skeleton-line{width:80px;height:14px}.learning-path-view-upgrade-btn.skeleton-content{width:80px;height:32px;border-radius:12px;flex-shrink:0}.learning-path-view-grade-tabs.skeleton{display:flex;gap:8px;flex-wrap:wrap}.learning-path-view-grade-tab.skeleton-content{width:40px;height:28px;border-radius:8px}.learning-path-view-lessons-container.skeleton{width:100%;max-width:400px;position:relative}.learning-path-view-connection-line.skeleton-content{position:absolute;left:50%;top:40px;bottom:40px;width:4px;border-radius:2px;transform:translate(-50%);opacity:.6;z-index:1}.learning-path-view-lesson-item.skeleton{position:relative;z-index:2;margin-bottom:40px}.learning-path-view-lesson-card.skeleton{background:#f8f9fa;border:2px solid #e9ecef;border-radius:16px;padding:20px;display:flex;align-items:center;gap:15px;position:relative;animation:skeleton-pulse 2s ease-in-out infinite}.learning-path-view-badges.skeleton{position:absolute;top:10px;right:15px;display:flex;align-items:center;gap:8px}.learning-path-view-grade-badge.skeleton-content{width:35px;height:20px;border-radius:10px}.learning-path-view-stage-badge.skeleton-content{width:45px;height:18px;border-radius:9px}.learning-path-view-lesson-icon.skeleton-content{width:80px;height:80px;border-radius:50%;flex-shrink:0}.learning-path-view-lesson-info.skeleton{flex:1;padding-right:60px}.learning-path-view-lesson-title.skeleton-line{width:70%;height:20px;margin-bottom:8px}.learning-path-view-lesson-subtitle.skeleton-line{width:50%;height:14px;margin-bottom:12px}.learning-path-view-progress-bar.skeleton-content{width:100%;height:8px;border-radius:4px;margin-bottom:8px}.learning-path-view-progress-text.skeleton-line{width:60%;height:12px}.learning-path-view-connection-point.skeleton-content{position:absolute;left:50%;bottom:-20px;width:12px;height:12px;border-radius:50%;transform:translate(-50%);z-index:3}.learning-path-detail-screen.skeleton-mode{height:100vh;display:flex;flex-direction:column;max-width:800px;min-width:500px;margin:0 auto;background:linear-gradient(135deg,#f8f9fa,#f1f3f4,#e8eaed);border-radius:16px}.learning-path-header-content.skeleton{display:flex;align-items:center;justify-content:space-between;width:100%}.learning-path-back-button.skeleton-content{width:44px;height:44px;border-radius:50%;flex-shrink:0}.learning-path-lesson-title-section.skeleton{flex:1;margin-left:15px}.learning-path-lesson-title.skeleton-line{width:60%;height:22px;margin-bottom:8px}.learning-path-lesson-icon.skeleton-content{width:50px;height:50px;border-radius:50%;flex-shrink:0}.learning-path-lesson-detail-container.skeleton{flex:1;padding:20px;overflow-y:auto}.learning-path-progress-card.skeleton{background:#f8f9fa;border:2px solid #e9ecef;border-radius:16px;padding:20px;margin-bottom:20px;animation:skeleton-pulse 2s ease-in-out infinite}.learning-path-progress-title.skeleton-line{width:120px;height:18px}.learning-path-progress-percentage.skeleton-content{width:80px;height:24px;border-radius:12px}.learning-path-progress-bar.skeleton-content{width:100%;height:12px;border-radius:6px;margin-bottom:10px}.learning-path-progress-text.skeleton-line{width:150px;height:14px;margin:0 auto}.learning-path-lesson-list.skeleton{display:flex;flex-direction:column;gap:12px}.learning-path-lesson-item.skeleton{background:#f8f9fa;border:2px solid #e9ecef;border-radius:16px;padding:16px;animation:skeleton-pulse 2s ease-in-out infinite}.learning-path-lesson-item-content.skeleton{display:flex;align-items:center;gap:15px}.learning-path-lesson-number.skeleton-content{width:80px;height:80px;border-radius:50%;flex-shrink:0}.learning-path-lesson-info.skeleton{flex:1;min-width:0}.learning-path-lesson-name.skeleton{margin-bottom:8px}.learning-path-lesson-title.skeleton-line{width:70%;height:18px;margin-bottom:8px}.learning-path-lesson-meta.skeleton{display:flex;gap:10px;margin-bottom:8px}.learning-path-lesson-time.skeleton-content,.learning-path-lesson-difficulty.skeleton-content,.learning-path-quiz-topics.skeleton-content{width:60px;height:20px;border-radius:8px}.learning-path-lesson-description.skeleton-line{width:85%;height:14px;margin-bottom:8px}.learning-path-lesson-words.skeleton-line{width:90%;height:14px}.learning-path-lesson-item.quiz.skeleton{border-color:#d1c4e9;background:#f3e5f5}.learning-path-lesson-screen.skeleton-mode{height:100vh;display:flex;flex-direction:column;max-width:800px;min-width:500px;margin:0 auto;background:linear-gradient(135deg,#f8f9fa,#f1f3f4,#e8eaed);border-radius:16px}.learning-path-lesson-detail-header.skeleton{background:#f8f9fa;border-bottom:2px solid #e9ecef;padding:20px;flex-shrink:0}.learning-path-header-content.skeleton{display:flex;align-items:center;gap:15px;max-width:400px;margin:0 auto}.learning-path-lesson-progress-bar-section.skeleton{flex:1;padding:0 15px}.learning-path-progress-bar-container.skeleton{width:100%;height:12px;border-radius:6px;overflow:hidden}.learning-path-progress-bar-fill.skeleton-content{height:100%;width:45%;border-radius:4px}.learning-path-lesson-progress-indicator.skeleton-content{width:40px;height:24px;border-radius:12px;flex-shrink:0}.learning-path-lesson-content.skeleton{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}.learning-path-lesson-content-wrapper.skeleton{width:100%;max-width:500px}.lesson-content-skeleton{text-align:center;background:#f8f9fa;border:2px solid #e9ecef;border-radius:16px;padding:40px 20px;animation:skeleton-pulse 2s ease-in-out infinite}.lesson-intro-icon.skeleton-content{width:80px;height:80px;border-radius:50%;margin:0 auto 30px}.lesson-intro-title.skeleton-line{width:70%;height:32px;margin:0 auto 20px}.lesson-intro-subtitle.skeleton-line{width:50%;height:20px;margin:0 auto 30px}.lesson-description.skeleton{margin:25px 0;text-align:left}.description-paragraph.skeleton-line{width:100%;height:18px;margin-bottom:15px}.description-paragraph.skeleton-line:nth-child(2){width:85%}.description-paragraph.skeleton-line:nth-child(3){width:75%}.lesson-points-list.skeleton{display:flex;flex-direction:column;gap:15px;margin-top:25px;text-align:left}.lesson-point-item.skeleton{display:flex;align-items:flex-start;gap:15px;padding:15px;background:#f1f3f4;border:2px solid #e8eaed;border-radius:12px}.point-bullet.skeleton-content{width:20px;height:20px;border-radius:50%;flex-shrink:0;margin-top:2px}.point-text.skeleton-line{width:85%;height:16px}.learning-path-lesson-navigation.skeleton{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#f8f9fa;border-top:2px solid #e9ecef;flex-shrink:0}.learning-path-nav-button.skeleton-content{width:100px;height:44px;border-radius:22px}.learning-path-step-info.skeleton{display:flex;align-items:center;gap:10px}.learning-path-step-counter.skeleton-content{width:60px;height:32px;border-radius:16px}@media (min-width: 481px) and (max-width: 768px){.learning-path-detail-screen.skeleton-mode{min-width:500px;max-width:700px;margin:20px auto;border-radius:12px}.learning-path-view-container.skeleton-mode{padding:15px}.learning-path-view-header.skeleton{max-width:350px;padding:15px}.learning-path-view-avatar.skeleton-content{width:50px;height:50px}.learning-path-view-lesson-icon.skeleton-content,.learning-path-lesson-number.skeleton-content{width:70px;height:70px}}@media (max-width: 480px){.learning-path-detail-screen.skeleton-mode,.learning-path-lesson-screen.skeleton-mode{min-width:auto;max-width:none;width:100vw;margin:0;border-radius:0;height:100vh;max-height:100vh}.learning-path-view-container.skeleton-mode{padding:10px}.learning-path-view-header.skeleton{max-width:300px;padding:12px;margin-bottom:20px}.learning-path-view-profile-section.skeleton{gap:10px;margin-bottom:15px}.learning-path-view-avatar.skeleton-content{width:45px;height:45px}.learning-path-view-nickname.skeleton-line{width:100px;height:16px}.learning-path-view-current-grade.skeleton-content{width:50px;height:18px}.learning-path-view-target-grade.skeleton-line{width:70px;height:12px}.learning-path-view-upgrade-btn.skeleton-content{width:70px;height:28px}.learning-path-view-grade-tab.skeleton-content{width:35px;height:24px}.learning-path-view-lessons-container.skeleton{max-width:300px}.learning-path-view-lesson-item.skeleton{margin-bottom:30px}.learning-path-view-lesson-card.skeleton{padding:12px;gap:10px}.learning-path-view-badges.skeleton{top:8px;right:10px;gap:6px}.learning-path-view-grade-badge.skeleton-content{width:30px;height:18px}.learning-path-view-stage-badge.skeleton-content{width:35px;height:16px}.learning-path-view-lesson-icon.skeleton-content{width:60px;height:60px}.learning-path-view-lesson-info.skeleton{padding-right:40px}.learning-path-view-lesson-title.skeleton-line{width:80%;height:16px}.learning-path-view-lesson-subtitle.skeleton-line{width:60%;height:12px;margin-bottom:10px}.learning-path-view-progress-bar.skeleton-content{height:6px}.learning-path-view-progress-text.skeleton-line{width:70%;height:10px}.learning-path-lesson-detail-header.skeleton,.learning-path-lesson-detail-container.skeleton{padding:16px 20px}.learning-path-lesson-title.skeleton-line{width:70%;height:20px}.learning-path-lesson-subtitle.skeleton-line{width:50%;height:14px}.learning-path-lesson-icon.skeleton-content{width:44px;height:44px}.learning-path-progress-card.skeleton{padding:16px;margin-bottom:16px}.learning-path-lesson-item.skeleton{padding:14px}.learning-path-lesson-number.skeleton-content{width:60px;height:60px}.learning-path-lesson-title.skeleton-line{width:75%;height:16px}.learning-path-lesson-time.skeleton-content,.learning-path-lesson-difficulty.skeleton-content,.learning-path-quiz-topics.skeleton-content{width:50px;height:18px}.learning-path-lesson-description.skeleton-line{width:90%;height:12px}.learning-path-lesson-words.skeleton-line{width:85%;height:12px}.learning-path-lesson-status.skeleton-content{width:24px;height:24px}.learning-path-lesson-detail-header.skeleton{padding:12px 15px}.learning-path-header-content.skeleton{gap:10px}.learning-path-back-button.skeleton-content{width:36px;height:36px}.learning-path-lesson-progress-bar-section.skeleton{padding:0 10px}.learning-path-lesson-progress-indicator.skeleton-content{width:35px;height:20px}.learning-path-lesson-content.skeleton,.lesson-content-skeleton{padding:20px 15px}.lesson-intro-icon.skeleton-content{width:60px;height:60px;margin-bottom:20px}.lesson-intro-title.skeleton-line{width:80%;height:24px;margin-bottom:15px}.lesson-intro-subtitle.skeleton-line{width:60%;height:16px;margin-bottom:20px}.description-paragraph.skeleton-line{height:16px;margin-bottom:12px}.lesson-point-item.skeleton{padding:12px;gap:12px}.point-bullet.skeleton-content{width:16px;height:16px}.point-text.skeleton-line{width:90%;height:14px}.learning-path-lesson-navigation.skeleton{padding:15px}.learning-path-nav-button.skeleton-content{width:80px;height:36px}.learning-path-step-counter.skeleton-content{width:50px;height:28px}}@media (prefers-reduced-motion: reduce){.skeleton-content,.skeleton-line,.skeleton-mode *{animation:none}.skeleton-mode{opacity:.7}}@media (prefers-contrast: high){.skeleton-content,.skeleton-line{background:linear-gradient(90deg,#d0d0d0 25%,#b0b0b0,#d0d0d0 75%)}.skeleton-mode .learning-path-view-header.skeleton,.skeleton-mode .learning-path-lesson-card.skeleton,.skeleton-mode .learning-path-progress-card.skeleton,.skeleton-mode .learning-path-lesson-item.skeleton,.skeleton-mode .lesson-content-skeleton{border-color:#888;background:#f0f0f0}}@media (prefers-color-scheme: dark){.skeleton-content,.skeleton-line{background:linear-gradient(90deg,#2a2a2a 25%,#3a3a3a,#2a2a2a 75%)}.skeleton-mode .learning-path-view-container.skeleton-mode{background:linear-gradient(135deg,#1a1a1a,#2a2a2a,#1a1a1a)}.skeleton-mode .learning-path-view-header.skeleton,.skeleton-mode .learning-path-lesson-card.skeleton,.skeleton-mode .learning-path-progress-card.skeleton,.skeleton-mode .learning-path-lesson-item.skeleton,.skeleton-mode .lesson-content-skeleton{background:#2a2a2a;border-color:#444}}@media (min-width: 769px){.learning-path-lesson-screen{min-width:500px!important;max-width:800px!important;width:auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important}.learning-path-lesson-screen *{min-width:0!important}.vocab-main.learning-path-lesson-active .learning-path-lesson-screen{min-width:500px!important;max-width:800px!important;width:auto!important}.learning-path-header-content{margin:0!important;max-width:none!important}.learning-path-lesson-icon{display:none!important}}@media (min-width: 481px) and (max-width: 768px){.learning-path-lesson-screen{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important}.vocab-main.learning-path-lesson-active .vocab-tab-navigation{display:none!important}.learning-path-lesson-content{height:calc(100vh - 140px);min-height:calc(100vh - 140px);max-height:calc(100vh - 140px)}}@media (max-width: 480px){.learning-path-lesson-screen{min-width:auto!important;max-width:none!important;width:100vw!important;margin:0!important;border-radius:0!important;height:100vh!important;max-height:100vh!important}.vocab-main.learning-path-lesson-active .mobile-footer,.vocab-main.learning-path-lesson-active .vocab-tab-navigation{display:none!important}.learning-path-lesson-content{height:calc(100vh - 140px);min-height:calc(100vh - 140px);max-height:calc(100vh - 140px)}}.vocab-main.learning-path-lesson-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important}.learning-path-lesson-screen{height:100vh;display:flex;flex-direction:column;max-width:800px;min-width:500px;margin:0 auto;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);color:#ff6b6b;overflow:hidden;position:relative;border-radius:20px;box-shadow:0 8px 20px #00000026}.learning-path-header-content{display:flex;align-items:center;gap:15px;max-width:400px;margin:0 auto}.learning-path-lesson-progress-bar-section{flex:1;padding:0 15px}.learning-path-progress-bar-container{width:100%;height:12px;background:#fff8dc;border:2px solid #FF8C42;border-radius:6px;overflow:hidden}.learning-path-progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:4px;transition:width .5s ease}.learning-path-lesson-progress-indicator{font-size:12px;color:#fff;font-weight:700;padding:4px 8px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:12px;box-shadow:0 2px 8px #ff8c4266;min-width:35px;text-align:center;white-space:nowrap}.learning-path-lesson-content{flex:1;display:flex;align-items:center;justify-content:center;padding:0;overflow-y:auto;min-height:0}.learning-path-lesson-content-wrapper{width:100%;max-width:500px;padding:0}.learning-path-lesson-loading{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px}.learning-path-lesson-loading-spinner{width:50px;height:50px;border:4px solid rgba(255,140,66,.2);border-top:4px solid #FF8C42;border-radius:50%;animation:learning-path-lesson-spin 1s linear infinite}@keyframes learning-path-lesson-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.learning-path-lesson-loading-details{color:#666;font-size:14px}.learning-path-lesson-intro{text-align:center;max-width:500px;width:100%;padding:40px}.learning-path-lesson-intro-icon{font-size:80px;margin-bottom:30px}.learning-path-lesson-intro-title{font-size:28px;font-weight:700;margin-bottom:20px;color:#ff6b6b;text-shadow:2px 2px 0px #FFE4B5}.learning-path-lesson-intro-content{font-size:18px;line-height:1.6;color:#ff8c42;font-weight:700}.learning-path-lesson-points-container{display:flex;flex-direction:column;gap:15px;margin-top:30px}.learning-path-lesson-point-item{padding:15px;border-radius:15px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;text-align:left}.learning-path-lesson-point-dot{width:8px;height:8px;border-radius:50%;background:#ffd93d;margin-right:15px;flex-shrink:0}.learning-path-lesson-point-text{font-size:16px;font-weight:700;color:#ffffffe6}.learning-path-word-intro{text-align:center;max-width:500px;width:100%;padding:40px}.learning-path-detail-icon{font-size:80px;margin-bottom:20px;text-align:center}.learning-path-detail-title{font-size:28px;font-weight:700;margin-bottom:30px;color:#ffd93d;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.learning-path-word-card{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FF6B6B;border-radius:20px;padding:30px;margin-bottom:20px;box-shadow:0 8px 20px #00000026}.learning-path-detail-content{font-size:18px;line-height:1.6;color:#666;text-align:center;margin:0}.learning-path-thai-word{font-size:48px;font-weight:700;color:#ff6b6b;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.learning-path-pronunciation{font-size:20px;color:#ff8c42;margin-bottom:15px;font-style:italic;font-weight:700}.learning-path-korean-meaning{font-size:24px;color:#ff6b6b;margin-bottom:20px;font-weight:700}.learning-path-audio-button{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;border-radius:25px;padding:12px 24px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ff8c4266}.learning-path-audio-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff8c4280}.learning-path-example-section{background:#ffffffe6;border-radius:15px;padding:20px;border:2px solid #FFD93D;margin-top:20px}.learning-path-example-section h3{color:#ff8c42;margin-bottom:15px;font-size:16px;font-weight:700}.learning-path-example-thai{font-size:20px;color:#ff6b6b;margin-bottom:8px;font-weight:700}.learning-path-example-korean{font-size:14px;color:#666;line-height:1.5}.learning-path-practice-question{text-align:center;max-width:500px;width:100%;padding:40px}.learning-path-question-text{font-size:22px;font-weight:700;color:#ff6b6b;margin-bottom:30px;text-shadow:1px 1px 0px rgba(255,255,255,.8);line-height:1.4}.learning-path-options-grid{display:grid;gap:15px;margin-bottom:20px}.learning-path-option-button{background:linear-gradient(145deg,#ffffffe6,#ffe4b5cc);border:3px solid #FF8C42;border-radius:15px;padding:20px;color:#ff6b6b;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;min-height:60px;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 4px 10px #0000001a}.learning-path-option-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #00000026;background:linear-gradient(145deg,#fff,#ffe4b5)}.learning-path-option-button.learning-path-correct{background:linear-gradient(145deg,#61e002e6,#4caf50cc);border-color:#61e002;color:#fff;box-shadow:0 6px 15px #61e00266;animation:learning-path-lesson-correct-pulse .6s ease}.learning-path-option-button.learning-path-incorrect{background:linear-gradient(145deg,#f44336e6,#ff6b6bcc);border-color:#f44336;color:#fff;box-shadow:0 6px 15px #f4433666;animation:learning-path-lesson-incorrect-shake .6s ease}.learning-path-option-button.learning-path-disabled{opacity:.5;cursor:not-allowed}@keyframes learning-path-lesson-correct-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes learning-path-lesson-incorrect-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.learning-path-explanation{background:#ffffffe6;border-radius:15px;padding:20px;border:2px solid #FF8C42;margin-top:20px;box-shadow:0 4px 12px #0000001a}.learning-path-explanation-text{font-size:16px;color:#666;line-height:1.5;margin:0}.learning-path-lesson-completion{text-align:center;max-width:500px;width:100%;padding:40px}.learning-path-completion-icon{font-size:100px;margin-bottom:30px;animation:learning-path-lesson-celebration 2s ease-in-out infinite}@keyframes learning-path-lesson-celebration{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}.learning-path-completion-title{font-size:32px;font-weight:700;color:#ff6b6b;margin-bottom:20px;text-shadow:2px 2px 0px #FFE4B5}.learning-path-completion-content{font-size:18px;color:#ff8c42;margin-bottom:30px;line-height:1.6;font-weight:700}.learning-path-final-score{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border-radius:20px;padding:25px;border:3px solid #FF6B6B;box-shadow:0 8px 20px #00000026}.learning-path-score-text{font-size:16px;color:#666;margin-bottom:10px;font-weight:700}.learning-path-score-number{font-size:36px;font-weight:700;color:#ff6b6b;text-shadow:2px 2px 0px rgba(255,255,255,.8)}.learning-path-completion-stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:30px}.learning-path-stat-item{text-align:center;background:#ffffffe6;padding:20px;border-radius:15px;min-width:120px;border:2px solid #FFD93D}.learning-path-stat-label{font-size:.9rem;color:#666;margin-bottom:8px}.learning-path-stat-value{font-size:1.5rem;font-weight:700;color:#ff6b6b}.learning-path-error-indicator{color:#ff6b6b;font-size:14px;animation:learning-path-lesson-pulse 2s infinite}@keyframes learning-path-lesson-pulse{0%,to{opacity:1}50%{opacity:.5}}.learning-path-lesson-navigation{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:3px solid #FF6B6B;flex-shrink:0;position:sticky;bottom:0;z-index:100}.learning-path-nav-button{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;border-radius:25px;padding:15px 30px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ff8c4266;min-width:100px}.learning-path-nav-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #ff8c4280}.learning-path-nav-button:disabled{background:#e0e0e0;color:#999;cursor:not-allowed;box-shadow:none;transform:none}.learning-path-next-button{background:linear-gradient(145deg,#ff6b6b,#ff8c42);box-shadow:0 4px 12px #ff6b6b66}.learning-path-next-button:hover:not(:disabled){box-shadow:0 6px 16px #ff6b6b80}.learning-path-step-info{display:flex;align-items:center;gap:10px}.learning-path-step-counter{background:#ff8c421a;color:#ff8c42;padding:8px 16px;border-radius:20px;font-weight:600;font-size:14px}@media (max-width: 768px){.learning-path-lesson-detail-header{padding:16px 20px}.learning-path-header-content{gap:12px}.learning-path-back-button{width:40px;height:40px;font-size:16px}.learning-path-lesson-progress-bar-section{padding:0 12px}.learning-path-lesson-intro-title{font-size:24px}.learning-path-thai-word{font-size:36px}.learning-path-korean-meaning,.learning-path-question-text{font-size:20px}.learning-path-option-button{font-size:16px;padding:15px;min-height:50px}.learning-path-completion-title{font-size:28px}.learning-path-completion-icon{font-size:80px}}@media (max-width: 480px){.learning-path-lesson-detail-header{padding:12px 15px}.learning-path-header-content{gap:10px}.learning-path-back-button{width:36px;height:36px;font-size:14px}.learning-path-lesson-progress-bar-section{padding:0 10px}.learning-path-word-card{padding:20px}.learning-path-thai-word{font-size:28px}.learning-path-pronunciation{font-size:16px}.learning-path-korean-meaning{font-size:18px}.learning-path-question-text{font-size:18px;margin-bottom:20px}.learning-path-options-grid{gap:10px}.learning-path-option-button{font-size:14px;padding:12px;min-height:45px}.learning-path-nav-button{padding:12px 20px;font-size:14px;min-width:80px}}.learning-path-lesson-skeleton{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);padding:20px;gap:20px}.learning-path-lesson-header.skeleton{text-align:center;padding:20px;background:#ffffffe6;border-radius:12px;box-shadow:0 4px 12px #0000001a}.learning-path-lesson-progress-container.skeleton{margin-bottom:20px}.learning-path-lesson-progress-bar.skeleton-content{height:8px;width:100%;border-radius:4px}.learning-path-lesson-title.skeleton-line{width:60%;height:24px;margin:0 auto 10px}.learning-path-lesson-subtitle.skeleton-line{width:40%;height:16px;margin:0 auto}.learning-path-lesson-content.skeleton{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#ffffffe6;border-radius:12px;padding:40px 20px;box-shadow:0 4px 12px #0000001a}.learning-path-lesson-icon.skeleton-content{width:80px;height:80px;border-radius:50%;margin-bottom:30px}.learning-path-lesson-text.skeleton{margin-bottom:30px;width:100%;max-width:500px}.learning-path-lesson-text-line.skeleton-line{width:100%;height:18px;margin-bottom:10px}.learning-path-lesson-text-line.skeleton-line:nth-child(2){width:80%}.learning-path-lesson-text-line.skeleton-line:nth-child(3){width:60%}.learning-path-lesson-points.skeleton{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}.learning-path-lesson-point.skeleton-line{width:100%;height:14px;margin-bottom:0}.learning-path-lesson-actions.skeleton{display:flex;justify-content:center;padding:20px}.learning-path-lesson-button.skeleton-content{width:200px;height:50px;border-radius:25px}.xp-display{position:relative;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;padding:20px;color:#fff;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);box-shadow:0 8px 32px #667eea4d;overflow:hidden}.xp-display:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);animation:shimmer 3s infinite}.xp-display.compact{display:flex;align-items:center;gap:12px;padding:8px 16px;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:20px;min-width:180px}.xp-display.compact .level-badge{background:#fff3;border-radius:12px;padding:4px 8px;font-size:12px;font-weight:700}.xp-display.compact .xp-progress-compact{flex:1;height:6px;background:#fff3;border-radius:3px;overflow:hidden}.xp-display.compact .xp-progress-fill{height:100%;background:linear-gradient(90deg,#00f5ff,#00d4ff);border-radius:3px;transition:width .5s ease}.xp-display.compact .xp-amount{font-size:11px;font-weight:600;white-space:nowrap}.xp-main{display:flex;gap:20px;align-items:center;position:relative;z-index:1}.level-section{flex-shrink:0}.level-badge{background:linear-gradient(135deg,gold,#ffed4e);color:#333;border-radius:50%;width:80px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;box-shadow:0 4px 16px #ffd70066;transition:transform .3s ease}.level-badge:hover{transform:scale(1.05)}.level-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px}.level-number{font-size:24px;font-weight:800}.xp-section{flex:1;min-width:0}.xp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.xp-label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;opacity:.9}.xp-amount{font-size:16px;font-weight:700;transition:all .3s ease}.xp-amount.animate{transform:scale(1.1);color:#00f5ff;text-shadow:0 0 10px rgba(0,245,255,.5)}.xp-progress-bar{position:relative;height:12px;background:#fff3;border-radius:6px;overflow:hidden;margin:8px 0}.xp-progress-fill{position:relative;height:100%;background:linear-gradient(90deg,#00f5ff,#00d4ff,#09f);border-radius:6px;transition:width .8s cubic-bezier(.4,0,.2,1);overflow:hidden}.xp-progress-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:progress-shine 2s infinite}.xp-progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5)}.xp-details{display:flex;justify-content:space-between;font-size:11px;opacity:.8;margin-top:4px}.level-up-animation{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10000;text-align:center;animation:levelUpAppear 2s ease-out forwards;pointer-events:none}.level-up-text{font-size:48px;font-weight:900;background:linear-gradient(45deg,gold,#ffed4e,gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 30px rgba(255,215,0,.8);animation:levelUpPulse .6s ease-in-out infinite alternate}.level-up-number{font-size:24px;font-weight:700;color:gold;margin-top:8px;text-shadow:0 2px 4px rgba(0,0,0,.3)}.level-up-effects{position:absolute;inset:0;pointer-events:none}.sparkle{position:absolute;font-size:24px;animation:sparkleFloat 1.5s ease-out forwards}.sparkle:nth-child(1){top:-20px;left:-30px;animation-delay:.2s}.sparkle:nth-child(2){top:-30px;right:-20px;animation-delay:.4s}.sparkle:nth-child(3){bottom:-20px;left:50%;transform:translate(-50%);animation-delay:.6s}.xp-gain-animation{position:fixed;top:20%;left:50%;transform:translate(-50%);z-index:9999;text-align:center;animation:xpGainFloat 2s ease-out forwards;pointer-events:none}.xp-gain-text{font-size:32px;font-weight:900;color:#00f5ff;text-shadow:0 0 20px rgba(0,245,255,.8);animation:xpGainPulse .5s ease-in-out}.xp-gain-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100px;height:100px;background:radial-gradient(circle,rgba(0,245,255,.3),transparent);border-radius:50%;animation:xpGainGlow 1s ease-out}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes progress-shine{0%{left:-100%}to{left:100%}}@keyframes levelUpAppear{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8)}}@keyframes levelUpPulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes sparkleFloat{0%{opacity:0;transform:translateY(0) scale(0)}50%{opacity:1;transform:translateY(-20px) scale(1)}to{opacity:0;transform:translateY(-40px) scale(0)}}@keyframes xpGainFloat{0%{opacity:0;transform:translate(-50%) translateY(20px) scale(.8)}20%{opacity:1;transform:translate(-50%) translateY(0) scale(1.1)}80%{opacity:1;transform:translate(-50%) translateY(-30px) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-60px) scale(.8)}}@keyframes xpGainPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes xpGainGlow{0%{transform:translate(-50%,-50%) scale(0);opacity:.5}50%{transform:translate(-50%,-50%) scale(1);opacity:.3}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.level-badge.animate{animation:levelBadgePulse .6s ease-in-out}@keyframes levelBadgePulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.xp-loading{text-align:center;padding:20px;opacity:.7;font-style:italic}@media (max-width: 480px){.xp-display{padding:16px}.xp-main{flex-direction:column;gap:16px;text-align:center}.level-badge{width:60px;height:60px}.level-number{font-size:20px}.xp-amount{font-size:14px}.level-up-text{font-size:36px}.xp-gain-text{font-size:24px}}@media (max-width: 768px){.vocab-main.learning-path-detail-active .mobile-footer,.vocab-main.learning-path-detail-active .vocab-tab-navigation{display:none!important}.learning-path-detail-screen{height:100vh!important;min-width:auto!important;border-radius:0!important}}@media (min-width: 769px){.vocab-main.learning-path-detail-active .vocab-tab-navigation{display:none!important}.learning-path-detail-screen{width:500px!important;height:900px!important}}.vocab-main.learning-path-detail-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important;margin-bottom:0!important}.learning-path-detail-screen{height:100vh;display:flex;flex-direction:column;max-width:800px;min-width:500px;margin:0 auto;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);overflow:hidden;position:relative;border-radius:20px;box-shadow:0 8px 20px #00000026;margin-bottom:0!important}.learning-path-lesson-detail-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-bottom:3px solid #FF6B6B;position:sticky;top:0;z-index:100;flex-shrink:0}.learning-path-header-content{display:flex;align-items:center;justify-content:space-between;width:100%}.learning-path-back-button{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;cursor:pointer;box-shadow:0 4px 12px #ff8c4266;transition:all .3s ease}.learning-path-back-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff8c4280}.learning-path-lesson-title-section{flex:1}.learning-path-lesson-title{font-size:20px;font-weight:700;color:#ff6b6b;margin-bottom:4px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.learning-path-lesson-subtitle{font-size:14px;color:#ff8c42;font-weight:700}.learning-path-lesson-icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#4ecdc4,#45b7af);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 12px #4ecdc44d}.learning-path-lesson-detail-container{flex:1;padding:20px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;max-height:calc(100vh - 140px)}.learning-path-lesson-detail-container::-webkit-scrollbar{width:8px}.learning-path-lesson-detail-container::-webkit-scrollbar-track{background:#ffe4b54d;border-radius:4px}.learning-path-lesson-detail-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:4px}.learning-path-lesson-detail-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffd93d,#ff8c42)}.learning-path-progress-card{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FF6B6B;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.learning-path-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.learning-path-progress-title{font-size:16px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.learning-path-progress-percentage{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 2px 8px #ff8c4266;text-shadow:1px 1px 0px rgba(0,0,0,.3)}.learning-path-progress-bar{width:100%;height:12px;background:#fff8dc;border:2px solid #FF8C42;border-radius:8px;overflow:hidden;margin-bottom:10px}.learning-path-progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:6px;transition:width 1s ease}.learning-path-progress-text{font-size:12px;color:#666;font-weight:700;text-align:center}.learning-path-lesson-list{display:flex;flex-direction:column;gap:12px}.learning-path-lesson-item{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FF6B6B;border-radius:16px;padding:16px;transition:all .3s ease;position:relative;margin-bottom:0!important;box-shadow:0 4px 12px #0000001a}.learning-path-lesson-item.clickable{cursor:pointer}.learning-path-lesson-item.clickable:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.learning-path-lesson-item.completed{border-color:#4ecdc4;background:linear-gradient(145deg,#4ecdc41a,#fffffff2)}.learning-path-lesson-item.quiz{border-color:#9b59b6;background:linear-gradient(145deg,#9b59b61a,#fffffff2)}.learning-path-lesson-item.locked{opacity:.6;filter:grayscale(.5);cursor:not-allowed}.learning-path-lesson-item.locked:hover{transform:none;box-shadow:0 4px 12px #0000001a}.learning-path-lesson-item-content{display:flex;align-items:center;gap:15px}.learning-path-lesson-number{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#ff8c42,#ffd93d);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;box-shadow:0 3px 10px #ff8c4266;flex-shrink:0}.learning-path-lesson-number.completed{background:linear-gradient(135deg,#4ecdc4,#45b7af);box-shadow:0 3px 10px #4ecdc466}.learning-path-lesson-number.quiz{background:linear-gradient(135deg,#9b59b6,#8e44ad);box-shadow:0 3px 10px #9b59b666}.learning-path-lesson-number.locked{background:#e0e0e0;color:#999;box-shadow:0 3px 10px #0000001a}.learning-path-lesson-number.current{animation:pulse 2s ease-in-out infinite}.learning-path-lesson-info{flex:1;min-width:0}.learning-path-lesson-name{font-size:16px;font-weight:700;color:#ff6b6b;margin-bottom:4px;text-shadow:1px 1px 0px rgba(255,255,255,.8);display:flex;flex-direction:column;align-items:flex-start;gap:4px}.learning-path-lesson-description{font-size:12px;font-weight:400;color:#666;margin-top:2px;opacity:.8}.learning-path-lesson-name.completed{color:#4ecdc4}.learning-path-lesson-name.quiz{color:#9b59b6}.learning-path-lesson-description{font-size:13px;color:#ff8c42;font-weight:700}.learning-path-lesson-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:15px}.learning-path-lesson-time{font-size:15px;color:#666;background:#fffc;padding:2px 6px;border-radius:8px;border:1px solid #FFE4B5}.learning-path-lesson-difficulty{font-size:15px;padding:2px 6px;border-radius:8px;border:1px solid rgba(0,0,0,.1);font-weight:700}.learning-path-quiz-topics{font-size:15px;color:#9b59b6;background:#9b59b61a;padding:2px 6px;border-radius:8px;border:1px solid #9B59B6}.learning-path-lesson-words{font-size:14px;color:#666;line-height:1.4;word-break:break-word}.learning-path-lesson-status{display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.learning-path-lesson-status.completed{color:#4ecdc4}.learning-path-lesson-status.quiz{color:#9b59b6}.learning-path-lesson-status.current{color:#ff8c42;animation:pulse 2s ease-in-out infinite}.learning-path-lesson-status.locked{color:#ccc}.learning-path-detail-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1)}.learning-path-loading-container{text-align:center;padding:2rem;background:#fffffff2;border-radius:20px;border:3px solid #FF6B6B;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;max-width:300px;width:90%}.learning-path-loading-spinner{width:48px;height:48px;border:4px solid #FFF8DC;border-top:4px solid #FF8C42;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.learning-path-loading-text{font-size:16px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.learning-path-loading-details{font-size:12px;color:#ff8c42;font-weight:700;margin-top:8px}.learning-path-detail-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);text-align:center;padding:2rem}.learning-path-error-message{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:2rem;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.learning-path-data-source-indicator{position:fixed;top:10px;right:10px;background:#fffffff2;border:2px solid #FF6B6B;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700;color:#ff6b6b;z-index:1000;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 12px #0000001a}.learning-path-error-indicator{color:#ff6b6b;font-size:14px;animation:pulse 2s infinite}.learning-path-refresh-data-button{background:#ff8c42;color:#fff;border:none;padding:2px 6px;border-radius:4px;font-size:10px;cursor:pointer}@media (max-width: 768px){.learning-path-lesson-detail-header{padding:16px 20px}.learning-path-lesson-detail-container{padding:16px 20px;max-height:calc(100vh - 120px)}.learning-path-lesson-title{font-size:18px}.learning-path-lesson-subtitle{font-size:13px}.learning-path-lesson-icon{width:44px;height:44px;font-size:20px}.learning-path-progress-card{padding:16px;margin-bottom:16px}.learning-path-lesson-item{padding:14px;gap:12px}.learning-path-lesson-number{width:72px;height:72px;font-size:28px}.learning-path-lesson-name{font-size:15px}.learning-path-lesson-description{font-size:13px}.learning-path-lesson-meta{gap:8px}.learning-path-lesson-time,.learning-path-lesson-difficulty,.learning-path-quiz-topics{font-size:13px;padding:1px 4px}.learning-path-lesson-words{font-size:13px}.learning-path-loading-container{padding:1.5rem;margin:1rem}}@media (max-width: 480px){.learning-path-header-content{gap:12px}.learning-path-back-button{width:40px;height:40px;font-size:16px}.learning-path-lesson-detail-container{padding:12px 16px}.learning-path-lesson-item{padding:12px}.learning-path-lesson-item-content{gap:10px}.learning-path-lesson-number{width:64px;height:64px;font-size:24px}.learning-path-lesson-name{font-size:14px}.learning-path-lesson-description{font-size:13px}.learning-path-lesson-meta{gap:6px}.learning-path-lesson-time,.learning-path-lesson-difficulty,.learning-path-quiz-topics{font-size:12px;padding:1px 4px}.learning-path-lesson-words{font-size:12px}.learning-path-lesson-status{font-size:18px}}.learning-path-lesson-detail-header.skeleton{background:#f8f9fa;border-bottom:1px solid #e9ecef}.learning-path-header-content.skeleton{padding:20px}.learning-path-back-button.skeleton-content{width:40px;height:40px;border-radius:50%}.learning-path-lesson-title-section.skeleton{flex:1}.learning-path-lesson-title.skeleton-line{width:60%;height:24px;margin-bottom:8px}.learning-path-lesson-subtitle.skeleton-line{width:40%;height:16px}.learning-path-lesson-icon.skeleton-content{width:60px;height:60px;border-radius:50%}.learning-path-progress-card.skeleton{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:20px;margin:20px}.learning-path-progress-header.skeleton{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.learning-path-progress-title.skeleton-line{width:120px;height:20px}.learning-path-progress-percentage.skeleton-line{width:80px;height:16px}.learning-path-progress-bar-container.skeleton{width:100%}.learning-path-progress-bar.skeleton-content{height:8px;width:100%;border-radius:4px}.learning-path-lesson-list{padding:0}.learning-path-lesson-item.skeleton{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:20px;margin-bottom:15px;display:flex;align-items:center;gap:15px;pointer-events:none;opacity:.7}.learning-path-lesson-icon-container.skeleton{flex-shrink:0}.learning-path-lesson-icon.skeleton-content{width:50px;height:50px;border-radius:50%}.learning-path-lesson-content.skeleton{flex:1}.learning-path-lesson-title.skeleton-line{width:70%;height:20px;margin-bottom:8px}.learning-path-lesson-description.skeleton-line{width:90%;height:16px;margin-bottom:12px}.learning-path-lesson-meta.skeleton{display:flex;gap:15px}.learning-path-lesson-time.skeleton-line,.learning-path-lesson-difficulty.skeleton-line{width:60px;height:14px}.learning-path-lesson-status.skeleton-content{width:30px;height:30px;border-radius:50%;flex-shrink:0}@keyframes learning-path-view-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(5deg)}}@keyframes learning-path-view-pulse{0%,to{box-shadow:0 12px 25px #0003,0 0 25px #ff6b6b66}50%{box-shadow:0 15px 30px #00000040,0 0 30px #ff6b6b80}}@keyframes learning-path-view-exam-pulse{0%,to{box-shadow:0 12px 25px #0003,0 0 25px #ffd70099}50%{box-shadow:0 15px 30px #00000040,0 0 30px #ffd700cc}}@keyframes learning-path-view-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes learning-path-view-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.learning-path-view-container{min-height:100vh;padding:20px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);display:flex;flex-direction:column;align-items:center}.learning-path-view-header{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:4px solid #FF6B6B;border-radius:20px;padding:20px;margin-bottom:30px;width:100%;max-width:400px;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.learning-path-view-profile-section{display:flex;align-items:center;gap:15px;margin-bottom:20px}.learning-path-view-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ffe4b5,#ffdab9);border:3px solid #FF8C42;display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:0 4px 15px #ff8c424d}.learning-path-view-profile-info{flex:1}.learning-path-view-nickname{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:5px}.learning-path-view-grade-info{display:flex;align-items:center;gap:10px}.learning-path-view-current-grade{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 2px 8px #ff8c4266}.learning-path-view-target-grade{color:#ff8c42;font-size:12px;font-weight:700}.learning-path-view-upgrade-btn{background:linear-gradient(145deg,#ff8c42,#ffd93d);border:none;border-radius:15px;padding:8px 15px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 4px 10px #ff8c424d;transition:all .3s ease}.learning-path-view-upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 6px 15px #ff8c4266}.learning-path-view-grade-tabs{display:flex;gap:8px;flex-wrap:wrap}.learning-path-view-grade-tab{padding:8px 12px;border-radius:12px;border:none;font-size:12px;font-weight:700;transition:all .3s ease}.learning-path-view-grade-tab-selected{background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;box-shadow:0 4px 10px #ff6b6b66;transform:translateY(-1px);cursor:pointer}.learning-path-view-grade-tab-unlocked{background:linear-gradient(145deg,#fff8dc,#fffaf0);color:#ff6b6b;border:2px solid #FF8C42;cursor:pointer}.learning-path-view-grade-tab-locked{background:#e0e0e0;color:#999;opacity:.6;cursor:not-allowed}.learning-path-view-lessons-container{width:100%;max-width:400px;position:relative}.learning-path-view-connection-line{position:absolute;left:50%;top:40px;bottom:40px;width:4px;background:linear-gradient(180deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:2px;transform:translate(-50%);opacity:.6;z-index:1}.learning-path-view-lesson-item{position:relative;z-index:2;margin-bottom:40px}.learning-path-view-lesson-item:last-child{margin-bottom:0}.learning-path-view-lesson-clickable{cursor:pointer}.learning-path-view-lesson-card{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FF6B6B;border-radius:20px;padding:20px;display:flex;align-items:center;gap:15px;transition:all .3s ease;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;position:relative}.learning-path-view-exam-card{background:linear-gradient(145deg,#ffd7001a,#ffa5001a);border:4px solid #FFD700;box-shadow:0 8px 20px #ffd7004d,0 0 20px #ffd70033}.learning-path-view-lesson-locked{opacity:.6;filter:grayscale(.5)}.learning-path-view-badges{position:absolute;top:10px;right:15px;display:flex;align-items:center;gap:8px}.learning-path-view-grade-badge{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 8px;border-radius:12px;font-size:10px;font-weight:700;box-shadow:0 2px 8px #ff8c4266;text-shadow:1px 1px 0px rgba(0,0,0,.3);min-width:35px;text-align:center}.learning-path-view-exam-grade-badge{background:linear-gradient(135deg,gold,orange)}.learning-path-view-stage-badge{background:linear-gradient(135deg,#4ecdc4,#45b7af);color:#fff;padding:3px 6px;border-radius:10px;font-size:9px;font-weight:700;text-shadow:1px 1px 0px rgba(0,0,0,.3);text-align:center}.learning-path-view-exam-stage-badge{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.learning-path-view-lesson-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;transition:all .3s ease}.learning-path-view-exam-icon{width:90px;height:90px;font-size:40px}.learning-path-view-lesson-completed{border:4px solid #FF6B6B;opacity:1;transform:scale(1);box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.learning-path-view-lesson-current{border:4px solid #FF6B6B;opacity:1;transform:scale(1.05);box-shadow:0 12px 25px #0003,0 0 25px #ff6b6b66;animation:learning-path-view-pulse 2s ease-in-out infinite}.learning-path-view-lesson-locked{background:#e0e0e0;border:3px solid #CCCCCC;opacity:.6;transform:scale(.95);box-shadow:0 4px 10px #0000001a}.learning-path-view-exam-completed{background:linear-gradient(135deg,gold,orange);border:4px solid #FF6B6B;opacity:1;transform:scale(1);box-shadow:0 8px 20px #00000026,0 0 20px #ffd70099}.learning-path-view-exam-current{background:linear-gradient(135deg,gold,orange);border:4px solid #FF6B6B;opacity:1;transform:scale(1.05);box-shadow:0 12px 25px #0003,0 0 25px #ffd70099;animation:learning-path-view-exam-pulse 2s ease-in-out infinite}.learning-path-view-exam-available{background:linear-gradient(135deg,gold,orange);border:4px solid #FF6B6B;opacity:1;transform:scale(1);box-shadow:0 8px 20px #ffd70066,0 0 20px #ffd70080}.learning-path-view-exam-locked{background:linear-gradient(135deg,#d3d3d3,#a9a9a9);border:3px solid #CCCCCC;opacity:.6;transform:scale(.95);box-shadow:0 4px 10px #0000001a}.learning-path-view-completion-badge{position:absolute;top:-5px;right:-5px;width:28px;height:28px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;font-weight:700;box-shadow:0 4px 10px #ff8c4266;border:2px solid white}.learning-path-view-exam-completion-badge{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.learning-path-view-exam-effect{position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(45deg,gold,orange,gold);z-index:-1;animation:learning-path-view-rotate 4s linear infinite}.learning-path-view-lesson-info{flex:1;padding-right:60px}.learning-path-view-lesson-title{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:5px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.learning-path-view-exam-title{font-size:20px;color:gold;text-shadow:2px 2px 0px rgba(255,165,0,.3)}.learning-path-view-exam-spark{margin-left:8px;font-size:16px;animation:learning-path-view-wiggle 2s ease-in-out infinite}.learning-path-view-lesson-subtitle{font-size:12px;color:#ff8c42;font-weight:700;margin-bottom:10px}.learning-path-view-exam-subtitle{color:orange}.learning-path-view-progress-bar{width:100%;height:8px;background:#fff8dc;border:1px solid #FF8C42;border-radius:8px;overflow:hidden;margin-bottom:5px}.learning-path-view-exam-progress-bar{height:10px;border:2px solid #FFD700}.learning-path-view-progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42);border-radius:6px;transition:width .8s ease}.learning-path-view-exam-progress-fill{background:linear-gradient(90deg,gold,orange)}.learning-path-view-progress-text{font-size:11px;color:#666;font-weight:700}.learning-path-view-lock-icon{font-size:24px;color:#ccc}.learning-path-view-connection-point{position:absolute;left:50%;bottom:-20px;width:12px;height:12px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:50%;transform:translate(-50%);border:2px solid white;box-shadow:0 2px 8px #ff8c4266;z-index:3}.learning-path-view-floating{position:fixed;z-index:0;animation:learning-path-view-float 6s ease-in-out infinite}.learning-path-view-floating-1{top:20%;right:10%;font-size:24px;animation-delay:0s}.learning-path-view-floating-2{bottom:30%;left:10%;font-size:20px;animation-delay:2s}.learning-path-view-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}@media (max-width: 768px){.learning-path-view-container{padding:15px}.learning-path-view-header{max-width:350px;padding:15px}.learning-path-view-avatar{width:50px;height:50px;font-size:28px}.learning-path-view-nickname{font-size:16px}.learning-path-view-upgrade-btn{padding:6px 12px;font-size:11px}.learning-path-view-lessons-container{max-width:350px}.learning-path-view-lesson-card{padding:15px;gap:12px}.learning-path-view-lesson-icon{width:70px;height:70px;font-size:32px}.learning-path-view-exam-icon{width:80px;height:80px;font-size:36px}.learning-path-view-lesson-info{padding-right:50px}.learning-path-view-lesson-title{font-size:16px}.learning-path-view-exam-title{font-size:18px}.learning-path-view-floating-1{top:15%;right:5%;font-size:20px}.learning-path-view-floating-2{bottom:25%;left:5%;font-size:18px}}@media (max-width: 480px){.learning-path-view-container{padding:10px}.learning-path-view-header{max-width:300px;padding:12px;margin-bottom:20px}.learning-path-view-profile-section{gap:10px;margin-bottom:15px}.learning-path-view-avatar{width:45px;height:45px;font-size:24px}.learning-path-view-nickname{font-size:14px}.learning-path-view-current-grade,.learning-path-view-target-grade{font-size:10px}.learning-path-view-upgrade-btn{padding:5px 10px;font-size:10px}.learning-path-view-grade-tab{padding:6px 10px;font-size:10px}.learning-path-view-lessons-container{max-width:300px}.learning-path-view-lesson-item{margin-bottom:30px}.learning-path-view-lesson-card{padding:12px;gap:10px}.learning-path-view-badges{top:8px;right:10px;gap:6px}.learning-path-view-grade-badge{padding:3px 6px;font-size:9px;min-width:30px}.learning-path-view-stage-badge{padding:2px 4px;font-size:8px}.learning-path-view-lesson-icon{width:60px;height:60px;font-size:28px}.learning-path-view-exam-icon{width:70px;height:70px;font-size:32px}.learning-path-view-lesson-info{padding-right:40px}.learning-path-view-lesson-title{font-size:14px}.learning-path-view-exam-title{font-size:16px}.learning-path-view-lesson-subtitle{font-size:10px;margin-bottom:8px}.learning-path-view-progress-text{font-size:10px}.learning-path-view-lock-icon{font-size:20px}.learning-path-view-floating{display:none}}.learning-path-view-skeleton-container{display:flex;flex-direction:column;gap:20px;width:100%;max-width:400px}.learning-path-view-lesson-item.skeleton{pointer-events:none;opacity:.7}.learning-path-view-lesson-card.skeleton{background:#f0f0f0;border:2px solid #e0e0e0;box-shadow:none;animation:none}.learning-path-view-badges.skeleton{display:flex;gap:8px}.learning-path-view-grade-badge.skeleton-content,.learning-path-view-stage-badge.skeleton-content{width:30px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.learning-path-view-lesson-icon.skeleton-content{width:60px;height:60px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:50%;margin:0 auto}.learning-path-view-lesson-info.skeleton{text-align:center;padding:15px}.learning-path-view-lesson-title.skeleton-line,.learning-path-view-lesson-subtitle.skeleton-line{height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:8px}.learning-path-view-lesson-title.skeleton-line{width:80%;margin:0 auto 8px}.learning-path-view-lesson-subtitle.skeleton-line{width:60%;margin:0 auto 15px}.learning-path-view-progress-container.skeleton{margin-top:10px}.learning-path-view-progress-bar.skeleton-content{height:6px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:3px;width:100%}.learning-path-view-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:#e74c3c;background:#e74c3c1a;border:2px solid #e74c3c;border-radius:10px;margin:20px}.learning-path-view-error div:first-child{font-weight:700;margin-bottom:5px}.learning-path-view-no-lessons{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:#666;background:#0000000d;border-radius:10px;margin:20px}.learning-path-view-no-lessons div:first-child{font-size:48px;margin-bottom:15px}.learning-path-view-no-lessons div:not(:first-child){margin-bottom:5px}.learning-path-main{width:100%;display:flex;justify-content:center;align-items:flex-start;padding:0;margin:0}.typing-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-bottom:3px solid #FF6B6B;position:sticky;top:0;z-index:100;flex-shrink:0}.header-top-row{display:flex;align-items:center;gap:15px;width:100%;justify-content:space-between}.back-button{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;cursor:pointer;box-shadow:0 4px 12px #ff8c4266;transition:all .3s ease;flex-shrink:0}.back-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff8c4280}.progress-section{flex:1;padding:0 15px}.progress-bar-container{width:100%;height:12px;background:#fff8dc;border:2px solid #FF8C42;border-radius:6px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:4px;transition:width .5s ease}.typing-path-typing-progress-indicator{font-size:12px;color:#fff;font-weight:700;padding:4px 8px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:12px;box-shadow:0 2px 8px #ff8c4266;min-width:35px;text-align:center;white-space:nowrap;flex-shrink:0}@media (max-width: 768px){.typing-header{padding:16px 20px}.header-top-row{gap:12px}.back-button{width:40px;height:40px;min-width:40px;font-size:16px}.progress-section{padding:0 12px}.progress-bar-container{max-width:100%;height:12px}.progress-text{font-size:12px}.header-right-space{width:40px;min-width:40px}}@media (max-width: 480px){.typing-header{padding:12px 15px}.header-top-row{gap:10px}.back-button{width:36px;height:36px;min-width:36px;font-size:14px}.progress-section{padding:0 10px}.progress-bar-container{max-width:100%;height:12px}.progress-text{font-size:11px}.header-right-space{width:36px;min-width:36px}}.typing-target-precise{font-size:32px;line-height:1.4;font-weight:600;letter-spacing:-4px;margin:0;text-shadow:0 3px 6px rgba(0,0,0,.3);word-break:keep-all;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:-8px;overflow:visible;min-height:60px;padding:16px 0}.char-game{position:relative;display:inline-block;transition:all .3s ease;padding:1px;border-radius:4px;margin:0 -8px;z-index:1}.char-game.completed{color:#4caf50;text-shadow:0 0 10px rgba(76,175,80,.6);transform:scale(1.05);z-index:2}.char-game.active{color:gold;background:#ffd7004d;animation:targetPulse 1s ease-in-out infinite;box-shadow:0 0 20px #ffd70080;z-index:3}W .char-game.error{color:#4caf50!important;text-shadow:0 0 10px rgba(76,175,80,.6);transform:scale(1.05);z-index:2}.char-game.waiting{color:#ffffff80}.char-game.wide-char{margin:0 -5px}.char-game.narrow-char{margin:0 -10px}@keyframes targetPulse{0%,to{box-shadow:0 0 20px #ffd70080}50%{box-shadow:0 0 30px #ffd700cc}}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}@media (max-width: 768px){.typing-target-precise{font-size:28px;letter-spacing:-3px;min-height:50px;padding:12px 0;gap:-6px}.char-game{margin:0 -6px}.char-game.wide-char{margin:0 -3px}.char-game.narrow-char{margin:0 -8px}}@media (max-width: 480px){.typing-target-precise{font-size:24px;letter-spacing:-2px;min-height:45px;padding:8px 0;gap:-4px}.char-game{margin:0 -4px}.char-game.wide-char{margin:0 -2px}.char-game.narrow-char{margin:0 -6px}}.typing-progress{margin:20px 0;width:100%}.progress-bar-typing{width:100%;height:12px;background:#fff3;border-radius:6px;overflow:visible;border:1px solid rgba(255,255,255,.1);margin-bottom:8px;position:relative}.progress-fill-typing{height:100%;background:linear-gradient(90deg,#ff4757,#ffc107,#4caf50);border-radius:6px;transition:width .3s ease;box-shadow:0 0 8px #ffd70066;position:relative;overflow:hidden}.progress-fill-typing:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:progressShimmerTyping 2s infinite}@keyframes progressShimmerTyping{0%{transform:translate(-100%)}to{transform:translate(100%)}}.progress-cat-icon{position:absolute;top:-12px;transition:left .3s ease;z-index:10;cursor:pointer;font-size:18px}.progress-chicken-icon{position:absolute;top:-12px;right:-15px;z-index:10;cursor:pointer;font-size:18px}.progress-text{font-size:12px;color:#ffffffb3;text-align:center;font-weight:600}.game-stats{display:flex;justify-content:center;gap:20px;margin-top:20px;flex-wrap:wrap}.game-stat{text-align:center;background:#ffffff1a;padding:15px;border-radius:10px;min-width:80px;border:2px solid rgba(255,255,255,.2);transition:all .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.game-stat:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transition:left .5s ease}.game-stat:hover{transform:translateY(-2px);box-shadow:0 8px 16px #0003;background:#ffffff26;border-color:#ffffff4d}.game-stat:hover:before{left:100%}.game-stat-value{font-size:18px;font-weight:700;color:gold;margin-bottom:5px;text-shadow:0 2px 4px rgba(0,0,0,.3);transition:all .3s ease;display:block;line-height:1.2}.game-stat:hover .game-stat-value{color:#fff700;text-shadow:0 0 8px rgba(255,215,0,.6);transform:scale(1.05)}.game-stat-label{font-size:12px;color:#fffc;text-transform:uppercase;letter-spacing:1px;font-weight:600;line-height:1}.game-stat:hover .game-stat-label{color:#fffffff2}.game-stat:nth-child(1) .game-stat-value{color:#4ecdc4}.game-stat:nth-child(2) .game-stat-value{color:#ff6b6b}.game-stat:nth-child(3) .game-stat-value{color:#ffd93d}.game-stat:nth-child(4) .game-stat-value{color:#6bcf7f}@keyframes statPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.game-stat-value.updated{animation:statPulse .3s ease-in-out}@media (max-width: 768px){.game-stats{gap:12px;margin-top:16px}.game-stat{padding:12px;min-width:70px}.game-stat-value{font-size:16px;margin-bottom:4px}.game-stat-label{font-size:11px;letter-spacing:.5px}}@media (max-width: 480px){.game-stats{gap:8px;margin-top:12px}.game-stat{padding:10px 8px;min-width:60px;border-radius:8px}.game-stat-value{font-size:14px;margin-bottom:3px}.game-stat-label{font-size:10px;letter-spacing:.3px}}@media (prefers-color-scheme: dark){.game-stat{background:#0000004d;border-color:#ffffff1a}.game-stat:hover{background:#0006;border-color:#fff3}}.combo-display{position:absolute;top:10px;right:15px;background:linear-gradient(135deg,#ff6b6b,#ffd93d);color:#fff;padding:8px 15px;border-radius:20px;font-size:14px;font-weight:700;box-shadow:0 4px 12px #ff6b6b66;display:flex;align-items:center;gap:6px;animation:comboFloat 2s ease-in-out infinite;z-index:10;-webkit-user-select:none;user-select:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);transition:all .3s ease}.combo-display:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);border-radius:18px;pointer-events:none}@keyframes comboFloat{0%,to{transform:translateY(0) scale(1);box-shadow:0 4px 12px #ff6b6b66}50%{transform:translateY(-3px) scale(1.02);box-shadow:0 8px 20px #ff6b6b99}}.combo-fire{font-size:16px;animation:fireFlicker .5s ease-in-out infinite alternate;filter:drop-shadow(0 0 3px rgba(255,165,0,.7));position:relative}.combo-fire:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;background:radial-gradient(circle,rgba(255,165,0,.3) 0%,transparent 70%);transform:translate(-50%,-50%);border-radius:50%;animation:fireGlow 1s ease-in-out infinite alternate}@keyframes fireFlicker{0%{transform:scale(1) rotate(-2deg);filter:drop-shadow(0 0 3px rgba(255,165,0,.7))}to{transform:scale(1.1) rotate(2deg);filter:drop-shadow(0 0 6px rgba(255,69,0,.9))}}@keyframes fireGlow{0%{opacity:.5;transform:translate(-50%,-50%) scale(1)}to{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}.combo-count{font-weight:900;font-size:16px;text-shadow:0 2px 4px rgba(0,0,0,.3);position:relative;min-width:20px;text-align:center}.combo-display[data-combo-level=low]{background:linear-gradient(135deg,#74b9ff,#0984e3)}.combo-display[data-combo-level=medium]{background:linear-gradient(135deg,#fd79a8,#e84393);animation:comboFloat 1.5s ease-in-out infinite,comboMediumPulse 2s ease-in-out infinite}.combo-display[data-combo-level=high]{background:linear-gradient(135deg,#fd79a8,#e84393,#fdcb6e);animation:comboFloat 1s ease-in-out infinite,comboHighIntense 1.5s ease-in-out infinite;box-shadow:0 6px 20px #ff6b6b99,0 0 30px #ffd70066}.combo-display[data-combo-level=epic]{background:linear-gradient(135deg,#a29bfe,#6c5ce7,#fd79a8,#fdcb6e);background-size:200% 200%;animation:comboFloat .8s ease-in-out infinite,comboEpicRainbow 2s ease-in-out infinite,comboEpicShake .1s ease-in-out infinite;box-shadow:0 8px 25px #ff6b6bcc,0 0 40px #ffd70099,0 0 60px #a29bfe66;border-color:#fffc}@keyframes comboMediumPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes comboHighIntense{0%,to{transform:scale(1) rotate(0);filter:brightness(1)}25%{transform:scale(1.08) rotate(1deg);filter:brightness(1.1)}75%{transform:scale(1.08) rotate(-1deg);filter:brightness(1.1)}}@keyframes comboEpicRainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes comboEpicShake{0%,to{transform:translate(0)}25%{transform:translate(-1px)}75%{transform:translate(1px)}}.combo-count.combo-increased{animation:comboIncrease .5s ease-out}@keyframes comboIncrease{0%{transform:scale(1);color:#fff}50%{transform:scale(1.3);color:gold;text-shadow:0 0 10px rgba(255,215,0,.8)}to{transform:scale(1);color:#fff}}.combo-display.combo-reset{animation:comboReset .8s ease-in-out}@keyframes comboReset{0%{transform:scale(1);opacity:1}25%{transform:scale(.8);opacity:.7;background:linear-gradient(135deg,#ddd,#999)}50%{transform:scale(.6);opacity:.5}75%{transform:scale(.9);opacity:.8}to{transform:scale(1);opacity:1}}.combo-display.hidden{opacity:0;transform:translateY(-10px) scale(.8);pointer-events:none}@media (max-width: 768px){.combo-display{top:8px;right:12px;padding:6px 12px;font-size:12px;gap:4px}.combo-fire{font-size:14px}.combo-count{font-size:14px;min-width:18px}}@media (max-width: 480px){.combo-display{top:6px;right:8px;padding:5px 10px;font-size:11px;border-radius:16px;gap:3px}.combo-fire{font-size:12px}.combo-count{font-size:12px;min-width:16px}}@media (prefers-color-scheme: dark){.combo-display{border-color:#fff6;box-shadow:0 4px 12px #0006}.combo-display[data-combo-level=high]{box-shadow:0 6px 20px #0009,0 0 30px #ffd70066}}@media (prefers-reduced-motion: reduce){.combo-display,.combo-fire{animation:none}.combo-fire:after{animation:none}.combo-display[data-combo-level=medium],.combo-display[data-combo-level=high]{animation:none}.combo-display[data-combo-level=epic]{animation:none;background:linear-gradient(135deg,#a29bfe,#6c5ce7);background-size:100% 100%}.combo-count.combo-increased,.combo-display.combo-reset{animation:none}}.typing-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 0;position:relative;z-index:1;width:100%;box-sizing:border-box}.sentence-arena{background:#0000004d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:3px solid rgba(255,215,0,.5);border-radius:20px;padding:25px 40px;width:100%;max-width:100%;text-align:center;position:relative;box-shadow:0 20px 40px #0000004d;margin:0;box-sizing:border-box}.target-meaning{font-size:24px;color:gold;margin-bottom:20px;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.5)}@media (max-width: 768px){.typing-content{padding:16px 0}.sentence-arena{padding:20px 24px;border-radius:16px;max-width:100%}.target-meaning{font-size:20px;margin-bottom:16px}}@media (max-width: 480px){.typing-content{padding:12px 0}.sentence-arena{padding:16px 20px;border-radius:12px;margin:0;max-width:100%}.target-meaning{font-size:18px;margin-bottom:12px}}.skeleton-line{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.character-display-skeleton{display:flex;justify-content:center;align-items:center;min-height:60px}.keyboard-hint-section{background:transparent;border:none;border-bottom:2px solid rgba(255,215,0,.3);border-radius:0;padding:12px 20px;margin:0;display:flex;justify-content:center;align-items:center;gap:20px;flex-shrink:0;position:relative;overflow:hidden}.keyboard-hint-section:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,0,.1),transparent);animation:hintShimmer 3s ease-in-out infinite}@keyframes hintShimmer{0%,to{left:-100%}50%{left:100%}}.next-char-hint{display:flex;align-items:center;gap:12px;color:#fff;font-weight:600;position:relative;z-index:1}.next-char-label{font-size:16px;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.3);transition:color .3s ease}.next-char-hint:hover .next-char-label{color:#fff}.next-char-display{background:linear-gradient(135deg,#ffd7004d,#ff8c424d);color:gold;padding:8px 16px;border-radius:12px;font-size:20px;font-weight:700;border:2px solid rgba(255,215,0,.5);min-width:40px;text-align:center;box-shadow:0 4px 12px #ffd7004d;animation:hintPulse 2s ease-in-out infinite;position:relative;overflow:hidden;text-shadow:0 2px 4px rgba(0,0,0,.3);transition:all .3s ease}.next-char-display:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.next-char-display:hover:before{left:100%}.next-char-display:hover{transform:scale(1.05);box-shadow:0 6px 18px #ffd70080;border-color:#ffd700b3}@keyframes hintPulse{0%,to{transform:scale(1);box-shadow:0 4px 12px #ffd7004d}50%{transform:scale(1.05);box-shadow:0 6px 18px #ffd70080}}.next-char-display[data-char-type=thai]{font-family:"Noto Sans Thai","Sarabun",var(--ds-font-family, "MaplestoryOTFBold", sans-serif);font-size:24px;line-height:1;padding:10px 18px}.next-char-display.completed{background:linear-gradient(135deg,#4caf504d,#8bc34a4d);color:#4caf50;border-color:#4caf5080;box-shadow:0 4px 12px #4caf504d;animation:completedCelebration 1s ease-in-out}@keyframes completedCelebration{0%,to{transform:scale(1)}25%{transform:scale(1.1) rotate(5deg)}50%{transform:scale(1.15)}75%{transform:scale(1.1) rotate(-5deg)}}.next-char-display.error{background:linear-gradient(135deg,#f443364d,#e573734d);color:#f44336;border-color:#f4433680;box-shadow:0 4px 12px #f443364d;animation:errorShake .5s ease-in-out}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (max-width: 768px){.keyboard-hint-section{padding:10px 16px;gap:16px}.next-char-label{font-size:14px}.next-char-display{padding:6px 12px;font-size:18px;min-width:36px}.next-char-display[data-char-type=thai]{font-size:20px;padding:8px 14px}}@media (max-width: 480px){.keyboard-hint-section{padding:8px 12px;gap:12px}.next-char-label{font-size:12px}.next-char-display{padding:6px 10px;font-size:16px;min-width:32px;border-radius:8px}.next-char-display[data-char-type=thai]{font-size:18px;padding:7px 12px}}@media (prefers-color-scheme: dark){.keyboard-hint-section{border-bottom-color:#ffd70033}.next-char-label{color:#fffc}}@media (prefers-reduced-motion: reduce){.next-char-display{animation:none}.keyboard-hint-section:before{animation:none}.next-char-display.completed,.next-char-display.error{animation:none}}.interactive-keyboard{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;padding:15px 20px;border:none;margin:0;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;max-width:100%;width:100%;box-sizing:border-box}.interactive-keyboard:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,rgba(255,215,0,.02) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,215,0,.02) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,215,0,.02) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,215,0,.02) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;animation:keyboardPattern 10s linear infinite;pointer-events:none}@keyframes keyboardPattern{0%{transform:translate(0)}to{transform:translate(20px)}}.keyboard-container{max-width:100%;width:100%;margin:0 auto;padding:0;transform:scale(.75);transform-origin:center center;height:auto;display:flex;flex-direction:column;gap:6px;align-items:center;box-sizing:border-box;position:relative;z-index:1;overflow:visible}.key-row{display:flex;justify-content:center;gap:4px;margin:0;padding:0;height:auto;align-items:center;box-sizing:border-box;max-width:100%;flex-wrap:nowrap}.game-key{background:#ffffff1a;border:2px solid rgba(255,255,255,.2);color:#fff;padding:14px 8px;border-radius:8px;min-width:36px;text-align:center;font-weight:600;cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden;font-size:13px;-webkit-user-select:none;user-select:none;margin:0;height:auto;box-sizing:border-box;font-family:"Noto Sans Thai","Sarabun",var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);text-shadow:0 1px 2px rgba(0,0,0,.3);flex-shrink:1;white-space:nowrap}.game-key:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease;z-index:1}.game-key:hover:before{left:100%}.game-key:hover:not(:disabled){background:#ffffff26;transform:translateY(-2px);box-shadow:0 4px 8px #0003;border-color:#ffffff4d}.game-key.target-key{background:linear-gradient(135deg,gold,orange);color:#333;border-color:#ff8c00;box-shadow:0 0 25px #ffd70099;transform:scale(1.1);animation:keyGlow 1s ease-in-out infinite;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.5);z-index:2}.game-key.target-key:before{background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}.game-key.target-key:after{content:"";position:absolute;inset:-2px;background:linear-gradient(45deg,gold,orange,gold);border-radius:10px;z-index:-1;animation:targetBorderGlow 2s ease-in-out infinite}@keyframes targetBorderGlow{0%,to{opacity:.5}50%{opacity:1}}.game-key.pressed{transform:scale(.95);background:#4caf504d;border-color:#4caf50;box-shadow:inset 0 2px 4px #0003;color:#4caf50}.game-key.special{background:#ffffff26;min-width:50px;font-size:11px;color:#ffffffe6}.game-key.space{min-width:200px;font-size:12px;background:#ffffff14}.game-key.space:hover{background:#ffffff1f}.game-key.backspace{background:#ff980033;border-color:#ff980066;color:#ff9800;min-width:60px}.game-key.backspace:hover{background:#ff98004d;color:#ff6f00;box-shadow:0 0 15px #ff980066}.game-key.shift-key{background:#2196f333;border-color:#2196f366;color:#2196f3;min-width:70px}.game-key.shift-key:hover{background:#2196f34d;box-shadow:0 0 15px #2196f34d}.game-key.shift-active{background:linear-gradient(135deg,#2196f3,#03a9f4);color:#fff;border-color:#1976d2;box-shadow:0 0 15px #2196f380;transform:scale(1.05)}.game-key.shift-key.highlight-for-target{background:linear-gradient(135deg,gold,orange);color:#333;border-color:#ff8c00;box-shadow:0 0 20px #ffd70066;animation:keyGlow 1s ease-in-out infinite}@keyframes keyGlow{0%,to{box-shadow:0 0 25px #ffd70099;transform:scale(1.1)}50%{box-shadow:0 0 40px gold;transform:scale(1.15)}}.game-key[data-key-type=vowel]{border-left:3px solid rgba(255,107,107,.5)}.game-key[data-key-type=consonant]{border-left:3px solid rgba(78,205,196,.5)}.game-key[data-key-type=tone]{border-left:3px solid rgba(255,215,0,.5)}.game-key[data-key-type=number]{border-left:3px solid rgba(156,39,176,.5)}.game-key.key-pressed{animation:keyPress .1s ease-in-out}@media (max-width: 768px){.interactive-keyboard{padding:10px 14px}.keyboard-container{transform:scale(.7);gap:4px;max-width:100%;overflow:visible}.key-row{gap:3px}.game-key{padding:10px 6px;min-width:28px;font-size:11px}.game-key.special{min-width:42px;font-size:10px}.game-key.space{min-width:150px;font-size:11px}.game-key.shift-key{min-width:55px}.game-key.backspace{min-width:48px}}@media (max-width: 480px){.interactive-keyboard{padding:8px 10px}.keyboard-container{transform:scale(.65);gap:3px}.key-row{gap:2px}.game-key{padding:8px 5px;min-width:24px;font-size:10px;border-radius:6px}.game-key.special{min-width:36px;font-size:9px}.game-key.space{min-width:120px;font-size:10px}.game-key.shift-key{min-width:45px}.game-key.backspace{min-width:40px}}@media (max-width: 320px){.keyboard-container{transform:scale(.6)}.game-key{padding:6px 4px;min-width:22px;font-size:9px}.game-key.space{min-width:100px}}@media (max-height: 500px) and (orientation: landscape){.interactive-keyboard{padding:6px 12px}.keyboard-container{transform:scale(.6);gap:2px}.key-row{gap:2px}.game-key{padding:6px 4px;min-width:22px;font-size:9px}}@media (prefers-color-scheme: dark){.interactive-keyboard{background:#000000b3}.game-key{background:#ffffff0d;border-color:#ffffff1a;color:#ffffffe6}.game-key:hover{background:#ffffff1a;border-color:#fff3}}@media (prefers-contrast: high){.game-key{border-width:3px;border-color:#fffc}.game-key.target-key{border-color:gold;box-shadow:0 0 0 2px gold}}@media (prefers-reduced-motion: reduce){.game-key{transition:none}.game-key.target-key{animation:none}.game-key:before{transition:none}.interactive-keyboard:before{animation:none}.game-key.shift-key.highlight-for-target{animation:none}}.game-key:focus{outline:2px solid #FFD700;outline-offset:2px;z-index:3}.game-key:focus:not(.target-key){background:#fff3;border-color:#fff6}@media (hover: none) and (pointer: coarse){.game-key{padding:16px 10px;min-width:40px}.game-key:hover{transform:none;box-shadow:none}.game-key:active{transform:scale(.95);background:#fff3}}.typing-path-lesson-keyboard-section .interactive-keyboard{background:transparent;border:none;border-radius:0;margin:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}.typing-path-lesson-keyboard-section .interactive-keyboard:before{display:none}.typing-path-lesson-keyboard-section .keyboard-container{transform:scale(.7);max-width:100%}.typing-path-lesson-keyboard-section .game-key{background:linear-gradient(135deg,#ffffffe6,#fff8dccc);border:2px solid rgba(255,140,66,.3);color:#ff6b6b;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.typing-path-lesson-keyboard-section .game-key:hover{background:linear-gradient(135deg,#fff,#fff8dce6);border-color:#ff8c4280;transform:translateY(-1px);box-shadow:0 3px 8px #ff8c4233}.typing-path-lesson-keyboard-section .game-key.target-key{background:linear-gradient(135deg,gold,orange);color:#333;border-color:#ff8c00;box-shadow:0 0 20px #ffd70099;transform:scale(1.1);animation:keyGlow 1s ease-in-out infinite;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.3)}.typing-path-lesson-keyboard-section .game-key.special{background:linear-gradient(135deg,#ff8c4233,#ffd93d33);border-color:#ff8c4266;color:#ff8c42}.typing-path-lesson-keyboard-section .game-key.space{background:linear-gradient(135deg,#ff8c421a,#ffd93d1a);border-color:#ff8c424d;color:#ff8c42}.typing-path-lesson-keyboard-section .game-key.backspace{background:linear-gradient(135deg,#ff98004d,#ffc1074d);border-color:#ff980080;color:#ff9800}.typing-path-lesson-keyboard-section .game-key.shift-key{background:linear-gradient(135deg,#2196f34d,#03a9f44d);border-color:#2196f380;color:#2196f3}@media (max-width: 768px){.typing-path-lesson-keyboard-section .keyboard-container{transform:scale(.6)}}@media (max-width: 480px){.typing-path-lesson-keyboard-section .keyboard-container{transform:scale(.55)}}.dynamic-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 50%,rgba(255,107,107,.1) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(78,205,196,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(255,215,0,.1) 0%,transparent 50%);animation:bgShift 8s ease-in-out infinite;z-index:0;pointer-events:none}@keyframes bgShift{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}.dynamic-bg:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 60% 30%,rgba(255,140,66,.08) 0%,transparent 60%),radial-gradient(circle at 10% 70%,rgba(255,182,193,.08) 0%,transparent 50%),radial-gradient(circle at 90% 80%,rgba(173,216,230,.08) 0%,transparent 55%);animation:bgShiftSecondary 12s ease-in-out infinite reverse}@keyframes bgShiftSecondary{0%,to{opacity:.8;transform:rotate(0) scale(1)}33%{opacity:1;transform:rotate(1deg) scale(1.01)}66%{opacity:.6;transform:rotate(-1deg) scale(.99)}}.dynamic-bg:after{content:"";position:absolute;inset:0;background-image:radial-gradient(2px 2px at 20px 30px,rgba(255,255,255,.1),transparent),radial-gradient(2px 2px at 40px 70px,rgba(255,255,255,.08),transparent),radial-gradient(1px 1px at 90px 40px,rgba(255,255,255,.06),transparent),radial-gradient(1px 1px at 130px 80px,rgba(255,255,255,.04),transparent),radial-gradient(2px 2px at 160px 30px,rgba(255,255,255,.1),transparent);background-repeat:repeat;background-size:200px 100px;animation:sparkle 15s linear infinite}@keyframes sparkle{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:.8;transform:translateY(-10px)}}.dynamic-bg,.dynamic-bg:before,.dynamic-bg:after{will-change:transform,opacity;backface-visibility:hidden;transform:translateZ(0)}@media (max-width: 768px){.dynamic-bg{background:radial-gradient(circle at 25% 45%,rgba(255,107,107,.08) 0%,transparent 45%),radial-gradient(circle at 75% 25%,rgba(78,205,196,.08) 0%,transparent 45%),radial-gradient(circle at 45% 75%,rgba(255,215,0,.08) 0%,transparent 45%)}.dynamic-bg:after{background-size:150px 75px}}@media (max-width: 480px){.dynamic-bg{background:radial-gradient(circle at 30% 40%,rgba(255,107,107,.06) 0%,transparent 40%),radial-gradient(circle at 70% 30%,rgba(78,205,196,.06) 0%,transparent 40%),radial-gradient(circle at 50% 70%,rgba(255,215,0,.06) 0%,transparent 40%)}.dynamic-bg:after{background-size:100px 50px;opacity:.5}}@media (prefers-color-scheme: dark){.dynamic-bg{background:radial-gradient(circle at 20% 50%,rgba(255,107,107,.05) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(78,205,196,.05) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(255,215,0,.05) 0%,transparent 50%)}}@media (prefers-reduced-motion: reduce){.dynamic-bg{animation:none}.dynamic-bg:before{animation:none}.dynamic-bg:after{animation:none}}.typing-lesson-page{font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);background:linear-gradient(135deg,#ffe4b5,#ffdab9 30%,#667eea 70%,#764ba2);color:#ff6b6b;display:flex;flex-direction:column;min-height:100vh;width:100%;overflow-y:auto;overflow-x:hidden}.keyboard-section-container{margin-top:auto;position:sticky;bottom:0;z-index:100;background:#00000080;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-top:3px solid rgba(255,215,0,.4)}.vocab-main.typing-screen-active,.vocab-main.typing-screen-active .vocab-content{overflow:hidden!important;height:100vh;max-height:100vh}@media (min-width: 769px){.typing-lesson-page{width:500px;max-width:500px;min-height:900px;height:900px;max-height:900px;margin:0 auto;border-radius:20px;box-shadow:0 8px 20px #00000026;overflow:hidden}.keyboard-section-container{border-radius:0 0 20px 20px}}@media (min-width: 481px) and (max-width: 768px){.typing-lesson-page{width:500px;max-width:500px;min-height:calc(100vh - 40px);margin:20px auto;border-radius:15px;box-shadow:0 8px 20px #00000026;overflow:hidden}.keyboard-section-container{border-radius:0 0 15px 15px}}@media (max-width: 480px){.typing-lesson-page{width:100vw;min-height:100vh;height:100vh;max-height:100vh;margin:0;border-radius:0;overflow:hidden}.keyboard-section-container{border-radius:0}.vocab-main.typing-screen-active .mobile-footer,.vocab-main.typing-screen-active .vocab-tab-navigation{display:none!important}}@media (min-width: 769px){.typing-path-lesson-screen{min-width:500px!important;max-width:800px!important;width:auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important}.vocab-main.typing-path-lesson-active .typing-path-lesson-screen{min-width:500px!important;max-width:800px!important;width:auto!important}.typing-path-header-content{margin:0!important;max-width:none!important}.typing-path-lesson-icon{display:none!important}}@media (min-width: 481px) and (max-width: 768px){.typing-path-lesson-screen{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important}.vocab-main.typing-path-lesson-active .vocab-tab-navigation{display:none!important}.typing-path-lesson-content{height:calc(100vh - 140px);min-height:calc(100vh - 140px);max-height:calc(100vh - 140px)}}@media (max-width: 480px){.typing-path-lesson-screen{min-width:auto!important;max-width:none!important;width:100vw!important;margin:0!important;border-radius:0!important;height:100vh!important;max-height:100vh!important}.vocab-main.typing-path-lesson-active .mobile-footer,.vocab-main.typing-path-lesson-active .vocab-tab-navigation{display:none!important}.typing-path-lesson-content{height:calc(100vh - 140px);min-height:calc(100vh - 140px);max-height:calc(100vh - 140px)}}.vocab-main.typing-path-lesson-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important}.typing-path-lesson-screen{height:100vh;display:flex;flex-direction:column;max-width:800px;min-width:500px;margin:0 auto;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);color:#ff6b6b;overflow:hidden;position:relative;border-radius:20px;box-shadow:0 8px 20px #00000026}.typing-path-header-content{display:flex;align-items:center;gap:15px;max-width:none;margin:0;width:100%;justify-content:space-between}.typing-path-lesson-progress-bar-section{flex:1;padding:0 15px}.typing-path-progress-bar-container{width:100%;height:12px;background:#fff8dc;border:2px solid #FF8C42;border-radius:6px;overflow:hidden}.typing-path-progress-bar-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:4px;transition:width .5s ease}.typing-path-lesson-progress-indicator{font-size:12px;color:#fff;font-weight:700;padding:4px 8px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:12px;box-shadow:0 2px 8px #ff8c4266;min-width:35px;text-align:center;white-space:nowrap}.typing-path-lesson-content-wrapper{width:100%;max-width:500px;padding:0}.typing-path-lesson-loading{display:flex;flex-direction:column;align-items:center;gap:20px;padding:40px}.typing-path-lesson-loading-spinner{width:50px;height:50px;border:4px solid rgba(255,140,66,.2);border-top:4px solid #FF8C42;border-radius:50%;animation:typing-path-lesson-spin 1s linear infinite}@keyframes typing-path-lesson-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.typing-path-lesson-loading-details{color:#666;font-size:14px}.typing-path-lesson-intro-title{font-size:28px;font-weight:700;margin-bottom:20px;color:#ff6b6b;text-shadow:2px 2px 0px #FFE4B5}.typing-path-lesson-intro-content{font-size:18px;line-height:1.6;color:#ff8c42;font-weight:700}.typing-path-lesson-points-container{display:flex;flex-direction:column;gap:15px;margin-top:30px}.typing-path-lesson-point-item{padding:15px;border-radius:15px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;text-align:left}.typing-path-lesson-point-dot{width:8px;height:8px;border-radius:50%;background:#ffd93d;margin-right:15px;flex-shrink:0}.typing-path-lesson-point-text{font-size:16px;font-weight:700;color:#ffffffe6}.typing-path-typing-start{text-align:center;max-width:500px;width:100%;padding:40px}.typing-path-typing-start-icon{width:120px;height:120px;margin:0 auto 30px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:50%}.typing-path-typing-start-image{width:100%;height:100%;object-fit:cover;border-radius:50%}.typing-path-typing-start-title{font-size:28px;font-weight:700;margin-bottom:20px;color:#ff6b6b;text-shadow:2px 2px 0px #FFE4B5}.typing-path-typing-start-message{font-size:18px;line-height:1.6;color:#ff8c42;font-weight:700;margin-bottom:30px}.typing-path-typing-start-actions{display:flex;justify-content:center}.typing-path-typing-start-button{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;border-radius:25px;padding:15px 30px;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ff8c4266}.typing-path-typing-start-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff8c4280}.typing-path-lesson-content{flex:1;display:flex;align-items:center;justify-content:center;padding:0;overflow-y:auto;min-height:0}.typing-path-lesson-intro{text-align:center;max-width:500px;width:100%;padding:40px}.typing-path-lesson-keyboard-section{margin-top:30px}.typing-path-lesson-keyboard-title{font-size:20px;font-weight:700;color:#ff6b6b;margin-bottom:20px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.typing-path-lesson-keyboard-container{background:linear-gradient(135deg,#fffffff2,#fff8dce6);border-radius:15px;padding:20px;border:2px solid #FFD93D;box-shadow:0 4px 15px #ffd93d4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.typing-path-lesson-description{margin-bottom:20px}.typing-path-lesson-desc-item{font-size:16px;line-height:1.6;color:#ff8c42;margin-bottom:10px;font-weight:700}.typing-path-lesson-point-icon{margin-right:10px;font-size:18px}.typing-path-practice-question{text-align:center;max-width:500px;width:100%;padding:40px}.typing-path-question-text{font-size:22px;font-weight:700;color:#ff6b6b;margin-bottom:30px;text-shadow:1px 1px 0px rgba(255,255,255,.8);line-height:1.4}.typing-path-options-grid{display:grid;gap:15px;margin-bottom:20px}.typing-path-option-button{background:linear-gradient(145deg,#ffffffe6,#ffe4b5cc);border:3px solid #FF8C42;border-radius:15px;padding:20px;color:#ff6b6b;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;min-height:60px;display:flex;align-items:center;justify-content:center;text-align:center;box-shadow:0 4px 10px #0000001a}.typing-path-option-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 15px #00000026;background:linear-gradient(145deg,#fff,#ffe4b5)}.typing-path-option-button.typing-path-correct{background:linear-gradient(145deg,#61e002e6,#4caf50cc);border-color:#61e002;color:#fff;box-shadow:0 6px 15px #61e00266;animation:typing-path-lesson-correct-pulse .6s ease}.typing-path-option-button.typing-path-incorrect{background:linear-gradient(145deg,#f44336e6,#ff6b6bcc);border-color:#f44336;color:#fff;box-shadow:0 6px 15px #f4433666;animation:typing-path-lesson-incorrect-shake .6s ease}.typing-path-option-button.typing-path-disabled{opacity:.5;cursor:not-allowed}@keyframes typing-path-lesson-correct-pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes typing-path-lesson-incorrect-shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.typing-path-explanation{background:#ffffffe6;border-radius:15px;padding:20px;border:2px solid #FF8C42;margin-top:20px;box-shadow:0 4px 12px #0000001a}.typing-path-explanation-text{font-size:16px;color:#666;line-height:1.5;margin:0}.typing-path-lesson-completion{text-align:center;max-width:500px;width:100%;padding:40px}.typing-path-completion-icon{font-size:100px;margin-bottom:30px;animation:typing-path-lesson-celebration 2s ease-in-out infinite}@keyframes typing-path-lesson-celebration{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}.typing-path-completion-title{font-size:32px;font-weight:700;color:#ff6b6b;margin-bottom:20px;text-shadow:2px 2px 0px #FFE4B5}.typing-path-completion-content{font-size:18px;color:#ff8c42;margin-bottom:30px;line-height:1.6;font-weight:700}.typing-path-final-score{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border-radius:20px;padding:25px;border:3px solid #FF6B6B;box-shadow:0 8px 20px #00000026}.typing-path-score-text{font-size:16px;color:#666;margin-bottom:10px;font-weight:700}.typing-path-score-number{font-size:36px;font-weight:700;color:#ff6b6b;text-shadow:2px 2px 0px rgba(255,255,255,.8)}.typing-path-completion-stats{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:30px}.typing-path-stat-item{text-align:center;background:#ffffffe6;padding:20px;border-radius:15px;min-width:120px;border:2px solid #FFD93D}.typing-path-stat-label{font-size:.9rem;color:#666;margin-bottom:8px}.typing-path-stat-value{font-size:1.5rem;font-weight:700;color:#ff6b6b}.typing-path-error-indicator{color:#ff6b6b;font-size:14px;animation:typing-path-lesson-pulse 2s infinite}@keyframes typing-path-lesson-pulse{0%,to{opacity:1}50%{opacity:.5}}.typing-path-lesson-navigation{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:3px solid #FF6B6B;flex-shrink:0;position:sticky;bottom:0;z-index:100}.typing-path-nav-button{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;border-radius:25px;padding:15px 30px;color:#fff;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ff8c4266;min-width:100px}.typing-path-nav-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #ff8c4280}.typing-path-nav-button:disabled{background:#e0e0e0;color:#999;cursor:not-allowed;box-shadow:none;transform:none}.typing-path-next-button{background:linear-gradient(145deg,#ff6b6b,#ff8c42);box-shadow:0 4px 12px #ff6b6b66}.typing-path-next-button:hover:not(:disabled){box-shadow:0 6px 16px #ff6b6b80}.typing-path-step-info{display:flex;align-items:center;gap:10px}.typing-path-step-counter{background:#ff8c421a;color:#ff8c42;padding:8px 16px;border-radius:20px;font-weight:600;font-size:14px}@media (max-width: 768px){.typing-path-lesson-detail-header{padding:16px 20px}.typing-path-header-content{gap:12px}.typing-path-back-button{width:40px;height:40px;font-size:16px}.typing-path-lesson-progress-bar-section{padding:0 12px}.typing-path-lesson-intro-title,.typing-path-typing-start-title{font-size:24px}.typing-path-question-text{font-size:20px}.typing-path-option-button{font-size:16px;padding:15px;min-height:50px}.typing-path-completion-title{font-size:28px}.typing-path-completion-icon{font-size:80px}}@media (max-width: 480px){.typing-path-lesson-detail-header{padding:12px 15px}.typing-path-header-content{gap:10px}.typing-path-back-button{width:36px;height:36px;font-size:14px}.typing-path-lesson-progress-bar-section{padding:0 10px}.typing-path-typing-start-icon{width:100px;height:100px}.typing-path-typing-start-title{font-size:22px}.typing-path-typing-start-message{font-size:16px}.typing-path-question-text{font-size:18px;margin-bottom:20px}.typing-path-options-grid{gap:10px}.typing-path-option-button{font-size:14px;padding:12px;min-height:45px}.typing-path-nav-button{padding:12px 20px;font-size:14px;min-width:80px}}.typing-path-lesson-skeleton{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);padding:20px;gap:20px}.typing-path-lesson-header.skeleton{text-align:center;padding:20px;background:#ffffffe6;border-radius:12px;box-shadow:0 4px 12px #0000001a}.typing-path-lesson-progress-container.skeleton{margin-bottom:20px}.typing-path-lesson-progress-bar.skeleton-content{height:8px;width:100%;border-radius:4px}.typing-path-lesson-title.skeleton-line{width:60%;height:24px;margin:0 auto 10px}.typing-path-lesson-subtitle.skeleton-line{width:40%;height:16px;margin:0 auto}.typing-path-lesson-content.skeleton{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#ffffffe6;border-radius:12px;padding:40px 20px;box-shadow:0 4px 12px #0000001a}.typing-path-lesson-icon.skeleton-content{width:80px;height:80px;border-radius:50%;margin-bottom:30px}.typing-path-lesson-text.skeleton{margin-bottom:30px;width:100%;max-width:500px}.typing-path-lesson-text-line.skeleton-line{width:100%;height:18px;margin-bottom:10px}.typing-path-lesson-text-line.skeleton-line:nth-child(2){width:80%}.typing-path-lesson-text-line.skeleton-line:nth-child(3){width:60%}.typing-path-lesson-points.skeleton{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px}.typing-path-lesson-point.skeleton-line{width:100%;height:14px;margin-bottom:0}.typing-path-lesson-actions.skeleton{display:flex;justify-content:center;padding:20px}.typing-path-lesson-button.skeleton-content{width:200px;height:50px;border-radius:25px}@media (max-width: 768px){.vocab-main.typing-path-detail-active .mobile-footer,.vocab-main.typing-path-detail-active .vocab-tab-navigation{display:none!important}.typing-path-detail-screen{height:100vh!important;min-width:auto!important;border-radius:0!important}}@media (min-width: 769px){.vocab-main.typing-path-detail-active .vocab-tab-navigation{display:none!important}.typing-path-detail-screen{width:500px!important;height:900px!important}}.vocab-main.typing-path-detail-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important;margin-bottom:0!important}.typing-path-detail-screen{height:100vh;display:flex;flex-direction:column;max-width:800px;min-width:500px;margin:0 auto;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);overflow:hidden;position:relative;border-radius:20px;box-shadow:0 8px 20px #00000026;margin-bottom:0!important}.typing-path-lesson-detail-header{background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-bottom:3px solid #FF6B6B;position:sticky;top:0;z-index:100;flex-shrink:0}.typing-path-header-content{display:flex;align-items:center;justify-content:space-between;width:100%}.typing-path-back-button{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;cursor:pointer;box-shadow:0 4px 12px #ff8c4266;transition:all .3s ease}.typing-path-back-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ff8c4280}.typing-path-lesson-title-section{flex:1}.typing-path-lesson-title{font-size:20px;font-weight:700;color:#ff6b6b;margin-bottom:4px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.typing-path-lesson-subtitle{font-size:14px;color:#ff8c42;font-weight:700}.typing-path-lesson-icon{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,#4ecdc4,#45b7af);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 12px #4ecdc44d}.typing-path-lesson-detail-container{flex:1;padding:20px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none;max-height:calc(100vh - 140px)}.typing-path-lesson-detail-container::-webkit-scrollbar{width:8px}.typing-path-lesson-detail-container::-webkit-scrollbar-track{background:#ffe4b54d;border-radius:4px}.typing-path-lesson-detail-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:4px}.typing-path-lesson-detail-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffd93d,#ff8c42)}.typing-path-progress-card{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FF6B6B;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.typing-path-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.typing-path-progress-title{font-size:16px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.typing-path-progress-percentage{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 2px 8px #ff8c4266;text-shadow:1px 1px 0px rgba(0,0,0,.3)}.typing-path-progress-bar{width:100%;height:12px;background:#fff8dc;border:2px solid #FF8C42;border-radius:8px;overflow:hidden;margin-bottom:10px}.typing-path-progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:6px;transition:width 1s ease}.typing-path-progress-text{font-size:12px;color:#666;font-weight:700;text-align:center}.typing-path-lesson-list{display:flex;flex-direction:column;gap:12px}.typing-path-lesson-item{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FF6B6B;border-radius:16px;padding:16px;transition:all .3s ease;position:relative;margin-bottom:0!important;box-shadow:0 4px 12px #0000001a}.typing-path-lesson-item.clickable{cursor:pointer}.typing-path-lesson-item.clickable:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.typing-path-lesson-item.completed{border-color:#4ecdc4;background:linear-gradient(145deg,#4ecdc41a,#fffffff2)}.typing-path-lesson-item.quiz{border-color:#9b59b6;background:linear-gradient(145deg,#9b59b61a,#fffffff2)}.typing-path-lesson-item.locked{opacity:.6;filter:grayscale(.5);cursor:not-allowed}.typing-path-lesson-item.locked:hover{transform:none;box-shadow:0 4px 12px #0000001a}.typing-path-lesson-item-content{display:flex;align-items:center;gap:15px}.typing-path-lesson-number{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#ff8c42,#ffd93d);display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:#fff;box-shadow:0 3px 10px #ff8c4266;flex-shrink:0}.typing-path-lesson-number.completed{background:linear-gradient(135deg,#4ecdc4,#45b7af);box-shadow:0 3px 10px #4ecdc466}.typing-path-lesson-number.quiz{background:linear-gradient(135deg,#9b59b6,#8e44ad);box-shadow:0 3px 10px #9b59b666}.typing-path-lesson-number.locked{background:#e0e0e0;color:#999;box-shadow:0 3px 10px #0000001a}.typing-path-lesson-number.current{animation:pulse 2s ease-in-out infinite}.typing-path-lesson-info{flex:1;min-width:0}.typing-path-lesson-name{font-size:16px;font-weight:700;color:#ff6b6b;margin-bottom:4px;text-shadow:1px 1px 0px rgba(255,255,255,.8);display:flex;align-items:center;gap:15px}.typing-path-lesson-name.completed{color:#4ecdc4}.typing-path-lesson-name.quiz{color:#9b59b6}.typing-path-lesson-description{font-size:13px;color:#ff8c42;font-weight:700}.typing-path-lesson-meta{display:flex;gap:8px;flex-wrap:wrap;font-size:15px}.typing-path-lesson-time{font-size:15px;color:#666;background:#fffc;padding:2px 6px;border-radius:8px;border:1px solid #FFE4B5}.typing-path-lesson-difficulty{font-size:15px;padding:2px 6px;border-radius:8px;border:1px solid rgba(0,0,0,.1);font-weight:700}.typing-path-quiz-topics{font-size:15px;color:#9b59b6;background:#9b59b61a;padding:2px 6px;border-radius:8px;border:1px solid #9B59B6}.typing-path-lesson-words{font-size:14px;color:#666;line-height:1.4;word-break:break-word}.typing-path-lesson-status{display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.typing-path-lesson-status.completed{color:#4ecdc4}.typing-path-lesson-status.quiz{color:#9b59b6}.typing-path-lesson-status.current{color:#ff8c42;animation:pulse 2s ease-in-out infinite}.typing-path-lesson-status.locked{color:#ccc}.typing-path-detail-loading{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1)}.typing-path-loading-container{text-align:center;padding:2rem;background:#fffffff2;border-radius:20px;border:3px solid #FF6B6B;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;max-width:300px;width:90%}.typing-path-loading-spinner{width:48px;height:48px;border:4px solid #FFF8DC;border-top:4px solid #FF8C42;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.typing-path-loading-text{font-size:16px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.typing-path-loading-details{font-size:12px;color:#ff8c42;font-weight:700;margin-top:8px}.typing-path-detail-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);text-align:center;padding:2rem}.typing-path-error-message{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:2rem;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.typing-path-data-source-indicator{position:fixed;top:10px;right:10px;background:#fffffff2;border:2px solid #FF6B6B;border-radius:8px;padding:4px 8px;font-size:11px;font-weight:700;color:#ff6b6b;z-index:1000;display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:0 4px 12px #0000001a}.typing-path-error-indicator{color:#ff6b6b;font-size:14px;animation:pulse 2s infinite}.typing-path-refresh-data-button{background:#ff8c42;color:#fff;border:none;padding:2px 6px;border-radius:4px;font-size:10px;cursor:pointer}@keyframes pulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:.8}}@media (max-width: 768px){.typing-path-lesson-detail-header{padding:16px 20px}.typing-path-lesson-detail-container{padding:16px 20px;max-height:calc(100vh - 120px)}.typing-path-lesson-title{font-size:18px}.typing-path-lesson-subtitle{font-size:13px}.typing-path-lesson-icon{width:44px;height:44px;font-size:20px}.typing-path-progress-card{padding:16px;margin-bottom:16px}.typing-path-lesson-item{padding:14px;gap:12px}.typing-path-lesson-number{width:72px;height:72px;font-size:28px}.typing-path-lesson-name{font-size:15px}.typing-path-lesson-description{font-size:13px}.typing-path-lesson-meta{gap:8px}.typing-path-lesson-time,.typing-path-lesson-difficulty,.typing-path-quiz-topics{font-size:13px;padding:1px 4px}.typing-path-lesson-words{font-size:13px}.typing-path-loading-container{padding:1.5rem;margin:1rem}}@media (max-width: 480px){.typing-path-header-content{gap:12px}.typing-path-back-button{width:40px;height:40px;font-size:16px}.typing-path-lesson-detail-container{padding:12px 16px}.typing-path-lesson-item{padding:12px}.typing-path-lesson-item-content{gap:10px}.typing-path-lesson-number{width:64px;height:64px;font-size:24px}.typing-path-lesson-name{font-size:14px}.typing-path-lesson-description{font-size:13px}.typing-path-lesson-meta{gap:6px}.typing-path-lesson-time,.typing-path-lesson-difficulty,.typing-path-quiz-topics{font-size:12px;padding:1px 4px}.typing-path-lesson-words{font-size:12px}.typing-path-lesson-status{font-size:18px}}.skeleton-content{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.skeleton-line{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;height:16px;margin-bottom:8px}.typing-path-lesson-detail-header.skeleton{background:#f8f9fa;border-bottom:1px solid #e9ecef}.typing-path-header-content.skeleton{padding:20px}.typing-path-back-button.skeleton-content{width:40px;height:40px;border-radius:50%}.typing-path-lesson-title-section.skeleton{flex:1}.typing-path-lesson-title.skeleton-line{width:60%;height:24px;margin-bottom:8px}.typing-path-lesson-subtitle.skeleton-line{width:40%;height:16px}.typing-path-lesson-icon.skeleton-content{width:60px;height:60px;border-radius:50%}.typing-path-progress-card.skeleton{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:20px;margin:20px}.typing-path-progress-header.skeleton{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.typing-path-progress-title.skeleton-line{width:120px;height:20px}.typing-path-progress-percentage.skeleton-line{width:80px;height:16px}.typing-path-progress-bar-container.skeleton{width:100%}.typing-path-progress-bar.skeleton-content{height:8px;width:100%;border-radius:4px}.typing-path-lesson-list{padding:0}.typing-path-lesson-item.skeleton{background:#f8f9fa;border:1px solid #e9ecef;border-radius:12px;padding:20px;margin-bottom:15px;display:flex;align-items:center;gap:15px;pointer-events:none;opacity:.7}.typing-path-lesson-icon-container.skeleton{flex-shrink:0}.typing-path-lesson-icon.skeleton-content{width:50px;height:50px;border-radius:50%}.typing-path-lesson-content.skeleton{flex:1}.typing-path-lesson-title.skeleton-line{width:70%;height:20px;margin-bottom:8px}.typing-path-lesson-description.skeleton-line{width:90%;height:16px;margin-bottom:12px}.typing-path-lesson-meta.skeleton{display:flex;gap:15px}.typing-path-lesson-time.skeleton-line,.typing-path-lesson-difficulty.skeleton-line{width:60px;height:14px}.typing-path-lesson-status.skeleton-content{width:30px;height:30px;border-radius:50%;flex-shrink:0}@keyframes typing-path-view-float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(5deg)}}@keyframes typing-path-view-pulse{0%,to{box-shadow:0 12px 25px #0003,0 0 25px #ff6b6b66}50%{box-shadow:0 15px 30px #00000040,0 0 30px #ff6b6b80}}@keyframes typing-path-view-exam-pulse{0%,to{box-shadow:0 12px 25px #0003,0 0 25px #ffd70099}50%{box-shadow:0 15px 30px #00000040,0 0 30px #ffd700cc}}@keyframes typing-path-view-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes typing-path-view-wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.typing-path-view-container{min-height:100vh;padding:20px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);display:flex;flex-direction:column;align-items:center}.typing-path-view-header{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:4px solid #FF6B6B;border-radius:20px;padding:20px;margin-bottom:30px;width:100%;max-width:400px;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.typing-path-view-profile-section{display:flex;align-items:center;gap:15px;margin-bottom:20px}.typing-path-view-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ffe4b5,#ffdab9);border:3px solid #FF8C42;display:flex;align-items:center;justify-content:center;font-size:32px;box-shadow:0 4px 15px #ff8c424d}.typing-path-view-profile-info{flex:1}.typing-path-view-nickname{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:5px}.typing-path-view-grade-info{display:flex;align-items:center;gap:10px}.typing-path-view-current-grade{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 2px 8px #ff8c4266}.typing-path-view-target-grade{color:#ff8c42;font-size:12px;font-weight:700}.typing-path-view-upgrade-btn{background:linear-gradient(145deg,#ff8c42,#ffd93d);border:none;border-radius:15px;padding:8px 15px;font-size:12px;font-weight:700;color:#fff;cursor:pointer;box-shadow:0 4px 10px #ff8c424d;transition:all .3s ease}.typing-path-view-upgrade-btn:hover{transform:translateY(-1px);box-shadow:0 6px 15px #ff8c4266}.typing-path-view-grade-tabs{display:flex;gap:8px;flex-wrap:wrap}.typing-path-view-grade-tab{padding:8px 12px;border-radius:12px;border:none;font-size:12px;font-weight:700;transition:all .3s ease}.typing-path-view-grade-tab-selected{background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;box-shadow:0 4px 10px #ff6b6b66;transform:translateY(-1px);cursor:pointer}.typing-path-view-grade-tab-unlocked{background:linear-gradient(145deg,#fff8dc,#fffaf0);color:#ff6b6b;border:2px solid #FF8C42;cursor:pointer}.typing-path-view-grade-tab-locked{background:#e0e0e0;color:#999;opacity:.6;cursor:not-allowed}.typing-path-view-lessons-container{width:100%;max-width:400px;position:relative}.typing-path-view-connection-line{position:absolute;left:50%;top:40px;bottom:40px;width:4px;background:linear-gradient(180deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:2px;transform:translate(-50%);opacity:.6;z-index:1}.typing-path-view-lesson-item{position:relative;z-index:2;margin-bottom:40px}.typing-path-view-lesson-item:last-child{margin-bottom:0}.typing-path-view-lesson-clickable{cursor:pointer}.typing-path-view-lesson-card{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border:3px solid #FF6B6B;border-radius:20px;padding:20px;display:flex;align-items:center;gap:15px;transition:all .3s ease;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;position:relative}.typing-path-view-exam-card{background:linear-gradient(145deg,#ffd7001a,#ffa5001a);border:4px solid #FFD700;box-shadow:0 8px 20px #ffd7004d,0 0 20px #ffd70033}.typing-path-view-lesson-locked{opacity:.6;filter:grayscale(.5)}.typing-path-view-badges{position:absolute;top:10px;right:15px;display:flex;align-items:center;gap:8px}.typing-path-view-grade-badge{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 8px;border-radius:12px;font-size:10px;font-weight:700;box-shadow:0 2px 8px #ff8c4266;text-shadow:1px 1px 0px rgba(0,0,0,.3);min-width:35px;text-align:center}.typing-path-view-exam-grade-badge{background:linear-gradient(135deg,gold,orange)}.typing-path-view-stage-badge{background:linear-gradient(135deg,#4ecdc4,#45b7af);color:#fff;padding:3px 6px;border-radius:10px;font-size:9px;font-weight:700;text-shadow:1px 1px 0px rgba(0,0,0,.3);text-align:center}.typing-path-view-exam-stage-badge{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.typing-path-view-lesson-icon{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;position:relative;transition:all .3s ease}.typing-path-view-exam-icon{width:90px;height:90px;font-size:40px}.typing-path-view-lesson-completed{border:4px solid #FF6B6B;opacity:1;transform:scale(1);box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.typing-path-view-lesson-current{border:4px solid #FF6B6B;opacity:1;transform:scale(1.05);box-shadow:0 12px 25px #0003,0 0 25px #ff6b6b66;animation:typing-path-view-pulse 2s ease-in-out infinite}.typing-path-view-lesson-locked{background:#e0e0e0;border:3px solid #CCCCCC;opacity:.6;transform:scale(.95);box-shadow:0 4px 10px #0000001a}.typing-path-view-exam-completed{background:linear-gradient(135deg,gold,orange);border:4px solid #FF6B6B;opacity:1;transform:scale(1);box-shadow:0 8px 20px #00000026,0 0 20px #ffd70099}.typing-path-view-exam-current{background:linear-gradient(135deg,gold,orange);border:4px solid #FF6B6B;opacity:1;transform:scale(1.05);box-shadow:0 12px 25px #0003,0 0 25px #ffd70099;animation:typing-path-view-exam-pulse 2s ease-in-out infinite}.typing-path-view-exam-available{background:linear-gradient(135deg,gold,orange);border:4px solid #FF6B6B;opacity:1;transform:scale(1);box-shadow:0 8px 20px #ffd70066,0 0 20px #ffd70080}.typing-path-view-exam-locked{background:linear-gradient(135deg,#d3d3d3,#a9a9a9);border:3px solid #CCCCCC;opacity:.6;transform:scale(.95);box-shadow:0 4px 10px #0000001a}.typing-path-view-completion-badge{position:absolute;top:-5px;right:-5px;width:28px;height:28px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;font-weight:700;box-shadow:0 4px 10px #ff8c4266;border:2px solid white}.typing-path-view-exam-completion-badge{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.typing-path-view-exam-effect{position:absolute;inset:-3px;border-radius:50%;background:linear-gradient(45deg,gold,orange,gold);z-index:-1;animation:typing-path-view-rotate 4s linear infinite}.typing-path-view-lesson-info{flex:1;padding-right:60px}.typing-path-view-lesson-title{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:5px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.typing-path-view-exam-title{font-size:20px;color:gold;text-shadow:2px 2px 0px rgba(255,165,0,.3)}.typing-path-view-exam-spark{margin-left:8px;font-size:16px;animation:typing-path-view-wiggle 2s ease-in-out infinite}.typing-path-view-lesson-subtitle{font-size:12px;color:#ff8c42;font-weight:700;margin-bottom:10px}.typing-path-view-exam-subtitle{color:orange}.typing-path-view-progress-bar{width:100%;height:8px;background:#fff8dc;border:1px solid #FF8C42;border-radius:8px;overflow:hidden;margin-bottom:5px}.typing-path-view-exam-progress-bar{height:10px;border:2px solid #FFD700}.typing-path-view-progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42);border-radius:6px;transition:width .8s ease}.typing-path-view-exam-progress-fill{background:linear-gradient(90deg,gold,orange)}.typing-path-view-progress-text{font-size:11px;color:#666;font-weight:700}.typing-path-view-lock-icon{font-size:24px;color:#ccc}.typing-path-view-connection-point{position:absolute;left:50%;bottom:-20px;width:12px;height:12px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:50%;transform:translate(-50%);border:2px solid white;box-shadow:0 2px 8px #ff8c4266;z-index:3}.typing-path-view-floating{position:fixed;z-index:0;animation:typing-path-view-float 6s ease-in-out infinite}.typing-path-view-floating-1{top:20%;right:10%;font-size:24px;animation-delay:0s}.typing-path-view-floating-2{bottom:30%;left:10%;font-size:20px;animation-delay:2s}.typing-path-view-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid #FFF8DC;border-top:4px solid #FF8C42;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{font-size:16px;color:#ff8c42;font-weight:700;margin-bottom:10px}.loading-details{font-size:14px;color:#999}.data-source-indicator{position:fixed;top:10px;right:10px;background:#000c;color:#fff;padding:8px 12px;border-radius:8px;font-size:12px;z-index:9999;display:flex;align-items:center;gap:8px}.error-indicator{color:#ff6b6b}.refresh-data-button{background:#4ecdc4;border:none;color:#fff;padding:4px 8px;border-radius:4px;font-size:10px;cursor:pointer}@media (max-width: 768px){.typing-path-view-container{padding:15px}.typing-path-view-header{max-width:350px;padding:15px}.typing-path-view-avatar{width:50px;height:50px;font-size:28px}.typing-path-view-nickname{font-size:16px}.typing-path-view-upgrade-btn{padding:6px 12px;font-size:11px}.typing-path-view-lessons-container{max-width:350px}.typing-path-view-lesson-card{padding:15px;gap:12px}.typing-path-view-lesson-icon{width:70px;height:70px;font-size:32px}.typing-path-view-exam-icon{width:80px;height:80px;font-size:36px}.typing-path-view-lesson-info{padding-right:50px}.typing-path-view-lesson-title{font-size:16px}.typing-path-view-exam-title{font-size:18px}.typing-path-view-floating-1{top:15%;right:5%;font-size:20px}.typing-path-view-floating-2{bottom:25%;left:5%;font-size:18px}}@media (max-width: 480px){.typing-path-view-container{padding:10px}.typing-path-view-header{max-width:300px;padding:12px;margin-bottom:20px}.typing-path-view-profile-section{gap:10px;margin-bottom:15px}.typing-path-view-avatar{width:45px;height:45px;font-size:24px}.typing-path-view-nickname{font-size:14px}.typing-path-view-current-grade,.typing-path-view-target-grade{font-size:10px}.typing-path-view-upgrade-btn{padding:5px 10px;font-size:10px}.typing-path-view-grade-tab{padding:6px 10px;font-size:10px}.typing-path-view-lessons-container{max-width:300px}.typing-path-view-lesson-item{margin-bottom:30px}.typing-path-view-lesson-card{padding:12px;gap:10px}.typing-path-view-badges{top:8px;right:10px;gap:6px}.typing-path-view-grade-badge{padding:3px 6px;font-size:9px;min-width:30px}.typing-path-view-stage-badge{padding:2px 4px;font-size:8px}.typing-path-view-lesson-icon{width:60px;height:60px;font-size:28px}.typing-path-view-exam-icon{width:70px;height:70px;font-size:32px}.typing-path-view-lesson-info{padding-right:40px}.typing-path-view-lesson-title{font-size:14px}.typing-path-view-exam-title{font-size:16px}.typing-path-view-lesson-subtitle{font-size:10px;margin-bottom:8px}.typing-path-view-progress-text{font-size:10px}.typing-path-view-lock-icon{font-size:20px}.typing-path-view-floating{display:none}}@keyframes skeleton-loading{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.typing-path-view-skeleton-container{display:flex;flex-direction:column;gap:20px;width:100%;max-width:400px}.typing-path-view-lesson-item.skeleton{pointer-events:none;opacity:.7}.typing-path-view-lesson-card.skeleton{background:#f0f0f0;border:2px solid #e0e0e0;box-shadow:none;animation:none}.typing-path-view-badges.skeleton{display:flex;gap:8px}.typing-path-view-grade-badge.skeleton-content,.typing-path-view-stage-badge.skeleton-content{width:30px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.typing-path-view-lesson-icon.skeleton-content{width:60px;height:60px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:50%;margin:0 auto}.typing-path-view-lesson-info.skeleton{text-align:center;padding:15px}.typing-path-view-lesson-title.skeleton-line,.typing-path-view-lesson-subtitle.skeleton-line{height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:8px}.typing-path-view-lesson-title.skeleton-line{width:80%;margin:0 auto 8px}.typing-path-view-lesson-subtitle.skeleton-line{width:60%;margin:0 auto 15px}.typing-path-view-progress-container.skeleton{margin-top:10px}.typing-path-view-progress-bar.skeleton-content{height:6px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200px 100%;animation:skeleton-loading 1.5s infinite;border-radius:3px;width:100%}.typing-path-view-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:#e74c3c;background:#e74c3c1a;border:2px solid #e74c3c;border-radius:10px;margin:20px}.typing-path-view-error div:first-child{font-weight:700;margin-bottom:5px}.typing-path-view-no-lessons{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;color:#666;background:#0000000d;border-radius:10px;margin:20px}.typing-path-view-no-lessons div:first-child{font-size:48px;margin-bottom:15px}.typing-path-view-no-lessons div:not(:first-child){margin-bottom:5px}.typing-path-main{width:100%;display:flex;justify-content:center;align-items:flex-start;padding:0;margin:0}.room-item{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:20px;padding:20px;border:3px solid #FF8C42;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.room-item:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);transform:scaleX(0);transition:transform .3s ease}.room-item:hover:before{transform:scaleX(1)}.room-item:hover{border-color:#ffd93d}.room-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.room-title{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:4px;display:flex;align-items:center;gap:8px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.room-mode{font-size:14px;color:#ff8c42;background:#ffe4b5cc;padding:4px 8px;border-radius:12px;font-weight:700;border:2px solid #FF8C42}.room-status{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding:4px 8px;border-radius:12px;background:#fffc;border:2px solid}.room-players{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.players-info{display:flex;align-items:center;gap:12px}.player-avatars{display:flex;gap:4px}.player-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ff8c42,#ffd93d);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;border:2px solid white;box-shadow:0 2px 8px #ff8c4266;text-shadow:1px 1px 0px rgba(0,0,0,.3)}.player-avatar.empty{background:#ffe4b580;color:#ff8c42;border-color:#ff8c42;box-shadow:0 2px 8px #ff8c4233}.player-count{font-size:21px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.room-difficulty{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700;margin-right:8px;text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 6px #ff8c4266}.room-footer{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:2px solid rgba(255,140,66,.3)}.room-host{font-size:16px;color:#ff8c42;font-weight:700;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.join-btn{padding:8px 16px;background:linear-gradient(135deg,#ff6b6b,#ff8c42);border:2px solid #FF6B6B;border-radius:12px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;min-height:36px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 8px #ff6b6b66}.join-btn:hover{box-shadow:0 4px 12px #ff6b6b99;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-color:#ffd93d}.join-btn.spectate{background:linear-gradient(135deg,#90ee90,#32cd32);border-color:#32cd32}.join-btn.spectate:hover{background:linear-gradient(135deg,#32cd32,#90ee90)}.join-btn.disabled,.join-btn:disabled{background:#ffe4b580;color:#ff8c42;cursor:not-allowed;box-shadow:none;border-color:#ff8c424d}@media (max-width: 768px){.room-item{padding:16px}.room-title{font-size:16px;align-items:flex-start;gap:4px}.room-players{flex-direction:column;align-items:flex-start;gap:8px}.room-footer{align-items:flex-start;gap:8px}.join-btn{width:20%}}.room-list-container{display:flex;flex-direction:column;height:100%;max-height:calc(100vh - 200px);margin-bottom:24px;padding:20px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.room-list-header{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:12px;margin-bottom:16px;flex-shrink:0}.grade-filter-select{padding:8px 12px;background:linear-gradient(145deg,#fff8dc,#fffaf0);border:2px solid #FF8C42;border-radius:12px;color:#ff6b6b;font-size:14px;cursor:pointer;transition:all .3s ease;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);font-weight:700;text-shadow:1px 1px 0px rgba(255,255,255,.8);box-shadow:0 2px 8px #ff8c424d;min-width:120px;flex-shrink:0}.grade-filter-select:focus{outline:none;border-color:#ffd93d;box-shadow:0 4px 12px #ff8c4266}.grade-filter-select:hover{background:linear-gradient(145deg,#ffdab9,#ffb6c1);border-color:#ffd93d}.create-room-btn{flex:1;padding:8px 16px;background:linear-gradient(135deg,#ff6b6b,#ff8c42,#ffd93d);border:2px solid #FF6B6B;border-radius:12px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:8px;min-height:36px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 8px #ff6b6b66;white-space:nowrap;overflow:hidden}.create-room-btn:hover{box-shadow:0 4px 12px #ff6b6b99;background:linear-gradient(135deg,#ffd93d,#ff8c42,#ff6b6b);border-color:#ffd93d}.create-room-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:0 1px 4px #ff6b6b33}.create-room-icon{font-size:16px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.refresh-btn{padding:8px 16px;background:linear-gradient(145deg,#fff8dc,#fffaf0);border:2px solid #FF8C42;border-radius:12px;color:#ff6b6b;font-size:14px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:6px;min-height:36px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);font-weight:700;text-shadow:1px 1px 0px rgba(255,255,255,.8);box-shadow:0 2px 8px #ff8c424d;flex-shrink:0}.refresh-btn:hover{background:linear-gradient(145deg,#ffdab9,#ffb6c1);border-color:#ffd93d;box-shadow:0 4px 12px #ff8c4266}.room-list-content{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}.room-list-content::-webkit-scrollbar{display:none}.room-list{display:flex;flex-direction:column;gap:12px;padding-bottom:20px}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;color:#ff8c42;background:linear-gradient(145deg,#fff8dc,#fffaf0);border:3px solid #FF6B6B;border-radius:20px;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d}.loading-spinner{font-size:32px;margin-bottom:12px;animation:spin 2s linear infinite;filter:drop-shadow(0 4px 8px rgba(255,140,66,.3))}.empty-state{text-align:center;padding:40px;color:#ff8c42;background:linear-gradient(145deg,#fff8dc,#fffaf0);border:3px solid #FF6B6B;border-radius:20px;position:relative}.empty-state:before{content:"🐾";position:absolute;top:-15px;left:20px;font-size:24px;background:#fff8dc;padding:5px;border-radius:50%}.empty-state:after{content:"🍗";position:absolute;bottom:-15px;right:20px;font-size:24px;background:#fff8dc;padding:5px;border-radius:50%}.empty-icon{font-size:64px;margin-bottom:16px;opacity:.8;filter:drop-shadow(0 4px 8px rgba(255,107,107,.3));animation:bounce 2s ease-in-out infinite}.empty-title{font-size:20px;font-weight:700;margin-bottom:8px;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.empty-description{font-size:16px;line-height:1.5;color:#ff8c42;font-weight:700;text-shadow:1px 1px 0px rgba(255,255,255,.8)}@media (max-width: 768px){.room-list-container{max-height:calc(100vh - 150px)}.room-list-header{grid-template-columns:1fr 2fr 1fr;gap:8px}.create-room-btn{font-size:14px;padding:6px 8px}.grade-filter-select,.refresh-btn{padding:6px 8px}.empty-state{padding:32px}.empty-icon{font-size:48px}.empty-title{font-size:18px}.empty-description{font-size:14px}}@media (max-width: 480px){.room-list-header{grid-template-columns:1fr 1.5fr 1fr;gap:6px}.create-room-btn{padding:5px 6px}.create-room-btn .create-room-icon{font-size:14px}}.create-room-modal-overlay{position:fixed;inset:0;background:#ff6b6b66;display:flex;align-items:center;justify-content:center;z-index:99999;opacity:0;visibility:hidden;transition:all .3s ease;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.create-room-modal-overlay.active{opacity:1;visibility:visible}.create-room-modal-container{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:20px;width:90%;max-width:650px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 50px #0000004d,0 0 40px #ff6b6b66;transform:scale(.9) translateY(20px);transition:all .3s ease;position:relative;border:4px solid #FF6B6B;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.create-room-modal-overlay.active .create-room-modal-container{transform:scale(1) translateY(0)}.create-room-modal-header{padding:20px 24px 16px;border-bottom:3px solid #FF8C42;position:relative}.create-room-modal-header:before{content:"🐾";position:absolute;top:-15px;left:20px;font-size:24px;background:#fff8dc;padding:5px;border-radius:50%}.create-room-modal-title{font-size:24px;font-weight:700;color:#ff6b6b;margin-bottom:8px;display:flex;align-items:center;gap:12px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.create-room-modal-subtitle{font-size:14px;color:#ff8c42;margin-bottom:0;font-weight:700;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.create-room-modal-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border:2px solid #FF8C42;background:linear-gradient(135deg,#ffe4b5,#ffdab9);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#ff6b6b;transition:all .3s ease;font-weight:700}.create-room-modal-close:hover{background:linear-gradient(135deg,#ffdab9,#ffb6c1);border-color:#ffd93d;box-shadow:0 4px 12px #ff8c4266}.create-room-modal-body{padding:20px 24px 24px}.create-room-form-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.create-room-form-card{background:#ffffffe6;border:3px solid #FF8C42;border-radius:15px;padding:16px;transition:all .3s ease;box-shadow:0 4px 10px #0000001a}.create-room-form-card:hover{border-color:#ffd93d;box-shadow:0 6px 15px #ff8c424d}.create-room-form-card.full-width{grid-column:1 / -1}.create-room-card-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid rgba(255,140,66,.3)}.create-room-card-icon{font-size:20px;filter:drop-shadow(0 2px 4px rgba(255,107,107,.3))}.create-room-card-title{font-size:16px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.create-room-form-input{width:100%;padding:10px 12px;border:2px solid rgba(255,140,66,.5);border-radius:10px;font-size:14px;transition:all .3s ease;background:#fffc;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);font-weight:700;color:#ff6b6b;box-sizing:border-box}.create-room-form-input:focus{outline:none;border-color:#ffd93d;background:#fff;box-shadow:0 0 10px #ffd73d66}.create-room-form-input::placeholder{color:#ff8c42;opacity:.7}.create-room-form-description{font-size:11px;color:#ff8c42;margin-top:6px;font-weight:700;text-shadow:1px 1px 0px rgba(255,255,255,.8);line-height:1.3}.create-room-mode-inline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.create-room-difficulty-inline-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.create-room-settings-inline-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.create-room-inline-option{padding:10px 8px;border:2px solid rgba(255,140,66,.5);border-radius:10px;cursor:pointer;transition:all .3s ease;text-align:center;background:#ffffffb3;font-size:11px}.create-room-inline-option:hover{border-color:#ffd93d;background:#ffe4b5cc;box-shadow:0 3px 8px #ff8c424d}.create-room-inline-option.selected{border-color:#ff6b6b;background:linear-gradient(135deg,#ff6b6b33,#ff8c4233);box-shadow:0 0 12px #ff6b6b66}.create-room-inline-icon{font-size:16px;margin-bottom:4px;display:block}.create-room-inline-name{font-size:10px;font-weight:700;color:#ff6b6b;margin-bottom:2px;text-shadow:1px 1px 0px rgba(255,255,255,.8);line-height:1.1}.create-room-inline-desc{font-size:8px;color:#ff8c42;line-height:1.1;font-weight:700}.create-room-difficulty-level{font-size:14px;font-weight:700;color:#ff6b6b;margin-bottom:2px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.create-room-difficulty-name{font-size:9px;color:#ff8c42;font-weight:700}.create-room-setting-item{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;background:#ffffffb3;border-radius:8px;border:2px solid rgba(255,140,66,.5);font-size:11px}.create-room-setting-label{font-size:11px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.create-room-toggle-switch{position:relative;width:30px;height:16px;background:#ffe4b580;border-radius:10px;cursor:pointer;transition:all .3s ease;border:2px solid rgba(255,140,66,.5)}.create-room-toggle-switch.active{background:linear-gradient(135deg,#ff6b6b,#ff8c42);border-color:#ffd93d}.create-room-toggle-knob{position:absolute;top:1px;left:1px;width:10px;height:10px;background:#fff;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 4px #0003}.create-room-toggle-switch.active .create-room-toggle-knob{transform:translate(12px);box-shadow:0 2px 6px #ff6b6b66}.create-room-modal-actions{display:flex;align-items:center;gap:12px;padding-top:20px;border-top:3px solid #FF8C42}.create-room-action-divider{font-size:20px;color:#ff8c42;font-weight:700;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.create-room-btn-secondary{padding:12px 16px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);background:#ffe4b5cc;border:2px solid #FF8C42;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.create-room-btn-secondary:hover{background:#ffb6c1cc;border-color:#ffd93d;box-shadow:0 4px 12px #ff8c424d}.create-room-btn-primary{flex:1;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;transition:all .3s ease;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);display:flex;align-items:center;justify-content:center;gap:6px;background:linear-gradient(135deg,#ff6b6b,#ff8c42,#ffd93d);border:2px solid #FF6B6B;color:#fff;text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 4px 15px #ff6b6b66;position:relative;overflow:hidden}.create-room-btn-primary:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.create-room-btn-primary:hover:before{left:100%}.create-room-btn-primary:hover{box-shadow:0 8px 25px #ff6b6b99;background:linear-gradient(135deg,#ffd93d,#ff8c42,#ff6b6b);border-color:#ffd93d}.create-room-btn-primary:disabled{background:#ffe4b580;color:#ff8c42;cursor:not-allowed;box-shadow:none;border-color:#ff8c424d}.create-room-btn-primary:disabled:before{display:none}.create-room-modal-container::-webkit-scrollbar{width:6px}.create-room-modal-container::-webkit-scrollbar-track{background:#ffe4b54d;border-radius:3px}.create-room-modal-container::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:3px}.create-room-modal-container::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffd93d,#ff8c42)}@media (max-width: 768px){.create-room-form-cards{grid-template-columns:1fr;gap:12px}.create-room-mode-inline-grid{grid-template-columns:repeat(2,1fr)}.create-room-difficulty-inline-grid{grid-template-columns:repeat(3,1fr)}.create-room-settings-inline-grid{grid-template-columns:1fr}.create-room-modal-actions{flex-direction:row}.create-room-btn-secondary{flex-shrink:0}}@media (max-width: 480px){.create-room-modal-container{width:95%;margin:10px}.create-room-modal-header{padding:16px 20px 12px}.create-room-modal-body{padding:16px 20px 20px}.create-room-modal-title{font-size:20px}.create-room-card-title{font-size:14px}.create-room-form-input{font-size:13px;padding:8px 10px}.create-room-inline-option{padding:8px 6px}.create-room-inline-icon{font-size:14px}.create-room-inline-name{font-size:9px}.create-room-inline-desc{font-size:7px}.create-room-difficulty-level{font-size:12px}.create-room-difficulty-name{font-size:8px}.create-room-btn-secondary,.create-room-btn-primary{font-size:13px;padding:10px 12px}.create-room-action-divider{font-size:16px}}.online-battle-main{opacity:0;transform:translateY(30px);animation:fadeInUp .5s ease forwards;animation-delay:.3s}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.online-battle-main{padding:0}}@media (min-width: 769px){.game-screen-wrapper{width:500px!important;min-width:500px!important;max-width:500px!important;margin:40px auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);overflow-x:hidden;overflow-y:auto;position:relative;padding:0}}@media (min-width: 481px) and (max-width: 768px){.game-screen-wrapper{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);min-height:100vh;overflow-x:hidden;position:relative;padding:0}}@media (max-width: 480px){.game-screen-wrapper{font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);min-height:100vh;overflow-x:hidden;position:relative;padding:0;margin:0}}.floating-chicken{position:absolute;font-size:18px;animation:float 8s ease-in-out infinite;opacity:.2}.floating-chicken:nth-child(1){top:15%;left:5%;animation-delay:0s}.floating-chicken:nth-child(2){top:25%;right:10%;animation-delay:3s}.floating-chicken:nth-child(3){top:70%;left:8%;animation-delay:6s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(8deg)}}.game-participants-bar-card{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-bottom:3px solid #FF6B6B;padding:12px;position:relative;z-index:10;border-radius:0 0 15px 15px;overflow:visible;box-shadow:0 4px 15px #0000001a}.game-participants-bar-card:before{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:0 0 15px 15px}.game-participants-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.game-participant-card{background:#ffffffe6;border:2px solid #FF8C42;border-radius:12px;padding:8px;display:flex;align-items:center;gap:6px;box-shadow:0 3px 10px #ff8c4233;transition:all .3s ease;position:relative;overflow:visible}.game-participant-card:hover{transform:translateY(-1px);box-shadow:0 5px 15px #ff8c424d}.game-participant-card{border-color:#ff8c42;background:#ffffffe6}.game-participant-card.current-user{border-color:#ffd93d;background:linear-gradient(135deg,#ffd73d33,#fffffff2);box-shadow:0 4px 15px #ffd73d66}.game-participant-card.host:before{content:"👑";position:absolute;top:2px;right:4px;font-size:10px;z-index:2}.game-participant-card.empty-slot{background:#ffffff80;border:2px dashed rgba(255,140,66,.4);opacity:.6}.game-card-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffe4b5,#ffdab9);border:2px solid #FF8C42;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}.game-card-content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.game-card-header{display:flex;align-items:center;gap:4px}.game-card-grade{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;font-size:9px;font-weight:700;padding:2px 4px;border-radius:6px;flex-shrink:0;text-shadow:.5px .5px 0px rgba(0,0,0,.3)}.game-card-name{font-size:12px;font-weight:700;color:#ff6b6b!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.game-card-hunger-bar{width:100%;height:8px;background:#fff8dc;border:1px solid #FF8C42;border-radius:3px;overflow:visible;position:relative}.game-card-hunger-progress{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:2px;transition:width .8s ease}.game-card-hunger-score{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:8px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 1px rgba(255,255,255,.8);transition:all .3s ease;z-index:100}.game-card-hunger-score.score-update{transform:translateY(-50%) scale(3);color:#32cd32;font-weight:900;z-index:101}.game-participant-card.winner-glow{animation:winnerGlow 2s ease-in-out;border-color:#32cd32!important;box-shadow:0 0 20px #32cd3299!important;z-index:50!important}.game-participant-card.loser-shake{animation:loserShake 1s ease-in-out;border-color:#ff6b6b!important}@keyframes winnerGlow{0%,to{box-shadow:0 3px 10px #ff8c4233}50%{box-shadow:0 0 30px #32cd32cc;border-color:#32cd32;transform:scale(1.05)}}@keyframes loserShake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.main-game-area{padding:10px;position:relative;z-index:10}.question-card{background:linear-gradient(145deg,#fff8dc,#fffaf0);border:3px solid #FF6B6B;border-radius:15px;padding:15px;text-align:center;box-shadow:0 6px 15px #00000026,0 0 15px #ff6b6b4d;position:relative;margin-bottom:15px}.question-card:after{content:"🐾";position:absolute;bottom:-12px;right:15px;font-size:20px;background:#fff8dc;padding:3px;border-radius:50%}.timer{position:absolute;top:8px;right:12px;background:#ff6b6b;color:#fff;padding:6px 10px;border-radius:12px;font-weight:700;font-size:12px;transition:all .3s ease}.timer.warning{background:#f44;animation:pulse 1s infinite}.timer.locked{background:#666}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.question-text{font-size:14px;color:#ff6b6b;margin-bottom:10px;font-weight:700}.thai-word{font-size:36px;color:#ff8c42;margin:15px 0;font-weight:700;text-shadow:2px 2px 0px #FFE4B5;animation:bounce 3s ease-in-out infinite}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.game-content{display:flex;flex-direction:column;gap:12px}.images-section{display:flex;gap:8px}.image-placeholder{flex:1;height:50px;background:linear-gradient(145deg,#ffffffb3,#ffe4b580);border:2px dashed #FF8C42;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#ff8c42;font-weight:700;font-size:11px;box-shadow:0 2px 8px #0000001a}.choices-area{display:flex;flex-direction:column;gap:8px}.choice-button{background:linear-gradient(145deg,#ffe4b5,#ffdab9);border:3px solid #FF8C42;border-radius:12px;padding:15px;font-size:15px;font-weight:700;color:#ff6b6b;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 8px #0000001a;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);height:55px;position:relative;overflow:hidden}.choice-button:hover:not(:disabled){box-shadow:0 4px 12px #0003;background:linear-gradient(145deg,#ffdab9,#ffb6c1);transform:translateY(-1px)}.choice-button:active:not(:disabled){box-shadow:0 2px 5px #0000001a;transform:translateY(0)}.choice-button:disabled{cursor:not-allowed;opacity:.7}.choice-button.locked{background:linear-gradient(145deg,#ddd,#bbb);border-color:#999;color:#666}.choice-button.correct{background:linear-gradient(145deg,#90ee90,#32cd32);border-color:#32cd32;color:#fff;box-shadow:0 0 20px #32cd3280;animation:correctPulse 1s ease-in-out}.choice-button.incorrect{background:linear-gradient(145deg,#ffb6c1,#ff6b6b);border-color:#ff6b6b;color:#fff;box-shadow:0 0 20px #ff6b6b80;animation:incorrectShake .5s ease-in-out}.choice-button.show-correct{background:linear-gradient(145deg,#90ee90,#32cd32);border-color:#32cd32;color:#fff;opacity:.8}@keyframes correctPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes incorrectShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.chat-section{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:15px;border:3px solid #FF6B6B;overflow:hidden;box-shadow:0 6px 15px #00000026,0 0 15px #ff6b6b4d;position:relative;height:180px;display:flex;flex-direction:column;margin-top:15px}.chat-section:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d)}.chat-header{padding:6px 10px;background:#ffe4b580;border-bottom:2px solid #FF8C42;font-weight:700;color:#ff6b6b;font-size:11px;text-shadow:1px 1px 0px rgba(255,255,255,.8);flex-shrink:0}.chat-messages{flex:1;padding:8px;overflow-y:auto;font-size:12px;line-height:1.3;background:#ffffff4d}.chat-message{margin-bottom:4px;color:#ff8c42;font-weight:700}.chat-message.log-message{color:#32cd32;font-style:italic}.chat-input-area{display:flex;padding:6px;gap:4px;border-top:2px solid #FF8C42;background:#ffe4b54d;flex-shrink:0}.chat-input{flex:1;background:#fffc;border:2px solid #FF8C42;border-radius:8px;padding:4px 8px;color:#ff6b6b;font-size:10px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);font-weight:700}.chat-input::placeholder{color:#ff8c42;opacity:.7}.chat-input:focus{outline:none;border-color:#ffd93d;box-shadow:0 0 8px #ffd73d66}.chat-send{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:2px solid #FF6B6B;border-radius:8px;padding:4px 8px;color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 6px #ff8c4266;font-size:10px}.chat-send:hover{box-shadow:0 3px 8px #ff8c4299;background:linear-gradient(135deg,#ffd93d,#ff8c42)}.connection-error{position:fixed;top:10px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;padding:8px 16px;border-radius:12px;display:flex;align-items:center;gap:8px;z-index:1000;box-shadow:0 4px 12px #ff6b6b66}.connection-error button{background:none;border:none;color:#fff;font-size:14px;cursor:pointer;padding:0 4px}.paw-prints{position:fixed;bottom:15px;left:50%;transform:translate(-50%);font-size:14px;opacity:.4;animation:fadeInOut 4s ease-in-out infinite}@keyframes fadeInOut{0%,to{opacity:.4}50%{opacity:.7}}@media (max-width: 768px){.game-participants-grid{gap:6px}.game-participant-card{padding:6px;gap:4px}.game-content{gap:10px}.images-section{gap:6px}.image-placeholder{height:45px;font-size:10px}.choice-button{height:50px;font-size:14px;padding:12px}.thai-word{font-size:32px;margin:12px 0}.chat-section{height:220px}}@media (max-width: 480px){.game-participants-bar-card{padding:8px}.game-participants-grid{gap:4px}.game-participant-card{padding:4px;gap:3px}.thai-word{font-size:28px}.choice-button{height:45px;font-size:13px;padding:10px}.main-game-area{padding:8px}.question-card{padding:12px;margin-bottom:12px}.timer{font-size:11px;padding:5px 8px}}@media (hover: none){.choice-button:hover{transform:none;box-shadow:0 3px 8px #0000001a;background:linear-gradient(145deg,#ffe4b5,#ffdab9)}.choice-button:active{transform:scale(.98);transition:transform .1s ease}.game-participant-card:hover{transform:none;box-shadow:0 3px 10px #ff8c4233}.game-participant-card:active{transform:scale(.98);transition:transform .1s ease}}.waiting-room-wrapper{font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);color:#ff6b6b;overflow-x:hidden;min-height:100vh;position:relative}.countdown-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.countdown-content{text-align:center;color:#fff;animation:countdownPulse 1s ease-in-out infinite}.countdown-title{font-size:2rem;font-weight:700;margin-bottom:1rem;text-shadow:2px 2px 4px rgba(0,0,0,.5);color:#ffd93d}.countdown-number{font-size:8rem;font-weight:900;margin:1rem 0;text-shadow:4px 4px 8px rgba(0,0,0,.7);background:linear-gradient(45deg,#ff6b6b,#ff8c42,#ffd93d);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:countdownScale 1s ease-in-out}.countdown-subtitle{font-size:1.5rem;font-weight:700;color:#ffe4b5;text-shadow:1px 1px 2px rgba(0,0,0,.5)}@keyframes countdownPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes countdownScale{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:1}}.floating-treats{position:fixed;width:100%;height:100%;pointer-events:none;z-index:1}.floating-chicken{position:absolute;font-size:20px;animation:float 6s ease-in-out infinite;opacity:.3}.floating-chicken:nth-child(1){top:10%;left:10%;animation-delay:0s}.floating-chicken:nth-child(2){top:20%;right:15%;animation-delay:2s}.floating-chicken:nth-child(3){top:60%;left:5%;animation-delay:4s}.floating-chicken:nth-child(4){top:70%;right:25%;animation-delay:3s}.floating-chicken:nth-child(5){top:40%;left:80%;animation-delay:1s}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(5deg)}}@media (min-width: 769px){.mobile-container{width:500px!important;min-width:500px!important;max-width:500px!important;margin:40px auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important;background:#ffffff1a;position:relative;padding:10px;z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overflow-y:auto}}@media (min-width: 481px) and (max-width: 768px){.mobile-container{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important;background:#ffffff1a;position:relative;padding:10px;z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);min-height:100vh}}@media (max-width: 480px){.mobile-container{max-width:400px;margin:0 auto;min-height:100vh;background:#ffffff1a;position:relative;padding:10px;z-index:10;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}.waiting-room-header{display:flex;justify-content:space-between;align-items:center;padding:15px;background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:20px;margin-top:15px;margin-bottom:15px;border:3px solid #FF6B6B;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;position:relative}.waiting-room-room-info{display:flex;align-items:center;gap:10px}.waiting-room-room-title{font-size:16px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8);display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.waiting-room-grade-badge{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;font-size:10px;padding:3px 6px;border-radius:10px;font-weight:700;box-shadow:0 2px 8px #ff8c4266;min-width:30px;text-align:center;text-shadow:1px 1px 0px rgba(0,0,0,.3);display:inline-block;flex-shrink:0;white-space:nowrap}.waiting-room-room-title-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes gradeBadgeGlow{0%,to{box-shadow:0 2px 8px #0000004d;transform:scale(1)}50%{box-shadow:0 4px 15px #0006;transform:scale(1.05)}}.waiting-room-room-id{font-size:12px;color:#ff8c42;font-weight:700}.waiting-room-header-buttons{display:flex;gap:8px}.waiting-room-header-btn{height:35px;border-radius:12px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border:2px solid #FF6B6B;color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #ff8c4266;font-size:14px;padding:0 12px;display:flex;align-items:center;justify-content:center;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.waiting-room-header-btn:hover:not(:disabled){box-shadow:0 6px 15px #ff8c4299;background:linear-gradient(135deg,#ffd93d,#ff8c42)}.waiting-room-header-btn:disabled{opacity:.6;cursor:not-allowed;box-shadow:0 2px 5px #ff8c4233}.waiting-room-exit-btn{width:35px;padding:0}.waiting-room-ready-btn{min-width:80px}.waiting-room-ready-btn.ready{background:linear-gradient(135deg,#90ee90,#32cd32);border-color:#32cd32;animation:readyPulse 2s ease-in-out infinite}.waiting-room-ready-btn.countdown{background:linear-gradient(135deg,#ff6b6b,#ff8c42);border-color:#ff6b6b;animation:countdownButtonPulse 1s ease-in-out infinite;font-size:12px;font-weight:900;text-shadow:1px 1px 0px rgba(0,0,0,.3)}@keyframes readyPulse{0%,to{box-shadow:0 4px 10px #32cd3266}50%{box-shadow:0 6px 20px #32cd32cc}}@keyframes countdownButtonPulse{0%,to{box-shadow:0 4px 10px #ff6b6b66;transform:scale(1)}50%{box-shadow:0 6px 20px #ff6b6bcc;transform:scale(1.05)}}.waiting-room-ready-btn.cancel{background:linear-gradient(135deg,#ff6b6b,#ff8c42);border-color:#ff8c42}.players-section{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px}.player-slot{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);border-radius:20px;padding:15px;border:3px solid #FF6B6B;box-shadow:0 8px 20px #00000026,0 0 15px #ff6b6b33;text-align:center;transition:all .3s ease;position:relative;overflow:hidden}.player-slot:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d);border-radius:20px 20px 0 0}.player-slot.active{border-color:#ffd93d;box-shadow:0 10px 25px #0003,0 0 25px #ffd73d66}.player-slot.ready{border-color:#32cd32;background:linear-gradient(145deg,#90ee904d,#32cd3233);box-shadow:0 10px 25px #0003,0 0 25px #32cd3299;animation:readyGlow 2s ease-in-out infinite}.player-slot.ready:before{background:linear-gradient(90deg,#32cd32,#90ee90,#32cd32)}@keyframes readyGlow{0%,to{box-shadow:0 10px 25px #0003,0 0 25px #32cd3266}50%{box-shadow:0 12px 30px #0000004d,0 0 35px #32cd32cc}}.player-slot.empty{background:linear-gradient(145deg,#ffffff80,#ffe4b54d);border:3px dashed rgba(255,107,107,.4);opacity:.7}.player-avatar{width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#ffe4b5,#ffdab9);border:4px solid #FF8C42;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-size:24px;box-shadow:0 4px 15px #ff8c424d;position:relative}.player-avatar:after{content:"";position:absolute;inset:-2px;border-radius:50%;background:linear-gradient(45deg,#ff8c42,#ffd93d,#ff8c42);z-index:-1;animation:rotate 4s linear infinite}.player-slot.ready .player-avatar{border-color:#32cd32;background:linear-gradient(135deg,#90ee90,#98fb98);box-shadow:0 4px 15px #32cd3280}.player-slot.ready .player-avatar:after{background:linear-gradient(45deg,#32cd32,#90ee90,#32cd32)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.player-slot.empty .player-avatar{background:#ffe4b54d;border-color:#ff8c4266;color:#ff6b6b80;box-shadow:none}.player-slot.empty .player-avatar:after{display:none}.player-name{font-size:14px;font-weight:700;color:#ff6b6b;margin-bottom:5px;display:flex;align-items:center;justify-content:center;gap:8px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.player-rank{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;font-size:10px;padding:3px 6px;border-radius:10px;font-weight:700;box-shadow:0 2px 8px #ff8c4266;min-width:30px;text-align:center;text-shadow:1px 1px 0px rgba(0,0,0,.3)}.player-slot.ready .player-rank{background:linear-gradient(135deg,#32cd32,#90ee90);box-shadow:0 2px 8px #32cd3266}.player-slot.empty .player-rank{background:#ff8c424d;color:#fff9;box-shadow:none}.player-status{font-size:11px;color:#ff8c42;font-weight:700}.player-slot.ready .player-status{color:#32cd32;animation:statusBlink 1.5s ease-in-out infinite}@keyframes statusBlink{0%,to{opacity:1}50%{opacity:.7}}.player-slot.empty .player-status{color:#ff8c4299}.waiting-room-chat-section{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:15px;border:3px solid #FF6B6B;overflow:hidden;box-shadow:0 6px 15px #00000026,0 0 15px #ff6b6b4d;position:relative;height:180px;display:flex;flex-direction:column;margin-bottom:15px}.waiting-room-chat-section:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#ff6b6b,#ff8c42,#ffd93d)}.waiting-room-chat-header{padding:6px 10px;background:#ffe4b580;border-bottom:2px solid #FF8C42;font-weight:700;color:#ff6b6b;font-size:11px;text-shadow:1px 1px 0px rgba(255,255,255,.8);flex-shrink:0}.waiting-room-chat-messages{flex:1;padding:8px;overflow-y:auto;font-size:12px;line-height:1.3;background:#ffffff4d}.waiting-room-chat-message{margin-bottom:4px;color:#ff8c42;font-weight:700}.waiting-room-system-message{color:#32cd32;font-style:italic}.waiting-room-chat-input-area{display:flex;padding:6px;gap:4px;border-top:2px solid #FF8C42;background:#ffe4b54d;flex-shrink:0}.waiting-room-chat-input{flex:1;background:#fffc;border:2px solid #FF8C42;border-radius:8px;padding:4px 8px;color:#ff6b6b;font-size:10px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);font-weight:700}.waiting-room-chat-input::placeholder{color:#ff8c42;opacity:.7}.waiting-room-chat-input:focus{outline:none;border-color:#ffd93d;box-shadow:0 0 8px #ffd73d66}.waiting-room-chat-input:disabled{opacity:.6;cursor:not-allowed;background:#ffffff80}.waiting-room-chat-send{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:2px solid #FF6B6B;border-radius:8px;padding:4px 8px;color:#fff;font-weight:700;cursor:pointer;transition:all .3s ease;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 6px #ff8c4266;font-size:10px}.waiting-room-chat-send:hover:not(:disabled){box-shadow:0 3px 8px #ff8c4299;background:linear-gradient(135deg,#ffd93d,#ff8c42)}.waiting-room-chat-send:disabled{opacity:.6;cursor:not-allowed;box-shadow:0 1px 4px #ff8c4233}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#ffe4b54d;border-radius:3px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffd93d,#ff8c42)}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.paw-prints{position:fixed;bottom:20px;left:50%;transform:translate(-50%);font-size:16px;opacity:.5;animation:fadeInOut 3s ease-in-out infinite;z-index:5}@media (max-width: 480px){.countdown-title{font-size:1.5rem}.countdown-number{font-size:6rem}.countdown-subtitle{font-size:1.2rem}.waiting-room-ready-btn.countdown{font-size:11px;min-width:90px}.player-slot{padding:12px}.player-avatar{width:50px;height:50px;font-size:20px}.player-name{font-size:12px;gap:6px}.player-rank{font-size:9px;padding:2px 5px;min-width:25px}.player-status{font-size:10px}.waiting-room-grade-badge{font-size:9px;padding:2px 5px;min-width:25px}.waiting-room-room-title{font-size:14px;gap:6px}.waiting-room-room-title-text{font-size:13px}.waiting-room-chat-section{height:220px}}.fill-blank-learning-content{flex:1;padding:var(--fill-blank-spacing-xl);display:flex;flex-direction:column;gap:var(--fill-blank-spacing-xl)}.fill-blank-translation-card{background:#ffffff1a;-webkit-backdrop-filter:var(--fill-blank-blur-md);backdrop-filter:var(--fill-blank-blur-md);border:1px solid rgba(255,255,255,.2);border-radius:var(--fill-blank-radius-xl);padding:25px var(--fill-blank-spacing-xl);box-shadow:var(--fill-blank-shadow-md);text-align:center;position:relative}.fill-blank-korean-text{font-size:var(--fill-blank-font-size-xl);color:#fff;margin-bottom:var(--fill-blank-spacing-xl);line-height:1.5}.fill-blank-thai-text{font-size:var(--fill-blank-font-size-xxl);color:#fff;font-weight:600;line-height:1.5;display:flex;align-items:center;justify-content:center;gap:var(--fill-blank-spacing-xs);flex-wrap:wrap}.fill-blank-thai-input{background:#ffffff1a;border:2px solid rgba(255,255,255,.3);color:#fff;-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);border-radius:var(--fill-blank-radius-md);padding:var(--fill-blank-spacing-lg);font-size:var(--fill-blank-font-size-xl);width:var(--fill-blank-input-width);text-align:center;outline:none;transition:var(--fill-blank-transition-normal);font-weight:600}.fill-blank-thai-input:focus{border-color:var(--fill-blank-success);background:#fff3;box-shadow:0 0 0 3px #4caf5033}.fill-blank-thai-input::placeholder{color:#ffffffb3;font-weight:400}.fill-blank-thai-input.correct{border-color:var(--fill-blank-success);background:#6bcf7f33;animation:fillBlankCorrectShake .6s ease-in-out;box-shadow:0 0 0 3px #6bcf7f4d}.fill-blank-thai-input.wrong{border-color:var(--fill-blank-error);background:#ff6b6b33;animation:fillBlankWrongShake .6s ease-in-out;box-shadow:0 0 0 3px #ff6b6b4d}.fill-blank-thai-input.easy{border-color:#4caf5080;background:#4caf501a}.fill-blank-thai-input.hard{border-color:#f4433680;background:#f443361a}.fill-blank-hint-text{font-size:var(--fill-blank-font-size-sm);color:#fffc;margin-top:var(--fill-blank-spacing-lg);transition:var(--fill-blank-transition-normal);min-height:20px;display:flex;align-items:center;justify-content:center}.fill-blank-hint-text.show-hint{color:var(--fill-blank-warning);font-weight:600;font-size:var(--fill-blank-font-size-md);animation:hintPulse .5s ease-in-out}.fill-blank-hint-text.correct{color:var(--fill-blank-success);font-weight:600;font-size:var(--fill-blank-font-size-md);animation:correctPulse .5s ease-in-out}.fill-blank-hint-text.wrong{color:var(--fill-blank-error);font-weight:600;font-size:var(--fill-blank-font-size-md);animation:wrongPulse .5s ease-in-out}.fill-blank-keyboard-container{-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);padding:2px var(--fill-blank-spacing-md) 2px!important;border-radius:0 0 var(--fill-blank-radius-xl) var(--fill-blank-radius-xl);margin:0 var(--fill-blank-spacing-sm);height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;overflow:visible!important;box-sizing:border-box!important}.fill-blank-keyboard{margin:0!important;padding:0!important;max-width:100%;transform:scale(var(--fill-blank-keyboard-scale));transform-origin:center center;height:auto!important;width:fit-content!important;display:flex!important;flex-direction:column!important;gap:5px!important;align-items:center!important;box-sizing:border-box!important}.fill-blank-keyboard-row{display:flex!important;justify-content:center!important;gap:3px!important;margin:0!important;padding:0!important;height:auto!important;align-items:center!important;box-sizing:border-box!important}.fill-blank-keyboard-row:first-child{margin-top:0!important;padding-top:0!important}.fill-blank-keyboard-row:last-child{margin-bottom:0!important;padding-bottom:0!important}.fill-blank-key{background:var(--keyboard-button-bg, rgba(255, 255, 255, .9));border:1px solid var(--keyboard-button-border, rgba(0, 0, 0, .1));color:var(--keyboard-button-text, #333);border-radius:var(--fill-blank-radius-sm);padding:var(--fill-blank-spacing-md) 6px;font-size:var(--fill-blank-font-size-lg);cursor:pointer;transition:var(--fill-blank-transition-fast);min-width:32px;text-align:center;-webkit-user-select:none;user-select:none;box-shadow:0 3px 0 var(--keyboard-button-border, rgba(0, 0, 0, .1));position:relative;font-weight:500;margin:0!important;height:auto!important;box-sizing:border-box!important}.fill-blank-key:active{transform:translateY(1px);box-shadow:0 2px 0 var(--keyboard-button-border, rgba(0, 0, 0, .1));background:var(--keyboard-button-active, rgba(240, 240, 240, .9))}.fill-blank-key:hover:not(:disabled){background:var(--keyboard-button-hover, rgba(255, 255, 255, 1));transform:translateY(-1px);box-shadow:0 4px 0 var(--keyboard-button-border, rgba(0, 0, 0, .1))}.fill-blank-key:disabled{opacity:.5;cursor:not-allowed;transform:none}.fill-blank-key.special{background:var(--keyboard-button-active);font-size:13px;min-width:42px;font-weight:600}.fill-blank-key.space{min-width:160px;font-size:var(--fill-blank-font-size-md)}.fill-blank-key.backspace{min-width:48px;color:var(--fill-blank-error);font-weight:700}.fill-blank-key.shift{min-width:52px;color:var(--fill-blank-info);font-weight:700}.fill-blank-key.shift.active{background:var(--fill-blank-info);color:var(--fill-blank-text-inverse)}.fill-blank-key.enter{background:var(--fill-blank-success);color:var(--fill-blank-text-inverse);font-weight:700}.fill-blank-key.enter:hover:not(:disabled){background:var(--fill-blank-success-hover)}.fill-blank-key.pressed{animation:keyPress .1s ease-in-out}.fill-blank-key-label{display:block;line-height:1;margin:0!important;padding:0!important}.fill-blank-key-sublabel{font-size:var(--fill-blank-font-size-xs);opacity:.7;margin-top:2px;margin-bottom:0!important;padding:0!important}@media (max-width: 768px){.fill-blank-keyboard-container{padding:2px 12px!important}.fill-blank-keyboard{transform:scale(.85)!important;gap:4px!important}}@media (max-width: 480px){.fill-blank-keyboard-container{padding:2px 8px!important}.fill-blank-keyboard{transform:scale(.75)!important;gap:3px!important}}.fill-blank-keyboard-container *,.fill-blank-keyboard *,.fill-blank-keyboard-row *{box-sizing:border-box!important}.theme-dark .fill-blank-key:hover:not(:disabled){box-shadow:0 4px 0 var(--keyboard-button-border),0 0 10px var(--theme-primary)}.theme-premium .fill-blank-key:hover:not(:disabled){box-shadow:0 4px 0 var(--keyboard-button-border),0 0 8px #f59e0b4d}.theme-rainbow .fill-blank-key:hover:not(:disabled){box-shadow:0 4px 0 var(--keyboard-button-border),0 0 8px #ec48994d}.fill-blank-keyboard-container.debug{border:2px solid red!important;background:#ff00001a!important}.fill-blank-keyboard.debug{border:2px solid blue!important;background:#0000ff1a!important}.fill-blank-keyboard-row.debug{border:1px solid green!important;background:#00ff001a!important}:root{--theme-primary: #58cc02;--theme-secondary: #1cb0f6;--theme-accent: #ffc800;--theme-success: #6bcf7f;--theme-error: #ff6b6b;--theme-warning: #ffd93d;--theme-background: #f7f7f7;--theme-surface: #ffffff;--theme-text-primary: #3c3c3c;--theme-text-secondary: #757575;--theme-border: #e5e5e5;--fill-blank-primary: var(--theme-primary);--fill-blank-primary-hover: var(--theme-primary-hover, #61e002);--fill-blank-primary-light: var(--theme-primary-light, #7ed321);--fill-blank-primary-dark: var(--theme-primary-dark, #4db000);--fill-blank-secondary: var(--theme-secondary);--fill-blank-secondary-hover: var(--theme-secondary-hover, #1899d6);--fill-blank-secondary-light: var(--theme-secondary-light, #3ec8ff);--fill-blank-secondary-dark: var(--theme-secondary-dark, #1395d3);--fill-blank-accent: var(--theme-accent);--fill-blank-accent-hover: var(--theme-accent-hover, #ffb000);--fill-blank-accent-light: var(--theme-accent-light, #ffd93d);--fill-blank-accent-dark: var(--theme-accent-dark, #e6b400);--fill-blank-success: var(--theme-success);--fill-blank-success-hover: var(--theme-success-hover, #5bb96f);--fill-blank-success-light: var(--theme-success-light, #7dd08f);--fill-blank-success-dark: var(--theme-success-dark, #4caf50);--fill-blank-error: var(--theme-error);--fill-blank-error-hover: var(--theme-error-hover, #ff3333);--fill-blank-error-light: var(--theme-error-light, #ff6b6b);--fill-blank-error-dark: var(--theme-error-dark, #e63946);--fill-blank-warning: var(--theme-warning);--fill-blank-warning-hover: var(--theme-warning-hover, #ffc107);--fill-blank-warning-light: var(--theme-warning-light, #fff59d);--fill-blank-warning-dark: var(--theme-warning-dark, #ff8f00);--fill-blank-info: var(--theme-accent);--fill-blank-bg-gradient: var(--theme-gradient-background, linear-gradient(135deg, #667eea 0%, #764ba2 100%));--fill-blank-progress-gradient: linear-gradient(90deg, var(--fill-blank-error), var(--fill-blank-warning), var(--fill-blank-success));--fill-blank-success-gradient: var(--theme-gradient-primary, linear-gradient(135deg, #58cc02 0%, #4caf50 100%));--fill-blank-error-gradient: linear-gradient(135deg, var(--fill-blank-error) 0%, var(--fill-blank-error-dark) 100%);--achievement-common: linear-gradient(135deg, var(--fill-blank-success), var(--fill-blank-success-light));--achievement-rare: linear-gradient(135deg, var(--fill-blank-secondary), var(--fill-blank-secondary-light));--achievement-epic: linear-gradient(135deg, var(--fill-blank-accent), var(--fill-blank-accent-light));--achievement-legendary: var(--theme-gradient-accent, linear-gradient(135deg, #FFD700, #FFA500));--fill-blank-background: var(--theme-background);--fill-blank-surface: var(--theme-surface);--fill-blank-surface-hover: var(--theme-surface-hover, #f9f9f9);--fill-blank-surface-active: var(--theme-surface-active, #f0f0f0);--fill-blank-text-primary: var(--theme-text-primary);--fill-blank-text-secondary: var(--theme-text-secondary);--fill-blank-text-tertiary: var(--theme-text-tertiary, #9e9e9e);--fill-blank-text-inverse: var(--theme-text-inverse, #ffffff);--fill-blank-border: var(--theme-border);--fill-blank-border-light: var(--theme-border-light, #f0f0f0);--fill-blank-border-dark: var(--theme-border-dark, #d5d5d5);--fill-blank-shadow-sm: var(--theme-shadow-sm, 0 2px 4px rgba(0,0,0,.1));--fill-blank-shadow-md: var(--theme-shadow-md, 0 4px 12px rgba(0,0,0,.15));--fill-blank-shadow-lg: var(--theme-shadow-lg, 0 8px 24px rgba(0,0,0,.2));--fill-blank-shadow-xl: var(--theme-shadow-lg, 0 20px 60px rgba(0,0,0,.3));--fill-blank-shadow-primary: var(--theme-shadow-primary, 0 4px 12px rgba(88, 204, 2, .3));--fill-blank-shadow-secondary: var(--theme-shadow-secondary, 0 4px 12px rgba(28, 176, 246, .3));--fill-blank-spacing-xs: 4px;--fill-blank-spacing-sm: 8px;--fill-blank-spacing-md: 12px;--fill-blank-spacing-lg: 16px;--fill-blank-spacing-xl: 20px;--fill-blank-spacing-xxl: 24px;--fill-blank-radius-sm: 8px;--fill-blank-radius-md: 12px;--fill-blank-radius-lg: 16px;--fill-blank-radius-xl: 20px;--fill-blank-radius-xxl: 24px;--fill-blank-blur-sm: blur(10px);--fill-blank-blur-md: blur(20px);--fill-blank-blur-lg: blur(30px);--fill-blank-font-family: var(--theme-font-family, "MaplestoryOTFBold", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif);--fill-blank-font-size-xs: 10px;--fill-blank-font-size-sm: 12px;--fill-blank-font-size-md: 14px;--fill-blank-font-size-lg: 16px;--fill-blank-font-size-xl: 18px;--fill-blank-font-size-xxl: 20px;--fill-blank-transition-fast: .1s ease;--fill-blank-transition-normal: .3s ease;--fill-blank-transition-slow: .5s ease;--fill-blank-transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);--fill-blank-breakpoint-mobile: 480px;--fill-blank-breakpoint-tablet: 768px;--fill-blank-breakpoint-desktop: 1024px;--fill-blank-z-base: 1;--fill-blank-z-dropdown: 10;--fill-blank-z-sticky: 100;--fill-blank-z-overlay: 1000;--fill-blank-z-modal: 2000;--fill-blank-z-tooltip: 3000;--fill-blank-input-width: 120px;--fill-blank-input-width-mobile: 150px;--fill-blank-keyboard-scale: 1;--fill-blank-keyboard-scale-tablet: .85;--fill-blank-keyboard-scale-mobile: .7;--achievement-common-glow: rgba(var(--theme-success-rgb, 76, 175, 80), .3);--achievement-rare-glow: rgba(var(--theme-secondary-rgb, 33, 150, 243), .3);--achievement-epic-glow: rgba(var(--theme-accent-rgb, 156, 39, 176), .3);--achievement-legendary-glow: rgba(var(--theme-warning-rgb, 255, 215, 0), .3);--progress-excellent: var(--fill-blank-success);--progress-good: var(--fill-blank-success-light);--progress-average: var(--fill-blank-warning);--progress-poor: var(--fill-blank-warning-dark);--progress-fail: var(--fill-blank-error)}:root{--keyboard-button-bg: var(--theme-surface, rgba(255,255,255,.9));--keyboard-button-hover: var(--theme-surface-hover, rgba(255,255,255,1));--keyboard-button-active: var(--theme-surface-active, rgba(255,255,255,.7));--keyboard-button-text: var(--theme-text-primary, #333);--keyboard-button-border: var(--theme-border, rgba(255,255,255,.3));--keyboard-container-bg: var(--theme-surface, rgba(255,255,255,.1));--keyboard-container-border: var(--theme-border, rgba(255,255,255,.2))}:root{--korean-keyboard-button-bg: var(--theme-surface, rgba(255,255,255,.9));--korean-keyboard-button-hover: var(--theme-surface-hover, rgba(255,255,255,1));--korean-keyboard-button-text: var(--theme-text-primary, #333);--korean-keyboard-container-bg: var(--theme-surface, rgba(255,255,255,.1))}.theme-default{--mode-accent-glow: rgba(88, 204, 2, .2);--mode-completion-bg: linear-gradient(135deg, #f7f7f7 0%, #ffffff 100%);--fill-blank-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--keyboard-container-bg: var(--theme-surface, rgba(255, 255, 255, .9));--keyboard-container-border: var(--theme-border, rgba(0, 0, 0, .1));--korean-keyboard-container-bg: var(--theme-surface, rgba(255, 255, 255, .9));--keyboard-button-bg: var(--theme-surface, rgba(255, 255, 255, .95));--keyboard-button-hover: var(--theme-surface-hover, rgba(255, 255, 255, 1));--keyboard-button-active: var(--theme-surface-active, rgba(240, 240, 240, .9));--keyboard-button-text: var(--theme-text-primary, #333);--keyboard-button-border: var(--theme-border, rgba(0, 0, 0, .1));--korean-keyboard-button-bg: var(--theme-surface, rgba(255, 255, 255, .95));--korean-keyboard-button-hover: var(--theme-surface-hover, rgba(255, 255, 255, 1));--korean-keyboard-button-text: var(--theme-text-primary, #333)}.theme-dark{--mode-accent-glow: rgba(124, 58, 237, .3);--mode-completion-bg: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);--fill-blank-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #0f0f0f 100%);--keyboard-button-bg: var(--theme-surface, rgba(45, 45, 45, .95));--keyboard-button-hover: var(--theme-surface-hover, rgba(60, 60, 60, 1));--keyboard-button-active: var(--theme-surface-active, rgba(35, 35, 35, .9));--keyboard-button-text: var(--theme-text-primary, #ffffff);--keyboard-button-border: var(--theme-border, rgba(255, 255, 255, .1));--korean-keyboard-button-bg: var(--theme-surface, rgba(45, 45, 45, .95));--korean-keyboard-button-hover: var(--theme-surface-hover, rgba(60, 60, 60, 1));--korean-keyboard-button-text: var(--theme-text-primary, #ffffff);--keyboard-container-bg: var(--theme-surface, rgba(30, 30, 30, .9));--keyboard-container-border: var(--theme-border, rgba(255, 255, 255, .1));--korean-keyboard-container-bg: var(--theme-surface, rgba(30, 30, 30, .9))}.theme-premium{--mode-accent-glow: rgba(245, 158, 11, .4);--mode-completion-bg: linear-gradient(135deg, #fefbf3 0%, #fffef7 100%);--fill-blank-bg-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);--premium-gold-shimmer: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);--keyboard-container-bg: var(--theme-surface, rgba(245, 158, 11, .1));--keyboard-container-border: var(--theme-border, rgba(245, 158, 11, .2));--korean-keyboard-container-bg: var(--theme-surface, rgba(245, 158, 11, .1));--keyboard-button-bg: var(--theme-surface, rgba(255, 248, 220, .95));--keyboard-button-hover: var(--theme-surface-hover, rgba(255, 248, 220, 1));--keyboard-button-active: var(--theme-surface-active, rgba(245, 222, 179, .9));--keyboard-button-text: var(--theme-text-primary, #8B4513);--keyboard-button-border: var(--theme-border, rgba(245, 158, 11, .3));--korean-keyboard-button-bg: var(--theme-surface, rgba(255, 248, 220, .95));--korean-keyboard-button-hover: var(--theme-surface-hover, rgba(255, 248, 220, 1));--korean-keyboard-button-text: var(--theme-text-primary, #8B4513)}.theme-rainbow{--mode-accent-glow: rgba(236, 72, 153, .3);--mode-completion-bg: linear-gradient(135deg, #fdf4ff 0%, #fefaff 50%, #f3e8ff 100%);--fill-blank-bg-gradient: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%);--rainbow-gradient: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);--keyboard-container-bg: var(--theme-surface, rgba(236, 72, 153, .1));--keyboard-container-border: var(--theme-border, rgba(236, 72, 153, .2));--korean-keyboard-container-bg: var(--theme-surface, rgba(236, 72, 153, .1));--keyboard-button-bg: var(--theme-surface, rgba(255, 240, 245, .95));--keyboard-button-hover: var(--theme-surface-hover, rgba(255, 240, 245, 1));--keyboard-button-active: var(--theme-surface-active, rgba(255, 228, 225, .9));--keyboard-button-text: var(--theme-text-primary, #C71585);--keyboard-button-border: var(--theme-border, rgba(236, 72, 153, .3));--korean-keyboard-button-bg: var(--theme-surface, rgba(255, 240, 245, .95));--korean-keyboard-button-hover: var(--theme-surface-hover, rgba(255, 240, 245, 1));--korean-keyboard-button-text: var(--theme-text-primary, #C71585)}@media (max-width: 768px){:root{--fill-blank-spacing-sm: 6px;--fill-blank-spacing-md: 10px;--fill-blank-spacing-lg: 14px;--fill-blank-spacing-xl: 18px;--fill-blank-spacing-xxl: 22px;--fill-blank-font-size-xs: 9px;--fill-blank-font-size-sm: 11px;--fill-blank-font-size-md: 13px;--fill-blank-font-size-lg: 15px;--fill-blank-font-size-xl: 17px;--fill-blank-font-size-xxl: 19px;--fill-blank-shadow-md: var(--theme-shadow-sm, 0 2px 8px rgba(0,0,0,.1));--fill-blank-shadow-lg: var(--theme-shadow-md, 0 4px 16px rgba(0,0,0,.15))}}@media (max-width: 480px){:root{--fill-blank-spacing-md: 8px;--fill-blank-spacing-lg: 12px;--fill-blank-spacing-xl: 16px;--fill-blank-keyboard-scale-mobile: .6;--fill-blank-input-width-mobile: 140px}}.fill-blank-mode,.thai-to-korean-mode,.fill-blank-translation-card,.thai-to-korean-translation-card,.fill-blank-keyboard-container,.korean-keyboard-container,.fill-blank-progress-header,.complete-card{transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease!important}.fill-blank-key,.korean-key,.common-word-button{transition:background-color .3s ease,border-color .3s ease,color .3s ease,transform .2s ease!important}@keyframes fillBlankFireGlow{0%{filter:drop-shadow(0 0 10px rgba(255,100,0,.5));transform:scale(1)}to{filter:drop-shadow(0 0 20px rgba(255,100,0,.8));transform:scale(1.05)}}@keyframes fillBlankShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes fillBlankBadgePulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes streakPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes bonusGlow{0%,to{box-shadow:0 0 8px var(--achievement-legendary-glow);transform:scale(1)}50%{box-shadow:0 0 16px #ffd70099;transform:scale(1.02)}}@keyframes bonusPulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}@keyframes hintPulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}to{transform:scale(1);opacity:1}}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes wrongPulse{0%{transform:scale(1)}25%{transform:scale(.95)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes fillBlankCorrectShake{0%,20%,40%,60%,80%,to{transform:translateY(0)}10%,30%,50%,70%,90%{transform:translateY(-3px)}}@keyframes fillBlankWrongShake{0%,20%,40%,60%,80%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}}@keyframes iconSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes voicePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes achievementBounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.1)}}@keyframes rareGlow{0%,to{box-shadow:0 0 8px var(--achievement-rare-glow)}50%{box-shadow:0 0 16px #2196f399}}@keyframes epicGlow{0%,to{box-shadow:0 0 8px var(--achievement-epic-glow)}50%{box-shadow:0 0 16px #9c27b099}}@keyframes legendaryGlow{0%,to{box-shadow:0 0 8px var(--achievement-legendary-glow)}50%{box-shadow:0 0 16px #ffd70099}}@keyframes particleFloat{0%{opacity:1;transform:rotate(var(--angle, 0deg)) translate(20px) scale(0)}50%{opacity:1;transform:rotate(var(--angle, 0deg)) translate(40px) scale(1)}to{opacity:0;transform:rotate(var(--angle, 0deg)) translate(80px) scale(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes selecting{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}@keyframes slideInFromTop{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.animate-fire-glow{animation:fillBlankFireGlow 1.5s ease-in-out infinite alternate}.animate-shimmer{animation:fillBlankShimmer 2s infinite}.animate-pulse{animation:fillBlankBadgePulse 2s ease-in-out infinite}.animate-bounce{animation:bounce 1s ease infinite}.animate-fade-in{animation:fadeIn .3s ease}.animate-slide-up{animation:slideUp .3s ease}.animate-delay-100{animation-delay:.1s}.animate-delay-200{animation-delay:.2s}.animate-delay-300{animation-delay:.3s}.animate-delay-400{animation-delay:.4s}.animate-delay-500{animation-delay:.5s}.vocabulary-mode.loading{display:flex!important;align-items:center!important;justify-content:center!important;min-height:100vh!important;width:100vw!important;position:fixed!important;top:0!important;left:0!important;background:var(--bg-primary, #f7f7f7)!important;z-index:10000!important}.loading-container{text-align:center;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:400px;width:90%;position:relative;z-index:1000;margin:auto!important}.loading-spinner{width:48px;height:48px;border:4px solid #f3f3f3;border-top:4px solid var(--primary-color, #58cc02);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}.loading-text{font-size:1.2rem;font-weight:600;color:var(--text-primary, #3c3c3c);margin-bottom:.5rem}.loading-details{font-size:.9rem;color:var(--text-secondary, #666);line-height:1.4}.loading-progress{margin-top:1rem;padding:.5rem;background:var(--bg-secondary, #f5f5f5);border-radius:8px;font-size:.8rem;color:var(--text-secondary, #666);font-family:var(--ds-font-family, "MaplestoryOTFBold", monospace)}.vocabulary-mode.no-data .content-arena{display:flex;align-items:center;justify-content:center;min-height:300px}.no-data-message{text-align:center;max-width:500px;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000d}.no-data-message h3{font-size:1.5rem;margin-bottom:1rem;color:var(--text-primary, #3c3c3c);display:flex;align-items:center;justify-content:center;gap:.5rem}.no-data-message p{font-size:1rem;color:var(--text-secondary, #666);line-height:1.5;margin-bottom:2rem}.no-data-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.refresh-button,.exit-button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.5rem;min-width:140px;justify-content:center}.refresh-button{background:var(--primary-color, #58cc02);color:#fff}.refresh-button:hover{background:var(--primary-hover, #4db300);transform:translateY(-2px);box-shadow:0 4px 12px #58cc024d}.exit-button{background:var(--secondary-color, #e5e5e5);color:var(--text-primary, #3c3c3c)}.exit-button:hover{background:var(--secondary-hover, #ddd);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.data-source-indicator{position:fixed;top:10px;right:10px;background:#000c;color:#fff;padding:.5rem 1rem;border-radius:20px;font-size:.8rem;z-index:9999;font-family:var(--ds-font-family, "MaplestoryOTFBold", "SF Mono", "Monaco", "Cascadia Code", monospace);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.data-source-indicator.sheets{background:#22c55ee6}.data-source-indicator.fallback{background:#f97316e6}.error-indicator{margin-left:.5rem;color:#ff6b6b;cursor:help;animation:pulse 2s infinite}.refresh-data-button{margin-left:1rem;padding:.5rem 1rem;background:var(--accent-color, #ffc800);color:var(--text-primary, #3c3c3c);border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:.25rem}.refresh-data-button:hover{background:var(--accent-hover, #e6b300);transform:translateY(-1px);box-shadow:0 2px 8px #ffc8004d}.refresh-data-button:active{transform:translateY(0)}.connection-status{position:absolute;top:1rem;left:1rem;display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-secondary, #666)}.connection-dot{width:8px;height:8px;border-radius:50%;animation:pulse-dot 2s infinite}.connection-dot.connected{background:var(--success-color, #22c55e)}.connection-dot.error{background:var(--error-color, #ef4444)}.connection-dot.loading{background:var(--warning-color, #f59e0b)}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.error-message{background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:1rem;margin:1rem 0;color:var(--error-color, #ef4444);font-size:.9rem;line-height:1.4}.error-message.dismissible{position:relative;padding-right:3rem}.error-dismiss{position:absolute;top:.5rem;right:.5rem;background:none;border:none;color:var(--error-color, #ef4444);cursor:pointer;font-size:1.2rem;padding:.25rem;border-radius:4px;transition:background .2s ease}.error-dismiss:hover{background:#ef44441a}.cache-info{position:fixed;bottom:10px;right:10px;background:#000000b3;color:#fff;padding:.5rem;border-radius:8px;font-size:.7rem;z-index:9998;font-family:var(--ds-font-family, "MaplestoryOTFBold", monospace);max-width:200px}.cache-info.fresh{border-left:3px solid var(--success-color, #22c55e)}.cache-info.stale{border-left:3px solid var(--warning-color, #f59e0b)}@media (max-width: 768px){.loading-container{padding:1.5rem;margin:1rem;max-width:90%}.no-data-actions{flex-direction:column;align-items:center}.refresh-button,.exit-button{width:200px}.data-source-indicator{top:5px;right:5px;font-size:.7rem;padding:.25rem .75rem}.cache-info{bottom:5px;right:5px;max-width:150px}}@media (max-width: 480px){.loading-container{padding:1rem}.loading-text{font-size:1rem}.no-data-message{padding:1.5rem}.no-data-message h3{font-size:1.2rem}}@media (prefers-color-scheme: dark){.loading-container,.no-data-message{background:var(--bg-dark, #1f2937);color:var(--text-dark, #f9fafb)}.loading-text{color:var(--text-dark, #f9fafb)}.loading-details{color:var(--text-secondary-dark, #9ca3af)}.exit-button{background:var(--bg-secondary-dark, #374151);color:var(--text-dark, #f9fafb)}.exit-button:hover{background:var(--bg-secondary-dark-hover, #4b5563)}}@media (prefers-contrast: high){.loading-container,.no-data-message{border:2px solid var(--text-primary, #3c3c3c)}.refresh-button,.exit-button{border:2px solid transparent}.refresh-button:focus,.exit-button:focus{border-color:var(--focus-color, #2563eb);outline:2px solid var(--focus-color, #2563eb);outline-offset:2px}}@media (prefers-reduced-motion: reduce){.loading-spinner{animation:none}.refresh-button:hover,.exit-button:hover{transform:none}.pulse,.pulse-dot{animation:none}}.fill-blank-mode,.thai-to-korean-mode,.multiple-choice-mode{background:var(--theme-bg-gradient, var(--fill-blank-bg-gradient));font-family:var(--ds-font-family, "MaplestoryOTFBold", var(--fill-blank-font-family));display:flex;flex-direction:column;overflow:hidden;position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;z-index:9999!important;margin:0!important;padding:0!important}.fill-blank-learning-content,.thai-to-korean-learning-content,.multiple-choice-learning-content{flex:1;padding:var(--fill-blank-spacing-xl);display:flex;flex-direction:column;gap:var(--fill-blank-spacing-xl)}.fill-blank-translation-card,.thai-to-korean-translation-card,.multiple-choice-card{background:#ffffff1a;-webkit-backdrop-filter:var(--fill-blank-blur-md);backdrop-filter:var(--fill-blank-blur-md);border:1px solid rgba(255,255,255,.2);border-radius:var(--fill-blank-radius-xl);padding:40px var(--fill-blank-spacing-xl);box-shadow:var(--fill-blank-shadow-md);text-align:center;position:relative;transition:var(--fill-blank-transition-normal)}.fill-blank-translation-card:hover,.thai-to-korean-translation-card:hover,.multiple-choice-card:hover{box-shadow:var(--fill-blank-shadow-lg)}.fill-blank-card{background:#ffffff1a;-webkit-backdrop-filter:var(--fill-blank-blur-md);backdrop-filter:var(--fill-blank-blur-md);border:1px solid rgba(255,255,255,.2);border-radius:var(--fill-blank-radius-xl);box-shadow:var(--fill-blank-shadow-md);transition:var(--fill-blank-transition-normal)}.fill-blank-card:hover{transform:translateY(-2px);box-shadow:var(--fill-blank-shadow-lg)}.fill-blank-button{border:none;border-radius:var(--fill-blank-radius-md);font-family:inherit;font-weight:600;cursor:pointer;transition:var(--fill-blank-transition-normal);display:inline-flex;align-items:center;justify-content:center;gap:var(--fill-blank-spacing-sm)}.fill-blank-button:hover:not(:disabled){transform:translateY(-2px)}.fill-blank-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.fill-blank-button--primary{background:var(--theme-success-gradient, var(--fill-blank-success-gradient));color:#fff;padding:var(--fill-blank-spacing-lg) var(--fill-blank-spacing-xxl);font-size:var(--fill-blank-font-size-lg)}.fill-blank-button--primary:hover:not(:disabled){box-shadow:0 4px 12px #58cc0266}.fill-blank-button--secondary{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-md);font-size:var(--fill-blank-font-size-sm);-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm)}.fill-blank-button--secondary:hover:not(:disabled){background:#ffffff4d;box-shadow:var(--fill-blank-shadow-md)}.fill-blank-button--danger{background:var(--theme-error-gradient, var(--fill-blank-error-gradient));color:#fff;padding:var(--fill-blank-spacing-lg) var(--fill-blank-spacing-xxl);font-size:var(--fill-blank-font-size-lg)}.fill-blank-button--danger:hover:not(:disabled){box-shadow:0 4px 12px #ff4b4b66}.fill-blank-input,.fill-blank-thai-input,.thai-to-korean-input,.multiple-choice-input{background:#ffffff1a;border:3px solid rgba(255,255,255,.3);color:#fff;-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);border-radius:var(--fill-blank-radius-lg);outline:none;transition:var(--fill-blank-transition-normal);font-weight:600;font-family:inherit}.fill-blank-input:focus,.fill-blank-thai-input:focus,.thai-to-korean-input:focus,.multiple-choice-input:focus{border-color:var(--theme-success, var(--fill-blank-success));background:#fff3;box-shadow:0 0 0 4px #4caf5033}.fill-blank-input::placeholder,.fill-blank-thai-input::placeholder,.thai-to-korean-input::placeholder,.multiple-choice-input::placeholder{color:#fff9;font-weight:400}.fill-blank-input.correct,.fill-blank-thai-input.correct,.thai-to-korean-input.correct,.multiple-choice-input.correct{border-color:var(--theme-success, var(--fill-blank-success));background:#6bcf7f33;animation:fillBlankCorrectShake .6s ease-in-out;box-shadow:0 0 0 4px #6bcf7f4d}.fill-blank-input.wrong,.fill-blank-thai-input.wrong,.thai-to-korean-input.wrong,.multiple-choice-input.wrong{border-color:var(--theme-error, var(--fill-blank-error));background:#ff6b6b33;animation:fillBlankWrongShake .6s ease-in-out;box-shadow:0 0 0 4px #ff6b6b4d}.fill-blank-input.easy,.fill-blank-thai-input.easy,.thai-to-korean-input.easy,.multiple-choice-input.easy{border-color:#4caf5080;background:#4caf501a}.fill-blank-input.hard,.fill-blank-thai-input.hard,.thai-to-korean-input.hard,.multiple-choice-input.hard{border-color:#f4433680;background:#f443361a}.fill-blank-text{color:#fff;line-height:1.5}.fill-blank-text--primary{font-size:var(--fill-blank-font-size-xl);font-weight:600}.fill-blank-text--secondary{font-size:var(--fill-blank-font-size-md);color:#fffc}.fill-blank-hint-text,.thai-to-korean-hint-text,.multiple-choice-hint-text{font-size:var(--fill-blank-font-size-md);color:#fffc;margin-top:var(--fill-blank-spacing-xl);transition:var(--fill-blank-transition-normal);min-height:24px;display:flex;align-items:center;justify-content:center;font-weight:500}.fill-blank-hint-text.show-hint,.thai-to-korean-hint-text.show-hint,.multiple-choice-hint-text.show-hint{color:var(--theme-warning, var(--fill-blank-warning));font-weight:700;font-size:var(--fill-blank-font-size-lg);animation:hintPulse .5s ease-in-out}.fill-blank-hint-text.correct,.thai-to-korean-hint-text.correct,.multiple-choice-hint-text.correct{color:var(--theme-success, var(--fill-blank-success));font-weight:700;font-size:var(--fill-blank-font-size-lg);animation:correctPulse .5s ease-in-out}.fill-blank-hint-text.wrong,.thai-to-korean-hint-text.wrong,.multiple-choice-hint-text.wrong{color:var(--theme-error, var(--fill-blank-error));font-weight:700;font-size:var(--fill-blank-font-size-lg);animation:wrongPulse .5s ease-in-out}.fill-blank-keyboard-container,.korean-keyboard-container,.multiple-choice-keyboard-container{background:#ffffff1a;-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);border-radius:0 0 var(--fill-blank-radius-xl) var(--fill-blank-radius-xl);border-top:1px solid rgba(255,255,255,.2);margin:0 var(--fill-blank-spacing-sm)}.fill-blank-icon{display:inline-flex;align-items:center;justify-content:center;transition:var(--fill-blank-transition-normal)}.fill-blank-icon--sm{width:16px;height:16px;font-size:var(--fill-blank-font-size-sm)}.fill-blank-icon--md{width:20px;height:20px;font-size:var(--fill-blank-font-size-md)}.fill-blank-icon--lg{width:24px;height:24px;font-size:var(--fill-blank-font-size-lg)}.fill-blank-icon--clickable{cursor:pointer}.fill-blank-icon--clickable:hover{transform:scale(1.1)}.fill-blank-badge{display:inline-flex;align-items:center;gap:var(--fill-blank-spacing-xs);padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm);border-radius:var(--fill-blank-radius-md);font-size:var(--fill-blank-font-size-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.fill-blank-badge--primary{background:linear-gradient(135deg,#ff4757,#ff6b7a);color:#fff;box-shadow:0 2px 4px #ff47574d;animation:fillBlankBadgePulse 2s ease-in-out infinite}.fill-blank-badge--streak{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;animation:streakPulse 1.5s ease-in-out infinite;margin-left:var(--fill-blank-spacing-xs)}.fill-blank-stat-mini{display:flex;align-items:center;gap:var(--fill-blank-spacing-xs);background:#ffffff1a;padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm);border-radius:var(--fill-blank-radius-md);font-size:var(--fill-blank-font-size-xs);color:#fff;font-weight:600}.fill-blank-stat-mini--bonus{background:linear-gradient(135deg,gold,#ffb347);animation:bonusGlow 2s ease-in-out infinite}.fill-blank-stat-mini__icon{font-size:var(--fill-blank-font-size-sm)}.fill-blank-stat-mini__value{font-weight:700}.fill-blank-flex{display:flex}.fill-blank-flex-center{display:flex;align-items:center;justify-content:center}.fill-blank-flex-between{display:flex;align-items:center;justify-content:space-between}.fill-blank-flex-column{display:flex;flex-direction:column}.fill-blank-text-center{text-align:center}.fill-blank-w-full{width:100%}.fill-blank-h-full{height:100%}.fill-blank-mb-sm{margin-bottom:var(--fill-blank-spacing-sm)}.fill-blank-mb-md{margin-bottom:var(--fill-blank-spacing-md)}.fill-blank-mb-lg{margin-bottom:var(--fill-blank-spacing-lg)}.fill-blank-mt-sm{margin-top:var(--fill-blank-spacing-sm)}.fill-blank-mt-md{margin-top:var(--fill-blank-spacing-md)}.fill-blank-mt-lg{margin-top:var(--fill-blank-spacing-lg)}.fill-blank-p-sm{padding:var(--fill-blank-spacing-sm)}.fill-blank-p-md{padding:var(--fill-blank-spacing-md)}.fill-blank-p-lg{padding:var(--fill-blank-spacing-lg)}.fill-blank-grid{display:grid}.fill-blank-grid-cols-2{grid-template-columns:repeat(2,1fr)}.fill-blank-gap-sm{gap:var(--fill-blank-spacing-sm)}.fill-blank-gap-md{gap:var(--fill-blank-spacing-md)}.fill-blank-gap-lg{gap:var(--fill-blank-spacing-lg)}.fullscreen-mode .left-sidebar,.fullscreen-mode .mobile-header,.fullscreen-mode .mobile-header-container{display:none!important;visibility:hidden!important}.fullscreen-mode .conquerthai-container{display:block!important;padding:0!important;margin:0!important}.fullscreen-mode .main-content{margin:0!important;width:100vw!important;height:100vh!important;max-width:100vw!important;display:block!important}.fullscreen-mode .center-content,.fullscreen-mode .vocabulary-main,.fullscreen-mode .vocabulary-container{width:100vw!important;height:100vh!important;max-width:100vw!important;padding:0!important;margin:0!important;overflow:hidden!important}.fill-blank-progress-header{background:#ffffff1a!important;-webkit-backdrop-filter:var(--fill-blank-blur-md)!important;backdrop-filter:var(--fill-blank-blur-md)!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:var(--fill-blank-radius-lg)!important;padding:var(--fill-blank-spacing-lg) var(--fill-blank-spacing-xl)!important;margin-bottom:0!important;box-shadow:var(--fill-blank-shadow-md)!important;position:relative!important;display:block!important;width:100%!important;box-sizing:border-box!important}.fill-blank-header-top{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:var(--fill-blank-spacing-lg)!important;margin-bottom:var(--fill-blank-spacing-md)!important;flex-wrap:nowrap!important;position:relative!important}.fill-blank-exit-button{background:#fff3!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:var(--fill-blank-radius-sm)!important;padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-md)!important;font-size:var(--fill-blank-font-size-md)!important;font-weight:600!important;color:#fff!important;cursor:pointer!important;transition:var(--fill-blank-transition-normal)!important;-webkit-backdrop-filter:var(--fill-blank-blur-sm)!important;backdrop-filter:var(--fill-blank-blur-sm)!important;position:static!important;flex-shrink:0!important;white-space:nowrap!important;order:-1!important}.fill-blank-exit-button:hover{background:#ffffff4d!important;transform:translateY(-1px)!important}.fill-blank-fire-icon{font-size:22px!important;filter:drop-shadow(0 0 10px rgba(255,100,0,.5))!important;animation:fillBlankFireGlow 1.5s ease-in-out infinite alternate!important;flex-shrink:0!important;cursor:pointer!important;transition:var(--fill-blank-transition-fast)!important;display:inline-block!important}.fill-blank-fire-icon:hover{transform:scale(1.1)!important}.fill-blank-progress-bar{height:var(--fill-blank-spacing-sm)!important;background:#fff3!important;border-radius:4px!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.1)!important;flex:1!important;margin:0 var(--fill-blank-spacing-sm)!important;position:relative!important;min-width:0!important}.fill-blank-progress-fill{height:100%!important;background:var(--fill-blank-progress-gradient)!important;border-radius:4px!important;transition:width .8s cubic-bezier(.4,0,.2,1)!important;position:relative!important;box-shadow:0 0 8px #ffd70066!important;display:block!important}.fill-blank-progress-fill:after{content:""!important;position:absolute!important;inset:0!important;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%)!important;animation:fillBlankShimmer 2s infinite!important}.fill-blank-difficulty-indicator{font-size:18px;opacity:.8;transition:var(--fill-blank-transition-normal);cursor:help;flex-shrink:0}.fill-blank-difficulty-indicator:hover{opacity:1;transform:scale(1.2)}.fill-blank-lesson-info{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:var(--fill-blank-spacing-sm)!important;flex-wrap:nowrap!important}.fill-blank-lesson-number{display:flex!important;align-items:center!important;gap:var(--fill-blank-spacing-sm)!important;font-size:var(--fill-blank-font-size-md)!important;color:#ffffffe6!important;font-weight:600!important;white-space:nowrap!important;flex-wrap:wrap!important}.fill-blank-lesson-badge{background:linear-gradient(135deg,#ff4757,#ff6b7a)!important;color:#fff!important;padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm)!important;border-radius:var(--fill-blank-radius-md)!important;font-size:var(--fill-blank-font-size-xs)!important;font-weight:700!important;box-shadow:0 2px 4px #ff47574d!important;animation:fillBlankBadgePulse 2s ease-in-out infinite!important;white-space:nowrap!important}.fill-blank-grade-badge{display:flex!important;align-items:center!important;gap:4px!important;background:#fff3!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:var(--fill-blank-radius-md)!important;padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm)!important;font-size:var(--fill-blank-font-size-xs)!important;font-weight:700!important;color:#fff!important;white-space:nowrap!important;-webkit-backdrop-filter:var(--fill-blank-blur-sm)!important;backdrop-filter:var(--fill-blank-blur-sm)!important}.fill-blank-grade-icon{font-size:14px!important}.fill-blank-grade-icon.grade-1{color:#ff9600}.fill-blank-grade-icon.grade-2{color:#1cb0f6}.fill-blank-grade-icon.grade-3{color:#58cc02}.fill-blank-grade-icon.grade-4{color:#ffc800}.fill-blank-grade-icon.grade-5{color:#ff6b6b}.fill-blank-grade-icon.grade-6{color:#ce82ff}.fill-blank-category-badge{display:flex!important;align-items:center!important;gap:4px!important;background:#fff3!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:var(--fill-blank-radius-md)!important;padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm)!important;font-size:var(--fill-blank-font-size-xs)!important;font-weight:700!important;color:#fff!important;white-space:nowrap!important;-webkit-backdrop-filter:var(--fill-blank-blur-sm)!important;backdrop-filter:var(--fill-blank-blur-sm)!important}.fill-blank-category-icon{font-size:14px!important}.fill-blank-category-count{font-size:var(--fill-blank-font-size-xs)!important;opacity:.8!important}.fill-blank-streak-badge{background:linear-gradient(135deg,#ff6b6b,#ff8e53);color:#fff;padding:2px 6px;border-radius:var(--fill-blank-radius-sm);font-size:var(--fill-blank-font-size-xs);font-weight:700;animation:streakPulse 1.5s ease-in-out infinite;margin-left:var(--fill-blank-spacing-xs)}.fill-blank-progress-text{background:var(--fill-blank-bg-gradient)!important;color:#fff!important;padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-lg)!important;border-radius:var(--fill-blank-radius-lg)!important;font-size:var(--fill-blank-font-size-md)!important;font-weight:600!important;box-shadow:0 4px 15px #667eea4d!important;border:1px solid rgba(255,255,255,.2)!important;-webkit-backdrop-filter:var(--fill-blank-blur-sm)!important;backdrop-filter:var(--fill-blank-blur-sm)!important;white-space:nowrap!important}.fill-blank-stats-bar{display:flex;justify-content:center;gap:var(--fill-blank-spacing-md);margin-top:var(--fill-blank-spacing-sm);padding-top:var(--fill-blank-spacing-sm);border-top:1px solid rgba(255,255,255,.1)}.stat-mini{display:flex;align-items:center;gap:var(--fill-blank-spacing-xs);background:#ffffff1a;padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm);border-radius:var(--fill-blank-radius-md);font-size:var(--fill-blank-font-size-xs);color:#fff;font-weight:600}.stat-mini.bonus{background:linear-gradient(135deg,gold,#ffb347);animation:bonusGlow 2s ease-in-out infinite}.stat-mini-icon{font-size:var(--fill-blank-font-size-sm)}.stat-mini-value{font-weight:700}@media (max-width: 768px){.fill-blank-exit-button{padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm)!important;font-size:var(--fill-blank-font-size-sm)!important}.fill-blank-header-top{gap:var(--fill-blank-spacing-sm)!important}.fill-blank-lesson-number{gap:6px!important}.fill-blank-lesson-badge,.fill-blank-grade-badge,.fill-blank-category-badge{padding:2px 4px!important;font-size:10px!important}.fill-blank-grade-icon,.fill-blank-category-icon,.fill-blank-category-count{font-size:10px!important}}@media (max-width: 480px){.fill-blank-exit-button{padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-xs)!important;font-size:var(--fill-blank-font-size-xs)!important}.fill-blank-lesson-number{gap:4px!important;flex-wrap:wrap!important}.fill-blank-lesson-badge,.fill-blank-grade-badge,.fill-blank-category-badge{padding:1px 3px!important;font-size:9px!important}.fill-blank-grade-icon,.fill-blank-category-icon,.fill-blank-category-count{font-size:9px!important}}.fill-blank-complete{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--fill-blank-spacing-xl);background:var(--fill-blank-bg-gradient)}.complete-card{background:#ffffff1a;-webkit-backdrop-filter:var(--fill-blank-blur-md);backdrop-filter:var(--fill-blank-blur-md);border:1px solid rgba(255,255,255,.2);border-radius:var(--fill-blank-radius-xxl);padding:40px;text-align:center;max-width:450px;width:100%;box-shadow:var(--fill-blank-shadow-lg)}.complete-icon{font-size:64px;margin-bottom:0;animation:bounce 1s ease infinite}.complete-title{font-size:28px;font-weight:800;color:#fff;margin-bottom:12px}.complete-score{background:var(--fill-blank-bg-gradient);color:#fff;border-radius:var(--fill-blank-radius-lg);padding:var(--fill-blank-spacing-xl);margin-bottom:var(--fill-blank-spacing-xl)}.score-text{font-size:var(--fill-blank-font-size-sm);font-weight:600;opacity:.9;margin-bottom:var(--fill-blank-spacing-sm);text-transform:uppercase;letter-spacing:1px}.score-number{font-size:36px;font-weight:800;margin-bottom:var(--fill-blank-spacing-xs)}.score-percentage{font-size:var(--fill-blank-font-size-xl);font-weight:700;opacity:.9}.bonus-score{font-size:var(--fill-blank-font-size-sm);color:gold;font-weight:600;margin-top:var(--fill-blank-spacing-xs);animation:bonusPulse 1s ease-in-out infinite}.complete-detailed-stats{margin-bottom:var(--fill-blank-spacing-xl)}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--fill-blank-spacing-sm);margin-bottom:var(--fill-blank-spacing-lg)}.stat-item{background:#ffffff1a;border-radius:var(--fill-blank-radius-sm);padding:var(--fill-blank-spacing-sm);text-align:center;border:1px solid rgba(255,255,255,.2)}.stat-label{display:block;font-size:var(--fill-blank-font-size-xs);color:#fffc;margin-bottom:2px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.stat-value{display:block;font-size:var(--fill-blank-font-size-md);font-weight:700}.complete-achievements{background:#ffffff1a;border-radius:var(--fill-blank-radius-md);padding:var(--fill-blank-spacing-lg);margin-bottom:var(--fill-blank-spacing-xl);border:1px solid rgba(255,255,255,.2)}.achievements-title{font-size:var(--fill-blank-font-size-md);font-weight:700;color:#fff;margin-bottom:var(--fill-blank-spacing-md);text-align:center}.achievements-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--fill-blank-spacing-sm)}.achievement-badge{display:flex;align-items:center;gap:var(--fill-blank-spacing-xs);padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm);border-radius:var(--fill-blank-radius-md);font-size:var(--fill-blank-font-size-xs);font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.3)}.achievement-badge.common{background:var(--achievement-common)}.achievement-badge.rare{background:var(--achievement-rare);animation:rareGlow 2s ease-in-out infinite}.achievement-badge.epic{background:var(--achievement-epic);animation:epicGlow 2s ease-in-out infinite}.achievement-badge.legendary{background:var(--achievement-legendary);animation:legendaryGlow 2s ease-in-out infinite}.achievement-icon{font-size:var(--fill-blank-font-size-sm)}.achievement-name{font-size:var(--fill-blank-font-size-xs);font-weight:700}.complete-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--fill-blank-spacing-md)}.btn-restart,.btn-exit{border:none;border-radius:var(--fill-blank-radius-md);padding:var(--fill-blank-spacing-md) var(--fill-blank-spacing-lg);font-size:var(--fill-blank-font-size-md);font-weight:700;cursor:pointer;transition:var(--fill-blank-transition-normal);display:flex;align-items:center;justify-content:center;gap:var(--fill-blank-spacing-sm)}.btn-restart{background:var(--fill-blank-success-gradient);color:#fff}.btn-restart:hover{transform:translateY(-2px);box-shadow:0 4px 12px #58cc0266}.btn-exit{background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3)}.btn-exit:hover{background:#ffffff4d;transform:translateY(-2px)}@media (max-width: 768px){.stat-grid{grid-template-columns:repeat(3,1fr)!important;gap:var(--fill-blank-spacing-xs)!important;display:grid!important}.stat-item{padding:var(--fill-blank-spacing-xs)}.stat-label{font-size:10px}.stat-value{font-size:var(--fill-blank-font-size-sm)}.complete-card{padding:32px;max-width:400px}.complete-icon{font-size:56px}.complete-title{font-size:24px}.btn-restart,.btn-exit{padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-md);font-size:var(--fill-blank-font-size-sm)}}@media (max-width: 480px){.stat-grid{grid-template-columns:repeat(2,1fr)!important;gap:var(--fill-blank-spacing-xs)!important;display:grid!important}.complete-actions{grid-template-columns:repeat(2,1fr)!important}.stat-item{padding:var(--fill-blank-spacing-xs)}.stat-label{font-size:9px}.stat-value{font-size:var(--fill-blank-font-size-xs)}.complete-card{padding:24px;max-width:320px}.complete-icon{font-size:48px}.complete-title{font-size:20px;margin-bottom:8px}.complete-score{padding:var(--fill-blank-spacing-md)}.score-number{font-size:28px}.btn-restart,.btn-exit{padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm);font-size:var(--fill-blank-font-size-xs)}.achievement-badge{padding:2px 4px;font-size:10px}.achievements-list{gap:4px}}.debug-info{position:fixed;top:var(--fill-blank-spacing-sm);left:var(--fill-blank-spacing-sm);background:#000c;color:#fff;padding:var(--fill-blank-spacing-sm);border-radius:var(--fill-blank-radius-xs);font-size:var(--fill-blank-font-size-xs);font-family:Courier New,monospace;z-index:var(--fill-blank-z-tooltip);opacity:.7;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);max-width:200px;line-height:1.2}.debug-info div{margin-bottom:2px;display:flex;justify-content:space-between;gap:var(--fill-blank-spacing-sm)}.debug-info div:last-child{margin-bottom:0}.debug-info strong{color:gold;font-weight:700;border-bottom:1px solid rgba(255,215,0,.3);padding-bottom:2px;margin-bottom:var(--fill-blank-spacing-xs);display:block;text-align:center}@media (min-width: 1200px){.debug-info{opacity:.5;transition:opacity var(--fill-blank-transition-normal)}.debug-info:hover{opacity:1}}:root{--achievement-common: linear-gradient(135deg, #4CAF50, #8BC34A);--achievement-rare: linear-gradient(135deg, #2196F3, #03A9F4);--achievement-epic: linear-gradient(135deg, #9C27B0, #673AB7);--achievement-legendary: linear-gradient(135deg, #FFD700, #FFA500)}.achievement-popup-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:var(--ds-z-modal);opacity:0;transition:opacity var(--ds-transition-slow);pointer-events:none;background:#0000001a;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.achievement-popup-overlay.visible{opacity:1;pointer-events:auto}.achievement-popup-overlay.leaving{opacity:0}.achievement-popup{position:relative;background:var(--achievement-common);border-radius:var(--ds-radius-xl);padding:var(--ds-space-8);max-width:400px;min-width:320px;width:90vw;text-align:center;box-shadow:var(--ds-shadow-xl);border:2px solid rgba(255,255,255,.3);transform:scale(.8) translateY(50px);transition:all var(--ds-transition-bounce);overflow:hidden}.achievement-popup-overlay.visible .achievement-popup{transform:scale(1) translateY(0)}.achievement-popup.rare{background:var(--achievement-rare)}.achievement-popup.epic{background:var(--achievement-epic)}.achievement-popup.legendary{background:var(--achievement-legendary)}.achievement-popup-content{position:relative;z-index:2}.achievement-popup-header{margin-bottom:var(--ds-space-6);display:flex;flex-direction:column;align-items:center;gap:var(--ds-space-3)}.achievement-popup-icon{font-size:var(--ds-icon-xxl);line-height:1;animation:achievementBounce 1s ease-in-out infinite;margin-bottom:var(--ds-space-2)}@keyframes achievementBounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}.achievement-popup-rarity{background:#fff3;color:#fff;padding:var(--ds-space-2) var(--ds-space-4);border-radius:var(--ds-radius-lg);font-size:var(--ds-font-xs);font-weight:var(--ds-font-bold);text-transform:uppercase;letter-spacing:1px;display:inline-block;border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.achievement-popup-body{margin-bottom:var(--ds-space-6);padding:0 var(--ds-space-2)}.achievement-popup-title{font-size:var(--ds-font-2xl);font-weight:var(--ds-font-extrabold);color:#fff;margin-bottom:var(--ds-space-3);text-shadow:0 2px 4px rgba(0,0,0,.3);line-height:1.2;word-break:keep-all}.achievement-popup-description{font-size:var(--ds-font-base);color:#fffffff2;font-weight:var(--ds-font-medium);line-height:1.4;word-break:keep-all;max-width:280px;margin:0 auto}.achievement-popup-footer{position:relative;display:flex;justify-content:center}.achievement-popup-badge{background:#ffffff40;color:#fff;padding:var(--ds-space-3) var(--ds-space-5);border-radius:var(--ds-radius-lg);font-size:var(--ds-font-sm);font-weight:var(--ds-font-bold);text-transform:uppercase;letter-spacing:1px;border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 4px 12px #0003}.achievement-popup-particles{position:absolute;top:50%;left:50%;width:1px;height:1px;pointer-events:none}.particle{position:absolute;width:8px;height:8px;background:#ffffffe6;border-radius:50%;animation:particleFloat 3s ease-out infinite;animation-delay:var(--delay, 0s);transform-origin:0 0;transform:rotate(var(--angle, 0deg)) translate(80px);box-shadow:0 0 4px #ffffff80}@keyframes particleFloat{0%{opacity:0;transform:rotate(var(--angle, 0deg)) translate(0) scale(0)}20%{opacity:1;transform:rotate(var(--angle, 0deg)) translate(60px) scale(1)}80%{opacity:1;transform:rotate(var(--angle, 0deg)) translate(100px) scale(1)}to{opacity:0;transform:rotate(var(--angle, 0deg)) translate(120px) scale(0)}}@media (max-width: 768px){.achievement-popup{padding:var(--ds-space-6);max-width:350px;min-width:280px}.achievement-popup-title{font-size:var(--ds-font-xl)}.achievement-popup-description{font-size:var(--ds-font-sm);max-width:240px}.achievement-popup-icon{font-size:var(--ds-icon-xl)}}@media (max-width: 480px){.achievement-popup{padding:var(--ds-space-5);max-width:300px;min-width:260px}.achievement-popup-title{font-size:var(--ds-font-lg)}.achievement-popup-description{font-size:var(--ds-font-xs);max-width:200px}.achievement-popup-icon{font-size:var(--ds-icon-lg)}.achievement-popup-badge{padding:var(--ds-space-2) var(--ds-space-4);font-size:var(--ds-font-xs)}.particle{width:6px;height:6px}}@media (prefers-reduced-motion: reduce){.achievement-popup{transition:opacity var(--ds-transition-normal);transform:none}.achievement-popup-overlay.visible .achievement-popup{transform:none}.achievement-popup-icon{animation:none}.particle{animation:none;opacity:0}}.fill-blank-hint-section{display:flex;justify-content:space-between;align-items:center;padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-md);background:#ffffff1a;-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);border-top:1px solid rgba(255,255,255,.2);margin:0 var(--fill-blank-spacing-sm);border-radius:var(--fill-blank-radius-sm) var(--fill-blank-radius-sm) 0 0;gap:var(--fill-blank-spacing-sm)}.fill-blank-hint-button{display:flex;align-items:center;gap:6px;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:var(--fill-blank-radius-md);padding:6px var(--fill-blank-spacing-md);font-size:11px;color:#fff;cursor:pointer;transition:var(--fill-blank-transition-normal);-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);position:relative}.fill-blank-hint-button:hover:not(:disabled){background:#ffffff4d;transform:translateY(-1px);box-shadow:var(--fill-blank-shadow-md)}.fill-blank-hint-button:disabled{opacity:.5;cursor:not-allowed}.fill-blank-hint-button:after{content:attr(data-hints-left);position:absolute;top:-8px;right:-8px;background:var(--fill-blank-error);color:#fff;border-radius:50%;width:16px;height:16px;font-size:var(--fill-blank-font-size-xs);display:flex;align-items:center;justify-content:center;font-weight:700}.fill-blank-hint-icon{width:14px;height:14px;background:var(--fill-blank-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fill-blank-font-size-xs);color:#fff;font-weight:700;transition:var(--fill-blank-transition-normal)}.fill-blank-hint-icon.active{background:var(--fill-blank-warning);animation:iconSpin .5s ease-in-out}.fill-blank-check-button{display:flex;align-items:center;gap:var(--fill-blank-spacing-sm);background:#4caf50cc;border:1px solid rgba(76,175,80,.9);border-radius:var(--fill-blank-radius-xl);padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-lg);font-size:13px;color:#fff;cursor:pointer;transition:var(--fill-blank-transition-normal);-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);font-weight:600}.fill-blank-check-button:hover:not(:disabled){background:#4caf50;transform:translateY(-1px);box-shadow:0 4px 12px #4caf5066}.fill-blank-check-button:disabled{opacity:.5;cursor:not-allowed}.fill-blank-check-button.next{background:#2196f3cc;border-color:#2196f3e6}.fill-blank-check-button.next:hover:not(:disabled){background:#2196f3;box-shadow:0 4px 12px #2196f366}.fill-blank-check-button.retry{background:#ff9800cc;border-color:#ff9800e6}.fill-blank-check-button.retry:hover:not(:disabled){background:#ff9800;box-shadow:0 4px 12px #ff980066}.fill-blank-check-icon{font-size:var(--fill-blank-font-size-sm)}.fill-blank-voice-button{display:flex;align-items:center;gap:6px;background:#fff3;border:1px solid rgba(255,255,255,.3);border-radius:var(--fill-blank-radius-md);padding:6px var(--fill-blank-spacing-md);font-size:11px;color:#fff;cursor:pointer;transition:var(--fill-blank-transition-normal);-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm)}.fill-blank-voice-button:hover{background:#ffffff4d;transform:translateY(-1px);box-shadow:var(--fill-blank-shadow-md)}.fill-blank-voice-icon{font-size:var(--fill-blank-font-size-lg);animation:voicePulse 2s ease-in-out infinite}.fill-blank-wrong-notes{position:fixed;top:var(--fill-blank-spacing-xl);right:var(--fill-blank-spacing-xl);background:#fffffff2;-webkit-backdrop-filter:var(--fill-blank-blur-md);backdrop-filter:var(--fill-blank-blur-md);border:1px solid rgba(255,255,255,.3);border-radius:var(--fill-blank-radius-lg);padding:var(--fill-blank-spacing-lg);min-width:280px;max-width:350px;box-shadow:var(--fill-blank-shadow-lg);z-index:var(--fill-blank-z-overlay);transform:translate(380px);transition:transform .4s cubic-bezier(.4,0,.2,1)}.fill-blank-wrong-notes.show{transform:translate(0)}.fill-blank-wrong-notes-header{font-size:var(--fill-blank-font-size-lg);font-weight:700;color:#333;margin-bottom:var(--fill-blank-spacing-md);display:flex;align-items:center;justify-content:space-between;gap:var(--fill-blank-spacing-sm)}.wrong-notes-summary{font-size:var(--fill-blank-font-size-xs);color:#333333b3;margin-top:2px}.fill-blank-close-wrong-notes{background:none;border:none;font-size:var(--fill-blank-font-size-xl);cursor:pointer;color:#777;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--fill-blank-transition-normal)}.fill-blank-close-wrong-notes:hover{background:#f0f0f0;color:#333;transform:scale(1.1)}.fill-blank-wrong-notes-list{max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,107,107,.3) transparent}.fill-blank-wrong-notes-list::-webkit-scrollbar{width:4px}.fill-blank-wrong-notes-list::-webkit-scrollbar-track{background:transparent}.fill-blank-wrong-notes-list::-webkit-scrollbar-thumb{background:#ff6b6b4d;border-radius:2px}.fill-blank-no-wrong-notes{text-align:center;color:var(--fill-blank-success);font-size:var(--fill-blank-font-size-md);padding:var(--fill-blank-spacing-xl);font-weight:600}.perfect-streak-message{font-size:11px;color:var(--fill-blank-success);margin-top:var(--fill-blank-spacing-xs);font-weight:600}.fill-blank-wrong-note-item{background:linear-gradient(135deg,#ff6b6b1a,#ff6b6b0d);border:1px solid rgba(255,107,107,.3);border-radius:var(--fill-blank-radius-md);padding:var(--fill-blank-spacing-md);margin-bottom:var(--fill-blank-spacing-sm);font-size:13px;color:#333;transition:var(--fill-blank-transition-normal)}.fill-blank-wrong-note-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b33}.wrong-note-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--fill-blank-spacing-sm)}.wrong-note-badges{display:flex;flex-direction:column;gap:2px;align-items:flex-end}.fill-blank-wrong-note-korean{font-weight:600;margin-bottom:var(--fill-blank-spacing-xs);color:#333}.fill-blank-wrong-note-thai{color:var(--fill-blank-error);font-weight:600;margin-bottom:var(--fill-blank-spacing-xs);font-size:var(--fill-blank-font-size-md)}.fill-blank-wrong-note-user-answer{color:#777;font-size:11px;font-style:italic;display:flex;align-items:center;gap:var(--fill-blank-spacing-sm)}.wrong-note-details{display:flex;gap:var(--fill-blank-spacing-sm);margin-top:var(--fill-blank-spacing-xs);flex-wrap:wrap}.fill-blank-wrong-note-attempts{background:#ff98001a;color:#ff9800;padding:2px 6px;border-radius:var(--fill-blank-radius-sm);font-size:var(--fill-blank-font-size-xs);font-weight:600}.hints-used-badge{background:#ffc10733;color:#ffc107;padding:2px 6px;border-radius:var(--fill-blank-radius-sm);font-size:var(--fill-blank-font-size-xs);font-weight:600}.fill-blank-wrong-note-difficulty{display:inline-block;background:#ff980033;color:#ff9800;padding:2px 6px;border-radius:var(--fill-blank-radius-sm);font-size:var(--fill-blank-font-size-xs);font-weight:600;margin-left:var(--fill-blank-spacing-xs)}.performance-insight{display:inline-block;padding:2px 6px;border-radius:var(--fill-blank-radius-sm);font-size:var(--fill-blank-font-size-xs);font-weight:600}.wrong-note-analysis{margin-top:var(--fill-blank-spacing-sm);padding-top:var(--fill-blank-spacing-sm);border-top:1px solid rgba(0,0,0,.1)}.fill-blank-wrong-note-similarity{color:var(--fill-blank-info);font-size:var(--fill-blank-font-size-xs);font-weight:600;margin-top:var(--fill-blank-spacing-xs)}.similarity-bar{width:100%;height:4px;background:#e0e0e0;border-radius:2px;overflow:hidden;margin-top:var(--fill-blank-spacing-xs)}.similarity-fill{height:100%;border-radius:2px;transition:width var(--fill-blank-transition-normal)}.learning-tip{background:#2196f31a;color:var(--fill-blank-info);padding:6px var(--fill-blank-spacing-sm);border-radius:var(--fill-blank-radius-sm);font-size:var(--fill-blank-font-size-xs);margin-top:6px;border-left:3px solid var(--fill-blank-info)}.wrong-notes-analytics{background:#0000000d;border-radius:var(--fill-blank-radius-sm);padding:var(--fill-blank-spacing-md);margin-top:var(--fill-blank-spacing-md);border-top:1px solid rgba(0,0,0,.1)}.analytics-title{font-size:var(--fill-blank-font-size-sm);font-weight:700;color:#333;margin-bottom:var(--fill-blank-spacing-sm);text-align:center}.analytics-grid{display:flex;flex-direction:column;gap:6px}.analytics-item{display:flex;justify-content:space-between;align-items:center}.analytics-label{font-size:var(--fill-blank-font-size-xs);color:#777;font-weight:600}.analytics-value{font-size:var(--fill-blank-font-size-xs);color:#333;font-weight:700;background:#2196f31a;padding:2px 6px;border-radius:6px}.thai-to-korean-thai-text{font-size:48px;color:#fff;font-weight:700;margin-bottom:var(--fill-blank-spacing-lg);line-height:1.2;text-shadow:0 2px 4px rgba(0,0,0,.3);letter-spacing:2px}.thai-to-korean-pronunciation{font-size:var(--fill-blank-font-size-lg);color:#fffc;font-style:italic;margin-bottom:var(--fill-blank-spacing-xl);font-weight:500}.thai-to-korean-input-section{margin:var(--fill-blank-spacing-xl) 0}.thai-to-korean-input{padding:var(--fill-blank-spacing-lg) var(--fill-blank-spacing-xl);font-size:var(--fill-blank-font-size-xxl);width:300px;max-width:80%;text-align:center}.thai-to-korean-input:focus{transform:scale(1.02)}.thai-to-korean-translation-card.correct{animation:successGlow .8s ease-in-out}.thai-to-korean-translation-card.wrong{animation:errorGlow .8s ease-in-out}@keyframes successGlow{0%,to{box-shadow:var(--fill-blank-shadow-md)}50%{box-shadow:0 0 20px #6bcf7f66;transform:scale(1.02)}}@keyframes errorGlow{0%,to{box-shadow:var(--fill-blank-shadow-md)}50%{box-shadow:0 0 20px #ff6b6b66;transform:scale(1.02)}}@keyframes typingEffect{0%{width:0}to{width:100%}}.thai-to-korean-thai-text.typing{overflow:hidden;border-right:2px solid white;white-space:nowrap;animation:typingEffect 2s steps(10,end),blinkCursor 1s infinite}@keyframes blinkCursor{0%,50%{border-color:#fff}51%,to{border-color:transparent}}.korean-keyboard-container{-webkit-backdrop-filter:var(--fill-blank-blur-sm);backdrop-filter:var(--fill-blank-blur-sm);border-radius:0 0 var(--fill-blank-radius-xl) var(--fill-blank-radius-xl);padding:var(--fill-blank-spacing-md) var(--fill-blank-spacing-lg);margin:0 var(--fill-blank-spacing-sm)}.korean-keyboard{max-width:100%;transform:scale(var(--fill-blank-keyboard-scale));transform-origin:center center;display:flex;flex-direction:column;gap:8px;align-items:center}.korean-keyboard-row{display:flex;justify-content:center;gap:4px}.korean-key{background:var(--korean-keyboard-button-bg);border:1px solid var(--keyboard-button-border);color:var(--korean-keyboard-button-text);border-radius:var(--fill-blank-radius-sm);padding:var(--fill-blank-spacing-md) 8px;font-size:var(--fill-blank-font-size-lg);cursor:pointer;transition:var(--fill-blank-transition-fast);min-width:36px;text-align:center;-webkit-user-select:none;user-select:none;box-shadow:0 3px 0 var(--keyboard-button-border);position:relative;font-weight:600}.korean-key:active{transform:translateY(1px);box-shadow:0 2px 0 var(--keyboard-button-border);background:var(--keyboard-button-active)}.korean-key:hover:not(:disabled){background:var(--korean-keyboard-button-hover);transform:translateY(-1px);box-shadow:0 4px 0 var(--keyboard-button-border)}.korean-key.special{background:var(--keyboard-button-active);font-size:14px;min-width:48px;font-weight:700}.korean-key.space{min-width:180px;font-size:var(--fill-blank-font-size-md)}.korean-key.backspace{min-width:52px;color:var(--fill-blank-error);font-weight:700}.korean-key.shift{min-width:56px;color:var(--fill-blank-info);font-weight:700}.korean-key.shift.active{background:var(--fill-blank-info);color:var(--fill-blank-text-inverse)}.korean-key:disabled{opacity:.5;cursor:not-allowed;transform:none}.korean-key.pressed{animation:keyPress .1s ease-in-out}@keyframes keyPress{0%{transform:scale(1)}50%{transform:scale(.95)}to{transform:scale(1)}}.common-word-button.clicked{animation:wordClick .2s ease-in-out}@keyframes wordClick{0%{transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}.korean-key-label{display:block;line-height:1}.korean-key-sublabel{font-size:var(--fill-blank-font-size-xs);opacity:.7;margin-top:2px}.theme-dark .korean-key:hover:not(:disabled),.theme-dark .common-word-button:hover:not(:disabled){box-shadow:0 4px 0 var(--keyboard-button-border),0 0 10px var(--theme-primary)}.theme-premium .korean-key:hover:not(:disabled),.theme-premium .common-word-button:hover:not(:disabled){box-shadow:0 4px 0 var(--keyboard-button-border),0 0 8px #f59e0b4d}.theme-rainbow .korean-key:hover:not(:disabled),.theme-rainbow .common-word-button:hover:not(:disabled){box-shadow:0 4px 0 var(--keyboard-button-border),0 0 8px #ec48994d}@media (max-width: 768px){.korean-keyboard{transform:scale(.85)}.common-words-grid{grid-template-columns:repeat(3,1fr);gap:var(--fill-blank-spacing-xs)}.common-word-button{padding:6px;font-size:var(--fill-blank-font-size-xs)}}@media (max-width: 480px){.korean-keyboard{transform:scale(.7)}.korean-keyboard-container{padding:var(--fill-blank-spacing-sm)}.common-words-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 768px){.fill-blank-mode,.thai-to-korean-mode,.multiple-choice-mode{padding:0}.fill-blank-progress-header{padding:var(--fill-blank-spacing-md) var(--fill-blank-spacing-lg)!important;margin-bottom:var(--fill-blank-spacing-lg)!important}.fill-blank-exit-button{top:var(--fill-blank-spacing-sm)!important;left:var(--fill-blank-spacing-md)!important;padding:6px 10px!important;font-size:var(--fill-blank-font-size-sm)!important}.fill-blank-header-top{gap:var(--fill-blank-spacing-sm)!important}.fill-blank-lesson-number{gap:6px!important}.fill-blank-lesson-badge,.fill-blank-grade-badge,.fill-blank-category-badge{padding:2px 4px!important;font-size:10px!important}.fill-blank-grade-icon,.fill-blank-category-icon,.fill-blank-category-count{font-size:10px!important}.fill-blank-learning-content,.thai-to-korean-learning-content{padding:var(--fill-blank-spacing-lg)}.fill-blank-translation-card,.thai-to-korean-translation-card{padding:32px var(--fill-blank-spacing-lg)}.complete-card{padding:var(--fill-blank-spacing-xxl)}.complete-title{font-size:24px}.score-number{font-size:28px}.stat-grid{grid-template-columns:repeat(3,1fr)!important;gap:var(--fill-blank-spacing-xs)!important}.stat-item{padding:var(--fill-blank-spacing-xs)}.stat-label{font-size:10px}.stat-value{font-size:var(--fill-blank-font-size-sm)}.achievements-list{gap:6px}.achievement-badge{padding:3px 6px;font-size:var(--fill-blank-font-size-xs)}.achievement-popup{max-width:280px;padding:var(--fill-blank-spacing-xl)}.achievement-popup-icon{font-size:40px}.achievement-popup-title{font-size:var(--fill-blank-font-size-xl)}.fill-blank-wrong-notes{right:var(--fill-blank-spacing-sm);top:var(--fill-blank-spacing-sm);min-width:250px;max-width:300px}.complete-actions{grid-template-columns:1fr 1fr;gap:var(--fill-blank-spacing-sm)}.btn-restart,.btn-exit{padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-md);font-size:var(--fill-blank-font-size-sm)}.fill-blank-thai-text{font-size:var(--fill-blank-font-size-xl);flex-direction:column;gap:var(--fill-blank-spacing-sm)}.fill-blank-thai-input{width:var(--fill-blank-input-width-mobile);font-size:var(--fill-blank-font-size-lg)}.fill-blank-keyboard{transform:scale(var(--fill-blank-keyboard-scale-tablet))}.thai-to-korean-thai-text{font-size:36px;margin-bottom:var(--fill-blank-spacing-md)}.thai-to-korean-input{width:250px;font-size:var(--fill-blank-font-size-xl);padding:var(--fill-blank-spacing-md) var(--fill-blank-spacing-lg)}.korean-keyboard{transform:scale(.85)}.common-words-grid{grid-template-columns:repeat(3,1fr);gap:var(--fill-blank-spacing-xs)}.common-word-button{padding:6px;font-size:var(--fill-blank-font-size-xs)}}@media (min-width: 769px) and (max-width: 1024px){.fill-blank-thai-input{width:140px}.fill-blank-keyboard,.korean-keyboard{transform:scale(.9)}.fill-blank-learning-content,.thai-to-korean-learning-content{padding:var(--fill-blank-spacing-xl)}}@media (max-width: 480px){.fill-blank-progress-header{padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-md)!important}.fill-blank-exit-button{top:6px!important;left:var(--fill-blank-spacing-sm)!important;padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm)!important;font-size:11px!important}.fill-blank-lesson-number{gap:4px!important;flex-wrap:wrap!important}.fill-blank-lesson-badge,.fill-blank-grade-badge,.fill-blank-category-badge{padding:1px 3px!important;font-size:9px!important}.fill-blank-grade-icon,.fill-blank-category-icon,.fill-blank-category-count{font-size:9px!important}.fill-blank-learning-content,.thai-to-korean-learning-content{padding:var(--fill-blank-spacing-md)}.fill-blank-hint-section{padding:2px var(--fill-blank-spacing-sm);margin:0 var(--fill-blank-spacing-sm)}.fill-blank-thai-input{width:var(--fill-blank-input-width);font-size:var(--fill-blank-font-size-md);padding:var(--fill-blank-spacing-md)}.fill-blank-keyboard{transform:scale(var(--fill-blank-keyboard-scale-mobile))}.fill-blank-keyboard-container{margin:0 var(--fill-blank-spacing-sm);padding:var(--fill-blank-spacing-md) var(--fill-blank-spacing-sm) var(--fill-blank-spacing-lg)}.thai-to-korean-thai-text{font-size:28px;letter-spacing:1px}.thai-to-korean-input{width:200px;font-size:var(--fill-blank-font-size-lg);padding:var(--fill-blank-spacing-sm) var(--fill-blank-spacing-md)}.korean-keyboard{transform:scale(.7)}.korean-keyboard-container{padding:var(--fill-blank-spacing-sm)}.common-words-grid{grid-template-columns:repeat(2,1fr)}.thai-to-korean-example-section{padding:var(--fill-blank-spacing-md)}.thai-to-korean-example-text{font-size:var(--fill-blank-font-size-md)}.complete-icon{font-size:48px}.complete-title{font-size:var(--fill-blank-font-size-xxl);margin-bottom:8px}.complete-card{padding:24px;max-width:320px}.complete-score{padding:var(--fill-blank-spacing-md)}.score-number{font-size:28px}.stat-grid{grid-template-columns:repeat(2,1fr)!important;gap:var(--fill-blank-spacing-xs)!important}.stat-item{padding:var(--fill-blank-spacing-xs)}.stat-label{font-size:9px}.stat-value{font-size:var(--fill-blank-font-size-xs)}.fill-blank-stats-bar{flex-wrap:wrap;gap:6px}.stat-mini{flex:1;min-width:60px;justify-content:center}.achievement-popup{max-width:260px;padding:var(--fill-blank-spacing-lg)}.fill-blank-wrong-notes{right:var(--fill-blank-spacing-sm);top:var(--fill-blank-spacing-sm);min-width:220px;max-width:280px}.debug-info{font-size:var(--fill-blank-font-size-xs);padding:var(--fill-blank-spacing-xs)}.complete-actions{grid-template-columns:1fr;gap:var(--fill-blank-spacing-sm)}.btn-restart,.btn-exit{padding:var(--fill-blank-spacing-xs) var(--fill-blank-spacing-sm);font-size:var(--fill-blank-font-size-xs)}.achievement-badge{padding:2px 4px;font-size:10px}.achievements-list{gap:4px}.fill-blank-korean-text{font-size:var(--fill-blank-font-size-lg);margin-bottom:var(--fill-blank-spacing-lg)}}@media (max-width: 360px){.fill-blank-thai-input{width:100px;font-size:var(--fill-blank-font-size-sm)}.fill-blank-keyboard{transform:scale(.6)}.thai-to-korean-thai-text{font-size:24px}.thai-to-korean-input{width:180px;font-size:var(--fill-blank-font-size-md)}.korean-keyboard{transform:scale(.6)}.common-words-grid{grid-template-columns:1fr}.complete-card{padding:var(--fill-blank-spacing-lg)}.achievement-popup{max-width:240px;padding:var(--fill-blank-spacing-md)}.fill-blank-wrong-notes{min-width:200px;max-width:250px}}@media (min-width: 769px){.vocab-main{width:500px!important;min-width:500px!important;max-width:500px!important;margin:40px auto 0!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important;display:flex;flex-direction:column;transition:all .3s ease;overflow:hidden!important;position:relative;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}}@media (min-width: 481px) and (max-width: 768px){.vocab-main{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto 0!important;border-radius:15px!important;height:100vh;display:flex;flex-direction:column;transition:all .3s ease;overflow:hidden!important;position:relative;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}}@media (max-width: 480px){.vocab-main{height:100vh;display:flex;flex-direction:column;max-width:800px;margin:0 auto;transition:all .3s ease;overflow:hidden!important;position:relative;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);margin-bottom:0!important}}.vocab-content{flex:1;padding:64px 0 0;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none;-ms-overflow-style:none;transition:all .5s ease;margin-bottom:0;max-height:calc(100vh - 48px)}.vocab-content.expanded{padding-top:0;max-height:100vh;transition:all .5s ease}.vocab-content::-webkit-scrollbar{width:8px}.vocab-content::-webkit-scrollbar-track{background:#ffe4b54d;border-radius:4px}.vocab-content::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:4px}.vocab-content::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#ffd93d,#ff8c42)}.tab-content-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;text-align:center;color:#ff8c42;padding:32px;background:#fffc;border-radius:20px;border:3px solid #FF6B6B;box-shadow:0 8px 20px #0000001a;margin:20px}.placeholder-icon{font-size:64px;margin-bottom:16px;opacity:.8;filter:drop-shadow(0 4px 8px rgba(255,107,107,.3))}.tab-content-placeholder h3{font-size:24px;font-weight:700;color:#ff6b6b;margin-bottom:8px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.tab-content-placeholder p{font-size:16px;color:#ff8c42;line-height:1.5;margin:0;font-weight:700}@media (max-width: 768px){.vocab-main{padding:0;overflow:hidden!important;height:100vh;margin-bottom:0!important;position:relative}.vocab-content{padding:64px 0 0;margin-bottom:0;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none;-ms-overflow-style:none;max-height:100vh}.vocab-content.expanded{padding-top:0;max-height:100vh}.vocab-content::-webkit-scrollbar{display:none}.tab-content-placeholder{height:250px;padding:24px;margin:16px}.placeholder-icon{font-size:48px}.tab-content-placeholder h3{font-size:20px}.tab-content-placeholder p{font-size:14px}}@media (max-width: 480px){.vocab-content{padding:60px 0 0}.vocab-content.expanded{padding-top:0}.tab-content-placeholder{height:200px;padding:16px;margin:12px}.placeholder-icon{font-size:40px}.tab-content-placeholder h3{font-size:18px}.tab-content-placeholder p{font-size:12px}}@media (max-width: 768px){body.vocab-fullscreen .mobile-header,body.vocab-fullscreen .mobile-header-container{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-100%);transition:all .3s ease}body.vocab-fullscreen .left-sidebar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(100%);transition:all .3s ease}body.vocab-fullscreen .main-content{margin-top:0!important;margin-bottom:0!important;height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.vocab-fullscreen .center-content{height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.vocab-fullscreen .vocab-main{height:100vh!important;max-height:100vh!important;overflow:hidden!important;margin-bottom:0!important}}@media (min-width: 769px){body.vocab-fullscreen .left-sidebar,body.vocab-fullscreen .mobile-header,body.vocab-fullscreen .mobile-header-container{opacity:1;visibility:visible;pointer-events:auto;transform:none}}.vocab-main.learning-path-detail-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important;margin-bottom:0!important;padding-bottom:0!important}.vocab-main.learning-path-detail-active{margin-bottom:0!important;background:transparent!important;padding-bottom:0!important}.vocab-main.learning-path-lesson-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important}.vocab-main.learning-path-lesson-active{margin-bottom:0!important;background:transparent!important}@media (max-width: 768px){body.learning-path-fullscreen .left-sidebar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(100%);transition:all .3s ease}body.learning-path-fullscreen .main-content{margin-top:0!important;margin-bottom:0!important;height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.learning-path-fullscreen .center-content{height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.learning-path-fullscreen .vocab-main{height:100vh!important;max-height:100vh!important;overflow:hidden!important;margin-bottom:0!important}}@media (min-width: 769px){body.learning-path-fullscreen .left-sidebar{opacity:1;visibility:visible;pointer-events:auto;transform:none}}.vocab-main.flash-cards-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important}.vocab-main.flash-cards-active{margin-bottom:0!important;background:transparent!important}@media (max-width: 768px){body.flash-cards-fullscreen .left-sidebar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(100%);transition:all .3s ease}body.flash-cards-fullscreen .main-content{margin-top:0!important;margin-bottom:0!important;height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.flash-cards-fullscreen .center-content{height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.flash-cards-fullscreen .vocab-main{height:100vh!important;max-height:100vh!important;overflow:hidden!important;margin-bottom:0!important}}@media (min-width: 769px){body.flash-cards-fullscreen .left-sidebar{opacity:1;visibility:visible;pointer-events:auto;transform:none}}@media (max-width: 768px){body.typing-path-fullscreen .left-sidebar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(100%);transition:all .3s ease}body.typing-path-fullscreen .main-content{margin-top:0!important;margin-bottom:0!important;height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.typing-path-fullscreen .center-content{height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.typing-path-fullscreen .vocab-main{height:100vh!important;max-height:100vh!important;overflow:hidden!important;margin-bottom:0!important}}@media (min-width: 769px){body.typing-path-fullscreen .left-sidebar{opacity:1;visibility:visible;pointer-events:auto;transform:none}}.vocab-main.typing-path-detail-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important;margin-bottom:0!important;padding-bottom:0!important}.vocab-main.typing-path-detail-active{margin-bottom:0!important;background:transparent!important;padding-bottom:0!important}.vocab-main.typing-path-lesson-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important}.vocab-main.typing-path-lesson-active{margin-bottom:0!important;background:transparent!important}.vocab-main .typing-path-main .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important;margin-bottom:0!important;padding-bottom:0!important}.vocab-main .typing-path-main{margin-bottom:0!important;background:transparent!important;padding-bottom:0!important}.vocab-main.typing-path-main-active .vocab-content{padding-top:0!important;display:flex!important;justify-content:center!important;align-items:flex-start!important;background:transparent!important;margin-bottom:0!important;padding-bottom:0!important}.vocab-main.typing-path-main-active{margin-bottom:0!important;background:transparent!important;padding-bottom:0!important}.library-header{background:linear-gradient(145deg,#fff8dc,#fffaf0);border-bottom:3px solid #FF6B6B;color:#ff6b6b;padding:0 16px;height:48px;border-radius:0 0 15px 15px;position:absolute;top:0;left:0;right:0;z-index:1000;width:100%;box-sizing:border-box;margin:0 auto;display:flex;align-items:center}.library-nav{display:flex;justify-content:center;align-items:center;max-width:1200px;margin:0 auto;width:100%;height:100%}.library-nav-left{display:flex;gap:25px;align-items:center}.library-nav-button{background:none;border:none;color:#ff6b6b;font-size:16px;font-weight:700;cursor:pointer;opacity:.7;transition:all .3s ease;position:relative;padding:8px 12px;border-radius:12px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);height:auto;display:flex;align-items:center}.library-nav-button:hover{opacity:.9;background:#ffffff1a}.library-nav-button.active{opacity:1;font-weight:700;background:#ffffff26;box-shadow:0 2px 8px #0003}@media (min-width: 769px){.library-header{position:absolute;left:0;right:0;width:100%;max-width:none}}@media (max-width: 768px){.library-header{padding:0 20px;margin-bottom:0;border-radius:0 0 12px 12px;height:48px;position:fixed}.library-nav-left{gap:20px}.library-nav-button{font-size:16px;padding:6px 10px}}.library-hero-banner.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;margin:0 20px 20px;border-radius:20px;border:4px solid #FF6B6B}.library-hero-banner.loading .loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.library-hero-banner.loading p{font-size:16px;font-weight:500;margin:0}.library-hero-banner{margin:0 20px 20px;border-radius:20px;overflow:hidden;position:relative;width:calc(100% - 40px);aspect-ratio:1 / 1;background:linear-gradient(145deg,#fff8dc,#fffaf0);background-size:cover;background-position:center;background-repeat:no-repeat;border:4px solid #FF6B6B;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;box-sizing:border-box}.library-hero-content{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 50%,transparent 100%);padding:25px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.library-hero-title{font-size:22px;font-weight:700;margin-bottom:8px;line-height:1.3;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8);font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-hero-subtitle{font-size:14px;margin-bottom:15px;color:#ffd93d;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.8);font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-hero-description{font-size:12px;margin-bottom:5px;color:#ffffffe6;text-shadow:1px 1px 2px rgba(0,0,0,.8);font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-hero-pagination{position:absolute;top:15px;right:20px;color:#ff8c42;font-size:12px;font-weight:700;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);background:#ffffffe6;padding:6px 12px;border-radius:15px;box-shadow:0 2px 8px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (max-width: 768px){.library-hero-banner{margin:0 15px 15px;width:calc(100% - 30px);aspect-ratio:1 / 1;border-radius:15px;border-width:3px}.library-hero-content{padding:20px}.library-hero-pagination{top:12px;right:15px;font-size:11px;padding:5px 10px}.library-hero-title{font-size:20px}.library-hero-subtitle{font-size:13px}.library-hero-description{font-size:11px}}@media (max-width: 480px){.library-hero-banner{margin:0 12px 12px;width:calc(100% - 24px);aspect-ratio:1 / 1;border-radius:12px}.library-hero-content{padding:18px}.library-hero-pagination{top:10px;right:12px;font-size:10px;padding:4px 8px}.library-hero-title{font-size:18px;margin-bottom:6px}.library-hero-subtitle{font-size:12px;margin-bottom:12px}.library-hero-badge{font-size:11px;padding:5px 12px;margin-bottom:12px}}.library-skeleton{padding:0 0 20px;max-width:100%;margin:0;background:transparent}.library-skeleton-hero-banner{margin:0 20px 20px;border-radius:20px;overflow:hidden;position:relative;width:calc(100% - 40px);aspect-ratio:1 / 1;background:linear-gradient(145deg,#fff8dc,#fffaf0);background-size:cover;background-position:center;background-repeat:no-repeat;border:4px solid #FF6B6B;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;box-sizing:border-box}.library-skeleton-hero-banner:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,107,107,.2),transparent);animation:skeleton-shimmer 2s infinite}.library-skeleton-hero-content{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.4) 50%,transparent 100%);padding:25px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.library-skeleton-hero-title{width:70%;height:44px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:8px;margin-bottom:8px}.library-skeleton-hero-subtitle{width:50%;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px;margin-bottom:15px}.library-skeleton-hero-description{width:60%;height:18px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px;margin-bottom:5px}.library-skeleton-hero-pagination{position:absolute;top:15px;right:20px;width:40px;height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;background:#ffffffe6;padding:6px 12px;border-radius:15px;box-shadow:0 2px 8px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.library-skeleton-quick-menu{padding:0 20px;margin-bottom:30px}.library-skeleton-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);padding:20px;border-radius:20px;border:3px solid #FF8C42;box-shadow:0 8px 20px #00000026;position:relative;overflow:hidden}.library-skeleton-quick-grid:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,107,107,.1),transparent);animation:skeleton-shimmer 2s infinite}.library-skeleton-quick-item{display:flex;flex-direction:column;align-items:center;padding:8px;border-radius:12px}.library-skeleton-quick-icon{width:40px;height:40px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:12px;margin-bottom:8px}.library-skeleton-quick-label{width:40px;height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.library-skeleton-recommendation{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);margin:0 20px 30px;padding:20px;border-radius:20px;border:3px solid #FF8C42;box-shadow:0 8px 20px #00000026;position:relative;overflow:hidden}.library-skeleton-recommendation:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,107,107,.1),transparent);animation:skeleton-shimmer 2s infinite}.library-skeleton-section-header{margin-bottom:15px}.library-skeleton-section-title{width:200px;height:24px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px}.library-skeleton-section-more{width:60px;height:18px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-left:auto}.library-skeleton-recommendation-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.library-skeleton-recommendation-card{background:linear-gradient(145deg,#fff8dc,#fffaf0);border:2px solid #FF6B6B;border-radius:15px;overflow:hidden;box-shadow:0 4px 10px #0000001a;position:relative}.library-skeleton-recommendation-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,107,107,.1),transparent);animation:skeleton-shimmer 2s infinite}.library-skeleton-recommendation-image{width:100%;height:150px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}.library-skeleton-recommendation-content{padding:10px}.library-skeleton-recommendation-title{width:80%;height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:6px}.library-skeleton-recommendation-meta{display:flex;gap:6px;align-items:center}.library-skeleton-recommendation-level{width:40px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:8px}.library-skeleton-recommendation-tag{width:30px;height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px}.library-skeleton-story-section{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);margin:0 20px 20px;padding:20px;border-radius:20px;border:3px solid #FF8C42;box-shadow:0 8px 20px #00000026;position:relative;overflow:hidden}.library-skeleton-story-section:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,107,107,.1),transparent);animation:skeleton-shimmer 2s infinite}.library-skeleton-story-section .library-skeleton-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.library-skeleton-story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.library-skeleton-story-card{background:linear-gradient(145deg,#fff8dc,#fffaf0);border:2px solid #FF6B6B;border-radius:15px;overflow:hidden;box-shadow:0 4px 10px #0000001a;position:relative}.library-skeleton-story-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,107,107,.1),transparent);animation:skeleton-shimmer 2s infinite}.library-skeleton-story-image{width:100%;height:150px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;position:relative}.library-skeleton-story-character{position:absolute;bottom:5px;right:8px;width:24px;height:24px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:50%}.library-skeleton-story-badge{position:absolute;top:8px;left:8px;width:32px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:12px}.library-skeleton-story-content{padding:10px}.library-skeleton-story-title{width:70%;height:18px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:6px}.library-skeleton-story-meta{display:flex;gap:6px;align-items:center}.library-skeleton-story-level{width:40px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:8px}.library-skeleton-story-tag{width:30px;height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px}@media (max-width: 768px){.library-skeleton-hero-banner{margin:0 15px 15px;width:calc(100% - 30px);aspect-ratio:1 / 1;border-radius:15px;border-width:3px}.library-skeleton-hero-content{padding:20px}.library-skeleton-hero-pagination{top:12px;right:15px;width:35px;height:24px}.library-skeleton-hero-title{height:40px}.library-skeleton-hero-subtitle{height:18px}.library-skeleton-hero-description{height:16px}.library-skeleton-quick-menu{padding:0 12px;margin-bottom:12px}.library-skeleton-quick-grid{grid-template-columns:repeat(4,1fr);gap:12px;padding:18px;border-radius:15px}.library-skeleton-quick-icon{width:36px;height:36px}.library-skeleton-quick-label{width:36px;height:14px}.library-skeleton-recommendation,.library-skeleton-story-section{margin:0 15px 15px;padding:18px;border-radius:15px}.library-skeleton-recommendation-cards,.library-skeleton-story-grid{gap:12px}}@media (max-width: 480px){.library-skeleton-hero-banner{margin:0 12px 12px;width:calc(100% - 24px);aspect-ratio:1 / 1;border-radius:12px}.library-skeleton-hero-content{padding:18px}.library-skeleton-hero-pagination{top:10px;right:12px;width:30px;height:20px}.library-skeleton-hero-title{width:90%;height:36px}.library-skeleton-hero-subtitle{width:70%;height:16px}.library-skeleton-hero-description{width:80%;height:14px}.library-skeleton-quick-grid{grid-template-columns:repeat(4,1fr);gap:10px;padding:15px}.library-skeleton-quick-icon{width:32px;height:32px}.library-skeleton-quick-label{width:32px;height:12px}.library-skeleton-recommendation,.library-skeleton-story-section{margin:0 12px 10px;padding:15px;border-radius:12px}}.library-quick-menu{padding:0 20px;margin-bottom:30px}.library-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);padding:20px;border-radius:20px;border:3px solid #FF8C42;box-shadow:0 8px 20px #00000026}.library-quick-item{display:flex;flex-direction:column;align-items:center;background:none;border:none;color:#ff6b6b;cursor:pointer;transition:all .3s ease;text-decoration:none;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);padding:8px;border-radius:12px}.library-quick-item:hover{transform:translateY(-2px);background:#ff6b6b1a}.library-quick-item.active{background:#ff6b6b26;box-shadow:0 4px 12px #ff6b6b4d;transform:translateY(-2px)}.library-quick-item.active .library-quick-icon{box-shadow:0 6px 20px #ff8c4280;transform:scale(1.1)}.library-quick-item.active .library-quick-label{font-weight:700;color:#ff6b6b}.library-quick-icon{width:40px;height:40px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:8px;box-shadow:0 4px 15px #ff8c424d;transition:all .3s ease}.library-quick-item:hover .library-quick-icon{box-shadow:0 6px 20px #ff8c4266;transform:scale(1.05)}.library-quick-label{font-size:11px;font-weight:700;text-align:center;line-height:1.2;color:#ff6b6b;white-space:pre-line;transition:all .3s ease}@media (max-width: 768px){.library-quick-menu{padding:0 12px;margin-bottom:12px}.library-quick-grid{grid-template-columns:repeat(4,1fr);gap:12px;padding:18px;border-radius:15px}.library-quick-item{padding:6px}.library-quick-icon{width:36px;height:36px;font-size:18px;margin-bottom:6px}.library-quick-label{font-size:10px}}@media (max-width: 480px){.library-quick-grid{grid-template-columns:repeat(4,1fr);gap:10px;padding:15px}.library-quick-item{padding:4px}.library-quick-icon{width:32px;height:32px;font-size:16px;border-radius:10px}.library-quick-label{font-size:9px}}.library-recommendation-section{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);margin:0 20px 30px;padding:20px;border-radius:20px;border:3px solid #FF8C42;box-shadow:0 8px 20px #00000026}.library-recommendation-title{font-size:18px;font-weight:700;color:#ff6b6b;margin-bottom:15px;text-align:center;text-shadow:1px 1px 0px rgba(255,255,255,.8);font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-recommendation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.library-recommendation-card{background:linear-gradient(145deg,#fff8dc,#fffaf0);border:2px solid #FF6B6B;border-radius:15px;overflow:hidden;box-shadow:0 4px 10px #0000001a;cursor:pointer;transition:all .3s ease}.library-recommendation-card:hover{box-shadow:0 6px 15px #0003;transform:translateY(-2px)}.library-recommendation-image{width:100%;height:150px;position:relative;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;overflow:hidden;background-repeat:no-repeat;border-radius:12px 12px 0 0!important}.library-recommendation-image img{width:100%;height:100%;object-fit:cover}.library-recommendation-image-placeholder{font-size:48px;color:#9ca3af}.library-recommendation-image.castle{background:linear-gradient(135deg,#ff8c42,#ffd93d)}.library-recommendation-image.sea{background:linear-gradient(135deg,#ffe4b5,#ffdab9)}.library-recommendation-image.school{background-image:url(/src/assets/images/StoryCards/AyutthayaRec3.png);background-color:#f0f0f0}.library-recommendation-image.rec1{background-image:url(/assets/Rec1-C8m2uBNL.png);background-color:#f0f0f0}.library-recommendation-image.rec2{background-image:url(/assets/Rec2-DphfE0dn.png);background-color:#f0f0f0}.library-recommendation-image.rec3{background-image:url(/assets/Rec3-BvMV1qjV.png);background-color:#f0f0f0}.library-recommendation-content{padding:10px}.library-recommendation-card-title{font-size:12px;font-weight:700;color:#ff6b6b;margin-bottom:6px;line-height:1.3;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-recommendation-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.library-recommendation-level{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 8px;border-radius:8px;font-size:10px;font-weight:700;text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 8px #ff8c4266;display:inline-flex;align-items:center;gap:4px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-recommendation-level:before{content:"⭐";font-size:8px}.library-recommendation-tag{color:#fff;padding:3px 7px;border-radius:6px;font-size:9px;font-weight:700;text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 1px 4px #0003;display:inline-flex;align-items:center;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);letter-spacing:.3px}@media (max-width: 768px){.library-recommendation-section{margin:0 12px 12px;padding:10px;border-radius:15px}.library-recommendation-title{font-size:16px;margin-bottom:12px}.library-recommendation-grid{gap:10px}.library-recommendation-image{height:150px}.library-recommendation-card-title{font-size:12px;margin-bottom:5px}.library-recommendation-meta{gap:5px}.library-recommendation-level{font-size:9px;padding:3px 6px}.library-recommendation-tag{font-size:8px;padding:2px 5px}}@media (max-width: 480px){.library-recommendation-title{font-size:15px}.library-recommendation-grid{gap:8px}.library-recommendation-image{height:150px}.library-recommendation-content{padding:8px}.library-recommendation-card-title{font-size:13px}.library-recommendation-meta{gap:4px}.library-recommendation-level{font-size:10px;padding:2px 5px}.library-recommendation-tag{font-size:10px;padding:2px 4px}}.library-story-card{background:linear-gradient(145deg,#fff8dc,#fffaf0);border:2px solid #FF6B6B;border-radius:15px;overflow:hidden;box-shadow:0 4px 10px #0000001a;cursor:pointer;transition:all .3s ease}.library-story-card:hover{box-shadow:0 6px 15px #0003;transform:translateY(-2px)}.library-story-image{width:100%;height:150px;position:relative;border-radius:12px 12px 0 0;overflow:hidden}.library-story-image.castle{background:linear-gradient(135deg,#ff8c42,#ffd93d)}.library-story-image.sea{background:linear-gradient(135deg,#ffe4b5,#ffdab9)}.library-story-image.school{background:linear-gradient(135deg,#ffdab9,#ffb6c1)}.library-story-image.detective{background:linear-gradient(135deg,#ffb6c1,#ffe4b5)}.library-story-image.rec1,.library-story-image.rec2,.library-story-image.rec3{display:none}.library-story-character{position:absolute;bottom:5px;right:8px;font-size:30px;opacity:.9;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}.library-story-free-badge{position:absolute;top:8px;left:8px;color:#fff;padding:5px 10px;border-radius:12px;font-size:10px;font-weight:700;text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 8px #58cc0266;z-index:10;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);letter-spacing:.3px}.library-story-badge{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 8px;border-radius:12px;font-size:10px;font-weight:700;text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 8px #ff8c4266;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-story-content{padding:10px}.library-story-title{font-size:13px;font-weight:700;color:#ff6b6b;margin-bottom:6px;line-height:1.3;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-story-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.library-story-level{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 8px;border-radius:8px;font-size:10px;font-weight:700;text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 2px 8px #ff8c4266;display:inline-flex;align-items:center;gap:4px;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-story-level:before{content:"⭐";font-size:8px}.library-story-tag{color:#fff;padding:3px 7px;border-radius:6px;font-size:9px;font-weight:700;text-shadow:1px 1px 0px rgba(0,0,0,.3);box-shadow:0 1px 4px #0003;display:inline-flex;align-items:center;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif);letter-spacing:.3px}@media (max-width: 768px){.library-story-image{height:150px}.library-story-character{font-size:25px;bottom:4px;right:6px}.library-story-badge{font-size:9px;padding:3px 6px;border-radius:10px;top:6px;left:6px}.library-story-free-badge{font-size:9px;padding:4px 8px;top:6px;left:6px}.library-story-title{font-size:13px;margin-bottom:5px}.library-story-meta{gap:5px}.library-story-level{font-size:10px;padding:3px 6px}.library-story-tag{font-size:10px;padding:2px 5px}}@media (max-width: 480px){.library-story-image{height:150px}.library-story-character{font-size:20px}.library-story-badge{font-size:8px;padding:2px 5px}.library-story-free-badge{font-size:9px;padding:4px 8px;top:6px;left:6px}.library-story-content{padding:8px}.library-story-title{font-size:13px}.library-story-meta{gap:4px}.library-story-level{font-size:10px;padding:2px 5px}.library-story-tag{font-size:10px;padding:2px 4px}}.library-story-section{background:linear-gradient(145deg,#fffffff2,#ffe4b5e6);margin:0 20px 20px;padding:20px;border-radius:20px;border:3px solid #FF8C42;box-shadow:0 8px 20px #00000026}.library-story-section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.library-story-section-title{font-size:18px;font-weight:700;color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8);font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-story-section-more{color:#ff8c42;text-decoration:none;font-size:14px;font-weight:700;transition:all .3s ease;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}.library-story-section-more:hover{color:#ff6b6b;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.library-stories-scroll{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.library-stories-scroll::-webkit-scrollbar{display:none}.library-stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.library-no-stories{text-align:center;padding:40px 20px;color:#ff8c42;font-size:16px;font-weight:500;background:#ffffff80;border-radius:12px;border:2px dashed #FF8C42}.library-no-stories p{margin:0;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif)}@media (max-width: 768px){.library-story-section{margin:0 15px 15px;padding:18px;border-radius:15px}.library-story-section-header{margin-bottom:12px}.library-story-section-title{font-size:16px}.library-story-section-more{font-size:13px}.library-stories-grid{gap:12px}.library-no-stories{padding:30px 15px;font-size:14px}}@media (max-width: 480px){.library-story-section{margin:0 12px 10px;padding:15px;border-radius:12px}.library-story-section-title{font-size:15px}.library-story-section-more{font-size:12px}.library-stories-grid{gap:10px}.library-no-stories{padding:25px 12px;font-size:13px}}.library-bookshelf-skeleton-container{width:100%;padding:0 20px;color:#ff6b6b}.bookshelf-skeleton-stats-bar{background:linear-gradient(145deg,#fff8dc,#fffaf0);border:2px solid #FF8C42;border-radius:15px;padding:15px;margin-bottom:20px;display:flex;justify-content:space-around;box-shadow:0 4px 8px #0000001a;position:relative;overflow:hidden}.bookshelf-skeleton-stats-bar:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,140,66,.1),transparent);animation:skeleton-shimmer 2s infinite}.bookshelf-skeleton-stat-item{text-align:center}.bookshelf-skeleton-stat-number{width:40px;height:24px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px;margin:0 auto 8px}.bookshelf-skeleton-stat-label{width:60px;height:14px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin:0 auto}.bookshelf-skeleton-tabs-container{margin-bottom:20px}.bookshelf-skeleton-tabs{display:flex;background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:15px;padding:8px;box-shadow:0 4px 8px #0000001a;border:2px solid #FF8C42;overflow:hidden;gap:8px;justify-content:center;position:relative}.bookshelf-skeleton-tabs:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,140,66,.1),transparent);animation:skeleton-shimmer 2s infinite}.bookshelf-skeleton-tab{width:80px;height:40px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:10px}.bookshelf-skeleton-3d{background:linear-gradient(145deg,#8b4513,sienna);border-radius:15px;padding:20px;box-shadow:inset 0 4px 8px #0000004d,0 8px 20px #0003;position:relative}.bookshelf-skeleton-shelf-row{background:linear-gradient(145deg,#d2691e,peru);height:15px;margin:0 0 30px;border-radius:8px;box-shadow:0 4px 8px #0000004d;position:relative}.bookshelf-skeleton-books-row{display:flex;gap:8px;margin-bottom:0;padding:0 10px;min-height:100px}.bookshelf-skeleton-book-cover-3d{width:80px;height:100px;border-radius:4px;position:relative;box-shadow:0 4px 12px #0000004d;overflow:hidden;background:linear-gradient(145deg,#f0f0f0,#e0e0e0)}.bookshelf-skeleton-book-image{width:100%;height:100%;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;position:relative;overflow:hidden}.bookshelf-skeleton-book-title{position:absolute;bottom:10px;left:8px;right:8px;height:12px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.bookshelf-skeleton-book-level{position:absolute;top:4px;right:4px;width:30px;height:14px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@media (max-width: 768px){.library-bookshelf-skeleton-container{padding:0 12px}.bookshelf-skeleton-stats-bar{padding:12px;margin-bottom:15px;border-radius:12px}.bookshelf-skeleton-stat-number{width:36px;height:22px}.bookshelf-skeleton-stat-label{width:55px;height:13px}.bookshelf-skeleton-tabs-container{margin-bottom:15px}.bookshelf-skeleton-tabs{padding:6px;border-radius:12px;gap:6px}.bookshelf-skeleton-tab{width:70px;height:38px}.bookshelf-skeleton-3d{padding:15px;border-radius:12px}.bookshelf-skeleton-book-cover-3d{width:70px;height:90px}}@media (max-width: 480px){.library-bookshelf-skeleton-container{padding:0 8px}.bookshelf-skeleton-stats-bar{padding:10px;margin-bottom:12px}.bookshelf-skeleton-stat-number{width:32px;height:20px}.bookshelf-skeleton-stat-label{width:50px;height:12px}.bookshelf-skeleton-tabs{padding:5px;gap:5px}.bookshelf-skeleton-tab{width:60px;height:36px}.bookshelf-skeleton-3d{padding:12px}.bookshelf-skeleton-book-cover-3d{width:65px;height:85px}.bookshelf-skeleton-shelf-row{height:12px;margin-bottom:15px}}.library-bookshelf-container{width:100%;padding:0 20px;color:#ff6b6b}.bookshelf-stats-bar{background:linear-gradient(145deg,#fff8dc,#fffaf0);border:2px solid #FF8C42;border-radius:15px;padding:15px;margin-bottom:20px;display:flex;justify-content:space-around;box-shadow:0 4px 8px #0000001a}.bookshelf-stat-item{text-align:center}.bookshelf-stat-number{font-size:20px;font-weight:700;color:#ff6b6b}.bookshelf-stat-label{font-size:12px;color:#666;margin-top:2px}.bookshelf-tabs-container{margin-bottom:20px}.bookshelf-tabs{display:flex;background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:15px;padding:8px;box-shadow:0 4px 8px #0000001a;border:2px solid #FF8C42;overflow:hidden;gap:8px;justify-content:center}.bookshelf-tab{padding:12px 20px;border-radius:10px;cursor:pointer;transition:all .3s ease;background:transparent;color:#666;font-weight:500;border:none;white-space:nowrap;min-width:80px;font-size:14px;text-align:center}.bookshelf-tab:hover{background:#ff8c4233;color:#ff6b6b}.bookshelf-tab.active{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;font-weight:700;box-shadow:0 4px 8px #ff8c424d}.bookshelf-3d{background:linear-gradient(145deg,#8b4513,sienna);border-radius:15px;padding:20px;box-shadow:inset 0 4px 8px #0000004d,0 8px 20px #0003;position:relative}.bookshelf-shelf-row{background:linear-gradient(145deg,#d2691e,peru);height:15px;margin:0 0 30px;border-radius:8px;box-shadow:0 4px 8px #0000004d;position:relative}.bookshelf-books-row{display:flex;gap:8px;margin-bottom:0;padding:0 10px;min-height:100px}.bookshelf-book-cover-3d{width:80px;height:100px;border-radius:4px;position:relative;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0000004d;transform-style:preserve-3d;overflow:hidden}.bookshelf-book-cover-3d:hover{transform:translateY(-10px) scale(1.05);box-shadow:0 8px 20px #0006}.bookshelf-book-cover-image{width:100%;height:100%;position:relative;overflow:hidden}.bookshelf-book-cover-title{position:absolute;bottom:10px;left:0;right:0;color:#fff;font-size:11px;font-weight:700;text-align:center;text-shadow:1px 1px 10px rgba(0,0,0,1);padding:0 4px;line-height:1.2;word-wrap:break-word}.bookshelf-book-cover-level{position:absolute;top:4px;right:4px;background:#ffffffe6;color:#ff6b6b;font-size:6px;padding:2px 4px;border-radius:4px;font-weight:700}.bookshelf-book-3d{width:45px;height:120px;border-radius:4px 4px 2px 2px;position:relative;cursor:pointer;transition:all .3s ease;box-shadow:2px 0 8px #0000004d;transform-style:preserve-3d}.bookshelf-book-3d:hover{transform:translateY(-10px) rotate(2deg);box-shadow:4px 10px 15px #0006}.bookshelf-book-spine{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8px 4px;color:#fff;font-size:9px;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.5);writing-mode:vertical-rl;text-orientation:mixed}.bookshelf-book-level{position:absolute;top:5px;left:50%;transform:translate(-50%);background:#ffffffe6;color:#ff6b6b;font-size:6px;padding:2px 4px;border-radius:4px;font-weight:700}.bookshelf-book-3d:before{content:"";position:absolute;right:-3px;top:0;width:6px;height:100%;background:linear-gradient(90deg,#0000004d,#0000001a);border-radius:0 2px 2px 0}.book-red{background:linear-gradient(145deg,#ff6b6b,#ff4757)}.book-orange{background:linear-gradient(145deg,#ff8c42,#ff7675)}.book-yellow{background:linear-gradient(145deg,#ffd93d,#fdcb6e)}.book-green{background:linear-gradient(145deg,#6bcf7f,#00b894)}.book-blue{background:linear-gradient(145deg,#74b9ff,#0984e3)}.book-purple{background:linear-gradient(145deg,#a29bfe,#6c5ce7)}.book-pink{background:linear-gradient(145deg,#fd79a8,#e84393)}.bookshelf-book-modal{position:fixed;top:0;left:0;width:100%;height:100%;display:none;justify-content:center;align-items:center;z-index:1000;background:#000000b3}@media (min-width: 769px){.bookshelf-book-modal{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;overflow:hidden;align-items:center;justify-content:center}}.bookshelf-book-modal.active{display:flex}.bookshelf-container{display:flex;justify-content:center;align-items:center;perspective:1000px}.bookshelf-book{display:flex;align-items:center;position:relative;width:240px;height:270px;border-radius:6px;transform-style:preserve-3d;transition:all .8s ease}.bookshelf-book.opening{animation:bookZoomIn 1s ease-in-out forwards}@keyframes bookZoomIn{0%{transform:scale(1) rotateY(0)}50%{transform:scale(1.2) rotateY(-15deg)}to{transform:scale(1.3) rotateY(0)}}.bookshelf-book-cover{z-index:10;background:#fff;border:3px solid #FF8C42;border-radius:8px;box-shadow:0 4px 8px #0000001a;display:flex;width:100%;height:100%;transition:transform .8s ease-in-out;transform:perspective(300px) rotateY(0);cursor:pointer}.bookshelf-book.opened .bookshelf-book-cover{transform:perspective(300px) rotateY(0)}.bookshelf-binder{width:15%;background:linear-gradient(145deg,#ff8c42,#ffd93d);box-shadow:inset -2px -2px 5px #0000001a;border-top-left-radius:6px;border-bottom-left-radius:6px}.bookshelf-content{width:85%;padding:36px;display:flex;border-top-right-radius:inherit;border-bottom-right-radius:inherit;flex-direction:column;align-items:center;justify-content:center;color:#333}.bookshelf-book-title-3d{font-weight:600;margin-bottom:12px;font-size:18px;text-align:center;color:#ff6b6b}.bookshelf-book-subtitle-3d{font-size:12px;color:#666;text-align:center;margin-bottom:20px}.bookshelf-book-image{width:80px;height:80px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border:2px solid #FF6B6B;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;margin-bottom:10px;box-shadow:0 4px 12px #ff8c4266;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.bookshelf-book-side{z-index:5;position:absolute;right:0;border-top-right-radius:3px;border-bottom-right-radius:3px;background:#f5f5f5;border:2px solid #FF8C42;width:20px;height:100%;transition:transform .8s ease-in-out;transform:perspective(300px) rotateY(90deg) translate(20px)}.bookshelf-book.opened .bookshelf-book-side{transform:perspective(300px) rotateY(90deg) translate(20px)}.bookshelf-book-back{position:absolute;right:0;background:#fff;border:3px solid #FF8C42;border-radius:inherit;width:80%;padding:20px;height:calc(100% - 10px);transition:transform .8s ease-in-out;transform:perspective(300px) rotateY(0);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#ff6b6b;box-shadow:0 8px 20px #ff8c424d}.bookshelf-book.opened .bookshelf-book-back{transform:perspective(300px) rotateY(0) translate(0)}.bookshelf-book:hover:not(.opened) .bookshelf-book-cover{transform:perspective(300px) rotateY(-5deg)}.bookshelf-book:hover:not(.opened) .bookshelf-book-side{transform:perspective(300px) rotateY(30deg) translate(20px)}.bookshelf-book:hover:not(.opened) .bookshelf-book-back{transform:perspective(300px) rotateY(-5deg) translate(20px)}.bookshelf-click-hint{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:10px;color:#ff8c42;background:#ffffffe6;padding:4px 8px;border-radius:8px;border:1px solid #FF8C42;animation:pulse 2s infinite;box-shadow:0 2px 4px #ff8c4233}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}@media (max-width: 768px){.library-bookshelf-container{padding:0 12px}.bookshelf-stats-bar{padding:12px;margin-bottom:15px;border-radius:12px}.bookshelf-stat-number{font-size:18px}.bookshelf-stat-label{font-size:11px}.bookshelf-tabs-container{margin-bottom:15px}.bookshelf-tabs{padding:6px;border-radius:12px;gap:6px}.bookshelf-tab{padding:10px 16px;font-size:13px;min-width:70px}.bookshelf-3d{padding:15px;border-radius:12px}.bookshelf-book-3d{width:40px;height:100px}.bookshelf-book{width:200px;height:230px}.bookshelf-book-title-3d{font-size:14px}.bookshelf-book-subtitle-3d{font-size:10px}.bookshelf-book-image{width:60px;height:60px;font-size:18px}}@media (max-width: 480px){.library-bookshelf-container{padding:0 8px}.bookshelf-stats-bar{padding:10px;margin-bottom:12px}.bookshelf-stat-number{font-size:16px}.bookshelf-stat-label{font-size:10px}.bookshelf-tabs{padding:5px;gap:5px}.bookshelf-tab{padding:8px 12px;font-size:12px;min-width:60px}.bookshelf-3d{padding:12px}.bookshelf-book-3d{width:35px;height:90px}.bookshelf-shelf-row{height:12px;margin-bottom:15px}}.bookshelf-story-image,.bookshelf-book-cover-3d .bookshelf-story-image{width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:4px}.bookshelf-story-image.rec1{background-image:url(/assets/Rec1-C8m2uBNL.png)}.bookshelf-story-image.rec2{background-image:url(/assets/Rec2-DphfE0dn.png)}.bookshelf-story-image.rec3{background-image:url(/assets/Rec3-BvMV1qjV.png)}.bookshelf-book-level-3d{font-size:12px;color:#ff6b6b;font-weight:700;background:#ff6b6b1a;padding:4px 8px;border-radius:12px;border:1px solid rgba(255,107,107,.3)}.bookshelf-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:#666}.bookshelf-loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #FF6B6B;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.bookshelf-loading-text{font-size:16px;color:#666}.bookshelf-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;color:#666}.bookshelf-error-icon{font-size:48px;margin-bottom:20px}.bookshelf-error-text{font-size:16px;color:#666;text-align:center}.bookshelf-book-modal .bookshelf-container{position:relative;transform-style:preserve-3d;transition:all .8s ease;cursor:pointer}.bookshelf-book-modal .bookshelf-container:hover{transform:rotateY(-25deg) rotateX(10deg) scale(1.1)}.bookshelf-book-modal .bookshelf-book-3d{position:relative;width:240px;height:320px;transform-style:preserve-3d}.bookshelf-book-modal .bookshelf-book-cover{position:absolute;width:240px;height:320px;background:linear-gradient(135deg,#ecf0f1,#bdc3c7);border:2px solid #95a5a6;border-radius:4px;transform:translateZ(20px);display:flex;flex-direction:column;box-sizing:border-box;box-shadow:0 0 20px #0000004d,inset 0 2px #fff6,inset 0 -2px #0000001a;overflow:hidden}.bookshelf-book-modal .bookshelf-book-back{position:absolute;width:240px;height:320px;background:linear-gradient(135deg,#bdc3c7,#95a5a6);border:2px solid #7f8c8d;border-radius:4px;transform:translateZ(-20px) rotateY(180deg);box-shadow:0 0 15px #0003}.bookshelf-book-top{position:absolute;width:240px;height:40px;background:linear-gradient(180deg,#d5dbdb,#bdc3c7);border:2px solid #95a5a6;border-bottom:none;transform:translateY(-20px) translateZ(0) rotateX(90deg);transform-origin:bottom center;box-shadow:0 0 10px #0003}.bookshelf-book-bottom{position:absolute;width:240px;height:40px;background:linear-gradient(180deg,#95a5a6,#7f8c8d);border:2px solid #7f8c8d;border-top:none;transform:translateY(320px) translateZ(0) rotateX(-90deg);transform-origin:top center;box-shadow:0 10px 20px #0000004d}.bookshelf-book-modal .bookshelf-book-image{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1}.bookshelf-book-modal .bookshelf-content{position:absolute;top:20px;left:20px;right:20px;z-index:2;display:flex;flex-direction:column;align-items:center;color:#2c3e50;background:#ffffffe6;padding:15px;border-radius:8px;box-shadow:0 4px 12px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.bookshelf-book-modal .bookshelf-click-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:2;font-size:9px;text-align:center;font-style:italic;background:#ffffffe6;padding:8px 12px;border-radius:8px;box-shadow:0 2px 8px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap}.bookshelf-book-modal .bookshelf-book-title-3d{font-size:18px;font-weight:700;color:#2c3e50;text-align:center;line-height:1.3;text-shadow:0 2px 4px rgba(255,255,255,.8);margin-bottom:10px;max-width:100%;word-wrap:break-word}.bookshelf-book-modal .bookshelf-book-level-3d{font-size:10px;color:#ff6b6b;font-weight:700;background:#ff6b6b1a;padding:3px 6px;border-radius:8px;border:1px solid rgba(255,107,107,.3)}.bookshelf-pages{position:absolute;right:-2px;top:2px;width:236px;height:316px;background:repeating-linear-gradient(0deg,#fff 0px 1px,#f8f9fa 1px 2px);transform:translateZ(19px);border-radius:0 4px 4px 0;box-shadow:inset -2px 0 4px #0000001a,2px 0 8px #0003}.bookshelf-decoration{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:2px solid #3498db;border-radius:50%;opacity:.3}.bookshelf-decoration:before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:35px;height:35px;border:1px solid #3498db;border-radius:50%}.bookshelf-book-3d.book2 .bookshelf-book-cover{background:linear-gradient(135deg,#2c3e50,#34495e);border-color:#2c3e50;color:#fff}.bookshelf-book-3d.book2 .bookshelf-book-back{background:linear-gradient(135deg,#34495e,#2c3e50);border-color:#2c3e50}.bookshelf-book-3d.book2 .bookshelf-book-top,.bookshelf-book-3d.book2 .bookshelf-book-bottom{background:linear-gradient(90deg,#34495e,#2c3e50);border-color:#2c3e50}.bookshelf-book-3d.book2 .bookshelf-book-title-3d{color:#ecf0f1;text-shadow:0 2px 4px rgba(0,0,0,.8)}.bookshelf-book-3d.book2 .bookshelf-book-subtitle-3d{color:#bdc3c7}.bookshelf-book-3d.book2 .bookshelf-decoration{border-color:#e74c3c}.bookshelf-book-3d.book2 .bookshelf-decoration:before{border-color:#e74c3c}@keyframes bookFloat{0%{transform:translateY(0) rotateX(5deg) rotateY(-10deg) rotate(2deg)}25%{transform:translateY(-15px) rotateX(2deg) rotateY(15deg) rotate(-3deg)}50%{transform:translateY(-25px) rotateX(-3deg) rotateY(-5deg) rotate(1deg)}75%{transform:translateY(-15px) rotateX(1deg) rotateY(20deg) rotate(-2deg)}to{transform:translateY(0) rotateX(5deg) rotateY(-10deg) rotate(2deg)}}.bookshelf-container.floating{animation:bookFloat 4s ease-in-out infinite}.story-detail-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#f7f7f7;z-index:9999;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.story-detail-container::-webkit-scrollbar{display:none}.story-detail-header{background-color:#ff6b6b;color:#fff;display:flex;align-items:center;gap:15px;box-shadow:0 2px 8px #0000001a;padding:10px;max-width:800px;margin:0 auto}.story-detail-back-btn{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px;border-radius:8px;transition:background-color .2s ease}.story-detail-back-btn:hover{background-color:#ffffff1a}.story-detail-title{margin:0;font-size:20px;font-weight:700}.story-detail-content{padding:20px;max-width:800px;margin:0 auto}.story-detail-main-card{background-color:#fff;border-radius:15px;padding:25px;margin-bottom:20px;box-shadow:0 4px 15px #0000001a;border:3px solid #FF8C42}.story-detail-info-section{display:flex;align-items:center;gap:15px;margin-bottom:20px}.story-detail-icon{width:100px;height:100px;background:linear-gradient(135deg,#ff8c42,#ffd93d);border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:40px;flex-shrink:0}.story-detail-image{width:120px;height:160px;border-radius:6px;background-size:cover;background-position:center;background-repeat:no-repeat;flex-shrink:0}.story-detail-image.ayutthaya{background-image:url(/src/assets/images/StoryCards/AyutthayaRec3.png)}.story-detail-image.rec1{background-image:url(/assets/Rec1-C8m2uBNL.png)}.story-detail-image.rec2{background-image:url(/assets/Rec2-DphfE0dn.png)}.story-detail-image.rec3{background-image:url(/assets/Rec3-BvMV1qjV.png)}.story-detail-title-wrapper{display:flex;align-items:center;gap:8px;margin-bottom:8px}.story-detail-info-text h2{margin:0;color:#ff6b6b;font-size:24px;font-weight:700}.story-detail-help-button{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ff8c42,#ffd93d);border:2px solid white;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #ff8c424d;padding:0;flex-shrink:0}.story-detail-help-button:hover{background:linear-gradient(135deg,#ffd93d,#ff8c42);transform:scale(1.1);box-shadow:0 3px 10px #ff8c4266}.story-detail-help-button:active{transform:scale(.95)}.story-detail-author{margin:0 0 5px;color:#ff8c42;font-size:16px;font-weight:600}.story-detail-badges{display:flex;gap:10px}.story-detail-badge{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:700}.story-detail-badge.duration{background:linear-gradient(135deg,#ff6b6b,#ff8c42)}.story-detail-description{color:#666;line-height:1.6;margin-bottom:25px;font-size:16px}.story-detail-read-btn{width:100%;background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;border:none;padding:15px 30px;border-radius:15px;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 4px 15px #ff6b6b4d;transition:all .3s ease}.story-detail-read-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #ff6b6b66}.story-detail-read-btn.locked{background:linear-gradient(135deg,#999,#bbb);cursor:not-allowed;opacity:.7}.story-detail-read-btn.locked:hover{transform:none;box-shadow:0 4px 15px #0003}.story-detail-lock-notice{margin-top:15px;padding:12px 16px;background:linear-gradient(135deg,#fff3e0,#ffe0b2);border-left:4px solid #FF8C42;border-radius:8px;box-shadow:0 2px 8px #ff8c4226}.story-detail-lock-notice p{margin:0;color:#666;font-size:14px;line-height:1.6}.story-detail-lock-notice strong{color:#ff6b6b;font-weight:700}.story-detail-chapters-card{background-color:#fff;border-radius:15px;padding:20px;box-shadow:0 4px 15px #0000001a;border:2px solid #FFB6C1;position:relative}.story-detail-chapters-card.story-locked{opacity:.8}.story-detail-chapters-lock-overlay{position:absolute;inset:0;background:#fffffff2;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);border-radius:15px;display:flex;align-items:center;justify-content:center;z-index:10}.story-detail-chapters-lock-message{text-align:center;padding:20px}.story-detail-chapters-lock-message p{margin:0;font-size:18px;font-weight:700;color:#999}.story-detail-chapters-lock-message .lock-sub-message{margin-top:8px;font-size:14px;font-weight:400;color:#666}.story-detail-chapters-title{color:#ff6b6b;margin-bottom:15px;font-size:18px;font-weight:700}.story-detail-chapters-list{display:flex;flex-direction:column;gap:10px}.story-detail-chapters-list.locked{filter:blur(2px);pointer-events:none}.story-detail-chapter-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:#f9f9f9;border-radius:10px;border:1px solid #e0e0e0;cursor:pointer;transition:all .2s ease}.story-detail-chapter-item:hover:not(.locked){background-color:#f0f0f0;border-color:#ff8c42}.story-detail-chapter-item.locked{cursor:not-allowed;opacity:.6;background-color:#f5f5f5}.story-detail-chapter-item.completed{background-color:#f0f8f0;border-color:#58cc02}.story-detail-chapter-left{display:flex;align-items:center;gap:12px;flex:1}.story-detail-chapter-info{flex:1}.story-detail-chapter-right{display:flex;align-items:center}.story-detail-chapter-number{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}.story-detail-chapter-number.completed{background-color:#58cc02}.story-detail-chapter-number.incomplete{background-color:#e0e0e0}.story-detail-chapter-number.locked{background-color:#ccc;color:#666}.story-detail-chapter-title{font-size:14px;font-weight:400}.story-detail-chapter-title.completed{color:#58cc02;font-weight:600}.story-detail-chapter-title.incomplete{color:#666}.story-detail-chapter-title.locked{color:#999}.story-detail-chapter-progress{display:flex;align-items:center;gap:8px;margin-top:4px}.story-detail-progress-bar{flex:1;height:4px;background-color:#e0e0e0;border-radius:2px;overflow:hidden}.story-detail-progress-fill{height:100%;background:linear-gradient(90deg,#ff6b6b,#ff8c42);border-radius:2px;transition:width .3s ease}.story-detail-progress-text{font-size:12px;color:#666;font-weight:500}.story-detail-chapter-status{font-size:12px;font-weight:500;padding:4px 8px;border-radius:12px}.story-detail-chapter-status.completed{background-color:#e8f5e8;color:#58cc02}.story-detail-chapter-status.locked{background-color:#f0f0f0;color:#999}.story-detail-chapter-status.available{background-color:#fff3e0;color:#ff8c42}.story-detail-chapters-title{display:flex;align-items:center;gap:8px}.story-detail-chapters-title .story-detail-progress-text{font-size:14px;color:#666;font-weight:400}@media (max-width: 768px){.story-detail-content{padding:15px}.story-detail-main-card{padding:20px;border-width:2px}.story-detail-image{width:120px;height:160px}.story-detail-info-text h2{font-size:20px}.story-detail-author{font-size:14px}.story-detail-read-btn{font-size:16px;padding:12px 25px}}@media (max-width: 480px){.story-detail-title{font-size:18px}.story-detail-content{padding:12px}.story-detail-main-card{padding:18px}.story-detail-image{width:120px;height:160px}.story-detail-info-text h2{font-size:18px}}.thai-story-learning-skeleton,.thai-story-learning-skeleton *,.thai-story-learning-skeleton *:before,.thai-story-learning-skeleton *:after{scrollbar-width:none!important;-ms-overflow-style:none!important}.thai-story-learning-skeleton::-webkit-scrollbar,.thai-story-learning-skeleton *::-webkit-scrollbar,.thai-story-learning-skeleton *:before::-webkit-scrollbar,.thai-story-learning-skeleton *:after::-webkit-scrollbar{display:none!important}.thai-story-learning-skeleton{height:100vh;max-height:100vh;background-color:#f7f7f7;position:relative;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.thai-story-learning-skeleton::-webkit-scrollbar{display:none}.thai-story-skeleton-header{background:linear-gradient(135deg,#ff6b6b,#ff8c42);box-shadow:0 2px 8px #0000000d;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:20px;max-width:800px;margin:0 auto;position:relative;top:0;z-index:100;overflow:hidden}.thai-story-skeleton-header:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:skeleton-shimmer 2s infinite}.thai-story-skeleton-header-left,.thai-story-skeleton-header-right{display:flex;align-items:center;gap:12px}.thai-story-skeleton-header-left{width:80px;justify-content:flex-start}.thai-story-skeleton-header-right{width:80px;justify-content:flex-end}.thai-story-skeleton-header-center{flex:1;text-align:center;display:flex;justify-content:center;align-items:center}.thai-story-skeleton-chapter-info{width:160px;height:24px;background:#fff6;border-radius:12px;animation:skeleton-pulse 1.5s infinite}.thai-story-skeleton-header-btn{width:40px;height:40px;background:#ffffff4d;border-radius:8px;animation:skeleton-pulse 1.5s infinite}.thai-story-skeleton-container{padding:16px;height:calc(100vh - 60px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}.thai-story-skeleton-container::-webkit-scrollbar{display:none}.thai-story-skeleton-content{max-width:1024px;margin:0 auto;background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:12px;box-shadow:0 2px 8px #0000000d;padding:24px;position:relative;overflow:hidden}.thai-story-skeleton-content:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,140,66,.1),transparent);animation:skeleton-shimmer 2s infinite}.thai-story-skeleton-title-section{margin-bottom:16px;display:flex;align-items:center;gap:10px;padding:10px}.thai-story-skeleton-title-image{flex-shrink:0}.thai-story-skeleton-story-image{width:120px;height:160px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px;box-shadow:0 4px 12px #00000026;border:3px solid rgba(255,107,107,.3)}.thai-story-skeleton-title-content{flex:1;text-align:left}.thai-story-skeleton-title-romanization{width:200px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:12px}.thai-story-skeleton-title-words{display:flex;justify-content:flex-start;gap:8px;margin-bottom:0;flex-wrap:wrap}.thai-story-skeleton-title-word{display:inline-block;text-align:center}.thai-story-skeleton-word-romanization{width:40px;height:14px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:3px;margin-bottom:4px}.thai-story-skeleton-title-text{width:50px;height:36px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:8px;padding:6px 8px}.thai-story-skeleton-sentences{margin-bottom:32px;display:flex;flex-direction:column;gap:16px}.thai-story-skeleton-sentence-container{display:flex;flex-direction:column;gap:16px}.thai-story-skeleton-sentence-content{background-color:#fff;display:flex;flex-wrap:wrap;gap:8px;padding:12px;border-radius:12px;position:relative;overflow:hidden}.thai-story-skeleton-sentence-content:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(249,249,249,.5),transparent);animation:skeleton-shimmer 2s infinite}.thai-story-skeleton-word-container{display:inline-block;text-align:center}.thai-story-skeleton-word-container .thai-story-skeleton-word-romanization{width:35px;height:14px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:3px;margin-bottom:4px}.thai-story-skeleton-word{width:45px;height:36px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px;padding:6px 8px}.thai-story-skeleton-navigation-section{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px;padding:16px}.thai-story-skeleton-nav-btn{width:100px;height:44px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:25px;min-width:100px}.thai-story-skeleton-complete-btn{width:200px;height:48px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:25px;flex:1;max-width:200px}.thai-story-skeleton-tip-section{background-color:#e8f5e8;border:1px solid #c8e6c9;border-radius:12px;padding:16px;position:relative;overflow:hidden}.thai-story-skeleton-tip-section:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(200,230,201,.3),transparent);animation:skeleton-shimmer 2s infinite}.thai-story-skeleton-tip-header{text-align:center;margin-bottom:12px}.thai-story-skeleton-tip-badge{width:60px;height:28px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:50px;margin:0 auto}.thai-story-skeleton-tip-content{display:flex;flex-direction:column;gap:8px}.thai-story-skeleton-tip-line{height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.thai-story-skeleton-tip-line.short{width:70%}@media (max-width: 768px){.thai-story-skeleton-container{padding:8px;height:calc(100vh - 60px)}.thai-story-skeleton-content{padding:5px}.thai-story-skeleton-title-words{gap:4px}.thai-story-skeleton-title-text{width:40px;height:30px}.thai-story-skeleton-sentence-content{gap:6px}.thai-story-skeleton-word{width:40px;height:30px}.thai-story-skeleton-navigation-section{gap:12px;padding:12px}.thai-story-skeleton-nav-btn{width:80px;height:40px;min-width:80px}.thai-story-skeleton-complete-btn{width:160px;height:44px;max-width:160px}}@media (max-width: 480px){.thai-story-skeleton-title-text,.thai-story-skeleton-word{width:35px;height:26px}.thai-story-skeleton-navigation-section{padding:10px;gap:10px}.thai-story-skeleton-nav-btn{width:70px;height:36px;padding:8px 10px;font-size:10px;min-width:70px}.thai-story-skeleton-complete-btn{width:140px;height:40px;max-width:140px;padding:10px 16px;font-size:10px}.thai-story-skeleton-chapter-info{width:120px;height:20px}}@media (min-width: 769px){.thai-story-skeleton-header{max-width:800px;margin:0 auto;padding:20px}.thai-story-skeleton-content{max-width:800px;margin:0 auto}}.thai-story-learning,.thai-story-learning *,.thai-story-learning *:before,.thai-story-learning *:after{scrollbar-width:none!important;-ms-overflow-style:none!important}.thai-story-learning::-webkit-scrollbar,.thai-story-learning *::-webkit-scrollbar,.thai-story-learning *:before::-webkit-scrollbar,.thai-story-learning *:after::-webkit-scrollbar{display:none!important}.thai-story-learning{height:100vh;max-height:100vh;background-color:#f7f7f7;position:relative;overflow:hidden;scrollbar-width:none;-ms-overflow-style:none}.thai-story-learning::-webkit-scrollbar{display:none}.thai-story-header{background:linear-gradient(135deg,#ff6b6b,#ff8c42);box-shadow:0 2px 8px #0000000d;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;position:relative;top:0;z-index:100}.thai-story-header-left,.thai-story-header-right{display:flex;align-items:center;gap:12px}.thai-story-header-left{width:80px;justify-content:flex-start}.thai-story-header-right{width:80px;justify-content:flex-end}.thai-story-header-center{flex:1;text-align:center;display:flex;justify-content:center;align-items:center}.thai-story-chapter-info{color:#fff;font-size:14px;font-weight:600;background:#fff3;padding:4px 12px;border-radius:12px}.thai-story-header-btn{padding:8px 12px;background:none;border:none;border-radius:8px;color:#fff;cursor:pointer;transition:background-color .2s ease;font-size:16px;display:flex;align-items:center;gap:4px}.thai-story-header-btn:hover{background-color:#fff3}.thai-story-translation-banner{background-color:#000;color:#fff;padding:16px;text-align:center;position:fixed;top:60px;left:0;right:0;z-index:40;box-shadow:0 2px 8px #0000001a}.thai-story-translation-banner-wrapper{position:relative;display:flex;align-items:center;justify-content:center;gap:12px}.thai-story-translation-close-btn{width:28px;height:28px;border-radius:50%;background:#fff3;border:2px solid white;color:#fff;font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #0003;padding:0;flex-shrink:0}.thai-story-translation-close-btn:hover{background:#ffffff4d;transform:scale(1.1);box-shadow:0 3px 10px #0000004d}.thai-story-translation-close-btn:active{transform:scale(.95)}.thai-story-container{padding:16px;height:calc(100vh - 60px);overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}.thai-story-container::-webkit-scrollbar{display:none}.thai-story-content{max-width:1024px;margin:0 auto;background:linear-gradient(145deg,#fff8dc,#fffaf0);border-radius:12px;box-shadow:0 2px 8px #0000000d;padding:24px}.thai-story-title-section{margin-bottom:16px;display:flex;align-items:center;gap:10px;padding:10px}.thai-story-title-image{width:120px;height:160px;flex-shrink:0}.thai-story-story-image{width:120px;height:160px;border-radius:6px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 4px 12px #00000026;border:3px solid rgba(255,107,107,.3)}.thai-story-story-image.rec1{background-image:url(/assets/Rec1-C8m2uBNL.png)}.thai-story-story-image.rec2{background-image:url(/assets/Rec2-DphfE0dn.png)}.thai-story-story-image.rec3{background-image:url(/assets/Rec3-BvMV1qjV.png)}.thai-story-title-content{flex:1;text-align:left}.thai-story-title-thai{color:#000;font-size:24px;margin-bottom:8px;font-weight:700}.thai-story-title-romanization{color:#1cb0f6;font-size:18px;margin-bottom:12px;font-weight:500}.thai-story-title-words{color:#000;display:flex;justify-content:flex-start;gap:8px;margin-bottom:0;flex-wrap:wrap}.thai-story-title-word{display:inline-block;text-align:center}.thai-story-title-text{cursor:pointer;border-radius:8px;padding:6px 8px;font-size:24px;font-weight:700;transition:all .2s ease;border-bottom:3px solid transparent;min-width:max-content}.thai-story-title-text:hover{background-color:#000;color:#fff}.thai-story-sentences{margin-bottom:32px;display:flex;flex-direction:column;gap:16px}.thai-story-sentence-container{display:flex;flex-direction:column;gap:16px}.thai-story-sentence-content{background-color:#fff;display:flex;flex-wrap:wrap;gap:8px;font-size:24px;line-height:1.6;cursor:pointer;padding:12px;border-radius:12px;transition:all .3s ease;position:relative;z-index:10}.thai-story-sentence-content:hover{background-color:#f9f9f9}.thai-story-sentence-content.highlighted{background-color:#e0f7fa}.thai-story-word-container{display:inline-block;text-align:center}.thai-story-word-romanization{color:#1cb0f6;font-size:14px;margin-bottom:4px;white-space:nowrap;font-weight:500}.thai-story-word{color:#000;cursor:pointer;border-radius:6px;padding:6px 8px;transition:background-color .2s ease;border-bottom:3px solid transparent;min-width:max-content;position:relative}.thai-story-word:hover{background-color:#000;color:#fff}.thai-story-punctuation{font-size:24px;margin:0 4px}.thai-story-th-level-1{background-color:#e8f5e8;border-bottom-color:#4caf50}.thai-story-th-level-2{background-color:#e3f2fd;border-bottom-color:#2196f3}.thai-story-th-level-3{background-color:#fff3e0;border-bottom-color:#ff9800}.thai-story-th-level-4{background-color:#ffebee;border-bottom-color:#f44336}.thai-story-th-level-5{background-color:#f3e5f5;border-bottom-color:#9c27b0}.thai-story-th-level-6{background-color:#f5f5f5;border-bottom-color:#607d8b}.thai-story-navigation-section{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:32px;padding:16px}.thai-story-nav-btn{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:10px 16px;border:none;border-radius:25px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease;min-width:100px}.thai-story-nav-btn:hover:not(.disabled){transform:translateY(-2px);box-shadow:0 4px 15px #ff8c4266}.thai-story-nav-btn.disabled{background:#ccc;cursor:not-allowed;opacity:.6}.thai-story-complete-btn{background:linear-gradient(135deg,#58cc02,#4db000);color:#fff;padding:12px 24px;border:none;border-radius:25px;font-size:12px;font-weight:600;cursor:pointer;transition:all .3s ease;flex:1;max-width:200px}.thai-story-complete-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #58cc0266}.thai-story-complete-btn.completed{background:linear-gradient(135deg,#4caf50,#2e7d32);box-shadow:0 4px 15px #4caf504d}.thai-story-complete-btn.completed:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4caf5080}.thai-story-tip-section{background-color:#e8f5e8;border:1px solid #c8e6c9;border-radius:12px;padding:16px}.thai-story-tip-header{text-align:center;margin-bottom:12px}.thai-story-tip-badge{background-color:#58cc02;color:#fff;padding:6px 12px;border-radius:50px;font-size:14px;font-weight:600}.thai-story-tip-content{color:#2e7d32;font-size:14px;line-height:1.5}.thai-story-tip-content p{margin:0 0 8px}.thai-story-tip-content p:last-child{margin-bottom:0}.thai-story-word-tooltip{position:fixed;background-color:#1a1a1a;color:#fff;border-radius:16px;padding:20px;z-index:10000!important;max-width:360px;min-width:300px;box-shadow:0 12px 32px #0006;border:2px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:tooltipFadeIn .2s ease-out}@keyframes tooltipFadeIn{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.thai-story-tooltip-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px;gap:12px}.thai-story-word-info{flex:1}.thai-story-word-info h3,.thai-story-tooltip-thai{margin:0 0 6px;font-size:24px;font-weight:700;color:#fff}.thai-story-tooltip-romanization{margin:0;color:#93c5fd;font-size:15px;font-weight:500}.thai-story-add-review-btn{background:linear-gradient(135deg,#1cb0f6,#0ea5e9);border:none;border-radius:10px;padding:10px;color:#fff;cursor:pointer;transition:all .2s ease;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:18px}.thai-story-add-review-btn:hover{background:linear-gradient(135deg,#0ea5e9,#0284c7);transform:scale(1.05)}.thai-story-tooltip-content{display:flex;flex-direction:column;gap:12px}.thai-story-word-translation{margin:0;color:#e5e7eb;font-size:16px;line-height:1.5;font-weight:500}.thai-story-word-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.thai-story-th-level-badge{background:linear-gradient(135deg,#ff9800,#ff5722);padding:6px 12px;border-radius:8px;font-size:13px;font-weight:700;color:#fff}.thai-story-word-type{color:#9ca3af;font-size:13px;background:#ffffff1a;padding:6px 12px;border-radius:8px;font-weight:500}.thai-story-close-tooltip-btn{position:absolute;top:-10px;right:-10px;background:linear-gradient(135deg,#4b5563,#374151);color:#fff;border:2px solid rgba(255,255,255,.2);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:all .2s ease;font-weight:700;padding:0;flex-shrink:0;box-sizing:border-box}.thai-story-close-tooltip-btn:hover{background:linear-gradient(135deg,#374151,#1f2937);transform:scale(1.1);box-shadow:0 3px 10px #4b556366}.thai-story-close-tooltip-btn:active{transform:scale(.95)}.thai-story-overlay{position:fixed;inset:0;z-index:800}.thai-story-sentence-overlay{position:fixed;inset:0;z-index:30;background:#0000001a;pointer-events:auto}.thai-story-settings-menu{position:fixed;top:60px;right:16px;background:#fff;border-radius:12px;box-shadow:0 8px 24px #00000026;border:1px solid #e5e5e5;z-index:9999;min-width:200px;overflow:hidden}.thai-story-settings-content{padding:16px}.thai-story-settings-title{margin:0 0 16px;font-size:16px;font-weight:600;color:#333;text-align:center}.thai-story-settings-section{margin-bottom:16px}.thai-story-settings-section:last-child{margin-bottom:0}.thai-story-settings-subtitle{margin:0 0 8px;font-size:14px;font-weight:500;color:#666}.thai-story-settings-btn{width:100%;padding:12px 16px;background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.thai-story-settings-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #ff6b6b4d}.thai-story-speed-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.thai-story-speed-btn{padding:8px 12px;background:#f5f5f5;color:#666;border:1px solid #e0e0e0;border-radius:6px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease}.thai-story-speed-btn:hover{background:#e8e8e8;border-color:#d0d0d0}.thai-story-speed-btn.active{background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;border-color:#ff6b6b}.thai-story-speed-btn.active:hover{transform:translateY(-1px);box-shadow:0 2px 8px #ff6b6b4d}@media (max-width: 768px){.thai-story-translation-banner{padding:12px;font-size:14px;top:60px}.thai-story-translation-close-btn{width:24px;height:24px;font-size:14px}.thai-story-container{padding:8px;height:calc(100vh - 60px)}.thai-story-content{padding:5px}.thai-story-title-words{gap:4px}.thai-story-title-text{font-size:20px;padding:6px 8px}.thai-story-sentence-content{font-size:20px;gap:6px}.thai-story-navigation-section{gap:12px;padding:12px}.thai-story-nav-btn{min-width:80px;font-size:11px;padding:8px 12px}.thai-story-complete-btn{max-width:160px;font-size:11px;padding:10px 20px}.thai-story-word-tooltip{max-width:calc(100vw - 32px);min-width:196px;left:16px!important;right:16px!important;transform:none!important;padding:14px}.thai-story-word-tooltip .thai-story-tooltip-thai{font-size:18px}.thai-story-word-tooltip .thai-story-tooltip-romanization{font-size:12px}.thai-story-word-tooltip .thai-story-word-translation{font-size:14px}.thai-story-word-tooltip .thai-story-th-level-badge,.thai-story-word-tooltip .thai-story-word-type{font-size:11px;padding:4px 8px}}@media (max-width: 480px){.thai-story-translation-banner{padding:10px;font-size:13px}.thai-story-translation-close-btn{width:22px;height:22px;font-size:13px}.thai-story-title-text{font-size:14px}.thai-story-sentence-content{font-size:18px}.thai-story-navigation-section{padding:10px;gap:10px}.thai-story-nav-btn{padding:8px 10px;font-size:10px;min-width:70px}.thai-story-complete-btn{padding:10px 16px;font-size:10px;max-width:140px}.thai-story-word-tooltip{max-width:calc(100vw - 16px);min-width:168px;left:8px!important;right:8px!important;padding:10px}.thai-story-word-tooltip .thai-story-tooltip-thai{font-size:16px}.thai-story-word-tooltip .thai-story-tooltip-romanization{font-size:11px}.thai-story-word-tooltip .thai-story-word-translation{font-size:13px}.thai-story-word-tooltip .thai-story-th-level-badge,.thai-story-word-tooltip .thai-story-word-type{font-size:10px;padding:3px 6px}}@media (min-width: 769px){.thai-story-header{max-width:800px;margin:0 auto;padding:20px}.thai-story-content{max-width:800px;margin:0 auto}}.story-detail-skeleton-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#f7f7f7;z-index:9999;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.story-detail-skeleton-container::-webkit-scrollbar{display:none}.story-detail-skeleton-header{background-color:#ff6b6b;color:#fff;display:flex;align-items:center;gap:15px;box-shadow:0 2px 8px #0000001a;padding:20px;max-width:800px;margin:0 auto;position:relative;overflow:hidden}.story-detail-skeleton-header:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:skeleton-shimmer 2s infinite}.story-detail-skeleton-back-btn{width:40px;height:40px;background:#ffffff4d;border-radius:8px;flex-shrink:0;animation:skeleton-pulse 1.5s infinite}.story-detail-skeleton-title{height:24px;flex:1;background:#fff6;border-radius:6px;animation:skeleton-pulse 1.5s infinite}.story-detail-skeleton-content{padding:20px;max-width:800px;margin:0 auto}.story-detail-skeleton-main-card{background-color:#fff;border-radius:15px;padding:25px;margin-bottom:20px;box-shadow:0 4px 15px #0000001a;border:3px solid #FF8C42;position:relative;overflow:hidden}.story-detail-skeleton-main-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,140,66,.1),transparent);animation:skeleton-shimmer 2s infinite}.story-detail-skeleton-info-section{display:flex;align-items:center;gap:15px;margin-bottom:20px}.story-detail-skeleton-image{width:120px;height:160px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px;flex-shrink:0}.story-detail-skeleton-info-text{flex:1}.story-detail-skeleton-main-title{width:80%;height:28px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px;margin-bottom:8px}.story-detail-skeleton-author{width:120px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:10px}.story-detail-skeleton-badges{display:flex;gap:10px}.story-detail-skeleton-badge{width:50px;height:28px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:12px}.story-detail-skeleton-badge.duration{width:60px}.story-detail-skeleton-description{margin-bottom:25px}.story-detail-skeleton-description-line{height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:10px}.story-detail-skeleton-description-line:last-child{margin-bottom:0}.story-detail-skeleton-description-line.short{width:60%}.story-detail-skeleton-read-btn{width:100%;height:60px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:15px}.story-detail-skeleton-chapters-card{background-color:#fff;border-radius:15px;padding:20px;box-shadow:0 4px 15px #0000001a;border:2px solid #FFB6C1;position:relative;overflow:hidden}.story-detail-skeleton-chapters-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,182,193,.1),transparent);animation:skeleton-shimmer 2s infinite}.story-detail-skeleton-chapters-title{width:80px;height:24px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px;margin-bottom:15px}.story-detail-skeleton-chapters-list{display:flex;flex-direction:column;gap:10px}.story-detail-skeleton-chapter-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background-color:#f9f9f9;border-radius:10px;border:1px solid #e0e0e0;position:relative;overflow:hidden}.story-detail-skeleton-chapter-item:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(224,224,224,.3),transparent);animation:skeleton-shimmer 2s infinite}.story-detail-skeleton-chapter-left{display:flex;align-items:center;gap:12px;flex:1}.story-detail-skeleton-chapter-number{width:20px;height:20px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:50%;flex-shrink:0}.story-detail-skeleton-chapter-info{flex:1}.story-detail-skeleton-chapter-title{width:100px;height:18px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px;margin-bottom:8px}.story-detail-skeleton-chapter-progress{display:flex;align-items:center;gap:8px}.story-detail-skeleton-progress-bar{flex:1;height:4px;background:#e0e0e0;border-radius:2px;overflow:hidden}.story-detail-skeleton-progress-fill{width:60%;height:100%;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite}.story-detail-skeleton-progress-text{width:35px;height:16px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:3px}.story-detail-skeleton-chapter-right{display:flex;align-items:center}.story-detail-skeleton-chapter-status{width:60px;height:24px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:12px}@keyframes skeleton-pulse{0%,to{opacity:.8}50%{opacity:.4}}@keyframes skeleton-shimmer{0%{left:-100%}to{left:100%}}@media (max-width: 768px){.story-detail-skeleton-content{padding:15px}.story-detail-skeleton-main-card{padding:20px;border-width:2px}.story-detail-skeleton-image{width:120px;height:160px}.story-detail-skeleton-main-title{height:24px}.story-detail-skeleton-author{height:18px}.story-detail-skeleton-read-btn{height:54px}}@media (max-width: 480px){.story-detail-skeleton-title{height:20px}.story-detail-skeleton-content{padding:12px}.story-detail-skeleton-main-card{padding:18px}.story-detail-skeleton-image{width:120px;height:160px}.story-detail-skeleton-main-title{height:22px}}.library-page-fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;overflow:auto;z-index:9999;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1)}@media (min-width: 769px){.library-main{width:500px!important;min-width:500px!important;max-width:500px!important;margin:40px auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important;color:#ff6b6b;overflow-x:hidden;position:relative;overflow-y:auto!important;scrollbar-width:none;-ms-overflow-style:none}}@media (min-width: 481px) and (max-width: 768px){.library-main{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important;min-height:100vh;color:#ff6b6b;overflow-x:hidden;position:relative;overflow-y:auto!important;scrollbar-width:none;-ms-overflow-style:none}}@media (max-width: 480px){.library-main{width:100%;min-height:100vh;color:#ff6b6b;overflow-x:hidden;position:relative;overflow-y:auto!important;overflow-x:hidden!important;scrollbar-width:none;-ms-overflow-style:none}}.library-main::-webkit-scrollbar{display:none}.library-content-wrapper{padding-bottom:20px;padding-top:64px;position:relative}body.library-fullscreen .mobile-header,body.library-fullscreen .mobile-header-container{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-100%);transition:all .3s ease}body.library-fullscreen .left-sidebar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(100%);transition:all .3s ease}body.library-fullscreen .main-content{margin-left:0!important;margin-bottom:0!important;height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.library-fullscreen .center-content{height:100vh!important;max-height:100vh!important;transition:all .3s ease}@media (min-width: 769px){.library-main{padding:0}.library-content-wrapper{max-width:800px;margin:0 auto;padding-bottom:40px;padding-left:20px;padding-right:20px}body.library-fullscreen .left-sidebar,body.library-fullscreen .mobile-header,body.library-fullscreen .mobile-header-container{opacity:1;visibility:visible;pointer-events:auto;transform:none}}@media (max-width: 768px){.library-main{padding:0;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);height:100vh;max-height:100vh;margin-bottom:0}.library-content-wrapper{padding:64px 0 80px}body.library-fullscreen .mobile-header,body.library-fullscreen .mobile-header-container{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-100%);transition:all .3s ease}body.library-fullscreen .left-sidebar{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(100%);transition:all .3s ease}body.library-fullscreen .main-content{margin-top:0!important;margin-bottom:0!important;height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.library-fullscreen .center-content{height:100vh!important;max-height:100vh!important;transition:all .3s ease}body.library-fullscreen .library-main{height:100vh!important;max-height:100vh!important;overflow:hidden!important;margin-bottom:0!important}}@media (max-width: 480px){.library-main{height:100vh;max-height:100vh;margin-bottom:0}.library-content-wrapper{padding-top:60px;padding-bottom:70px}}@media (max-width: 768px){.mobile-header,.mobile-header-container,.left-sidebar{transition:all .3s ease}}.league-info-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:var(--ds-z-modal, 1000);animation:fadeIn var(--ds-transition-slow, .3s) ease}.league-info-modal-content{background:var(--ds-color-surface, #ffffff);border-radius:var(--ds-radius-lg, 12px);max-width:500px;width:90%;max-height:85vh;overflow-y:auto;position:relative;animation:slideUp var(--ds-transition-slow, .3s) ease;box-shadow:var(--ds-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, .1));scrollbar-width:none;-ms-overflow-style:none}.league-info-modal-content::-webkit-scrollbar{display:none}.league-info-modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--ds-space-6, 24px) var(--ds-space-6, 24px) var(--ds-space-4, 16px) var(--ds-space-6, 24px);border-bottom:2px solid var(--ds-color-border, #e5e7eb);position:sticky;top:0;background:var(--ds-color-surface, #ffffff);border-radius:var(--ds-radius-lg, 12px) var(--ds-radius-lg, 12px) 0 0;z-index:10}.league-info-modal-title{font-size:var(--ds-font-xl, 20px);font-weight:var(--ds-font-extrabold, 800);color:var(--ds-color-text-primary, #1f2937);margin:0}.league-info-close-button{background:none;border:none;font-size:var(--ds-font-2xl, 24px);cursor:pointer;color:var(--ds-color-text-secondary, #6b7280);padding:var(--ds-space-1, 4px);border-radius:var(--ds-radius-full, 50%);width:var(--ds-avatar-md, 40px);height:var(--ds-avatar-md, 40px);display:flex;align-items:center;justify-content:center;transition:var(--ds-transition-normal, .2s);min-height:var(--ds-touch-target, 44px)}.league-info-close-button:hover{background:var(--ds-color-border-light, #f3f4f6);color:var(--ds-color-text-primary, #1f2937)}.league-info-modal-body{padding:var(--ds-space-5, 20px)}.intro-section{text-align:center;margin-bottom:var(--ds-space-6, 24px);padding:var(--ds-space-4, 16px);background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-radius:var(--ds-radius-md, 8px);position:relative;z-index:1}.intro-icon{font-size:var(--ds-font-3xl, 30px);margin-bottom:var(--ds-space-2, 8px);position:relative;z-index:1}.intro-text{font-size:var(--ds-font-sm, 14px);color:var(--ds-color-text-secondary, #6b7280);line-height:1.6;margin:0}.section-title{font-size:var(--ds-font-base, 16px);font-weight:var(--ds-font-bold, 700);color:var(--ds-color-text-primary, #1f2937);margin:0 0 var(--ds-space-3, 12px) 0;display:flex;align-items:center;gap:var(--ds-space-2, 8px)}.leagues-grid{margin-bottom:var(--ds-space-6, 24px)}.league-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:var(--ds-space-2, 8px)}.league-item{color:var(--ds-color-text-primary, #1f2937);padding:var(--ds-space-2, 8px) var(--ds-space-1, 4px);background:var(--ds-color-surface-hover, #f9fafb);border-radius:var(--ds-radius-sm, 6px);font-size:var(--ds-font-xs, 12px);font-weight:var(--ds-font-semibold, 600);text-align:center;border-left:3px solid var(--ds-color-border, #e5e7eb)}.league-item.beginner{border-left-color:#90ee90}.league-item.bronze{border-left-color:#cd7f32}.league-item.silver{border-left-color:silver}.league-item.gold{border-left-color:var(--ds-color-accent, #f59e0b)}.league-item.crystal{border-left-color:#0ea5e9}.league-item.grandmaster{border-left-color:#8b5cf6}.league-item.conquer{border-left-color:var(--ds-color-error, #ef4444)}.zones-section{margin-bottom:var(--ds-space-6, 24px)}.zone-cards{display:flex;flex-direction:column;gap:var(--ds-space-3, 12px)}.zone-card{padding:var(--ds-space-3, 12px);border-radius:var(--ds-radius-sm, 6px);border-left:4px solid var(--ds-color-border, #e5e7eb)}.zone-card.promotion{background:#f0f9f0;border-left-color:var(--ds-color-success, #10b981)}.zone-card.safe{background:#f0f8ff;border-left-color:var(--ds-color-secondary, #3b82f6)}.zone-card.relegation{background:#fff5f5;border-left-color:var(--ds-color-error, #ef4444)}.zone-header{display:flex;align-items:center;gap:var(--ds-space-2, 8px);margin-bottom:var(--ds-space-2, 8px)}.zone-icon{font-size:var(--ds-font-base, 16px)}.zone-title{font-size:var(--ds-font-sm, 14px);font-weight:var(--ds-font-bold, 700);color:var(--ds-color-text-primary, #1f2937);flex:1}.zone-rank{font-size:var(--ds-font-xs, 12px);font-weight:var(--ds-font-semibold, 600);color:var(--ds-color-text-secondary, #6b7280);background:#ffffffb3;padding:var(--ds-space-1, 4px) var(--ds-space-2, 8px);border-radius:var(--ds-radius-sm, 6px)}.zone-benefits{margin:0;padding-left:var(--ds-space-4, 16px)}.zone-benefits li{font-size:var(--ds-font-xs, 12px);color:var(--ds-color-text-secondary, #6b7280);line-height:1.4;margin-bottom:var(--ds-space-1, 4px)}.special-rules-section{margin-bottom:var(--ds-space-6, 24px);padding:var(--ds-space-4, 16px);background:#f0f9f0;border-radius:var(--ds-radius-md, 8px);border-left:4px solid #90ee90}.special-rules-content{display:flex;flex-direction:column;gap:var(--ds-space-2, 8px)}.special-rule{display:flex;align-items:center;gap:var(--ds-space-2, 8px);font-size:var(--ds-font-xs, 12px);color:var(--ds-color-text-secondary, #6b7280)}.rule-icon{font-size:var(--ds-font-sm, 14px)}.rule-text{flex:1}.xp-system-section{margin-bottom:var(--ds-space-6, 24px);padding:var(--ds-space-4, 16px);background:#fff8f0;border-radius:var(--ds-radius-md, 8px);border-left:4px solid var(--ds-color-accent, #f59e0b)}.xp-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--ds-space-3, 12px);margin-bottom:var(--ds-space-3, 12px)}.xp-info-item{display:flex;align-items:center;gap:var(--ds-space-2, 8px);background:#fffc;padding:var(--ds-space-2, 8px);border-radius:var(--ds-radius-sm, 6px)}.xp-icon{font-size:var(--ds-font-base, 16px)}.xp-title{font-size:var(--ds-font-xs, 12px);font-weight:var(--ds-font-semibold, 600);color:var(--ds-color-text-primary, #1f2937)}.xp-amount{font-size:var(--ds-font-xs, 12px);font-weight:var(--ds-font-bold, 700);color:var(--ds-color-accent, #f59e0b)}.xp-note{text-align:center;color:var(--ds-color-text-secondary, #6b7280);font-style:italic}.ranking-system-section{margin-bottom:var(--ds-space-6, 24px);padding:var(--ds-space-4, 16px);background:#f0f8ff;border-radius:var(--ds-radius-md, 8px);border-left:4px solid var(--ds-color-secondary, #3b82f6)}.ranking-info{display:flex;flex-direction:column;gap:var(--ds-space-3, 12px)}.ranking-item{display:flex;align-items:flex-start;gap:var(--ds-space-2, 8px);background:#fffc;padding:var(--ds-space-2, 8px);border-radius:var(--ds-radius-sm, 6px)}.ranking-icon{font-size:var(--ds-font-base, 16px)}.ranking-title{font-size:var(--ds-font-xs, 12px);font-weight:var(--ds-font-semibold, 600);color:var(--ds-color-text-primary, #1f2937);margin-bottom:var(--ds-space-1, 4px)}.ranking-desc{font-size:var(--ds-font-xs, 12px);color:var(--ds-color-text-secondary, #6b7280);line-height:1.4}.schedule-section{margin-bottom:var(--ds-space-6, 24px)}.schedule-timeline{display:flex;flex-direction:column;gap:var(--ds-space-2, 8px)}.schedule-item{display:flex;align-items:center;gap:var(--ds-space-3, 12px);padding:var(--ds-space-2, 8px);background:var(--ds-color-surface-hover, #f9fafb);border-radius:var(--ds-radius-sm, 6px);border-left:3px solid var(--ds-color-secondary, #3b82f6)}.schedule-day{font-size:var(--ds-font-xs, 12px);font-weight:var(--ds-font-bold, 700);color:var(--ds-color-secondary, #3b82f6);min-width:100px}.schedule-event{font-size:var(--ds-font-xs, 12px);color:var(--ds-color-text-secondary, #6b7280);flex:1}.participation-section{margin-bottom:var(--ds-space-6, 24px);padding:var(--ds-space-4, 16px);background:#f5f3ff;border-radius:var(--ds-radius-md, 8px);border-left:4px solid #8b5cf6}.participation-steps{display:flex;flex-direction:column;gap:var(--ds-space-2, 8px)}.step-item{display:flex;align-items:center;gap:var(--ds-space-3, 12px);background:#fffc;padding:var(--ds-space-2, 8px);border-radius:var(--ds-radius-sm, 6px)}.step-number{width:24px;height:24px;border-radius:50%;background:#8b5cf6;color:#fff;font-size:var(--ds-font-xs, 12px);font-weight:var(--ds-font-bold, 700);display:flex;align-items:center;justify-content:center;flex-shrink:0}.step-text{font-size:var(--ds-font-xs, 12px);color:var(--ds-color-text-secondary, #6b7280);flex:1}.tips-section{padding:var(--ds-space-4, 16px);background:#f5f3ff;border-radius:var(--ds-radius-md, 8px);border-left:4px solid #7c3aed}.tips-header{display:flex;align-items:center;gap:var(--ds-space-2, 8px);margin-bottom:var(--ds-space-3, 12px)}.tips-icon{font-size:var(--ds-font-xl, 20px)}.tips-grid{display:flex;flex-direction:column;gap:var(--ds-space-2, 8px)}.tip-item{font-size:var(--ds-font-xs, 12px);color:var(--ds-color-text-secondary, #6b7280);background:#fffc;padding:var(--ds-space-2, 8px) var(--ds-space-3, 12px);border-radius:var(--ds-radius-sm, 6px);font-weight:var(--ds-font-medium, 500);line-height:1.4}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(var(--ds-space-5, 20px))}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.league-info-modal-content{width:95%;max-height:90vh}.league-info-modal-header{padding:var(--ds-space-5, 20px) var(--ds-space-5, 20px) var(--ds-space-3, 12px) var(--ds-space-5, 20px)}.league-info-modal-title{font-size:var(--ds-font-lg, 18px)}.league-info-modal-body{padding:var(--ds-space-5, 20px)}.intro-section{margin-bottom:var(--ds-space-5, 20px)}.zone-cards{gap:var(--ds-space-3, 12px)}.zone-card{padding:var(--ds-space-3, 12px)}.league-items{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:var(--ds-space-2, 8px)}.xp-info-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.schedule-item{flex-direction:column;align-items:flex-start;gap:var(--ds-space-1, 4px)}.schedule-day{min-width:auto}}@media (max-width: 480px){.league-info-modal-content{width:95%;max-height:92vh}.league-info-modal-header{padding:var(--ds-space-4, 16px) var(--ds-space-4, 16px) var(--ds-space-2, 8px) var(--ds-space-4, 16px)}.league-info-modal-title{font-size:var(--ds-font-base, 16px)}.league-info-modal-body{padding:var(--ds-space-4, 16px)}.league-info-close-button{width:var(--ds-avatar-sm, 32px);height:var(--ds-avatar-sm, 32px);font-size:var(--ds-font-xl, 20px)}.intro-icon{font-size:var(--ds-font-2xl, 24px)}.tips-icon{font-size:var(--ds-font-lg, 18px)}.zone-icon{font-size:var(--ds-font-sm, 14px)}.league-items{grid-template-columns:repeat(auto-fit,minmax(70px,1fr))}.xp-info-grid{grid-template-columns:1fr}}:root{--primary-coral: #FF6B6B;--secondary-orange: #FF8C42;--accent-yellow: #FFD93D;--bg-cream: #FFE4B5;--bg-peach: #FFDAB9;--bg-pink: #FFB6C1;--card-ivory: #FFF8DC;--card-snow: #FFFAF0;--text-primary: #FF6B6B;--text-secondary: #FF8C42;--text-muted: #666666}.league-header{animation:slideIn .6s ease-out;flex-shrink:0;overflow:visible}.league-badges-container{background:transparent;padding:32px 24px;position:relative;overflow:visible}.league-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding:8px 4px;min-height:48px}.league-title{font-size:20px;font-weight:700;color:var(--text-primary);text-shadow:2px 2px 0px var(--bg-cream)}.friends-avatars{display:flex;align-items:center;gap:4px}.friend-avatar{width:36px;height:36px;border-radius:50%;border:2px solid #ffffff;margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:18px;position:relative;z-index:1}.friend-avatar:first-child{margin-left:0}.friend-avatar.pink{background:linear-gradient(135deg,#ff69b4,#ff1493)}.friend-avatar.purple{background:linear-gradient(135deg,#8b5cf6,#a855f7)}.friend-avatar.orange{background:linear-gradient(135deg,#ff8c00,orange)}.friends-count{background:var(--bg-peach);color:var(--text-secondary);font-size:14px;font-weight:700;padding:8px 12px;border-radius:8px;margin-left:8px}.league-badges{display:flex;gap:20px;position:relative;overflow-x:auto;overflow-y:visible;scroll-behavior:smooth;padding:32px 200px;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;-webkit-user-select:none;user-select:none;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.league-badges::-webkit-scrollbar{display:none}.league-badges:active{cursor:grabbing}.league-badge{width:90px;height:90px;display:flex;align-items:center;justify-content:center;font-size:40px;position:relative;transition:all .4s cubic-bezier(.34,1.56,.64,1);flex-shrink:0;cursor:pointer;filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));border-radius:16px;scroll-snap-align:center;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;background:transparent}.league-badge-image{width:100%;height:100%;object-fit:contain;border-radius:16px;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}.league-badge.beginner,.league-badge.bronze,.league-badge.silver,.league-badge.gold,.league-badge.crystal,.league-badge.grandmaster,.league-badge.conquer{background:transparent}.league-badge.current{transform:scale(1.45);z-index:100;position:relative}.league-badge:not(.current){opacity:.7;transform:scale(.85)}.league-badge:hover:not(.current){transform:scale(.95);opacity:.9}.league-info{text-align:center;position:relative;z-index:5;margin-top:16px}.league-title-with-help{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:4px;position:relative}.league-title-with-help h2{font-size:30px;font-weight:800;color:var(--text-primary);margin:0;text-shadow:2px 2px 0px var(--bg-cream)}.league-actions{display:flex;align-items:center;gap:8px}.join-league-button{background:linear-gradient(135deg,var(--primary-coral),var(--secondary-orange));color:#fff;border:none;border-radius:20px;padding:8px 16px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #ff6b6b4d}.join-league-button:hover{transform:translateY(-2px);box-shadow:0 4px 12px #ff6b6b66}.join-league-button:active{transform:translateY(0)}.participant-count{color:var(--text-muted);font-size:12px;margin-top:4px}.time-info{font-size:14px;font-weight:600;color:var(--text-primary)}.end-time-info{font-size:12px;color:var(--text-muted);margin-top:2px}.help-button{width:24px!important;height:24px!important;border-radius:50%;background:var(--bg-peach);border:none;color:var(--text-secondary);font-size:14px!important;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;flex-shrink:0;min-width:24px;min-height:24px;position:static}.help-button:hover{background:var(--text-secondary);color:#fff;transform:scale(1.1)}.league-subtitle{color:var(--text-muted);font-size:14px;font-weight:500}@media (max-width: 768px){.league-badges-container{padding:24px 20px}.league-header-top{min-height:40px;padding:4px}.league-title{font-size:18px}.league-badges{padding:24px 150px}.league-info h2{font-size:24px}.help-button{width:20px!important;height:20px!important;font-size:12px!important;min-width:20px;min-height:20px}.friend-avatar{width:32px;height:32px;font-size:16px}.friends-count{font-size:12px;padding:4px 8px}.league-header-top{flex-direction:row;justify-content:space-between;align-items:center;gap:8px}}@media (max-width: 480px){.league-badges-container{padding:20px 16px}.league-header-top{min-height:32px;padding:4px}.league-title{font-size:16px}.league-badges{padding:20px 120px}.league-info h2{font-size:20px}.help-button{width:16px!important;height:16px!important;font-size:11px!important;min-width:16px;min-height:16px}.friend-avatar{width:28px;height:28px;font-size:14px}.friends-count{font-size:11px;padding:4px 8px}}.zone-filter{display:flex;background:linear-gradient(145deg,#ffe4b5,#ffdab9);border-radius:15px;padding:5px;margin-bottom:20px;position:relative;overflow:hidden}.zone-btn{flex:1;padding:10px 8px;border:none;background:transparent;border-radius:10px;font-weight:700;color:#ff6b6b;cursor:pointer;transition:all .3s ease;font-size:13px;position:relative;z-index:1}.zone-btn.active{background:#ff6b6b;color:#fff;box-shadow:0 4px 10px #ff6b6b4d}.zone-indicator{position:absolute;top:5px;bottom:5px;background:#ff6b6b;border-radius:10px;transition:all .3s ease;box-shadow:0 4px 10px #ff6b6b4d;z-index:0}@media (max-width: 768px){.zone-btn{font-size:11px;padding:8px 4px}}@media (max-width: 480px){.zone-filter{gap:5px;padding:8px}.zone-btn{border-radius:8px;padding:8px;font-size:12px}.zone-indicator{display:none}}.ranking-section{flex:1;background:#fff;border-radius:16px;margin:0 20px 20px;box-shadow:0 4px 12px #0000001a;overflow:hidden;display:flex;flex-direction:column}.zone-filter-container{flex-shrink:0;padding:20px 20px 0;background:#fff;border-bottom:1px solid #f0f0f0;z-index:10}.ranking-content{flex:1;overflow-y:auto;padding:20px;scrollbar-width:none;-ms-overflow-style:none}.ranking-content::-webkit-scrollbar{display:none}.ranking-list{display:flex;flex-direction:column;gap:8px}.ranking-item{display:flex;align-items:center;padding:12px 16px;background:#f8f9fa;border-radius:10px;transition:all .3s ease;border-left:4px solid transparent}.ranking-item:hover{background:#e9ecef;transform:translate(2px)}.ranking-item.current-user{background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;border-left-color:#fff}.ranking-item.zone-promotion{border-left-color:#28a745}.ranking-item.zone-safe{border-left-color:#007bff}.ranking-item.zone-relegation{border-left-color:#dc3545}.rank-number{font-size:18px;font-weight:700;min-width:50px;text-align:center}.participant-avatar{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;margin:0 12px}.ranking-item.current-user .participant-avatar{background:#ffffffe6}.participant-info{flex:1}.participant-name{font-size:16px;font-weight:700;margin-bottom:2px;display:flex;align-items:center;gap:8px}.current-badge{background:#ffffff4d;color:#fff;padding:2px 8px;border-radius:12px;font-size:10px;font-weight:700}.participant-zone{font-size:12px;color:#666}.ranking-item.current-user .participant-zone{color:#fffc}.participant-stats{text-align:right}.weekly-xp{font-size:16px;font-weight:700;margin-bottom:2px}.total-xp{font-size:12px;color:#666}.ranking-item.current-user .total-xp{color:#fffc}.login-required-state{text-align:center;padding:60px 20px;color:#666;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:300px}.lock-icon{font-size:64px;margin-bottom:20px;color:#ff6b6b}.login-required-state h3{font-size:24px;color:#ff6b6b;margin-bottom:12px;font-weight:700}.login-required-state p{font-size:16px;color:#666;margin-bottom:24px}.empty-state{text-align:center;padding:40px 20px;color:#666;width:100%;box-sizing:border-box}.empty-icon{font-size:48px;margin-bottom:16px}.empty-state h3{font-size:20px;color:#333;margin-bottom:8px}.empty-state p{color:#666}.loading-container{text-align:center;padding:40px 20px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.loading-spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #FF6B6B;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 16px}.error-container{text-align:center;padding:40px 20px;width:100%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.error-message{background:#fff5f5;border:2px solid #feb2b2;border-radius:8px;padding:24px;color:#c53030}.error-message h3{margin-bottom:8px}.error-message p{margin-bottom:16px}.login-links{display:flex;gap:12px;justify-content:center}.login-btn{padding:8px 16px;border-radius:6px;text-decoration:none;font-weight:700;font-size:14px}.login-btn.google{background:#4285f4;color:#fff}.login-btn.kakao{background:#fee500;color:#3c1e1e}.login-btn:hover{opacity:.9}@media (max-width: 768px){.ranking-section{margin:0 10px 20px}.zone-filter-container{padding:16px 16px 0}.ranking-content{padding:16px}.ranking-item{padding:10px 12px}.rank-number{font-size:16px;min-width:40px}.participant-avatar{width:32px;height:32px;font-size:20px;margin:0 8px}.participant-name,.weekly-xp{font-size:14px}.total-xp{font-size:11px}}@media (max-width: 480px){.zone-filter-container{padding:12px 12px 0}.ranking-content{padding:12px}.ranking-item{flex-wrap:wrap;gap:8px}}.locked-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;color:var(--text-secondary);background:linear-gradient(135deg,var(--bg-secondary) 0%,var(--bg-tertiary) 100%);border-radius:12px;margin:20px;border:2px dashed var(--border-color)}.locked-icon{font-size:64px;margin-bottom:20px;opacity:.8;animation:pulse 2s infinite}.locked-state h3{font-size:20px;font-weight:700;margin-bottom:12px;color:var(--text-primary)}.locked-state p{font-size:16px;line-height:1.6;max-width:400px;margin-bottom:24px}.locked-action{margin-top:8px}.start-lesson-btn{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;border:none;padding:12px 24px;border-radius:25px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #00000026}.start-lesson-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0003}.start-lesson-btn:active{transform:translateY(0)}@keyframes pulse{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@media (min-width: 769px){.leaderboard-main{width:500px!important;min-width:500px!important;max-width:500px!important;margin:40px auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important;padding:0;background-color:transparent;display:flex;flex-direction:column;overflow:hidden;position:relative}}@media (min-width: 481px) and (max-width: 768px){.leaderboard-main{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important;padding:0;background-color:transparent;display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative}}@media (max-width: 480px){.leaderboard-main{width:100%;max-width:800px;margin:0 auto;padding:0;background-color:transparent;display:flex;flex-direction:column;height:100vh;overflow:hidden;position:relative}}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes shimmer{0%{left:-100%}to{left:100%}}@media (max-width: 768px){.leaderboard-main{padding:0;overflow:hidden;height:calc(100vh - 20px)}}@media (max-width: 480px){.leaderboard-main{padding:0;overflow:hidden}}@keyframes fadeInOut{0%,to{opacity:.5}50%{opacity:.8}}.my-profile-header{background:linear-gradient(135deg,#ff6b6b,#ff8c42,#ffd93d);color:#fff;padding:25px;position:relative;overflow:hidden}.my-profile-header:before{content:"🐾";position:absolute;top:10px;right:10px;font-size:20px;opacity:.3;animation:fadeInOut 3s ease-in-out infinite}.my-profile-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.my-profile-header-title{font-size:22px;font-weight:700}.my-settings-btn{background:linear-gradient(135deg,#ff8c42,#ffd93d);border:none;color:#fff;width:45px;height:45px;border-radius:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px #ff8c424d;font-size:18px}.my-settings-btn:hover{transform:scale(1.1) rotate(10deg);box-shadow:0 6px 20px #ff8c4280}.my-profile-section{display:flex;align-items:center;gap:20px}.my-profile-avatar{width:60px;height:60px;border-radius:20px;background:linear-gradient(135deg,#ffe4b5,#ffdab9);border:3px solid #FFD93D;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 4px 15px #ff8c424d}.my-profile-details-wrapper{display:flex;flex-direction:column;gap:4px}.my-profile-name{font-size:20px;font-weight:700;margin:0;padding:0;line-height:1.2;color:#fff}.my-profile-info{opacity:.9;font-size:16px;margin:0;padding:0;line-height:1.3;color:#fff}.my-profile-badge{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;padding:6px 12px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:0 2px 8px #ff8c4266;margin-left:10px;display:inline-block}.my-stats-section{background:#ffffffe6}.my-section-header{display:flex;align-items:center;gap:8px;position:relative}.my-section-help-button{width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#ff8c42,#ffd93d);border:2px solid white;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #ff8c424d;padding:0;flex-shrink:0}.my-section-help-button:hover{background:linear-gradient(135deg,#ffd93d,#ff8c42);transform:scale(1.1);box-shadow:0 3px 10px #ff8c4266}.my-section-help-button:active{transform:scale(.95)}.my-stats-container{padding:20px}.my-stats-tabs{display:flex;background:linear-gradient(145deg,#ffe4b5,#ffdab9);border-radius:20px;padding:3px;margin-bottom:20px;border:2px solid #FF8C42}.my-stats-tab{flex:1;padding:8px 12px;background:transparent;border:none;border-radius:16px;font-size:13px;font-weight:500;color:#ff6b6b;cursor:pointer;transition:all .3s ease}.my-stats-tab.active{background:#ffffffe6;color:#ff6b6b;box-shadow:0 2px 8px #ff6b6b4d;font-weight:700}.my-stats-content{text-align:center}.my-stats-chart{height:300px;background:linear-gradient(145deg,#fff8dc,#fffaf0);border:3px solid #FF8C42;border-radius:15px;position:relative;margin-bottom:15px;padding:20px;box-shadow:inset 0 2px 5px #0000001a}.no-data{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#ff6b6b;font-weight:700}.no-data span{font-size:48px;margin-bottom:10px}.no-data p{font-size:16px;margin:5px 0}.no-data small{font-size:12px;color:#ff8c42;font-weight:400}.my-stats-skeleton{padding:20px}@keyframes skeleton-pulse{0%{background-color:#f0f0f0}50%{background-color:#e0e0e0}to{background-color:#f0f0f0}}.skeleton-chart{margin-bottom:20px}.skeleton-chart-area{width:100%;height:250px;background:#f0f0f0;border-radius:8px;animation:skeleton-pulse 1.5s ease-in-out infinite;margin-bottom:10px}.skeleton-chart-labels{display:flex;justify-content:space-between;padding:0 20px}.skeleton-label{width:30px;height:12px;background:#f0f0f0;border-radius:4px;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-date-range{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:20px}.skeleton-date{width:60px;height:16px;background:#f0f0f0;border-radius:4px;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-tilde{width:8px;height:16px;background:#f0f0f0;border-radius:4px;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.skeleton-summary-item{display:flex;align-items:center;gap:12px;padding:12px;background:#ffffffb3;border-radius:8px}.skeleton-dot{width:12px;height:12px;border-radius:50%;background:#f0f0f0;animation:skeleton-pulse 1.5s ease-in-out infinite;flex-shrink:0}.skeleton-info{flex:1;display:flex;flex-direction:column;gap:6px}.skeleton-info .skeleton-label{width:40px;height:14px;background:#f0f0f0;border-radius:4px;animation:skeleton-pulse 1.5s ease-in-out infinite}.skeleton-info .skeleton-value{width:80px;height:12px;background:#f0f0f0;border-radius:4px;animation:skeleton-pulse 1.5s ease-in-out infinite}.my-stats-error{display:flex;align-items:center;justify-content:center;height:260px;color:#e74c3c;font-size:14px;background:#e74c3c1a;border-radius:10px;margin-bottom:15px}.my-date-range{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#ff8c42;margin-bottom:20px;padding:8px 12px;background:#ff8c421a;border-radius:8px}.my-stats-summary-wrapper{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.my-stats-summary-card{display:flex;align-items:center;padding:12px;background:#fffc;border-radius:10px;border:1px solid rgba(255,140,66,.2);transition:all .2s ease}.my-stats-summary-card:hover{background:#fffffff2;transform:translateY(-1px);box-shadow:0 2px 8px #ff6b6b33}.my-stats-summary-dot{width:12px;height:12px;border-radius:50%;margin-right:8px;box-shadow:0 1px 3px #0003;flex-shrink:0}.my-stats-summary-info{display:flex;flex-direction:column;align-items:flex-start;flex:1;gap:2px}.my-stats-summary-label{font-size:11px;color:#ff8c42;font-weight:600;margin:0;padding:0;line-height:1.2}.my-stats-summary-value{font-size:14px;color:#ff6b6b;font-weight:700;margin:0;padding:0;line-height:1.3}@media (max-width: 480px){.my-stats-container{padding:15px}.my-stats-chart{height:250px;padding:15px}.my-stats-summary-wrapper{grid-template-columns:repeat(2,1fr);gap:8px}.my-stats-summary-card{padding:10px}.my-date-range{font-size:11px}.my-stats-summary-label{font-size:10px}.my-stats-summary-value{font-size:13px}.no-data span{font-size:36px}.no-data p{font-size:14px}}.my-menu-section,.my-menu-list{background:#ffffffe6}.my-menu-item{display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,228,181,.5);cursor:pointer;transition:all .3s ease;background:#ffffffe6}.my-menu-item:first-child{background-image:url(/assets/FireStreak-Bx-KQYnk.png);background-size:cover;background-position:center;color:#fff}.my-menu-item:first-child .my-menu-title{color:#fff}.my-menu-item:first-child .my-menu-subtitle{color:#ffffffe6}.my-menu-item:first-child .my-menu-arrow{color:#fff}.my-menu-item:hover{background:linear-gradient(145deg,#ffe4b5,#ffdab9);transform:translate(5px)}.my-menu-item:first-child:hover{background-image:url(/assets/FireStreak-Bx-KQYnk.png);background-size:cover;background-position:center;filter:brightness(1.1)}.my-menu-item:last-child{border-bottom:none}.my-menu-icon{font-size:20px;margin-right:15px;width:24px;text-align:center}.my-menu-content{flex:1}.my-menu-title{font-size:15px;font-weight:700;margin-bottom:2px;color:#ff6b6b}.my-menu-subtitle{font-size:13px;color:#ff8c42}.my-menu-arrow{color:#ff8c42;font-size:16px;font-weight:700}.my-community-section{background:#ffffffe6;padding:20px}.my-community-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px}.my-community-item{display:flex;flex-direction:column;align-items:center;padding:15px 10px;background:linear-gradient(145deg,#ffe4b5,#ffdab9);border:2px solid #FF8C42;border-radius:15px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 10px #0000001a}.my-community-item:hover{background:linear-gradient(145deg,#ffdab9,#ffb6c1);transform:translateY(-2px);box-shadow:0 6px 15px #ff8c424d}.my-community-icon{font-size:24px;margin-bottom:8px}.my-community-name{font-size:13px;font-weight:700;color:#ff6b6b}.message-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:16px}.message-modal-content{background:#fff;border-radius:12px;width:85%;max-width:350px;box-shadow:0 10px 30px #0000004d;overflow:hidden;animation:modalSlideIn .3s ease}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-30px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.message-modal-header{padding:20px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:8px}.message-modal-header.info{background:#007bff}.message-modal-header.success{background:#28a745}.message-modal-header.warning{background:#ffc107;color:#333}.message-modal-header.error{background:#dc3545}.message-modal-header.confirm{background:#6c757d}.message-modal-icon{font-size:32px}.message-modal-title{margin:0;font-size:18px;font-weight:600}.message-modal-body{padding:20px;text-align:center}.message-modal-message{margin:0;font-size:14px;line-height:1.5;color:#333}.message-modal-footer{padding:20px;display:flex;justify-content:center;gap:12px;border-top:1px solid #eee}.message-btn-ok{background:#007bff;color:#fff;border:none;padding:10px 24px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:80px}.message-btn-ok:hover{background:#0056b3;transform:translateY(-1px)}.message-btn-confirm{background:#dc3545;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;flex:1}.message-btn-confirm:hover{background:#c82333;transform:translateY(-1px)}.message-btn-cancel{background:#6c757d;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;flex:1}.message-btn-cancel:hover{background:#545b62;transform:translateY(-1px)}@media (max-width: 480px){.message-modal-content{width:95%;margin:20px}.message-modal-header,.message-modal-body{padding:16px}.message-modal-footer{padding:16px;flex-direction:column}.message-btn-confirm,.message-btn-cancel{flex:none}.message-modal-icon{font-size:28px}.message-modal-title{font-size:16px}.message-modal-message{font-size:13px}}.account-management{padding:14px;max-height:60vh;overflow-y:auto}.account-section{margin-bottom:21px;padding-bottom:14px;border-bottom:1px solid #f0f0f0}.account-section:last-child{border-bottom:none;margin-bottom:0}.account-section h3{font-size:13px;font-weight:600;color:#2c3e50;margin-bottom:11px}.account-info{background:#f8f9fa;border-radius:6px;padding:11px}.info-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:nowrap}.info-label{font-weight:500;color:#666;font-size:10px}.info-value{font-weight:600;color:#2c3e50;font-size:10px}.nickname-section{margin-top:7px}.nickname-display{display:flex;justify-content:space-between;align-items:center;padding:8px 11px;background:#f8f9fa;border-radius:6px}.current-nickname{font-size:10px;color:#2c3e50}.nickname-notice{margin-top:8px;padding:8px;background:#f8f9fa;border-radius:4px}.notice-text{margin:0;font-size:8px;color:#dc3545;line-height:1.4}.nickname-edit{display:flex;flex-direction:column;gap:8px}.nickname-input{padding:8px 11px;border:1px solid #e9ecef;border-radius:6px;font-size:10px;transition:border-color .2s ease}.nickname-input:focus{outline:none;border-color:#007bff}.nickname-buttons{display:flex;gap:6px}.account-btn-primary{background:#007bff;color:#fff;border:none;padding:4px 8px;border-radius:3px;font-size:8px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:42px;height:22px}.account-btn-primary:hover:not(:disabled){background:#0056b3}.account-btn-primary:disabled{background:#6c757d;cursor:not-allowed}.account-btn-secondary{background:#6c757d;color:#fff;border:none;padding:4px 8px;border-radius:3px;font-size:8px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:42px;height:22px}.account-btn-secondary:hover{background:#545b62}.account-btn-edit{background:#28a745;color:#fff;border:none;padding:4px 8px;border-radius:3px;font-size:8px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:42px;height:22px}.account-btn-edit:hover{background:#218838}.delete-button-section{display:flex;justify-content:flex-start;margin-top:14px;padding:14px;border-top:1px solid #f0f0f0;background:#f8f9fa;border-radius:6px}.account-btn-show-delete{background:#6c757d;color:#fff;border:none;padding:4px 7px;border-radius:3px;font-size:8px;font-weight:400;cursor:pointer;transition:all .2s ease}.account-btn-show-delete:hover{background:#dc3545;transform:translateY(-1px)}.danger-section{border:1px solid #dc3545;border-radius:6px;padding:14px;background:#fff5f5;animation:slideDown .3s ease-out}.danger-section h3{color:#dc3545;margin-bottom:7px}.warning-text{color:#721c24;font-size:10px;margin-bottom:14px;padding:8px;background:#f8d7da;border-radius:4px;border:1px solid #f5c6cb}.delete-confirmation{display:flex;flex-direction:column;gap:8px}.delete-confirmation label{font-size:10px;color:#721c24;font-weight:500}.confirm-input{padding:8px 11px;border:1px solid #dc3545;border-radius:6px;font-size:10px;transition:border-color .2s ease}.confirm-input:focus{outline:none;border-color:#bd2130}.account-btn-danger{background:#dc3545;color:#fff;border:none;padding:6px 11px;border-radius:3px;font-size:8px;font-weight:500;cursor:pointer;transition:all .2s ease;flex:1}.account-btn-danger:hover:not(:disabled){background:#c82333}.account-btn-danger:disabled{background:#6c757d;cursor:not-allowed;opacity:.6}.delete-buttons{display:flex;gap:8px;margin-top:11px}.account-btn-cancel{background:#6c757d;color:#fff;border:none;padding:6px 11px;border-radius:3px;font-size:8px;font-weight:500;cursor:pointer;transition:all .2s ease;flex:1}.account-btn-cancel:hover{background:#545b62}@media (max-width: 480px){.account-management,.delete-button-section{padding:14px}.account-btn-show-delete{padding:4px 7px;font-size:8px}}.subscription-payment{padding:14px;max-width:100%;max-height:60vh;overflow-y:auto}.current-subscription{margin-bottom:21px}.current-subscription h3{font-size:13px;font-weight:600;margin-bottom:11px;color:var(--text-primary)}.subscription-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.subscription-status-card{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;padding:11px 14px;border-radius:8px;border:1px solid #e9ecef;background-color:#f8f9fa;color:#6c757d;transition:all .3s ease;cursor:default}.subscription-status-card.active{background:linear-gradient(135deg,#e8f5e8,#c8e6c9);border-color:#28a745;color:#155724;box-shadow:0 3px 11px #28a74533}.subscription-status-card .status-icon{font-size:17px;flex-shrink:0}.subscription-status-card .status-text{font-size:11px;font-weight:600}.subscription-plans h3{font-size:13px;font-weight:600;margin-bottom:14px;color:var(--text-primary)}.plans-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px;margin-bottom:21px}.plan-card{position:relative;border:1px solid #e9ecef;border-radius:11px;padding:14px 11px;cursor:pointer;transition:all .3s ease;background:#fff;display:flex;flex-direction:column;min-height:154px}.plan-card:hover{border-color:#007bff;transform:translateY(-2px);box-shadow:0 6px 18px #007bff26}.plan-card.selected{border-color:#007bff;background:linear-gradient(135deg,#f8f9ff,#e3f2fd);box-shadow:0 6px 18px #007bff33}.plan-card.popular{border-color:#ff6b35;background:linear-gradient(135deg,#fff5f0,#ffe8e0)}.popular-badge{position:absolute;top:-7px;right:7px;background:linear-gradient(135deg,#ff6b35,#ff8c42);color:#fff;padding:3px 8px;border-radius:14px;font-size:8px;font-weight:600;box-shadow:0 3px 8px #ff6b354d}.plan-header{text-align:center;margin-bottom:11px}.plan-name{font-size:13px;font-weight:700;margin-bottom:7px;color:var(--text-primary)}.plan-price{display:flex;align-items:baseline;justify-content:center;margin-bottom:6px}.price{font-size:15px;font-weight:800;color:#007bff}.price-details{display:flex;align-items:center;justify-content:center;gap:4px;font-size:8px;margin-bottom:8px}.original-price{text-decoration:line-through;color:#6c757d;font-size:8px}.discount{background:#ff6b35;color:#fff;padding:2px 6px;border-radius:7px;font-weight:600;font-size:8px}.plan-description-box{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;margin-bottom:11px;padding:0 6px}.plan-description-box p{font-size:8px;color:#6c757d;line-height:1.4;margin:0}.plan-select{text-align:center;margin-top:auto}.select-button{background:#f8f9fa;color:#6c757d;padding:6px 11px;border-radius:6px;font-weight:500;font-size:9px;transition:all .3s ease}.plan-card:hover .select-button{background:#007bff;color:#fff}.selected-indicator{background:#007bff;color:#fff;padding:6px 11px;border-radius:6px;font-weight:600;font-size:9px}.subscription-actions{text-align:center;margin-bottom:21px}.subscribe-button{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;border:none;padding:11px 28px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 11px #007bff4d}.subscribe-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px #007bff66}.subscribe-button:disabled{background:#e9ecef;color:#6c757d;cursor:not-allowed;box-shadow:none}.cancel-subscription-button{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;border:none;padding:11px 28px;border-radius:8px;font-size:11px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 3px 11px #dc35454d}.cancel-subscription-button:hover{transform:translateY(-2px);box-shadow:0 6px 18px #dc354566}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px 14px;text-align:center}.loading-spinner{width:28px;height:28px;border:3px solid #f3f3f3;border-top:3px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:14px}.loading-container p{color:#6c757d;font-size:11px;margin:0}.current-subscription-details{margin-top:11px;padding:8px;background:#007bff1a;border-radius:6px;border:1px solid rgba(0,123,255,.2)}.subscription-details-text{color:#007bff;font-size:10px;font-weight:500;margin:0;text-align:center}.subscription-info{background:#f8f9fa;border-radius:8px;overflow:hidden}.accordion-item{border-bottom:1px solid #e9ecef}.accordion-item:last-child{border-bottom:none}.accordion-header{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;cursor:pointer;transition:background-color .2s ease;-webkit-user-select:none;user-select:none}.accordion-header:hover{background-color:#007bff0d}.accordion-header h4{font-size:11px;font-weight:600;margin:0;color:var(--text-primary)}.accordion-arrow{font-size:14px;font-weight:700;color:#007bff;transition:transform .3s ease;transform:rotate(0)}.accordion-arrow.open{transform:rotate(90deg)}.accordion-content{padding:0 14px 14px;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}.info-item{display:flex;align-items:center;gap:7px;padding:8px;background:#ffffffb3;border-radius:6px;border:1px solid #e9ecef}.info-icon{font-size:14px;flex-shrink:0}.info-text{font-size:9px;color:#495057;line-height:1.4}.info-text strong{display:block;margin-bottom:1px;color:#212529}.info-list{display:flex;flex-direction:column;gap:6px}.info-list p{font-size:10px;color:#495057;line-height:1.5;margin:0;padding:0}@media (max-width: 768px){.subscription-status-grid{grid-template-columns:1fr 1fr}.subscription-status-card{padding:10px 11px}.subscription-status-card .status-icon{font-size:14px}.subscription-status-card .status-text{font-size:9px}.plans-grid{grid-template-columns:1fr 1fr 1fr;gap:7px}.plan-card{padding:11px 8px;min-height:140px}.plan-name{font-size:11px}.price{font-size:13px}.plan-description-box p{font-size:8px}.popular-badge{font-size:7px;padding:2px 7px}.info-grid{grid-template-columns:1fr}.accordion-header{padding:10px 11px}.accordion-content{padding:0 11px 11px}.info-list p{font-size:9px}}@media (prefers-color-scheme: dark){.plan-card{background:var(--bg-secondary);border-color:var(--border-color)}.plan-card:hover{border-color:#4dabf7}.plan-card.selected{background:linear-gradient(135deg,#1a1a2e,#16213e)}.subscription-status-card{background-color:#2d3748;border-color:#4a5568;color:#a0aec0}.subscription-status-card.active{background:linear-gradient(135deg,#1a3a1a,#2d5a2d)}.subscription-info{background:#2d3748}.accordion-item{border-bottom-color:#4a5568}.accordion-header:hover{background-color:#4dabf70d}}.coupon-input{padding:14px;max-height:60vh;overflow-y:auto;overflow-x:hidden}.coupon-input,.coupon-card-header,.coupons-container{overflow-x:hidden;scrollbar-width:none;-ms-overflow-style:none}.coupon-input::-webkit-scrollbar,.coupon-card-header::-webkit-scrollbar,.coupons-container::-webkit-scrollbar{display:none}.coupon-section{margin-bottom:21px;padding-bottom:14px;border-bottom:1px solid #f0f0f0}.coupon-section:last-child{border-bottom:none;margin-bottom:0}.coupon-section h3{font-size:13px;font-weight:600;color:#2c3e50;margin-bottom:11px}.coupon-form-container{background:#f8f9fa;border-radius:6px;padding:11px}.coupon-description{margin:0 0 11px;font-size:10px;color:#666;line-height:1.4}.coupon-form{width:100%}.input-group{display:flex;gap:8px;align-items:stretch}.coupon-input-field{flex:1;padding:8px 11px;border:1px solid #e9ecef;border-radius:6px;font-size:10px;transition:border-color .2s ease}.coupon-input-field:focus{outline:none;border-color:#007bff}.coupon-input-field::placeholder{color:#999}.coupon-btn-primary{background:#007bff;color:#fff;border:none;padding:8px 14px;border-radius:6px;font-size:10px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;min-width:56px}.coupon-btn-primary:hover:not(:disabled){background:#0056b3}.coupon-btn-primary:disabled{background:#6c757d;cursor:not-allowed}.coupon-btn-secondary{background:#6c757d;color:#fff;border:none;padding:6px 11px;border-radius:4px;font-size:8px;font-weight:500;cursor:pointer;transition:all .2s ease}.coupon-btn-secondary:hover:not(:disabled){background:#545b62}.coupon-btn-secondary:disabled{background:#ccc;cursor:not-allowed}.coupon-message{margin-top:11px;padding:8px 11px;border-radius:6px;font-size:10px;font-weight:500;animation:slideIn .3s ease}.coupon-message.success{background:#4caf501a;color:#4caf50;border:1px solid rgba(76,175,80,.3)}.coupon-message.error{background:#f443361a;color:#f44336;border:1px solid rgba(244,67,54,.3)}.coupon-message.info{background:#2196f31a;color:#2196f3;border:1px solid rgba(33,150,243,.3)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.coupons-container{background:#f8f9fa;border-radius:6px;padding:11px}.coupons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:11px}.coupon-card{background:#fff;border-radius:6px;border:1px solid #e9ecef;transition:all .2s ease;overflow:hidden}.coupon-card:hover{transform:translateY(-2px);box-shadow:0 3px 8px #0000001a;border-color:#007bff}.coupon-card-header{padding:11px 11px 8px;border-bottom:1px solid #f0f0f0;background:#f8f9fa;display:flex;flex-direction:column;gap:4px;position:relative}.coupon-code{font-size:11px;font-weight:700;color:#007bff;margin-bottom:3px;font-family:Courier New,monospace}.coupon-name{font-size:10px;font-weight:600;color:#2c3e50}.coupon-copy-btn{position:absolute;top:6px;right:6px;background:#007bff;color:#fff;border:none;border-radius:4px;padding:4px 8px;font-size:9px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #007bff33;white-space:nowrap}.coupon-copy-btn:hover{background:#0056b3;transform:translateY(-1px);box-shadow:0 3px 6px #007bff4d}.coupon-copy-btn:active{transform:translateY(0)}.coupon-card-body{padding:11px}.coupon-description{font-size:9px;color:#666;margin-bottom:8px;line-height:1.4}.coupon-reward{font-size:9px;font-weight:600;color:#28a745;margin-bottom:6px}.coupon-expiry{font-size:8px;color:#dc3545;margin-bottom:4px}.coupon-remaining{font-size:8px;color:#6c757d}.no-coupons{text-align:center;color:#6c757d;font-style:italic;padding:28px 14px}.history-container{background:#f8f9fa;border-radius:6px;padding:11px}.history-list{max-height:210px;overflow-y:auto}.history-item{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;align-items:center;padding:8px;background:#fff;border-radius:4px;margin-bottom:6px;border:1px solid #e9ecef;transition:all .2s ease}.history-item:hover{box-shadow:0 1px 6px #0000001a;border-color:#007bff}.history-item:last-child{margin-bottom:0}.history-coupon{display:flex;flex-direction:column;gap:3px}.history-code{font-family:Courier New,monospace;font-weight:600;color:#007bff;font-size:9px}.history-name{color:#2c3e50;font-size:8px}.history-reward{color:#28a745;font-weight:600;font-size:9px}.history-date{color:#6c757d;font-size:8px}.history-status{font-size:8px;font-weight:600}.no-history{text-align:center;color:#6c757d;font-style:italic;padding:28px 14px}@keyframes slideIn{0%{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.input-group{flex-direction:column}.coupons-grid{grid-template-columns:1fr}.history-item{grid-template-columns:1fr;gap:6px;text-align:left}.section-header{align-items:flex-start;gap:7px}}@media (max-width: 480px){.coupon-input{padding:11px}.coupon-form-container,.coupons-container,.history-container,.coupon-card-header,.coupon-card-body{padding:8px}}.terms-of-service{padding:14px;max-height:60vh;overflow-y:auto;line-height:1.6}.terms-header{text-align:center;margin-bottom:21px;padding-bottom:14px;border-bottom:1px solid #e9ecef}.terms-header h2{font-size:15px;font-weight:700;color:#2c3e50;margin-bottom:6px}.last-updated{font-size:10px;color:#6c757d;font-style:italic}.terms-content{margin-bottom:21px}.terms-section{margin-bottom:18px;padding:14px;background:#f8f9fa;border-radius:6px;border-left:3px solid #007bff}.section-title{font-size:11px;font-weight:600;color:#2c3e50;margin-bottom:8px}.section-paragraph{margin-bottom:8px;font-size:10px;text-align:justify}.terms-footer{padding-top:14px;border-top:1px solid #e9ecef;text-align:center}.contact-info{font-size:10px;color:#6c757d;background:#e7f3ff;padding:11px;border-radius:6px;border:1px solid #b6d7ff}.contact-info strong{color:#007bff}@media (max-width: 480px){.terms-of-service{padding:11px}.terms-header h2{font-size:14px}.terms-section{padding:11px;margin-bottom:14px}.section-title{font-size:11px}.section-paragraph{font-size:9px}.contact-info{font-size:9px;padding:8px}}.contact-support{padding:14px;max-height:60vh;overflow-y:auto}.contact-header{margin-bottom:18px}.contact-header h3{font-size:14px;font-weight:600;color:#2c3e50;margin-bottom:6px}.contact-header p{font-size:10px;color:#6c757d;line-height:1.5}.contact-form{display:flex;flex-direction:column;gap:14px}.form-section{display:flex;flex-direction:column;gap:7px}.form-label{font-size:10px;font-weight:600;color:#2c3e50}.category-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.category-item{display:flex;flex-direction:column;align-items:center;padding:11px 8px;border:1px solid #e9ecef;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s ease;text-align:center}.category-item:hover{border-color:#007bff;background:#f8f9fa}.category-item.selected{border-color:#007bff;background:#e7f3ff}.category-icon{font-size:17px;margin-bottom:4px}.category-label{font-size:8px;font-weight:500;color:#2c3e50}.message-textarea{width:100%;padding:8px 11px;border:1px solid #e9ecef;border-radius:6px;font-size:10px;font-family:inherit;line-height:1.5;resize:vertical;min-height:84px;transition:border-color .2s ease}.message-textarea:focus{outline:none;border-color:#007bff}.character-count{text-align:right;font-size:8px;color:#6c757d;margin-top:-4px}.user-info-preview{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:11px;font-size:9px}.info-item{display:flex;justify-content:space-between;margin-bottom:6px}.info-item:last-child{margin-bottom:0}.info-item span:first-child{font-weight:500;color:#6c757d}.info-item span:last-child{color:#2c3e50}.submit-button{background:#28a745;color:#fff;border:none;padding:10px 14px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:7px}.submit-button:hover:not(:disabled){background:#218838;transform:translateY(-1px)}.submit-button:disabled{background:#6c757d;cursor:not-allowed;transform:none}.contact-footer{margin-top:21px;padding-top:14px;border-top:1px solid #e9ecef}.contact-info{background:#e7f3ff;padding:11px;border-radius:6px;margin-bottom:14px}.contact-info h4{font-size:11px;font-weight:600;color:#2c3e50;margin-bottom:6px}.contact-info p{font-size:10px;color:#495057;margin-bottom:3px}.response-time{font-size:9px;color:#6c757d;font-style:italic}.faq-section{background:#fff3cd;padding:11px;border-radius:6px;border:1px solid #ffeaa7}.faq-section h4{font-size:11px;font-weight:600;color:#856404;margin-bottom:8px}.faq-section ul{list-style:none;padding:0;margin:0}.faq-section li{font-size:9px;margin-bottom:6px;color:#856404}.faq-section li:last-child{margin-bottom:0}@media (max-width: 480px){.contact-support{padding:11px}.category-grid{grid-template-columns:1fr}.category-item{flex-direction:row;justify-content:flex-start;text-align:left;padding:8px 11px}.category-icon{font-size:14px;margin-bottom:0;margin-right:8px}.category-label{font-size:10px}.info-item{flex-direction:column;align-items:flex-start;gap:1px}.submit-button{font-size:10px;padding:8px 11px}}.privacy-policy{padding:14px;max-height:60vh;overflow-y:auto;line-height:1.6}.privacy-header{text-align:center;margin-bottom:21px;padding-bottom:14px;border-bottom:1px solid #e9ecef}.privacy-header h2{font-size:15px;font-weight:700;color:#2c3e50;margin-bottom:6px}.last-updated{font-size:10px;color:#6c757d;font-style:italic;margin-bottom:8px}.intro-text{font-size:10px;color:#495057;background:#e7f3ff;padding:8px 11px;border-radius:6px;border:1px solid #b6d7ff}.privacy-content{margin-bottom:21px}.privacy-section{margin-bottom:18px;padding:14px;background:#f8f9fa;border-radius:6px;border-left:3px solid #28a745}.section-title{font-size:11px;font-weight:600;color:#2c3e50;margin-bottom:11px}.section-content{color:#495057}.section-paragraph{margin-bottom:11px}.section-paragraph:last-child{margin-bottom:0}.paragraph-line{margin-bottom:6px;font-size:10px;text-align:justify}.paragraph-line:last-child{margin-bottom:0}.privacy-footer{padding-top:14px;border-top:1px solid #e9ecef;display:flex;flex-direction:column;gap:14px}.contact-section{background:#fff3cd;padding:11px;border-radius:6px;border:1px solid #ffeaa7}.contact-section h4{font-size:11px;font-weight:600;color:#856404;margin-bottom:6px}.contact-section p{font-size:10px;color:#856404;margin-bottom:6px}.contact-info{background:#fff;padding:8px;border-radius:4px;border:1px solid #ffeaa7;font-size:10px;color:#856404}.contact-info a{color:#007bff;text-decoration:none}.contact-info a:hover{text-decoration:underline}.rights-summary{background:#d4edda;padding:11px;border-radius:6px;border:1px solid #c3e6cb}.rights-summary h4{font-size:11px;font-weight:600;color:#155724;margin-bottom:8px}.rights-summary ul{list-style-type:disc;padding-left:14px;margin-bottom:8px}.rights-summary li{font-size:10px;color:#155724;margin-bottom:4px}.rights-summary li:last-child{margin-bottom:0}.rights-note{font-size:9px;color:#155724;font-style:italic;margin-bottom:0}@media (max-width: 480px){.privacy-policy{padding:11px}.privacy-header h2{font-size:14px}.intro-text{font-size:9px;padding:7px 8px}.privacy-section{padding:11px;margin-bottom:14px}.section-title{font-size:11px}.paragraph-line{font-size:9px}.privacy-footer{gap:11px}.contact-section,.rights-summary{padding:8px}.contact-section h4,.rights-summary h4{font-size:11px}.contact-section p,.rights-summary li{font-size:9px}.contact-info{font-size:9px;padding:7px}}.my-settings-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;align-items:center;justify-content:center}@media (min-width: 769px){.my-settings-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;overflow:hidden;align-items:center;justify-content:center}}.my-settings-modal-content{position:relative;background:#fff;border-radius:16px;width:90%;max-width:480px;max-height:80vh;overflow:hidden;display:flex;flex-direction:column}@media (min-width: 769px){.my-settings-modal-content{width:85%;max-width:420px;max-height:85vh;border-radius:12px}}.my-settings-modal-header{background:#2c3e50;color:#fff;padding:16px;display:flex;justify-content:space-between;align-items:center;position:relative}.my-settings-back-btn{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:background-color .2s ease}.my-settings-back-btn:hover{background:#ffffff1a}.my-settings-modal-title{font-size:14px;font-weight:600;position:absolute;left:50%;transform:translate(-50%)}.my-settings-close-btn{background:none;border:none;color:#fff;font-size:19px;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:3px;transition:background-color .2s ease}.my-settings-close-btn:hover{background:#ffffff1a}.my-settings-modal-body{padding:0;flex:1;overflow-y:auto;overflow-x:hidden}.my-settings-main{padding:0}.my-setting-item{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #eee;cursor:pointer;transition:background-color .2s ease}.my-setting-item:hover{background:#f8f9fa}.my-setting-item:last-child{border-bottom:none}.my-setting-icon{font-size:16px;margin-right:10px}.my-setting-text{font-size:12px;color:#333;flex:1}.my-setting-arrow{color:#ccc;font-size:13px;margin-left:6px}@media (max-width: 480px){.my-settings-modal-content{width:95%;max-height:85vh}.my-settings-modal-header{padding:13px}.my-settings-modal-title{font-size:13px}.my-setting-item{padding:13px}.my-setting-text{font-size:11px}}.my-vocabulary-header{background:linear-gradient(135deg,#f39c12,#e67e22);color:#fff;padding:20px;display:flex;align-items:center;justify-content:space-between;position:relative}.my-vocabulary-header-left{display:flex;align-items:center}.my-vocabulary-header-center{flex:1;display:flex;justify-content:center}.my-vocabulary-header-right{display:flex;align-items:center;position:relative}.my-back-btn{background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;transition:all .2s ease}.my-back-btn:hover{background:#ffffff4d}.my-vocabulary-title{font-size:20px;font-weight:600}.my-settings-btn{background:#fff3;border:none;color:#fff;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s ease}.my-settings-btn:hover{background:#ffffff4d}.my-settings-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:12px;box-shadow:0 8px 24px #00000026;padding:8px 0;margin-top:8px;min-width:140px;z-index:1000;border:1px solid #e9ecef}.my-settings-menu-item{width:100%;background:none;border:none;padding:12px 16px;text-align:left;cursor:pointer;font-size:14px;color:#2c3e50;transition:all .2s ease;display:flex;align-items:center;gap:8px}.my-settings-menu-item:hover{background:#f8f9fa;color:#f39c12}@media (max-width: 768px){.my-vocabulary-header{padding:16px}.my-vocabulary-title{font-size:18px}.my-back-btn,.my-settings-btn{width:32px;height:32px;font-size:16px}.my-settings-menu{min-width:120px}.my-settings-menu-item{padding:10px 12px;font-size:13px}}.my-streak-page{background:#fef9e7;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:100px}.my-streak-header-sticky{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 4px #0000001a}.my-streak-content{text-align:center;padding:0;flex:1}.my-streak-intro-section{position:relative;height:200px;background:url(/assets/FireStreak-Bx-KQYnk.png) center/cover no-repeat!important;border-radius:20px;max-width:600px;overflow:hidden;flex-shrink:0;box-shadow:0 8px 20px #00000026,0 0 20px #ff6b6b4d;margin:16px}.my-streak-user-info{position:absolute;top:16px;left:16px;z-index:15}.my-streak-header-resources{position:absolute;top:16px;right:16px;display:grid;grid-template-columns:1fr 1fr;gap:8px;z-index:15}.my-streak-resource{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fffffff2;border-radius:20px;padding:8px 12px;border:3px solid;box-shadow:0 4px 12px #0000001a;transition:all .3s ease;cursor:pointer;min-width:80px}.my-streak-coins{border-color:#ff8c42;background:linear-gradient(135deg,#fff8dc,#fffaf0)}.my-streak-chicken{border-color:#ff6b6b;background:linear-gradient(135deg,#fff0f0,#fff8dc)}.my-streak-info{border-color:#ffd93d;background:linear-gradient(135deg,#fffacd,#fff8dc)}.my-streak-resource:hover{transform:translateY(-2px);box-shadow:0 6px 18px #00000026}.my-streak-coins:hover{border-color:#ffd93d;background:linear-gradient(135deg,#ffe4b5,#ffdab9)}.my-streak-chicken:hover{border-color:#ff8c42;background:linear-gradient(135deg,#ffb6c1,#ffdab9)}.my-streak-info:hover{border-color:#ff8c42;background:linear-gradient(135deg,#ffe4b5,#ffdab9)}.my-streak-coin-icon,.my-streak-chicken-icon,.my-streak-info-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;box-shadow:0 2px 8px #0000001a}.my-streak-coin-image,.my-streak-chicken-image,.my-streak-info-image{width:100%;height:100%;object-fit:cover;border-radius:50%}.my-streak-resource-count,.my-streak-resource-name{font-weight:700;font-size:16px;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.my-streak-resource-count{text-align:right;flex-shrink:0;min-width:20px}.my-streak-coins .my-streak-resource-count{color:#ff8c42}.my-streak-chicken .my-streak-resource-count{color:#ff6b6b}.my-streak-info .my-streak-resource-name{color:#ff8c42;font-weight:800}.my-streak-overlay{position:absolute;bottom:0;left:0;right:0;z-index:10;background:transparent;border-radius:16px 16px 0 0;padding:16px}.my-streak-overlay .my-streak-calendar-container{background:transparent;padding:0;margin:0}.my-streak-overlay .my-streak-calendar-title-container{display:flex;align-items:center;justify-content:center;margin-bottom:12px}.my-streak-overlay .my-streak-calendar-title{font-size:14px;font-weight:600;color:#fff;margin:0}.my-streak-overlay .my-streak-week-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;justify-items:center}.my-streak-overlay .my-streak-calendar-day{width:36px;height:36px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:600;border:2px solid transparent;transition:all .3s ease;cursor:pointer;position:relative;background:#ffffffe6;box-shadow:0 2px 8px #0000001a}.my-streak-overlay .my-streak-calendar-day.completed{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff;border-color:#ff8c42;box-shadow:0 4px 12px #ff8c4266}.my-streak-overlay .my-streak-calendar-day.today{background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff;border-color:#ff6b6b;box-shadow:0 4px 12px #ff6b6b66;animation:streak-calendar-pulse 2s infinite}.my-streak-overlay .my-streak-calendar-day.empty{background:#ffffff80;color:#999;border-color:#ff6b6b33}.my-streak-overlay .my-streak-calendar-day:hover:not(.empty){transform:scale(1.05)}.my-streak-overlay .my-streak-day-name{font-size:8.4px;margin-bottom:1px;opacity:.8;line-height:1}.my-streak-overlay .my-streak-day-number{font-size:12px;font-weight:800;line-height:1}.my-streak-message{background:#fff;padding:20px;border-radius:16px;margin:20px;box-shadow:0 2px 10px #0000001a}.my-streak-message-title{font-size:16px;font-weight:600;color:#2c3e50;margin-bottom:8px}.my-streak-message-text{font-size:14px;color:#666;margin-bottom:10px}.my-streak-link{font-size:14px;color:#3498db;text-decoration:none}.my-streak-link:hover{text-decoration:underline}.my-calendar-section{background:#fff;margin:20px;border-radius:16px;padding:20px;box-shadow:0 2px 10px #0000001a}.my-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.my-calendar-nav{background:none;border:none;font-size:18px;color:#666;cursor:pointer;padding:5px;transition:color .2s ease}.my-calendar-nav:hover{color:#333}.my-calendar-month{font-size:16px;font-weight:600;color:#333}.my-calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}.my-calendar-day-header{font-size:12px;color:#999;padding:8px 0;font-weight:500}.my-calendar-day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:14px;border-radius:8px;cursor:pointer;transition:all .2s ease}.my-calendar-day:hover{background:#f8f9fa}.my-calendar-day.today{background:linear-gradient(135deg,#ff6b6b,#ff8c42);color:#fff}.my-calendar-day.completed{background:linear-gradient(135deg,#ff8c42,#ffd93d);color:#fff}.my-calendar-day.other-month{color:#ccc}.my-calendar-day .lesson-count{position:absolute;top:-2px;right:-2px;background:#ff6b6b;color:#fff;font-size:8px;font-weight:800;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid white;box-shadow:0 1px 3px #0003}.my-streak-calendar-day.skeleton,.my-calendar-day.skeleton{background:#f0f0f0;cursor:default;position:relative;overflow:hidden}.my-streak-calendar-day.skeleton:hover,.my-calendar-day.skeleton:hover{transform:none}.skeleton-content{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:4px}.skeleton-line{background:linear-gradient(90deg,#e0e0e0 25%,#f0f0f0,#e0e0e0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}.skeleton-day-name{width:20px;height:8px}.skeleton-day-number{width:16px;height:12px}.skeleton-message{display:flex;flex-direction:column;gap:12px}.skeleton-title{width:200px;height:20px}.skeleton-text{width:150px;height:16px}.skeleton-link{width:120px;height:16px}@keyframes skeleton-loading{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes streak-calendar-pulse{0%{box-shadow:0 4px 12px #ff6b6b66}50%{box-shadow:0 6px 18px #ff6b6b99;transform:scale(1.02)}to{box-shadow:0 4px 12px #ff6b6b66}}@keyframes resourceGlow{0%,to{box-shadow:0 4px 12px #0000001a}50%{box-shadow:0 6px 18px #ff8c424d}}.my-streak-resource{animation:resourceGlow 3s ease-in-out infinite}.my-streak-coins{animation-delay:0s}.my-streak-chicken{animation-delay:1.5s}.my-streak-info{animation-delay:.75s}@media (max-width: 768px){.my-streak-page{min-height:calc(100vh - 80px);padding-bottom:120px}.my-streak-intro-section{height:160px;margin:12px}.my-streak-user-info{top:12px;left:12px}.my-streak-header-resources{top:12px;right:12px;gap:6px}.my-streak-resource{padding:6px 10px;gap:6px;min-width:70px}.my-streak-coin-icon,.my-streak-chicken-icon,.my-streak-info-icon{width:24px;height:24px}.my-streak-resource-count,.my-streak-resource-name{font-size:14px}.my-streak-overlay{padding:12px}.my-streak-overlay .my-streak-calendar-day{width:34px;height:34px}.my-streak-overlay .my-streak-day-number{font-size:10.8px}.my-streak-overlay .my-streak-day-name{font-size:7.2px}}@media (max-width: 480px){.my-streak-page{min-height:calc(100vh - 70px);padding-bottom:140px}.my-streak-intro-section{height:140px;margin:8px}.my-streak-user-info{top:8px;left:8px}.my-streak-header-resources{top:8px;right:8px;gap:4px}.my-streak-resource{padding:4px 8px;gap:4px;min-width:60px}.my-streak-coin-icon,.my-streak-chicken-icon,.my-streak-info-icon{width:20px;height:20px}.my-streak-resource-count,.my-streak-resource-name{font-size:12px}.my-calendar-section{margin:10px;padding:15px}.my-streak-content{padding:0}.my-streak-overlay{padding:8px}.my-streak-overlay .my-streak-calendar-day{width:32px;height:32px}}.my-vocabulary-tabs-container{padding:20px;border-bottom:1px solid #eee;background:#fff}.my-vocabulary-grade-tabs{margin-bottom:16px}.my-vocabulary-grade-tabs-wrapper{display:flex;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;padding:4px;gap:2px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.my-vocabulary-grade-tabs-wrapper::-webkit-scrollbar{display:none}.my-vocabulary-grade-tab{flex:1;min-width:80px;padding:8px 12px;background:transparent;border:none;border-radius:12px;font-size:13px;font-weight:600;color:#6c757d;cursor:pointer;transition:all .3s ease;text-align:center;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:2px}.my-vocabulary-grade-tab.active{background:linear-gradient(135deg,#58cc02,#4fb300);color:#fff;box-shadow:0 4px 12px #58cc024d;transform:translateY(-1px)}.grade-tab-label{font-size:13px;font-weight:600}.grade-tab-count{font-size:11px;opacity:.8}.my-vocabulary-stats-tabs{margin-bottom:20px}.my-vocabulary-stats-tabs-wrapper{display:flex;justify-content:space-around;background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;padding:16px;border:1px solid #dee2e6;gap:4px}.my-vocabulary-stats-tab{flex:1;background:transparent;border:none;border-radius:12px;padding:12px 8px;cursor:pointer;transition:all .3s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;min-height:60px}.my-vocabulary-stats-tab.active{background:#58cc021a;border:2px solid #58cc02;transform:translateY(-1px);box-shadow:0 4px 12px #58cc0233}.stats-tab-icon{font-size:16px}.stats-tab-label{font-size:12px;color:#6c757d;font-weight:500}.stats-tab-count{font-size:16px;font-weight:700;color:#2c3e50}@media (max-width: 768px){.my-vocabulary-tabs-container{padding:16px}.my-vocabulary-grade-tab{min-width:70px;padding:6px 8px;font-size:12px}.grade-tab-label{font-size:12px}.grade-tab-count{font-size:10px}.my-vocabulary-stats-tabs-wrapper{padding:12px}.my-vocabulary-stats-tab{padding:10px 6px;min-height:54px}.stats-tab-icon{font-size:14px}.stats-tab-label{font-size:11px}.stats-tab-count{font-size:14px}}@media (max-width: 480px){.my-vocabulary-grade-tabs-wrapper{gap:1px}.my-vocabulary-grade-tab{min-width:60px;padding:4px 6px;font-size:11px}.my-vocabulary-stats-tabs-wrapper{padding:10px}.my-vocabulary-stats-tab{padding:8px 4px;min-height:48px}.stats-tab-icon{font-size:12px}.stats-tab-label{font-size:10px}.stats-tab-count{font-size:12px}}.my-vocabulary-card{background:#fff;border:1px solid #e9ecef;border-radius:12px;padding:20px;box-shadow:0 2px 4px #0000000d}.my-vocabulary-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.my-thai-char{font-size:32px;font-weight:700;color:#2c3e50}.my-audio-btn-container{display:flex;align-items:center;gap:8px}.my-audio-btn{background:none;border:1px solid #ddd;border-radius:20px;padding:6px 10px;display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:#666;transition:all .2s ease}.my-audio-btn:hover{background:#f8f9fa;border-color:#ccc}.my-level-badge{background:#3498db;color:#fff;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:700}.my-part-of-speech-meaning{display:flex;gap:12px;font-size:14px;color:#666;line-height:1.4;margin-bottom:12px;align-items:center;flex-wrap:wrap}.my-part-of-speech{color:#e74c3c;font-weight:500}.my-difficulty-tag{display:flex;align-items:center;gap:4px;padding:4px 8px;border-radius:12px;font-size:12px;font-weight:600;margin-left:auto}.my-difficulty-tag.difficult-tag{background:#ffc1071a;color:#ff8c00;border:1px solid rgba(255,193,7,.3)}.my-difficulty-tag.memorized-tag{background:#28a7451a;color:#28a745;border:1px solid rgba(40,167,69,.3)}.difficulty-icon{font-size:12px}.difficulty-label{font-size:11px;font-weight:600}.my-example-section{margin-top:12px;display:flex;flex-direction:column;gap:8px}.my-example-thai-container,.my-example-korean-container{display:flex;align-items:flex-start;gap:8px}.my-example-label{font-size:12px;color:#888;font-weight:500;min-width:35px;margin-top:1px}.my-example-thai{font-size:14px;color:#2c3e50;font-weight:500;line-height:1.4;flex:1}.my-example-korean{font-size:14px;color:#666;line-height:1.4;flex:1}.my-audio-spinner{width:16px;height:16px;border:2px solid #e5e7eb;border-top:2px solid #3b82f6;border-radius:50%;animation:my-audio-spin .8s linear infinite}@keyframes my-audio-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.my-audio-btn:disabled{cursor:not-allowed;opacity:.6}.my-vocabulary-list{padding:20px;display:flex;flex-direction:column;gap:16px;background:#f8f9fa}.vocabulary-review-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.vocabulary-review-modal{background:#fff;border-radius:20px;box-shadow:0 20px 40px #00000026;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;animation:modalAppear .3s ease-out;scrollbar-width:none;-ms-overflow-style:none}.vocabulary-review-modal::-webkit-scrollbar{display:none}@keyframes modalAppear{0%{opacity:0;transform:scale(.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}.vocabulary-review-modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 0;border-bottom:1px solid #e9ecef;margin-bottom:24px}.vocabulary-review-modal-header h3{margin:0;font-size:20px;font-weight:700;color:#2c3e50}.vocabulary-review-modal-close{background:none;border:none;font-size:20px;color:#6c757d;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.vocabulary-review-modal-close:hover{background:#f8f9fa;color:#2c3e50}.vocabulary-review-modal-content{padding:0 24px}.vocabulary-review-section{margin-bottom:32px}.vocabulary-review-section h4{margin:0 0 16px;font-size:16px;font-weight:600;color:#2c3e50}.vocabulary-review-grade-tabs{display:flex;flex-wrap:wrap;gap:8px}.vocabulary-review-grade-tab{padding:8px 16px;border:2px solid #e9ecef;background:#fff;border-radius:20px;font-size:14px;font-weight:600;color:#6c757d;cursor:pointer;transition:all .3s ease;min-width:60px;text-align:center}.vocabulary-review-grade-tab.active{background:linear-gradient(135deg,#58cc02,#4fb300);color:#fff;border-color:#58cc02;box-shadow:0 4px 12px #58cc024d}.vocabulary-review-grade-tab:hover:not(.active){border-color:#58cc02;color:#58cc02}.vocabulary-review-difficulty-tabs{display:flex;gap:12px}.vocabulary-review-difficulty-tab{flex:1;padding:16px 12px;border:2px solid #e9ecef;background:#fff;border-radius:16px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:80px}.vocabulary-review-difficulty-tab.active{background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1);border-color:#ff8c42;box-shadow:0 4px 12px #ff8c424d}.vocabulary-review-difficulty-tab:hover:not(.active){border-color:#ff8c42;background:#ff8c420d}.difficulty-icon{font-size:20px}.difficulty-label{font-size:14px;font-weight:600;color:#2c3e50}.vocabulary-review-difficulty-tab.active .difficulty-label{color:#ff6b6b}.vocabulary-review-summary{background:linear-gradient(135deg,#f8f9fa,#e9ecef);border-radius:16px;padding:20px;border:1px solid #dee2e6}.summary-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.summary-item:last-child{margin-bottom:0}.summary-item.highlight{background:#58cc021a;padding:12px 16px;border-radius:12px;border:1px solid rgba(88,204,2,.3)}.summary-label{font-size:14px;color:#6c757d;font-weight:500}.summary-value{font-size:16px;font-weight:700;color:#2c3e50}.summary-item.highlight .summary-value{color:#58cc02}.vocabulary-review-modal-footer{display:flex;gap:12px;padding:24px;border-top:1px solid #e9ecef;margin-top:24px}.vocabulary-review-cancel-btn{flex:1;padding:12px 24px;border:2px solid #e9ecef;background:#fff;border-radius:12px;font-size:16px;font-weight:600;color:#6c757d;cursor:pointer;transition:all .3s ease}.vocabulary-review-cancel-btn:hover{border-color:#6c757d;color:#2c3e50}.vocabulary-review-start-btn{flex:2;padding:12px 24px;border:none;background:linear-gradient(135deg,#58cc02,#4fb300);border-radius:12px;font-size:16px;font-weight:700;color:#fff;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #58cc024d}.vocabulary-review-start-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #58cc0266}.vocabulary-review-start-btn:disabled{background:#e9ecef;color:#6c757d;cursor:not-allowed;box-shadow:none}@media (max-width: 768px){.vocabulary-review-modal-overlay{padding:16px}.vocabulary-review-modal{max-height:90vh}.vocabulary-review-modal-header{padding:20px 20px 0}.vocabulary-review-modal-content{padding:0 20px}.vocabulary-review-modal-footer{padding:20px}.vocabulary-review-grade-tabs{gap:6px}.vocabulary-review-grade-tab{padding:6px 12px;font-size:13px;min-width:50px}.vocabulary-review-difficulty-tabs{gap:8px}.vocabulary-review-difficulty-tab{padding:12px 8px;min-height:70px}.difficulty-icon{font-size:18px}.difficulty-label{font-size:13px}}@media (max-width: 480px){.vocabulary-review-modal-overlay{padding:12px}.vocabulary-review-grade-tabs{gap:4px}.vocabulary-review-grade-tab{padding:4px 8px;font-size:12px;min-width:40px}.vocabulary-review-difficulty-tabs{flex-direction:column;gap:8px}.vocabulary-review-difficulty-tab{flex-direction:row;justify-content:flex-start;min-height:50px}}.my-vocabulary-page{background:#fff;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:100px}.my-vocabulary-header-sticky{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 4px #0000001a}.my-vocabulary-content{background:#f8f9fa;flex:1;padding-bottom:20px}@media (max-width: 768px){.my-vocabulary-page{min-height:calc(100vh - 80px);padding-bottom:20px}}@media (max-width: 480px){.my-vocabulary-page{min-height:calc(100vh - 70px);padding-bottom:20px}}.Challenges-Page-container{background:#fff;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}.Challenges-Page-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:#fffc}.Challenges-Page-loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.2);border-top:4px solid white;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.Challenges-Page-loading p{font-size:16px;margin:0;font-weight:500}.Challenges-Page-header-sticky{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 4px #0000001a}.Challenges-Page-achievements-main-container{background:linear-gradient(135deg,#667eea,#764ba2);padding:20px;font-family:Arial,sans-serif;color:#fff;overflow:hidden}.Challenges-Page-category-tabs-container{background:linear-gradient(135deg,#667eea,#764ba2);display:flex;gap:8px;overflow-x:auto;padding:15px 20px;scrollbar-width:none;-ms-overflow-style:none}.Challenges-Page-category-tabs-container::-webkit-scrollbar{display:none}.Challenges-Page-category-tab{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#ffffff1a;border:2px solid rgba(255,255,255,.2);border-radius:20px;color:#ffffffb3;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}.Challenges-Page-category-tab:hover{background:#ffffff26}.Challenges-Page-category-tab.Challenges-Page-active{background:#ffffff40;border-color:#fff6;color:#fff}.Challenges-Page-achievement-list-container{height:calc(100vh - 200px);overflow:hidden;padding-top:0}.Challenges-Page-achievement-list-scroll{height:100%;overflow-y:auto;padding-right:10px;margin-right:-10px}.Challenges-Page-achievement-list-scroll::-webkit-scrollbar{width:6px}.Challenges-Page-achievement-list-scroll::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.Challenges-Page-achievement-list-scroll::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.Challenges-Page-achievement-list-scroll::-webkit-scrollbar-thumb:hover{background:#ffffff80}.Challenges-Page-achievement-list{display:flex;flex-direction:column;gap:12px}.Challenges-Page-achievement-card{position:relative;display:flex;align-items:center;background:#0000004d;border-radius:15px;padding:15px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.1);transition:all .3s;overflow:hidden;opacity:1;min-width:0;width:100%}.Challenges-Page-achievement-card.Challenges-Page-completed{border-color:#4caf5080;background:#4caf501a}.Challenges-Page-achievement-card.Challenges-Page-claimed{border-color:#9e9e9e4d;background:#0003;opacity:.6}.Challenges-Page-achievement-card.Challenges-Page-animating{animation:Challenges-Page-claim-glow 2s ease-in-out;border-color:#ffd700cc;background:#ffd7001a;box-shadow:0 0 30px #ffd70080}.Challenges-Page-sparkle-effects{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.Challenges-Page-sparkle{position:absolute;width:6px;height:6px;background:radial-gradient(circle,#FFD700 0%,#FFA500 50%,transparent 70%);border-radius:50%;animation:Challenges-Page-sparkle-animation 2s ease-in-out}.Challenges-Page-sparkle-1{top:20%;left:10%;animation-delay:0s}.Challenges-Page-sparkle-2{top:30%;right:15%;animation-delay:.3s}.Challenges-Page-sparkle-3{bottom:30%;left:20%;animation-delay:.6s}.Challenges-Page-sparkle-4{bottom:20%;right:25%;animation-delay:.9s}.Challenges-Page-sparkle-5{top:50%;left:5%;animation-delay:1.2s}.Challenges-Page-sparkle-6{top:60%;right:10%;animation-delay:1.5s}.Challenges-Page-trophy-section{margin-right:15px;flex-shrink:0}.Challenges-Page-trophy-container{width:50px;height:50px;display:flex;align-items:center;justify-content:center}.Challenges-Page-achievement-content{flex:1;margin-right:15px;min-width:0;overflow:hidden}.Challenges-Page-achievement-text{margin-bottom:8px}.Challenges-Page-achievement-title{font-size:16px;font-weight:700;margin:0 0 4px;text-transform:uppercase;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.Challenges-Page-achievement-description{font-size:12px;color:#ffffffb3;margin:0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.Challenges-Page-progress-container{position:relative;margin-bottom:0!important}.Challenges-Page-progress-background{width:100%;height:8px;background:#fff3;border-radius:4px;overflow:hidden}.Challenges-Page-progress-fill{height:100%;background:linear-gradient(90deg,#00bcd4,#4fc3f7);border-radius:4px;transition:width .3s ease}.Challenges-Page-progress-text{position:absolute;right:0;top:-20px;font-size:11px;color:#fffc;font-weight:500}.Challenges-Page-reward-section{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0;min-width:80px}.Challenges-Page-reward-info{display:flex;align-items:center;gap:6px}.Challenges-Page-reward-icon{width:24px;height:24px}.Challenges-Page-reward-amount{font-size:16px;font-weight:700;min-width:20px}.Challenges-Page-claim-button{width:60px;height:32px;border-radius:8px;border:none;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;flex-shrink:0}.Challenges-Page-claim-button.Challenges-Page-available{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;box-shadow:0 4px 15px #4caf5066}.Challenges-Page-claim-button.Challenges-Page-available:hover{transform:scale(1.05);box-shadow:0 6px 20px #4caf5099}.Challenges-Page-claim-button.Challenges-Page-claiming{background:linear-gradient(135deg,gold,orange);color:#fff;animation:Challenges-Page-claiming-pulse .5s ease-in-out infinite alternate}.Challenges-Page-claim-button.Challenges-Page-disabled{background:#fff3;color:#ffffff80;cursor:not-allowed}.Challenges-Page-claim-button.Challenges-Page-claimed{background:#9e9e9e4d;color:#fff9}.Challenges-Page-modal-overlay{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;z-index:1000;align-items:center;justify-content:center;animation:Challenges-Page-modal-fade-in .3s ease-out}@media (min-width: 769px){.Challenges-Page-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:20px;overflow:hidden;align-items:center;justify-content:center}}.Challenges-Page-reward-modal{position:relative;width:350px;height:500px;background:linear-gradient(135deg,#4285f4,#34a853);border-radius:20px;display:flex;flex-direction:column;align-items:center;padding:40px 30px 30px;box-shadow:0 20px 60px #00000080;animation:Challenges-Page-modal-slide-up .4s ease-out;overflow:hidden}.Challenges-Page-modal-ribbon-banner{position:absolute;top:20px;left:50%;transform:translate(-50%);z-index:10}.Challenges-Page-modal-ribbon-content{background:linear-gradient(135deg,#e91e63,#ad1457);padding:12px 40px;border-radius:25px;position:relative;box-shadow:0 4px 15px #e91e6366}.Challenges-Page-modal-ribbon-text{font-size:18px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.3);letter-spacing:1px}.Challenges-Page-modal-achievement-badge{margin-top:60px;margin-bottom:40px;position:relative}.Challenges-Page-modal-badge-inner{width:120px;height:120px;background:linear-gradient(135deg,#00bcd4,#0097a7);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #00bcd466;position:relative;animation:Challenges-Page-badge-glow 2s ease-in-out infinite alternate}.Challenges-Page-modal-reward-icon-large{transform:scale(2)}.Challenges-Page-modal-rewards-section{margin-bottom:40px}.Challenges-Page-modal-rewards-title{background:linear-gradient(135deg,#ffc107,#ff9800);color:#fff;padding:8px 30px;border-radius:20px;font-size:16px;font-weight:700;text-align:center;margin-bottom:20px;box-shadow:0 4px 15px #ffc10766;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.Challenges-Page-modal-reward-items{display:flex;justify-content:center;gap:20px}.Challenges-Page-modal-reward-item{background:#ffffffe6;padding:20px;border-radius:15px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:0 8px 25px #0000001a;min-width:80px;animation:Challenges-Page-reward-bounce .6s ease-out .5s both}.Challenges-Page-modal-reward-icon{transform:scale(1.2)}.Challenges-Page-modal-reward-amount{font-size:18px;font-weight:700;color:#333}.Challenges-Page-modal-continue-section{margin-top:auto}.Challenges-Page-modal-continue-button{background:#fff3;border:2px solid rgba(255,255,255,.5);color:#fff;padding:15px 40px;border-radius:25px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-shadow:1px 1px 2px rgba(0,0,0,.3);animation:Challenges-Page-continue-pulse 2s ease-in-out infinite}.Challenges-Page-modal-continue-button:hover{background:#ffffff4d;transform:scale(1.05)}.Challenges-Page-modal-floating-particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.Challenges-Page-modal-particle{position:absolute;width:8px;height:8px;background:radial-gradient(circle,#FFD700 0%,#FFA500 50%,transparent 70%);border-radius:50%;animation:Challenges-Page-float-particle 4s ease-in-out infinite}.Challenges-Page-modal-particle-1{top:20%;left:10%;animation-delay:0s}.Challenges-Page-modal-particle-2{top:30%;right:15%;animation-delay:.8s}.Challenges-Page-modal-particle-3{bottom:40%;left:20%;animation-delay:1.6s}.Challenges-Page-modal-particle-4{bottom:30%;right:25%;animation-delay:2.4s}.Challenges-Page-modal-particle-5{top:60%;left:15%;animation-delay:3.2s}.Challenges-Page-modal-particle-6{top:70%;right:20%;animation-delay:4s}@keyframes Challenges-Page-claim-glow{0%,to{box-shadow:0 0 30px #ffd70080}50%{box-shadow:0 0 50px #ffd700cc}}@keyframes Challenges-Page-sparkle-animation{0%{transform:scale(0) rotate(0);opacity:0}20%{transform:scale(1) rotate(180deg);opacity:1}80%{transform:scale(1) rotate(360deg);opacity:1}to{transform:scale(0) rotate(540deg);opacity:0}}@keyframes Challenges-Page-claiming-pulse{0%{transform:scale(1)}to{transform:scale(1.1)}}@keyframes Challenges-Page-modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes Challenges-Page-modal-slide-up{0%{transform:translateY(50px) scale(.9);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes Challenges-Page-badge-glow{0%{box-shadow:0 10px 30px #00bcd466}to{box-shadow:0 15px 40px #00bcd4b3}}@keyframes Challenges-Page-reward-bounce{0%{transform:translateY(20px) scale(.8);opacity:0}60%{transform:translateY(-5px) scale(1.05)}to{transform:translateY(0) scale(1);opacity:1}}@keyframes Challenges-Page-continue-pulse{0%,to{transform:scale(1);box-shadow:0 0 20px #ffffff4d}50%{transform:scale(1.02);box-shadow:0 0 30px #ffffff80}}@keyframes Challenges-Page-float-particle{0%,to{transform:translateY(0) scale(.8);opacity:.6}50%{transform:translateY(-20px) scale(1.2);opacity:1}}.Challenges-Page-time-remaining{font-size:12px;color:#ff6b6b;font-weight:600;background:#ff6b6b1a;padding:4px 8px;border-radius:12px;border:1px solid rgba(255,107,107,.2);white-space:nowrap;flex-shrink:0}.Challenges-Page-achievement-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;width:100%}.Challenges-Page-achievement-header h3{margin:0;font-size:16px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.Challenges-Page-category-tab[data-time-type=daily]{border-color:#4caf50;color:#4caf50}.Challenges-Page-category-tab[data-time-type=weekly]{border-color:#2196f3;color:#2196f3}.Challenges-Page-category-tab[data-time-type=monthly]{border-color:#9c27b0;color:#9c27b0}.Challenges-Page-category-tab.Challenges-Page-active[data-time-type=daily]{background:#4caf50;color:#fff;border-color:#4caf50}.Challenges-Page-category-tab.Challenges-Page-active[data-time-type=weekly]{background:#2196f3;color:#fff;border-color:#2196f3}.Challenges-Page-category-tab.Challenges-Page-active[data-time-type=monthly]{background:#9c27b0;color:#fff;border-color:#9c27b0}@media (max-width: 768px){.Challenges-Page-time-remaining{font-size:11px;padding:3px 6px}.Challenges-Page-achievement-header h3{font-size:14px}}@media (max-width: 480px){.Challenges-Page-time-remaining{font-size:10px;padding:2px 4px}.Challenges-Page-achievement-header{gap:4px}}@media (max-width: 768px){body.challenges-page-fullscreen .left-sidebar,body.vocabulary-page-fullscreen .left-sidebar,body.streak-page-fullscreen .left-sidebar{display:none!important}.my-page-container.challenges-page-active,.my-page-container.vocabulary-page-active,.my-page-container.streak-page-active{margin-bottom:0!important;background:transparent!important;padding-bottom:0!important}}@media (max-width: 768px){.Challenges-Page-container{min-height:calc(100vh - 80px)}.Challenges-Page-achievements-main-container{padding:15px}.Challenges-Page-achievement-list-container{height:calc(100vh - 180px)}.Challenges-Page-reward-modal{width:320px;height:450px;padding:30px 20px 20px}}@media (max-width: 480px){.Challenges-Page-container{min-height:calc(100vh - 70px)}.Challenges-Page-achievements-main-container{padding:10px}.Challenges-Page-achievement-list-container{height:calc(100vh - 160px)}.Challenges-Page-reward-modal{width:300px;height:400px}.Challenges-Page-achievement-card{padding:12px}.Challenges-Page-achievement-title{font-size:14px}.Challenges-Page-achievement-description{font-size:11px}}@media (min-width: 769px){.my-page-container{position:relative;width:500px!important;min-width:500px!important;max-width:500px!important;margin:40px auto!important;height:900px!important;max-height:900px!important;border-radius:20px!important;box-shadow:0 8px 20px #00000026!important;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:#333;line-height:1.6;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1)}.my-page-container::-webkit-scrollbar{display:none}}@media (min-width: 481px) and (max-width: 768px){.my-page-container{min-width:500px!important;max-width:700px!important;width:auto!important;margin:20px auto!important;border-radius:15px!important;min-height:100vh;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:#333;line-height:1.6;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1)}}@media (max-width: 480px){.my-page-container{max-width:100%;margin:0 auto;min-height:100vh;font-family:var(--ds-font-family, "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);color:#333;line-height:1.6;background:linear-gradient(135deg,#ffe4b5,#ffdab9,#ffb6c1)}}.my-page-main{background:#ffffffe6;overflow:hidden;box-shadow:0 8px 20px #00000026}.my-page-content{background:#fff8dccc;padding-bottom:20px}.my-section{border-bottom:8px solid rgba(255,248,220,.8);background:#ffffffe6}.my-section:last-child{border-bottom:none}.my-section-header{padding:20px 20px 10px;font-size:16px;font-weight:600;color:#ff6b6b;background:#fffffff2;text-shadow:1px 1px 0px rgba(255,255,255,.8)}.subscription-success-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2)}.processing-container,.success-container,.error-container{background:#fff;border-radius:20px;padding:40px;text-align:center;box-shadow:0 20px 40px #0000001a;max-width:500px;width:100%}.success-icon,.error-icon{font-size:80px;margin-bottom:20px;animation:bounce 1s ease-in-out}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}.loading-spinner{width:50px;height:50px;border:5px solid #f3f3f3;border-top:5px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}.success-message,.fail-message,.error-message{color:#666;font-size:16px;margin-bottom:30px;line-height:1.5}.subscription-details{background:#f8f9fa;border-radius:12px;padding:20px;margin-bottom:30px;text-align:left}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #e9ecef}.detail-item:last-child{border-bottom:none}.detail-item .label{color:#666;font-weight:500}.detail-item .value{color:#333;font-weight:600}.detail-item .value.premium{color:#007bff;background:#007bff1a;padding:4px 12px;border-radius:20px;font-size:14px}.btn-primary{background:linear-gradient(135deg,#007bff,#0056b3);color:#fff;box-shadow:0 4px 15px #007bff4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #007bff66}@media (max-width: 768px){.subscription-success-page{padding:10px}.processing-container,.success-container,.error-container{padding:30px 20px}h2{font-size:20px}.success-icon,.error-icon{font-size:60px}.button-group{flex-direction:column;align-items:center}.btn-primary,.btn-secondary{width:100%;max-width:200px}}.subscription-fail-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#ff6b6b,#ee5a24)}.fail-container{background:#fff;border-radius:20px;padding:40px;text-align:center;box-shadow:0 20px 40px #0000001a;max-width:500px;width:100%}.fail-icon{font-size:80px;margin-bottom:20px;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}h2{color:#333;margin-bottom:15px;font-size:24px;font-weight:700}.fail-message{color:#666;font-size:16px;margin-bottom:30px;line-height:1.5}.error-code{background:#f8d7da;border:1px solid #f5c6cb;border-radius:8px;padding:15px;margin-bottom:30px;text-align:left}.error-code .label{color:#721c24;font-weight:600;margin-right:10px}.error-code .value{color:#721c24;font-family:monospace;background:#721c241a;padding:2px 8px;border-radius:4px}.button-group{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.btn-primary,.btn-secondary{padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;border:none;min-width:120px}.btn-primary{background:linear-gradient(135deg,#dc3545,#c82333);color:#fff;box-shadow:0 4px 15px #dc35454d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #dc354566}.btn-secondary{background:#f8f9fa;color:#6c757d;border:1px solid #dee2e6}.btn-secondary:hover{background:#e9ecef;transform:translateY(-1px)}@media (max-width: 768px){.subscription-fail-page{padding:10px}.fail-container{padding:30px 20px}h2{font-size:20px}.fail-icon{font-size:60px}.button-group{flex-direction:column;align-items:center}.btn-primary,.btn-secondary{width:100%;max-width:200px}}.admin-sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;background:#1f2937;color:#fff;display:flex;flex-direction:column;transition:width .3s ease;z-index:1000;overflow-y:auto}.admin-sidebar.collapsed{width:80px}.admin-sb-header{padding:20px;border-bottom:1px solid rgba(255,255,255,.1);position:relative}.admin-sb-toggle{position:absolute;right:12px;top:12px;width:32px;height:32px;background:#ffffff1a;border:none;border-radius:6px;color:#fff;font-size:18px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.admin-sb-toggle:hover{background:#fff3}.admin-sb-logo h3{font-size:22px;font-weight:700;margin:0 0 4px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.admin-sb-logo span{font-size:13px;color:#9ca3af;font-weight:500}.admin-sb-menu{flex:1;padding:20px 0;overflow-y:auto}.admin-sb-menu-item{margin-bottom:8px}.admin-sb-menu-link{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#d1d5db;text-decoration:none;transition:all .2s ease;border-left:3px solid transparent}.admin-sb-menu-link:hover{background:#ffffff0d;color:#fff}.admin-sb-menu-link.active{background:#667eea26;border-left-color:#667eea;color:#fff}.admin-sb-menu-icon{font-size:22px;min-width:24px;text-align:center}.admin-sb-menu-label{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.collapsed .admin-sb-menu-label{display:none}.admin-sb-submenu{padding-left:56px;margin-top:4px}.collapsed .admin-sb-submenu{display:none}.admin-sb-submenu-link{display:block;padding:8px 20px;font-size:14px;color:#9ca3af;text-decoration:none;transition:all .2s ease;border-radius:6px;margin:2px 0}.admin-sb-submenu-link:hover{color:#fff;background:#ffffff0d}.admin-sb-submenu-link.active{color:#667eea;background:#667eea1a}.admin-sb-footer{padding:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:12px}.admin-sb-info{display:flex;flex-direction:column;gap:4px}.admin-sb-role{display:inline-block;padding:6px 12px;font-size:12px;font-weight:600;background:#667eea33;color:#a5b4fc;border-radius:6px;text-align:center}.admin-sb-email{font-size:11px;color:#9ca3af;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-sb-logout-button{width:100%;padding:10px;background:#ef444433;border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#fca5a5;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.admin-sb-logout-button:hover{background:#ef44444d;border-color:#ef444480}.collapsed .admin-sb-role,.collapsed .admin-sb-email,.collapsed .admin-sb-logout-button{display:none}.admin-sidebar::-webkit-scrollbar{width:6px}.admin-sidebar::-webkit-scrollbar-track{background:#ffffff0d}.admin-sidebar::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.admin-sidebar::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.admin-sb-menu-arrow{margin-left:auto;font-size:12px;transition:transform .2s ease;color:#fff9}.admin-sb-menu-arrow.expanded{transform:rotate(180deg)}.admin-sb-submenu{background:#0003;border-left:3px solid #3b82f6;margin-left:20px;border-radius:0 8px 8px 0;overflow:hidden;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:300px}}.admin-sb-submenu-link{display:flex;align-items:center;gap:12px;padding:12px 20px;color:#fffc;text-decoration:none;font-size:14px;transition:all .2s ease;border-left:3px solid transparent}.admin-sb-submenu-link:hover{background:#ffffff1a;color:#fff;border-left-color:#10b981}.admin-sb-submenu-link.active{background:#3b82f633;color:#60a5fa;border-left-color:#3b82f6;font-weight:600}.admin-sb-submenu-icon{font-size:12px;width:16px;text-align:center}.admin-sb-submenu-label{flex:1}.admin-sb-submenu.level-2{margin-left:40px;border-left-color:#10b981}.admin-sb-submenu-link.level-2{padding-left:16px;font-size:13px}.admin-sb-submenu-link.level-2:hover{border-left-color:#f59e0b}.admin-sb-submenu-link.level-2.active{border-left-color:#f59e0b;background:#f59e0b1a;color:#f59e0b}.admin-sup-panel,.admin-sup-dashboard{width:100%;max-width:100%}.admin-sup-dashboard-header{margin-bottom:30px}.admin-sup-dashboard-header h2{font-size:32px;font-weight:700;color:#111827;margin:0 0 8px}.admin-sup-dashboard-header p{font-size:15px;color:#6b7280;margin:0}.admin-sup-activity-list{display:flex;flex-direction:column;gap:12px}.admin-sup-activity-item{display:flex;align-items:center;gap:16px;padding:16px;background:#f9fafb;border-radius:10px;transition:all .2s ease}.admin-sup-activity-item:hover{background:#f3f4f6}.admin-sup-activity-icon{font-size:24px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:10px;box-shadow:0 2px 4px #0000001a}.admin-sup-activity-details{flex:1}.admin-sup-activity-title{font-size:14px;font-weight:600;color:#111827;margin-bottom:4px}.admin-sup-activity-time{font-size:12px;color:#9ca3af}.admin-sup-system-status{display:flex;flex-direction:column;gap:16px}.admin-sup-status-item{display:flex;align-items:center;gap:12px}.admin-sup-status-label{font-size:13px;font-weight:500;color:#374151;min-width:100px}.admin-sup-status-bar{flex:1;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.admin-sup-status-fill{height:100%;border-radius:4px;transition:width .3s ease}.admin-sup-status-value{font-size:13px;font-weight:600;color:#111827;min-width:40px;text-align:right}.admin-sup-admin-management{max-width:1200px}.admin-sup-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.admin-sup-page-header h2{font-size:24px;font-weight:700;color:#111827;margin:0}.admin-sup-admin-table{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.admin-sup-admin-table table{width:100%;border-collapse:collapse}.admin-sup-admin-table th{background:#f9fafb;padding:16px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb}.admin-sup-admin-table td{padding:16px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#111827}.admin-sup-admin-table tr:last-child td{border-bottom:none}.admin-sup-role-badge{display:inline-block;padding:4px 8px;font-size:11px;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.admin-sup-role-badge.super_admin{background:#fee2e2;color:#dc2626}.admin-sup-role-badge.general_admin{background:#dbeafe;color:#2563eb}.admin-sup-role-badge.content_admin{background:#d1fae5;color:#059669}.admin-sup-status-badge{display:inline-block;padding:4px 8px;font-size:11px;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.admin-sup-status-badge.active{background:#d1fae5;color:#059669}.admin-sup-status-badge.inactive{background:#fee2e2;color:#dc2626}.admin-sup-admin-create{max-width:600px}.admin-sup-form-container{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-sup-admin-form{display:flex;flex-direction:column;gap:20px}.admin-sup-form-group{display:flex;flex-direction:column;gap:8px}.admin-sup-form-group label{font-size:14px;font-weight:600;color:#374151}.admin-sup-form-group input,.admin-sup-form-group select{padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:border-color .2s ease}.admin-sup-form-group input:focus,.admin-sup-form-group select:focus{outline:none;border-color:#667eea}.admin-sup-permission-info{background:#f9fafb;padding:16px;border-radius:8px;border-left:4px solid #667eea}.admin-sup-permission-info p{margin:0 0 8px;font-size:13px;color:#6b7280}.admin-sup-permission-info p:last-child{margin-bottom:0}.admin-sup-permission-info strong{color:#111827;font-weight:600}.admin-sup-form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:8px}.admin-sup-admin-logs{max-width:1200px}.admin-sup-log-table{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.admin-sup-log-table table{width:100%;border-collapse:collapse}.admin-sup-log-table th{background:#f9fafb;padding:16px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb}.admin-sup-log-table td{padding:16px;border-bottom:1px solid #f3f4f6;font-size:13px;color:#111827}.admin-sup-log-table tr:last-child td{border-bottom:none}.admin-sup-log-table code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:12px;color:#374151}.admin-sup-user-management,.admin-sup-user-stats,.admin-sup-content-management,.admin-sup-system-management{max-width:1200px}.admin-sup-user-management p,.admin-sup-user-stats p,.admin-sup-content-management p,.admin-sup-system-management p{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;color:#6b7280;font-style:italic}.admin-sup-metrics-section{margin:32px 0}.admin-sup-metrics-section h3{font-size:20px;font-weight:600;color:#111827;margin-bottom:20px}.admin-sup-metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.admin-sup-metric-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb;transition:all .2s ease}.admin-sup-metric-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.admin-sup-metric-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.admin-sup-metric-header h4{font-size:14px;font-weight:600;color:#374151;margin:0}.admin-sup-metric-trend{font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px}.admin-sup-metric-trend.positive{background:#d1fae5;color:#065f46}.admin-sup-metric-trend.negative{background:#fee2e2;color:#991b1b}.admin-sup-metric-value{font-size:28px;font-weight:700;color:#111827;margin-bottom:16px}.admin-sup-metric-chart{display:flex;align-items:end;gap:4px;height:60px}.admin-sup-chart-bar{flex:1;background:#e5e7eb;border-radius:2px 2px 0 0;transition:all .3s ease;cursor:pointer}.admin-sup-chart-bar:hover{background:#3b82f6;opacity:.8}.admin-gen-panel,.admin-gen-dashboard{width:100%;max-width:100%}.admin-gen-dashboard-header{margin-bottom:30px}.admin-gen-dashboard-header h2{font-size:32px;font-weight:700;color:#111827;margin:0 0 8px}.admin-gen-dashboard-header p{font-size:15px;color:#6b7280;margin:0}.admin-gen-dashboard-charts{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-bottom:30px}.admin-gen-chart-container{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-gen-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.admin-gen-chart-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.admin-gen-chart-content{height:200px;display:flex;align-items:center;justify-content:center;background:#f9fafb;border-radius:8px;color:#6b7280;font-style:italic}.admin-gen-bar-chart{display:flex;align-items:end;gap:8px;height:150px;padding:20px 0}.admin-gen-bar{flex:1;background:linear-gradient(to top,#667eea,#764ba2);border-radius:4px 4px 0 0;min-height:20px;position:relative;transition:all .3s ease}.admin-gen-bar:hover{opacity:.8;transform:scaleY(1.05)}.admin-gen-bar-label{position:absolute;bottom:-25px;left:50%;transform:translate(-50%);font-size:11px;color:#6b7280;white-space:nowrap}.admin-gen-user-table{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.admin-gen-user-table table{width:100%;border-collapse:collapse}.admin-gen-user-table th{background:#f9fafb;padding:16px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb}.admin-gen-user-table td{padding:16px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#111827}.admin-gen-user-table tr:last-child td{border-bottom:none}.admin-gen-user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:12px}.admin-gen-user-info{display:flex;flex-direction:column;gap:2px}.admin-gen-user-name{font-weight:600;color:#111827}.admin-gen-user-email{font-size:12px;color:#6b7280}.admin-gen-status-badge{display:inline-block;padding:4px 8px;font-size:11px;font-weight:600;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}.admin-gen-status-badge.active{background:#d1fae5;color:#059669}.admin-gen-status-badge.inactive{background:#fee2e2;color:#dc2626}.admin-gen-grade-badge{display:inline-block;padding:4px 8px;font-size:11px;font-weight:600;border-radius:4px;background:#e0e7ff;color:#3730a3}.admin-gen-stats-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:30px}.admin-gen-overview-card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 1px 3px #0000001a;text-align:center}.admin-gen-overview-icon{width:48px;height:48px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:24px}.admin-gen-overview-title{font-size:13px;font-weight:500;color:#6b7280;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.admin-gen-overview-value{font-size:24px;font-weight:700;color:#111827;margin-bottom:4px}.admin-gen-overview-change{font-size:12px;font-weight:600}.admin-gen-overview-change.positive{color:#10b981}.admin-gen-overview-change.negative{color:#ef4444}.admin-gen-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.admin-gen-page-header h2{font-size:24px;font-weight:700;color:#111827;margin:0}.admin-gen-filters{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.admin-gen-search-input{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;min-width:200px}.admin-gen-search-input:focus{outline:none;border-color:#667eea}.admin-gen-filter-select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff;cursor:pointer}.admin-gen-filter-select:focus{outline:none;border-color:#667eea}.admin-gen-action-buttons{display:flex;gap:8px;align-items:center}.admin-gen-action-button{padding:6px 12px;font-size:12px;font-weight:500;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;cursor:pointer;transition:all .2s ease}.admin-gen-action-button:hover{background:#f9fafb;border-color:#9ca3af}.admin-gen-action-button.primary{background:#667eea;color:#fff;border-color:#667eea}.admin-gen-action-button.primary:hover{background:#5568d3;border-color:#5568d3}.admin-gen-action-button.danger{color:#dc2626;border-color:#dc2626}.admin-gen-action-button.danger:hover{background:#fee2e2;border-color:#fecaca}.admin-gen-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px}.admin-gen-pagination-button{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;cursor:pointer;transition:all .2s ease}.admin-gen-pagination-button:hover:not(:disabled){background:#f9fafb;border-color:#9ca3af}.admin-gen-pagination-button:disabled{opacity:.5;cursor:not-allowed}.admin-gen-pagination-button.active{background:#667eea;color:#fff;border-color:#667eea}.admin-gen-pagination-info{font-size:14px;color:#6b7280;margin:0 16px}.admin-con-panel,.admin-con-dashboard{width:100%;max-width:100%}.admin-con-dashboard-header{margin-bottom:30px}.admin-con-dashboard-header h2{font-size:32px;font-weight:700;color:#111827;margin:0 0 8px}.admin-con-dashboard-header p{font-size:15px;color:#6b7280;margin:0}.admin-con-quick-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:30px}.admin-con-quick-action{background:#fff;padding:20px;border-radius:12px;box-shadow:0 1px 3px #0000001a;text-align:center;cursor:pointer;transition:all .2s ease;border:2px solid transparent}.admin-con-quick-action:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;border-color:#667eea}.admin-con-quick-action-icon{font-size:32px;margin-bottom:12px;display:block}.admin-con-quick-action-title{font-size:16px;font-weight:600;color:#111827;margin-bottom:4px}.admin-con-quick-action-desc{font-size:13px;color:#6b7280}.admin-con-upload-steps{display:flex;align-items:center;gap:20px;margin-bottom:30px;position:relative}.admin-con-upload-steps:before{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:#e5e7eb;z-index:1}.admin-con-upload-step{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;padding:16px;border-radius:12px;box-shadow:0 1px 3px #0000001a;position:relative;z-index:2;min-width:120px}.admin-con-upload-step.active{border:2px solid #667eea;background:#f8faff}.admin-con-upload-step.completed{border:2px solid #10b981;background:#f0fdf4}.admin-con-step-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600}.admin-con-upload-step.active .admin-con-step-icon{background:#667eea;color:#fff}.admin-con-upload-step.completed .admin-con-step-icon{background:#10b981;color:#fff}.admin-con-upload-step:not(.active):not(.completed) .admin-con-step-icon{background:#f3f4f6;color:#9ca3af}.admin-con-step-title{font-size:14px;font-weight:600;color:#111827;text-align:center}.admin-con-step-desc{font-size:12px;color:#6b7280;text-align:center}.admin-con-drop-zone{border:2px dashed #d1d5db;border-radius:12px;padding:60px 20px;text-align:center;background:#f9fafb;transition:all .2s ease;cursor:pointer}.admin-con-drop-zone:hover{border-color:#667eea;background:#f8faff}.admin-con-drop-zone.dragover{border-color:#667eea;background:#f0f4ff}.admin-con-drop-icon{font-size:48px;color:#9ca3af;margin-bottom:16px}.admin-con-drop-text{font-size:18px;font-weight:600;color:#111827;margin-bottom:8px}.admin-con-drop-desc{font-size:14px;color:#6b7280;margin-bottom:20px}.admin-con-drop-button{padding:12px 24px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.admin-con-drop-button:hover{background:#5568d3;transform:translateY(-1px)}.admin-con-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:30px}.admin-con-form-group{display:flex;flex-direction:column;gap:8px}.admin-con-form-group label{font-size:14px;font-weight:600;color:#374151}.admin-con-form-group input,.admin-con-form-group select,.admin-con-form-group textarea{padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:border-color .2s ease}.admin-con-form-group input:focus,.admin-con-form-group select:focus,.admin-con-form-group textarea:focus{outline:none;border-color:#667eea}.admin-con-form-group textarea{min-height:100px;resize:vertical}.admin-con-media-upload-section{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:30px}.admin-con-upload-section{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-con-upload-section h3{font-size:18px;font-weight:600;color:#111827;margin:0 0 16px}.admin-con-file-input{width:100%;padding:12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;cursor:pointer}.admin-con-file-input:focus{outline:none;border-color:#667eea}.admin-con-flashcard-table{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.admin-con-flashcard-table table{width:100%;border-collapse:collapse}.admin-con-flashcard-table th{background:#f9fafb;padding:16px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb}.admin-con-flashcard-table td{padding:16px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#111827}.admin-con-flashcard-table tr:last-child td{border-bottom:none}.admin-con-thai-text{font-size:18px;font-weight:600;color:#111827;margin-bottom:4px}.admin-con-english-text{font-size:14px;color:#6b7280}.admin-con-grade-badge{display:inline-block;padding:4px 8px;font-size:11px;font-weight:600;border-radius:4px;background:#e0e7ff;color:#3730a3}.admin-con-media-status{display:flex;gap:8px;align-items:center}.admin-con-status-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.admin-con-status-icon.has{background:#d1fae5;color:#059669}.admin-con-status-icon.missing{background:#fee2e2;color:#dc2626}.admin-con-action-buttons{display:flex;gap:8px;align-items:center}.admin-con-action-button{padding:6px 12px;font-size:12px;font-weight:500;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;cursor:pointer;transition:all .2s ease}.admin-con-action-button:hover{background:#f9fafb;border-color:#9ca3af}.admin-con-action-button.primary{background:#667eea;color:#fff;border-color:#667eea}.admin-con-action-button.primary:hover{background:#5568d3;border-color:#5568d3}.admin-con-action-button.danger{color:#dc2626;border-color:#dc2626}.admin-con-action-button.danger:hover{background:#fee2e2;border-color:#fecaca}.admin-con-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.admin-con-page-header h2{font-size:24px;font-weight:700;color:#111827;margin:0}.admin-con-filters{display:flex;gap:12px;align-items:center;margin-bottom:20px;flex-wrap:wrap}.admin-con-search-input{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;min-width:200px}.admin-con-search-input:focus{outline:none;border-color:#667eea}.admin-con-filter-select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;background:#fff;cursor:pointer}.admin-con-filter-select:focus{outline:none;border-color:#667eea}.admin-con-template-buttons{display:flex;gap:8px;margin-bottom:20px}.admin-con-template-button{padding:8px 16px;font-size:13px;font-weight:500;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#374151;cursor:pointer;transition:all .2s ease}.admin-con-template-button:hover{background:#f9fafb;border-color:#9ca3af}.admin-con-template-button.active{background:#667eea;color:#fff;border-color:#667eea}.admin-con-template-button.active:hover{background:#5568d3;border-color:#5568d3}.admin-user-management{width:100%;max-width:100%}.admin-user-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e5e7eb}.admin-user-header h2{font-size:28px;font-weight:700;color:#111827;margin:0}.admin-user-actions{display:flex;gap:12px}.admin-user-action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.admin-user-action-btn.primary{background:#3b82f6;color:#fff}.admin-user-action-btn.primary:hover{background:#2563eb;transform:translateY(-1px)}.admin-user-action-btn.secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.admin-user-action-btn.secondary:hover{background:#e5e7eb;border-color:#9ca3af}.admin-user-action-btn.danger{background:#fee2e2;color:#dc2626}.admin-user-action-btn.danger:hover{background:#fecaca}.admin-user-action-btn.small{padding:6px 8px;font-size:12px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}.admin-user-filters{display:flex;gap:16px;margin-bottom:24px;align-items:center;flex-wrap:wrap}.admin-user-search{position:relative;flex:1;min-width:300px}.admin-user-search-input{width:100%;padding:12px 16px 12px 40px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:border-color .2s ease}.admin-user-search-input:focus{outline:none;border-color:#3b82f6}.admin-user-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:16px;background:none;border:none;cursor:pointer;padding:0}.admin-user-search form{position:relative;display:flex;align-items:center}.admin-user-filter-group{display:flex;gap:12px}.admin-user-filter-select{padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s ease}.admin-user-filter-select:focus{outline:none;border-color:#3b82f6}.admin-user-table-container{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a;margin-bottom:24px}.admin-user-table{width:100%;border-collapse:collapse}.admin-user-table th{background:#f9fafb;padding:16px 12px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;white-space:nowrap}.admin-user-table td{padding:16px 12px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#111827;vertical-align:middle}.admin-user-table tr:last-child td{border-bottom:none}.admin-user-table tr:hover{background:#f9fafb}.admin-user-table tr.selected{background:#eff6ff}.admin-user-checkbox{width:16px;height:16px;cursor:pointer}.admin-user-info{display:flex;align-items:center;gap:12px}.admin-user-avatar{width:40px;height:40px;border-radius:50%;background:#3b82f6;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;overflow:hidden}.admin-user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}.admin-user-details{display:flex;flex-direction:column;gap:2px}.admin-user-name{font-weight:600;color:#111827}.admin-user-email{font-size:12px;color:#6b7280}.admin-user-nickname{font-size:11px;color:#9ca3af;font-style:italic}.role-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase}.role-badge.user-role{background:#e0e7ff;color:#3730a3}.role-badge.content-admin-role{background:#fef3c7;color:#92400e}.role-badge.general-admin-role{background:#d1fae5;color:#065f46}.role-badge.super-admin-role{background:#fee2e2;color:#991b1b}.status-badge.inactive-status{background:#f3f4f6;color:#6b7280}.status-badge.suspended-status{background:#fee2e2;color:#991b1b}.status-badge.free-status{background:#f3f4f6;color:#6b7280}.status-badge.premium-status{background:#d1fae5;color:#065f46}.admin-user-progress{display:flex;align-items:center;gap:8px;min-width:120px}.admin-user-progress-bar{flex:1;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.admin-user-progress-text{font-size:12px;font-weight:600;color:#374151;min-width:35px}.admin-user-grade{display:inline-block;padding:4px 8px;background:#f0f9ff;color:#0369a1;border-radius:6px;font-size:12px;font-weight:600}.admin-user-level{font-size:10px;color:#9ca3af;margin-top:2px}.admin-user-date{font-size:12px;color:#6b7280}.admin-user-provider{display:inline-block;padding:2px 6px;background:#f0f9ff;color:#0369a1;border-radius:4px;font-size:11px;font-weight:500}.admin-user-actions-cell{display:flex;gap:4px;align-items:center}.admin-user-role-select{padding:4px 6px;border:1px solid #d1d5db;border-radius:4px;font-size:11px;background:#fff;cursor:pointer;min-width:80px}.admin-user-role-select:focus{outline:none;border-color:#3b82f6}.admin-user-pagination{display:flex;justify-content:space-between;align-items:center;padding:16px 0}.admin-user-pagination-info{font-size:14px;color:#6b7280}.admin-user-pagination-controls{display:flex;align-items:center;gap:12px}.admin-user-pagination-btn{padding:8px 12px;border:1px solid #d1d5db;background:#fff;color:#374151;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease}.admin-user-pagination-btn:hover:not(:disabled){background:#f9fafb;border-color:#9ca3af}.admin-user-pagination-btn:disabled{opacity:.5;cursor:not-allowed}.admin-user-pagination-page{font-size:14px;color:#374151;font-weight:600}.admin-user-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.admin-user-loading p{color:#6b7280;font-size:14px;margin:0}.admin-user-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin-bottom:24px}.admin-user-error p{color:#dc2626;font-size:14px;margin:0 0 16px}.retry-btn{padding:8px 16px;background:#dc2626;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.retry-btn:hover{background:#b91c1c}.temp-cleanup-btn{background:#f59e0b!important;color:#fff!important}.temp-cleanup-btn:hover{background:#d97706!important}.admin-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.admin-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;max-width:600px;width:90%;max-height:80vh;overflow-y:auto}.admin-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb}.admin-modal-header h3{margin:0;font-size:20px;font-weight:600;color:#111827}.admin-modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#6b7280;padding:4px;border-radius:4px;transition:background-color .2s}.admin-modal-close:hover{background:#f3f4f6}.admin-modal-body{padding:24px}.temp-user-stats h4{margin:0 0 12px;font-size:16px;font-weight:600;color:#111827}.temp-user-count{margin:0 0 16px;font-size:14px;color:#374151}.temp-user-count strong{color:#dc2626;font-size:18px}.recent-temp-users{margin-top:16px}.recent-temp-users h5{margin:0 0 8px;font-size:14px;font-weight:600;color:#374151}.recent-temp-users ul{margin:0;list-style:none;max-height:200px;overflow-y:auto;border:1px solid #e5e7eb;border-radius:6px;padding:8px}.recent-temp-users li{padding:4px 0;font-size:12px;color:#6b7280;border-bottom:1px solid #f3f4f6}.recent-temp-users li:last-child{border-bottom:none}.temp-user-warning{margin-top:20px;padding:16px;background:#fef3c7;border:1px solid #f59e0b;border-radius:8px}.temp-user-warning h4{margin:0 0 8px;font-size:14px;font-weight:600;color:#92400e}.temp-user-warning ul{margin:0;padding-left:16px}.temp-user-warning li{font-size:13px;color:#92400e;margin-bottom:4px}.admin-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid #e5e7eb}.admin-modal-btn{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.admin-modal-btn.secondary{background:#f3f4f6;color:#374151}.admin-modal-btn.secondary:hover{background:#e5e7eb}.admin-modal-btn.danger{background:#dc2626;color:#fff}.admin-modal-btn.danger:hover{background:#b91c1c}.admin-modal-btn.danger:disabled{background:#9ca3af;cursor:not-allowed}.admin-flashcard-management{width:100%;max-width:100%}.admin-flashcard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e5e7eb}.admin-flashcard-header h2{font-size:28px;font-weight:700;color:#111827;margin:0}.admin-flashcard-actions{display:flex;gap:12px}.admin-flashcard-action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.admin-flashcard-action-btn.primary{background:#3b82f6;color:#fff}.admin-flashcard-action-btn.primary:hover{background:#2563eb;transform:translateY(-1px)}.admin-flashcard-action-btn.secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.admin-flashcard-action-btn.secondary:hover{background:#e5e7eb;border-color:#9ca3af}.admin-flashcard-action-btn.danger{background:#fee2e2;color:#dc2626}.admin-flashcard-action-btn.danger:hover{background:#fecaca}.admin-flashcard-action-btn.small{padding:6px 8px;font-size:12px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}.admin-flashcard-selection-steps{display:flex;gap:24px;margin-top:24px;justify-content:center;flex-wrap:wrap}.admin-flashcard-step{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#f8faff;border:2px solid #e0e7ff;border-radius:12px;min-width:120px}.step-number{width:32px;height:32px;background:#3b82f6;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px}.admin-flashcard-step span:last-child{font-size:14px;color:#374151;font-weight:500;text-align:center}.admin-flashcard-selection{display:flex;align-items:center;justify-content:center;min-height:400px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-flashcard-selection-content{text-align:center;max-width:400px}.admin-flashcard-selection-icon{font-size:64px;margin-bottom:20px;opacity:.5}.admin-flashcard-selection-content h3{font-size:24px;font-weight:600;color:#111827;margin:0 0 12px}.admin-flashcard-selection-content p{font-size:16px;color:#6b7280;line-height:1.5;margin:0}.admin-flashcard-detail{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.admin-flashcard-detail-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.admin-flashcard-detail-title{display:flex;align-items:center;gap:12px}.admin-flashcard-detail-title h3{font-size:20px;font-weight:600;color:#111827;margin:0}.admin-flashcard-detail-count{font-size:14px;color:#6b7280;background:#e5e7eb;padding:4px 8px;border-radius:6px}.admin-flashcard-back-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f3f4f6;color:#374151;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.admin-flashcard-back-btn:hover{background:#e5e7eb;border-color:#9ca3af}.admin-flashcard-filters{display:flex;gap:16px;margin:24px;align-items:center;flex-wrap:wrap}.admin-flashcard-search{position:relative;flex:1;min-width:300px}.admin-flashcard-search-input{width:100%;padding:12px 16px 12px 40px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:border-color .2s ease}.admin-flashcard-search-input:focus{outline:none;border-color:#3b82f6}.admin-flashcard-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:16px}.admin-flashcard-filter-group{display:flex;gap:12px}.admin-flashcard-filter-select{padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s ease}.admin-flashcard-filter-select:focus{outline:none;border-color:#3b82f6}.admin-flashcard-table-container{overflow-x:auto;margin:0 24px 24px}.admin-flashcard-table{width:100%;border-collapse:collapse}.admin-flashcard-table th{background:#f9fafb;padding:16px 12px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;white-space:nowrap}.admin-flashcard-table td{padding:16px 12px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#111827;vertical-align:middle}.admin-flashcard-table tr:last-child td{border-bottom:none}.admin-flashcard-table tr:hover{background:#f9fafb}.admin-flashcard-table tr.selected{background:#eff6ff}.admin-flashcard-checkbox{width:16px;height:16px;cursor:pointer}.admin-flashcard-thai-text{font-size:18px;font-weight:600;color:#111827;margin-bottom:4px}.admin-flashcard-english-text{font-size:14px;color:#6b7280;margin-bottom:2px}.admin-flashcard-korean-text{font-size:14px;color:#374151;font-weight:500}.admin-flashcard-media-status{display:flex;gap:8px;align-items:center}.admin-flashcard-date{font-size:12px;color:#6b7280}.admin-flashcard-actions-cell{display:flex;gap:4px}.admin-flashcard-pagination{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#f9fafb;border-top:1px solid #e5e7eb}.admin-flashcard-pagination-info{font-size:14px;color:#6b7280}.admin-flashcard-pagination-controls{display:flex;align-items:center;gap:12px}.admin-flashcard-pagination-btn{padding:8px 12px;border:1px solid #d1d5db;background:#fff;color:#374151;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease}.admin-flashcard-pagination-btn:hover:not(:disabled){background:#f9fafb;border-color:#9ca3af}.admin-flashcard-pagination-btn:disabled{opacity:.5;cursor:not-allowed}.admin-flashcard-pagination-page{font-size:14px;color:#374151;font-weight:600}.admin-flashcard-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:#fff;border-radius:12px}.admin-flashcard-loading p{color:#6b7280;font-size:14px;margin:0}.admin-flashcard-number{font-size:12px;color:#6b7280;font-weight:500;text-align:center;background:#f9fafb;padding:4px 8px;border-radius:4px;display:inline-block;min-width:30px}.admin-flashcard-pronunciation-text{font-size:12px;color:#6b7280;font-style:italic}.admin-flashcard-pos-text{font-size:12px;color:#374151;background:#f3f4f6;padding:2px 6px;border-radius:4px;display:inline-block}.admin-flashcard-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.admin-flashcard-modal{background:#fff;border-radius:12px;width:90%;max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a}.admin-flashcard-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb}.admin-flashcard-modal-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.admin-flashcard-modal-close{width:32px;height:32px;border:none;background:#f3f4f6;border-radius:6px;color:#6b7280;font-size:16px;cursor:pointer;transition:all .2s ease}.admin-flashcard-modal-close:hover{background:#e5e7eb;color:#374151}.admin-flashcard-modal-content{padding:24px}.admin-flashcard-media-section{margin-bottom:24px}.admin-flashcard-media-section h4{font-size:14px;font-weight:600;color:#374151;margin:0 0 12px}.admin-flashcard-file-upload{display:flex;flex-direction:column;gap:12px}.admin-flashcard-file-input{padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;cursor:pointer;transition:border-color .2s ease}.admin-flashcard-file-input:focus{outline:none;border-color:#3b82f6}.admin-flashcard-current-media{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.admin-flashcard-new-media{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#f0f9ff;border-radius:8px;border:2px solid #3b82f6}.admin-flashcard-preview-image{max-width:200px;max-height:150px;border-radius:8px;object-fit:cover}.admin-flashcard-preview-audio{width:100%;max-width:300px}.admin-flashcard-current-label{font-size:12px;color:#6b7280;font-weight:500}.admin-flashcard-new-label{font-size:12px;color:#3b82f6;font-weight:600}.admin-flashcard-recording-section{margin:12px 0;padding:16px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.admin-flashcard-record-btn{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:8px;width:100%;justify-content:center}.admin-flashcard-record-btn:hover:not(:disabled){background:#2563eb;transform:translateY(-1px)}.admin-flashcard-record-btn:disabled{background:#9ca3af;cursor:not-allowed}.admin-flashcard-recording-controls{display:flex;flex-direction:column;gap:16px}.admin-flashcard-recording-header{display:flex;justify-content:space-between;align-items:center}.admin-flashcard-recording-indicator{display:flex;align-items:center;gap:8px;color:#dc2626;font-weight:500;font-size:14px}.admin-flashcard-recording-dot{width:12px;height:12px;background:#dc2626;border-radius:50%;animation:pulse 1.5s infinite}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.admin-flashcard-recording-time{font-size:16px;font-weight:600;color:#111827;font-family:Courier New,monospace}.admin-flashcard-waveform{display:flex;align-items:center;justify-content:space-between;height:80px;background:#fff;border-radius:8px;padding:8px 12px;gap:2px;border:1px solid #e5e7eb}.admin-flashcard-waveform-bar{flex:1;min-width:2px;max-width:4px;background:#10b981;border-radius:2px;transition:height .05s ease,background-color .1s ease}.admin-flashcard-recording-actions{display:flex;gap:12px}.admin-flashcard-cancel-btn{flex:1;background:#f3f4f6;color:#374151;border:1px solid #d1d5db;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.admin-flashcard-cancel-btn:hover{background:#e5e7eb;border-color:#9ca3af}.admin-flashcard-save-recording-btn{flex:1;background:#10b981;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:8px}.admin-flashcard-save-recording-btn:hover{background:#059669;transform:translateY(-1px)}.admin-flashcard-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid #e5e7eb;background:#f9fafb;border-radius:0 0 12px 12px}.admin-flashcard-edit-modal{max-width:600px;max-height:90vh;overflow-y:auto}.admin-flashcard-edit-section{margin-bottom:24px}.admin-flashcard-edit-section h4{font-size:16px;font-weight:600;color:#1f2937;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #e5e7eb}.admin-flashcard-form-group{margin-bottom:16px}.admin-flashcard-form-group label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.admin-flashcard-input,.admin-flashcard-select{width:100%;padding:10px 12px;font-size:14px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#1f2937;transition:all .2s}.admin-flashcard-input:focus,.admin-flashcard-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.admin-flashcard-input::placeholder{color:#9ca3af}.admin-flashcard-select{cursor:pointer}.admin-flashcard-preview-overlay{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px}.admin-flashcard-preview-wrapper{position:relative;width:100%;max-width:800px;max-height:90vh;overflow-y:auto}.admin-flashcard-preview-close-btn{position:absolute;top:-50px;right:10px;background:#fff3;border:none;color:#fff;font-size:28px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10001;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.admin-flashcard-preview-close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.admin-flashcard-recording-loading{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#f3f4f6;border-radius:8px;margin-top:12px}.admin-flashcard-recording-loading span{font-size:14px;color:#6b7280;font-weight:500}.admin-content-management{width:100%;max-width:100%}.admin-content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e5e7eb}.admin-content-header h2{font-size:28px;font-weight:700;color:#111827;margin:0}.admin-content-actions{display:flex;gap:12px}.admin-content-action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.admin-content-action-btn.primary{background:#3b82f6;color:#fff}.admin-content-action-btn.primary:hover{background:#2563eb;transform:translateY(-1px)}.admin-content-action-btn.secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.admin-content-action-btn.secondary:hover{background:#e5e7eb;border-color:#9ca3af}.admin-content-action-btn.danger{background:#fee2e2;color:#dc2626}.admin-content-action-btn.danger:hover{background:#fecaca}.admin-content-action-btn.small{padding:6px 8px;font-size:12px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}.admin-content-tabs{display:flex;gap:4px;margin-bottom:24px;background:#f3f4f6;padding:4px;border-radius:8px}.admin-content-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;color:#6b7280;font-size:14px;font-weight:600;cursor:pointer;border-radius:6px;transition:all .2s ease}.admin-content-tab:hover{color:#374151;background:#e5e7eb}.admin-content-tab.active{background:#fff;color:#3b82f6;box-shadow:0 1px 3px #0000001a}.admin-content-filters{display:flex;gap:16px;margin-bottom:24px;align-items:center;flex-wrap:wrap}.admin-content-search{position:relative;flex:1;min-width:300px}.admin-content-search-input{width:100%;padding:12px 16px 12px 40px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:border-color .2s ease}.admin-content-search-input:focus{outline:none;border-color:#3b82f6}.admin-content-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:16px}.admin-content-filter-group{display:flex;gap:12px}.admin-content-filter-select{padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s ease}.admin-content-filter-select:focus{outline:none;border-color:#3b82f6}.admin-content-area{width:100%}.admin-content-section{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.admin-content-section-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.admin-content-section-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.admin-content-stats{font-size:14px;color:#6b7280;font-weight:500}.admin-content-table-container{overflow-x:auto}.admin-content-table{width:100%;border-collapse:collapse}.admin-content-table th{background:#f9fafb;padding:16px 12px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;white-space:nowrap}.admin-content-table td{padding:16px 12px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#111827;vertical-align:middle}.admin-content-table tr:last-child td{border-bottom:none}.admin-content-table tr:hover{background:#f9fafb}.admin-content-thai-text{font-size:18px;font-weight:600;color:#111827;margin-bottom:4px}.admin-content-english-text{font-size:14px;color:#6b7280}.grade-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;color:#fff;text-transform:uppercase}.admin-content-media-status{display:flex;gap:8px;align-items:center}.media-icon{width:24px;height:24px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px}.media-icon.has{background:#d1fae5;color:#065f46}.media-icon.missing{background:#fee2e2;color:#dc2626}.admin-content-date{font-size:12px;color:#6b7280}.admin-content-actions-cell{display:flex;gap:4px}.admin-content-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding:24px}.admin-content-media-card{display:flex;align-items:center;gap:12px;padding:16px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;transition:all .2s ease}.admin-content-media-card:hover{background:#f3f4f6;border-color:#d1d5db}.admin-content-media-icon{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.admin-content-media-info{flex:1;min-width:0}.admin-content-media-name{font-size:14px;font-weight:600;color:#111827;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-content-media-details{display:flex;gap:8px;font-size:12px;color:#6b7280;margin-bottom:4px}.admin-content-media-type{font-weight:500}.admin-content-media-size{color:#9ca3af}.admin-content-media-meta{display:flex;align-items:center;gap:8px}.admin-content-media-date{font-size:11px;color:#9ca3af}.admin-content-media-actions{display:flex;gap:4px}.admin-content-analytics{padding:24px}.admin-content-analytics-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:#f9fafb;border:2px dashed #d1d5db;border-radius:12px;text-align:center}.admin-user-statistics{width:100%;max-width:100%}.admin-user-stats-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e5e7eb}.admin-user-stats-header h2{font-size:28px;font-weight:700;color:#111827;margin:0}.admin-user-stats-controls{display:flex;gap:12px}.admin-user-stats-select{padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s ease}.admin-user-stats-select:focus{outline:none;border-color:#3b82f6}.admin-user-stats-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:32px}.admin-user-metric-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb;transition:all .2s ease}.admin-user-metric-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.admin-user-metric-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.admin-user-metric-header h3{font-size:16px;font-weight:600;color:#374151;margin:0}.admin-user-metric-trend{font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px}.admin-user-metric-trend.positive{background:#d1fae5;color:#065f46}.admin-user-metric-trend.negative{background:#fee2e2;color:#991b1b}.admin-user-metric-value{font-size:32px;font-weight:700;color:#111827;margin-bottom:4px}.admin-user-metric-label{font-size:14px;color:#6b7280}.admin-user-stats-charts{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px}.admin-user-chart-section{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb;overflow:hidden}.admin-user-chart-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.admin-user-chart-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.admin-user-chart-tabs{display:flex;gap:4px;background:#e5e7eb;padding:4px;border-radius:6px}.admin-user-chart-tab{padding:6px 12px;border:none;background:transparent;color:#6b7280;font-size:12px;font-weight:600;cursor:pointer;border-radius:4px;transition:all .2s ease}.admin-user-chart-tab:hover{color:#374151;background:#d1d5db}.admin-user-chart-tab.active{background:#fff;color:#3b82f6;box-shadow:0 1px 2px #0000001a}.admin-user-chart-container{padding:24px}.admin-user-chart{height:200px}.admin-user-chart-bars{display:flex;align-items:end;gap:8px;height:100%}.admin-user-chart-bar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.admin-user-chart-bar-fill{width:100%;background:linear-gradient(180deg,#3b82f6,#1d4ed8);border-radius:4px 4px 0 0;min-height:4px;transition:all .3s ease}.admin-user-chart-bar:hover .admin-user-chart-bar-fill{background:linear-gradient(180deg,#2563eb,#1e40af)}.admin-user-chart-bar-value{font-size:11px;color:#6b7280;margin-top:8px;font-weight:600}.admin-user-grade-distribution{padding:24px}.admin-user-grade-item{display:flex;align-items:center;gap:12px;margin-bottom:16px}.admin-user-grade-item:last-child{margin-bottom:0}.admin-user-grade-info{display:flex;align-items:center;gap:8px;min-width:80px}.admin-user-grade-label{font-size:12px;font-weight:600;color:#374151}.admin-user-grade-count{font-size:11px;color:#6b7280}.admin-user-grade-bar{flex:1;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.admin-user-grade-fill{height:100%;border-radius:4px;transition:width .3s ease}.admin-user-grade-percentage{font-size:12px;font-weight:600;color:#374151;min-width:40px;text-align:right}.admin-user-stats-section{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb;margin-bottom:24px}.admin-user-section-header{padding:20px 24px;background:#f9fafb;border-bottom:1px solid #e5e7eb;border-radius:12px 12px 0 0}.admin-user-section-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.admin-user-progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;padding:24px}.admin-user-progress-card{background:#f9fafb;padding:16px;border-radius:8px;border:1px solid #e5e7eb}.admin-user-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.admin-user-progress-header h4{font-size:14px;font-weight:600;color:#111827;margin:0}.admin-user-progress-count{font-size:12px;color:#6b7280;font-weight:600}.admin-user-progress-bar{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden;margin-bottom:8px}.admin-user-progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#10b981);border-radius:4px;transition:width .3s ease}.admin-user-progress-percentage{font-size:12px;font-weight:600;color:#374151;text-align:right}.admin-user-activity-chart{padding:24px}.admin-user-activity-bars{display:flex;align-items:end;gap:12px;height:150px}.admin-user-activity-bar{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.admin-user-activity-fill{width:100%;background:linear-gradient(180deg,#10b981,#059669);border-radius:4px 4px 0 0;min-height:4px;transition:all .3s ease}.admin-user-activity-bar:hover .admin-user-activity-fill{background:linear-gradient(180deg,#059669,#047857)}.admin-user-activity-time{font-size:11px;color:#6b7280;margin-top:8px;font-weight:600}.admin-user-activity-count{font-size:10px;color:#9ca3af;margin-top:2px}.admin-user-stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.admin-user-summary-card{display:flex;align-items:center;gap:16px;background:#fff;padding:20px;border-radius:12px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb;transition:all .2s ease}.admin-user-summary-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.admin-user-summary-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#f0f9ff;border-radius:12px}.admin-user-summary-content{flex:1}.admin-user-summary-content h4{font-size:14px;font-weight:600;color:#374151;margin:0 0 4px}.admin-user-summary-value{font-size:24px;font-weight:700;color:#111827;margin-bottom:4px}.admin-user-summary-change{font-size:12px;font-weight:600}.admin-user-summary-change.positive{color:#10b981}.admin-user-summary-change.negative{color:#ef4444}.admin-lp-container{padding:24px;max-width:1600px;margin:0 auto}.admin-lp-instruction{text-align:center;padding:60px 20px;background:#f8f9fa;border-radius:12px;margin:40px 0}.admin-lp-instruction h2{font-size:24px;color:#2c3e50;margin-bottom:12px}.admin-lp-instruction p{font-size:16px;color:#6b7280}.admin-lp-loading{text-align:center;padding:60px 20px;font-size:18px;color:#6b7280}.admin-lp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:20px;border-bottom:2px solid #e5e7eb}.admin-lp-title-section{display:flex;align-items:center;gap:12px}.admin-lp-title-section h1{font-size:28px;color:#1f2937;margin:0}.admin-lp-grade-badge{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:600}.admin-lp-tabs{display:flex;gap:8px;margin-bottom:24px;background:#f3f4f6;padding:4px;border-radius:12px}.admin-lp-tab{flex:1;padding:12px 24px;background:transparent;border:none;border-radius:8px;font-size:15px;font-weight:600;color:#6b7280;cursor:pointer;transition:all .2s}.admin-lp-tab:hover{color:#1f2937;background:#ffffff80}.admin-lp-tab.active{background:#fff;color:#3b82f6;box-shadow:0 1px 3px #0000001a}.admin-lp-tab-content{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.admin-lp-tab-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #e5e7eb}.admin-lp-tab-header h2{font-size:20px;color:#1f2937;margin:0}.admin-lp-header-actions{display:flex;gap:12px;align-items:center}.admin-lp-filter-select{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#1f2937;background:#fff;cursor:pointer;min-width:200px}.admin-lp-add-btn{background:#3b82f6;color:#fff;border:none;padding:10px 20px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.admin-lp-add-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.admin-lp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}.admin-lp-stat-card{background:#f8f9fa;padding:16px;border-radius:8px;border:1px solid #e5e7eb}.admin-lp-stat-label{font-size:13px;color:#6b7280;margin-bottom:6px}.admin-lp-stat-value{font-size:22px;font-weight:700;color:#1f2937}.admin-lp-table-container{overflow-x:auto;border-radius:8px;border:1px solid #e5e7eb}.admin-lp-table{width:100%;border-collapse:collapse;font-size:14px}.admin-lp-table thead{background:#f8f9fa;border-bottom:2px solid #e5e7eb}.admin-lp-table th{padding:12px 16px;text-align:left;font-weight:600;color:#374151;white-space:nowrap}.admin-lp-table td{padding:12px 16px;border-bottom:1px solid #f3f4f6;color:#1f2937}.admin-lp-table tbody tr:hover{background:#f9fafb}.admin-lp-table-title{font-weight:600;color:#1f2937}.admin-lp-table-subtitle{color:#6b7280;font-size:13px}.admin-lp-table-ellipsis{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-lp-icon{font-size:20px;display:inline-block}.admin-lp-color-preview{width:32px;height:32px;border-radius:6px;border:2px solid #e5e7eb}.admin-lp-type-badge{display:inline-block;padding:4px 10px;background:#dbeafe;color:#1e40af;border-radius:12px;font-size:12px;font-weight:600}.admin-lp-status-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}.admin-lp-status-badge.active{background:#d1fae5;color:#065f46}.admin-lp-status-badge.inactive{background:#fee2e2;color:#991b1b}.admin-lp-file-badge{font-size:16px}.admin-lp-file-badge.empty{opacity:.3}.admin-lp-table-actions{display:flex;gap:8px;align-items:center}.admin-lp-action-icon{background:none;border:none;font-size:18px;cursor:pointer;padding:4px;opacity:.7;transition:all .2s}.admin-lp-action-icon:hover{opacity:1;transform:scale(1.2)}.admin-lp-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.admin-lp-modal{background:#fff;border-radius:16px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a}.admin-lp-modal.large{max-width:800px}.admin-lp-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb;position:sticky;top:0;background:#fff;z-index:1}.admin-lp-modal-header h2{font-size:20px;color:#1f2937;margin:0}.admin-lp-modal-close{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px 8px;line-height:1;transition:color .2s}.admin-lp-modal-close:hover{color:#1f2937}.admin-lp-modal-form{padding:24px}.admin-lp-form-group{margin-bottom:20px}.admin-lp-form-group label{display:block;font-size:14px;font-weight:600;color:#374151;margin-bottom:8px}.admin-lp-input,.admin-lp-textarea,.admin-lp-select,.admin-lp-input-disabled{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#1f2937;transition:border-color .2s;box-sizing:border-box}.admin-lp-input:focus,.admin-lp-textarea:focus,.admin-lp-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.admin-lp-input-disabled{background:#f3f4f6;color:#6b7280;cursor:not-allowed}.admin-lp-textarea{resize:vertical;min-height:80px;font-family:inherit}.admin-lp-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}.admin-lp-form-row .admin-lp-form-group{margin-bottom:0}.admin-lp-modal-actions{display:flex;gap:12px;border-top:1px solid #e5e7eb;position:sticky;bottom:0;background:#fff;margin:0 -24px -24px;padding:20px 24px}.admin-lp-btn-cancel,.admin-lp-btn-save{flex:1;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;border:none}.admin-lp-btn-cancel{background:#f3f4f6;color:#6b7280}.admin-lp-btn-cancel:hover{background:#e5e7eb;color:#374151}.admin-lp-btn-save{background:#3b82f6;color:#fff}.admin-lp-btn-save:hover{background:#2563eb;box-shadow:0 4px 12px #3b82f64d}.admin-lp-accordion-container{display:flex;flex-direction:column;gap:12px}.admin-lp-accordion-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;transition:all .2s}.admin-lp-accordion-item:hover{box-shadow:0 2px 8px #00000014}.admin-lp-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;cursor:pointer;transition:background .2s;border-left:4px solid #3b82f6}.admin-lp-accordion-header:hover{background:#f9fafb}.admin-lp-accordion-left{display:flex;align-items:center;gap:16px;flex:1}.admin-lp-accordion-icon{font-size:32px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:12px}.admin-lp-accordion-info{flex:1}.admin-lp-accordion-title{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 4px}.admin-lp-accordion-subtitle{font-size:14px;color:#6b7280;margin:0}.admin-lp-accordion-right{display:flex;align-items:center;gap:16px}.admin-lp-accordion-count{font-size:14px;font-weight:600;color:#6b7280;padding:6px 12px;background:#f3f4f6;border-radius:20px}.admin-lp-accordion-toggle{font-size:16px;color:#9ca3af;transition:transform .2s}.admin-lp-accordion-content{padding:0 24px 24px;background:#f9fafb}.admin-lp-accordion-empty{text-align:center;padding:40px 20px;color:#6b7280}.admin-lp-accordion-empty p{margin:0}.admin-lp-lesson-table-wrapper{padding-top:12px;overflow-x:auto}.admin-lp-lesson-table{width:100%;border-collapse:collapse;font-size:14px;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px #0000000d}.admin-lp-lesson-table thead{background:#f8f9fa;border-bottom:2px solid #e5e7eb}.admin-lp-lesson-table th{padding:12px 16px;text-align:left;font-weight:600;color:#374151;white-space:nowrap;font-size:13px}.admin-lp-lesson-table td{padding:12px 16px;border-bottom:1px solid #f3f4f6;color:#1f2937}.admin-lp-lesson-table tbody tr:hover{background:#f9fafb}.admin-lp-lesson-table tbody tr:last-child td{border-bottom:none}.admin-lp-difficulty-badge{display:inline-block;padding:4px 8px;border-radius:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.admin-lp-difficulty-badge.쉬움,.admin-lp-difficulty-badge.easy{background:#d1fae5;color:#065f46}.admin-lp-difficulty-badge.보통,.admin-lp-difficulty-badge.medium{background:#fef3c7;color:#92400e}.admin-lp-difficulty-badge.어려움,.admin-lp-difficulty-badge.hard{background:#fee2e2;color:#991b1b}.admin-lp-difficulty-badge.unknown{background:#f3f4f6;color:#6b7280}.admin-lp-lesson-id-cell{font-family:monospace;font-size:13px;color:#6b7280}.admin-lp-lesson-emoji-cell{text-align:center;width:60px}.admin-lp-lesson-emoji{font-size:24px}.admin-lp-lesson-title-cell{font-weight:600;color:#1f2937}.admin-lp-lesson-words-cell{color:#6b7280;white-space:nowrap}.admin-lp-lesson-order-cell{text-align:center;font-weight:600;color:#6b7280;width:80px}.admin-lp-lesson-actions-cell{width:100px}.admin-lp-content-accordion{display:flex;flex-direction:column;gap:16px}.admin-lp-content-card-group{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}.admin-lp-content-card-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;cursor:pointer;transition:background .2s;border-left:4px solid #3b82f6}.admin-lp-content-card-header:hover{background:#f9fafb}.admin-lp-content-card-left{display:flex;align-items:center;gap:16px;flex:1}.admin-lp-content-card-icon{font-size:32px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:12px}.admin-lp-content-card-info{flex:1}.admin-lp-content-card-title{font-size:18px;font-weight:600;color:#1f2937;margin:0 0 4px}.admin-lp-content-card-subtitle{font-size:14px;color:#6b7280;margin:0}.admin-lp-content-card-right{display:flex;align-items:center;gap:16px}.admin-lp-content-card-count{font-size:14px;font-weight:600;color:#6b7280;padding:6px 12px;background:#f3f4f6;border-radius:20px}.admin-lp-content-toggle{font-size:16px;color:#9ca3af}.admin-lp-content-lessons-container{background:#f9fafb;padding:16px 24px}.admin-lp-content-lesson-group{background:#fff;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;overflow:hidden}.admin-lp-content-lesson-group:last-child{margin-bottom:0}.admin-lp-content-lesson-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;cursor:pointer;transition:background .2s;background:#fff}.admin-lp-content-lesson-header:hover{background:#f9fafb}.admin-lp-content-lesson-left{display:flex;align-items:center;gap:12px;flex:1}.admin-lp-content-lesson-emoji{font-size:24px}.admin-lp-content-lesson-title{font-size:15px;font-weight:600;color:#1f2937}.admin-lp-content-lesson-id{font-size:12px;color:#9ca3af;font-family:monospace;padding:4px 8px;background:#f3f4f6;border-radius:6px}.admin-lp-content-lesson-right{display:flex;align-items:center;gap:12px}.admin-lp-content-lesson-count{font-size:13px;font-weight:600;color:#6b7280;padding:4px 10px;background:#f3f4f6;border-radius:12px}.admin-lp-content-pages-container{padding:16px 20px;background:#f9fafb}.admin-lp-content-pages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.admin-lp-content-page-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;transition:all .2s}.admin-lp-content-page-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.admin-lp-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.admin-lp-page-number{font-size:14px;font-weight:700;color:#3b82f6;padding:4px 10px;background:#dbeafe;border-radius:8px}.admin-lp-page-type{font-size:12px;font-weight:600;color:#6b7280;padding:4px 8px;background:#f3f4f6;border-radius:6px}.admin-lp-page-body{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #f3f4f6}.admin-lp-page-title{font-size:15px;font-weight:600;color:#1f2937;margin:0 0 8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.admin-lp-page-description{font-size:13px;color:#6b7280;margin:0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.admin-lp-page-footer{display:flex;justify-content:space-between;align-items:center}.admin-lp-page-meta{display:flex;gap:6px;flex-wrap:wrap}.admin-lp-page-badge{font-size:11px;padding:3px 8px;background:#f3f4f6;color:#6b7280;border-radius:8px;font-weight:500}.admin-lp-page-actions{display:flex;gap:6px}.admin-lp-page-btn{width:32px;height:32px;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.admin-lp-page-btn.edit{background:#dbeafe}.admin-lp-page-btn.edit:hover{background:#bfdbfe}.admin-lp-page-btn.delete{background:#fee2e2}.admin-lp-page-btn.delete:hover{background:#fecaca}.admin-lp-content-empty{text-align:center;padding:40px 20px;color:#6b7280}.admin-lp-content-empty p{margin:0}.admin-lp-modal-split{display:flex;background:#fff;border-radius:16px;width:95%;max-width:1400px;height:90vh;max-height:900px;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a}.admin-lp-modal-left{flex:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #e5e7eb}.admin-lp-modal-left .admin-lp-modal-form{flex:1;overflow-y:auto}.admin-lp-modal-right{width:500px;display:flex;flex-direction:column;background:#f9fafb}.admin-lp-preview-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e5e7eb;background:#fff}.admin-lp-preview-header h3{font-size:16px;font-weight:600;color:#1f2937;margin:0}.admin-lp-preview-size{font-size:12px;color:#6b7280;padding:4px 10px;background:#f3f4f6;border-radius:12px;font-family:monospace}.admin-lp-preview-container{flex:1;display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden}.admin-lp-preview-content{width:500px;height:900px;background:#fff;border-radius:12px;box-shadow:0 10px 30px #00000026;overflow:hidden;transform:scale(.65);transform-origin:center}.admin-lp-preview-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:18px;color:#9ca3af;text-align:center;padding:40px}.admin-lp-quiz-options{display:flex;flex-direction:column;gap:12px}.admin-lp-quiz-options .admin-lp-form-row{display:flex;gap:12px}.admin-lp-quiz-options .admin-lp-form-group{margin:0}.admin-lp-quiz-options label{font-size:13px;color:#6b7280;font-weight:500}.admin-lp-add-row{cursor:pointer;transition:all .2s}.admin-lp-add-row:hover{background:#f9fafb}.admin-lp-add-row td{padding:20px!important;border:2px dashed #d1d5db!important;border-top:none!important}.admin-lp-add-row-content{display:flex;align-items:center;justify-content:center;gap:8px;color:#6b7280;font-size:14px;font-weight:500}.admin-lp-add-icon{font-size:18px;color:#3b82f6}.admin-lp-add-row:hover .admin-lp-add-row-content{color:#3b82f6}.admin-lp-add-card{border:2px dashed #d1d5db!important;background:transparent!important;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;min-height:200px}.admin-lp-add-card:hover{background:#f9fafb!important;border-color:#3b82f6!important}.admin-lp-add-card-content{display:flex;flex-direction:column;align-items:center;gap:12px;color:#6b7280;font-size:14px;font-weight:500}.admin-lp-add-card:hover .admin-lp-add-card-content{color:#3b82f6}.admin-lp-add-card .admin-lp-add-icon{font-size:32px}.admin-lp-examples-container{display:flex;flex-direction:column;gap:12px}.admin-lp-example-item{display:flex;gap:8px;padding:12px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;align-items:center}.admin-lp-example-item input{margin-bottom:0!important}.admin-lp-example-remove-btn{padding:8px 12px;background:#fee2e2;color:#991b1b;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap;transition:all .2s}.admin-lp-example-remove-btn:hover{background:#fecaca}.admin-lp-example-add-btn{padding:10px;background:#dbeafe;color:#1e40af;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all .2s}.admin-lp-example-add-btn:hover{background:#bfdbfe}.admin-lp-word-quiz-container{display:flex;flex-direction:column;gap:16px}.admin-lp-word-item{padding:16px;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb;transition:all .2s}.admin-lp-word-item.correct{background:#d1fae5;border-color:#10b981}.admin-lp-word-header{display:flex;gap:12px;align-items:center;margin-bottom:8px}.admin-lp-word-number{font-weight:600;color:#374151}.admin-lp-word-correct-checkbox{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:14px;font-weight:600;color:#059669}.admin-lp-word-fields{display:flex;gap:12px}.admin-lp-word-emoji{flex:0 0 80px}.admin-lp-word-meaning{flex:1}@media (max-width: 1200px){.admin-lp-modal-split{flex-direction:column;width:95%;height:95vh}.admin-lp-modal-right{width:100%;height:400px}.admin-lp-preview-content{transform:scale(.45)}}@media (max-width: 768px){.admin-lp-container{padding:16px}.admin-lp-tabs{flex-direction:column}.admin-lp-tab{text-align:center}.admin-lp-tab-header{flex-direction:column;align-items:flex-start;gap:12px}.admin-lp-header-actions{width:100%;flex-direction:column}.admin-lp-filter-select,.admin-lp-add-btn{width:100%}.admin-lp-form-row{grid-template-columns:1fr}.admin-lp-accordion-header{padding:16px}.admin-lp-accordion-left{gap:12px}.admin-lp-accordion-icon{width:48px;height:48px;font-size:24px}.admin-lp-accordion-title{font-size:16px}.admin-lp-accordion-subtitle{font-size:13px}.admin-lp-content-pages-grid{grid-template-columns:1fr}.admin-lp-content-card-header{padding:16px}.admin-lp-content-card-icon{width:48px;height:48px;font-size:24px}.admin-lp-content-lesson-header,.admin-lp-content-pages-container{padding:12px 16px}.admin-lp-word-fields{flex-direction:column}.admin-lp-word-emoji{flex:1}.admin-lp-example-item{flex-direction:column}.admin-lp-example-remove-btn{width:100%}}.admin-challenge-management{width:100%;max-width:100%}.admin-challenge-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e5e7eb}.admin-challenge-header h2{font-size:28px;font-weight:700;color:#111827;margin:0}.admin-challenge-actions{display:flex;gap:12px}.admin-challenge-action-btn{display:flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.admin-challenge-action-btn.primary{background:#3b82f6;color:#fff}.admin-challenge-action-btn.primary:hover{background:#2563eb;transform:translateY(-1px)}.admin-challenge-action-btn.secondary{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.admin-challenge-action-btn.secondary:hover{background:#e5e7eb;border-color:#9ca3af}.admin-challenge-action-btn.danger{background:#fee2e2;color:#dc2626}.admin-challenge-action-btn.danger:hover{background:#fecaca}.admin-challenge-action-btn.small{padding:6px 8px;font-size:12px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}.admin-challenge-tabs{display:flex;gap:4px;margin-bottom:24px;background:#f3f4f6;padding:4px;border-radius:8px}.admin-challenge-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;background:transparent;color:#6b7280;font-size:14px;font-weight:600;cursor:pointer;border-radius:6px;transition:all .2s ease}.admin-challenge-tab:hover{color:#374151;background:#e5e7eb}.admin-challenge-tab.active{background:#fff;color:#3b82f6;box-shadow:0 1px 3px #0000001a}.tab-icon{font-size:16px}.admin-challenge-filters{display:flex;gap:16px;margin-bottom:24px;align-items:center;flex-wrap:wrap}.admin-challenge-search{position:relative;flex:1;min-width:300px}.admin-challenge-search-input{width:100%;padding:12px 16px 12px 40px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:border-color .2s ease}.admin-challenge-search-input:focus{outline:none;border-color:#3b82f6}.admin-challenge-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:16px}.admin-challenge-filter-group{display:flex;gap:12px}.admin-challenge-filter-select{padding:10px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:border-color .2s ease}.admin-challenge-filter-select:focus{outline:none;border-color:#3b82f6}.admin-challenge-area{width:100%}.admin-challenge-section{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a}.admin-challenge-section-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.admin-challenge-section-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.admin-challenge-stats{font-size:14px;color:#6b7280;font-weight:500}.admin-challenge-table-container{overflow-x:auto}.admin-challenge-table{width:100%;border-collapse:collapse}.admin-challenge-table th{background:#f9fafb;padding:16px 12px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;white-space:nowrap}.admin-challenge-table td{padding:16px 12px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#111827;vertical-align:middle}.admin-challenge-table tr:last-child td{border-bottom:none}.admin-challenge-table tr:hover{background:#f9fafb}.admin-challenge-title{font-size:16px;font-weight:600;color:#111827;margin-bottom:4px}.admin-challenge-description{font-size:14px;color:#6b7280;line-height:1.4}.admin-challenge-target{font-size:14px;font-weight:600;color:#374151}.admin-challenge-progress{display:flex;align-items:center;gap:8px;min-width:120px}.progress-bar{flex:1;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#1d4ed8);border-radius:4px;transition:width .3s ease}.progress-text{font-size:12px;font-weight:600;color:#6b7280;min-width:40px;text-align:right}.admin-challenge-reward{display:flex;align-items:center;gap:6px}.reward-icon{font-size:16px}.reward-text{font-size:14px;font-weight:500;color:#374151}.admin-challenge-period{display:flex;align-items:center}.period-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase}.period-badge.daily{background:#dbeafe;color:#1e40af}.period-badge.weekly{background:#dcfce7;color:#166534}.period-badge.monthly{background:#fef3c7;color:#92400e}.admin-challenge-reset-time{font-size:12px;color:#6b7280;font-weight:500}.status-badge{display:inline-block;padding:4px 8px;border-radius:6px;font-size:11px;font-weight:600}.status-badge.active-status{background:#d1fae5;color:#065f46}.status-badge.draft-status{background:#fef3c7;color:#92400e}.status-badge.archived-status{background:#f3f4f6;color:#6b7280}.admin-challenge-date{font-size:12px;color:#6b7280}.admin-challenge-actions-cell{display:flex;gap:4px}.admin-challenge-achievement{display:flex;align-items:center;gap:4px;font-size:14px}.achievement-count{font-weight:600;color:#111827}.achievement-total{color:#6b7280;font-size:13px}.admin-challenge-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.admin-challenge-modal{background:#fff;border-radius:12px;width:90%;max-width:600px;max-height:80vh;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.admin-challenge-modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.admin-challenge-modal-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.admin-challenge-modal-close{background:none;border:none;font-size:20px;color:#6b7280;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.admin-challenge-modal-close:hover{background:#e5e7eb;color:#374151}.admin-challenge-modal-content{padding:24px}.admin-challenge-modal-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:#f9fafb;border:2px dashed #d1d5db;border-radius:12px;text-align:center}.placeholder-icon{font-size:48px;margin-bottom:16px;opacity:.5}.placeholder-text{font-size:18px;font-weight:600;color:#374151;margin-bottom:8px}.placeholder-desc{font-size:14px;color:#6b7280;max-width:400px;line-height:1.5}.stats-dashboard{width:100%}.stats-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;flex-wrap:wrap;gap:16px}.period-selector{display:flex;gap:8px;background:#f3f4f6;padding:4px;border-radius:8px}.period-btn{padding:8px 20px;border:none;background:transparent;color:#6b7280;font-size:14px;font-weight:600;cursor:pointer;border-radius:6px;transition:all .2s ease}.period-btn:hover{color:#374151}.period-btn.active{background:#fff;color:#3b82f6;box-shadow:0 1px 3px #0000001a}.date-selector{display:flex;gap:12px}.date-select{padding:8px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;font-weight:500;background:#fff;cursor:pointer;transition:border-color .2s ease}.date-select:focus{outline:none;border-color:#3b82f6}.chart-type-selector{display:flex;gap:8px}.chart-type-btn{padding:8px 16px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;color:#6b7280;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.chart-type-btn:hover{border-color:#3b82f6;color:#3b82f6}.chart-type-btn.active{background:#3b82f6;color:#fff;border-color:#3b82f6}.kpi-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:24px}.kpi-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb;transition:all .3s ease}.kpi-card:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.kpi-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.kpi-icon{font-size:28px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:10px}.kpi-label{font-size:14px;color:#6b7280;font-weight:500}.kpi-value{font-size:36px;font-weight:700;color:#111827;margin-bottom:8px;line-height:1}.kpi-subtext{font-size:13px;color:#6b7280}.kpi-subtext.trend-up{color:#10b981;font-weight:600}.kpi-subtext.trend-down{color:#ef4444;font-weight:600}.chart-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb}.chart-card.full-width{grid-column:1 / -1}.chart-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f3f4f6}.chart-card-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.chart-legend{display:flex;gap:20px}.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b7280;font-weight:500}.legend-dot{width:12px;height:12px;border-radius:50%}.chart-body{min-height:250px}.main-charts{margin-bottom:24px}.line-chart-advanced{width:100%;height:220px}.chart-svg{width:100%;height:100%}.combo-chart{display:flex;align-items:flex-end;justify-content:space-between;height:200px;gap:12px;padding:20px 0}.combo-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}.combo-bar-wrapper{position:relative;width:100%;height:calc(100% - 30px);display:flex;align-items:flex-end;justify-content:center}.combo-bar{width:100%;max-width:40px;border-radius:6px 6px 0 0;position:relative;transition:all .3s ease}.combo-bar:hover{opacity:.8}.bar-value{position:absolute;top:-24px;left:50%;transform:translate(-50%);font-size:12px;font-weight:600;color:#374151;white-space:nowrap}.rate-dot{position:absolute;width:10px;height:10px;background:#10b981;border:3px solid white;border-radius:50%;left:50%;transform:translate(-50%);box-shadow:0 2px 4px #0000001a}.rate-value{position:absolute;top:-20px;left:50%;transform:translate(-50%);font-size:11px;font-weight:600;color:#10b981;white-space:nowrap}.combo-label{margin-top:8px;font-size:12px;color:#6b7280;font-weight:500;text-align:center}.analysis-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));gap:24px;margin-bottom:24px}.donut-chart{display:flex;align-items:center;gap:32px;padding:20px 0}.donut-svg{width:200px;height:200px}.donut-legend{flex:1}.legend-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f3f4f6}.legend-row:last-child{border-bottom:none}.legend-color{width:16px;height:16px;border-radius:4px}.legend-label{flex:1;font-size:14px;color:#374151;font-weight:500}.legend-value{font-size:16px;font-weight:600;color:#111827}.horizontal-bar-chart{display:flex;flex-direction:column;gap:16px;padding:10px 0}.h-bar-item{display:flex;align-items:center;gap:12px}.h-bar-label{min-width:100px;font-size:13px;color:#374151;font-weight:500}.h-bar-wrapper{flex:1;height:32px;background:#f3f4f6;border-radius:6px;position:relative;overflow:visible}.h-bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;padding:0 12px;transition:width .5s ease;position:relative}.h-bar-text{font-size:12px;font-weight:600;color:#fff}.h-bar-text-outside{position:absolute;left:calc(100% + 8px);font-size:12px;font-weight:600;color:#374151}.engagement-metrics{padding:10px 0}.metric-row{display:flex;align-items:center;gap:12px;margin-bottom:20px}.metric-label{min-width:100px;font-size:14px;color:#374151;font-weight:500}.metric-bar{flex:1;height:24px;background:#f3f4f6;border-radius:6px;overflow:hidden}.metric-fill{height:100%;border-radius:6px;transition:width .5s ease}.metric-value{min-width:80px;text-align:right;font-size:14px;font-weight:600;color:#111827}.engagement-summary{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;padding-top:24px;border-top:2px solid #f3f4f6}.summary-item{display:flex;align-items:center;gap:12px;padding:16px;background:#f9fafb;border-radius:8px}.summary-icon{font-size:28px}.summary-text{flex:1}.summary-label{font-size:12px;color:#6b7280;margin-bottom:4px}.summary-number{font-size:20px;font-weight:700;color:#111827}.data-table-wrapper{overflow-x:auto;margin-top:20px}.data-table{width:100%;border-collapse:collapse}.data-table thead{background:#f9fafb}.data-table th{padding:12px 16px;text-align:left;font-size:13px;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb;white-space:nowrap}.data-table td{padding:12px 16px;border-bottom:1px solid #f3f4f6;font-size:14px;color:#111827}.data-table tr:hover{background:#f9fafb}.number-cell{text-align:right;font-weight:600}.rate-badge{display:inline-block;padding:4px 12px;background:#dbeafe;color:#1e40af;border-radius:6px;font-size:13px;font-weight:600}.change-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:600}.change-badge.positive{background:#d1fae5;color:#065f46}.change-badge.negative{background:#fee2e2;color:#dc2626}.export-btn{padding:8px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-weight:600;color:#374151;cursor:pointer;transition:all .2s ease}.export-btn:hover{background:#e5e7eb;border-color:#9ca3af}@media (max-width: 1200px){.analysis-grid{grid-template-columns:1fr}.donut-chart{flex-direction:column}}@media (max-width: 768px){.stats-controls{flex-direction:column;align-items:stretch}.period-selector,.date-selector,.chart-type-selector{width:100%}.kpi-cards,.engagement-summary{grid-template-columns:1fr}}.admin-challenge-accordion-container{display:flex;flex-direction:column;gap:12px}.admin-challenge-accordion-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #0000001a;transition:all .2s ease}.admin-challenge-accordion-item:hover{box-shadow:0 4px 6px #0000001a}.admin-challenge-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:#f9fafb;border-left:4px solid #3b82f6;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none}.admin-challenge-accordion-header:hover{background:#f3f4f6}.admin-challenge-accordion-left{display:flex;align-items:center;gap:16px;flex:1}.admin-challenge-accordion-icon{font-size:24px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.admin-challenge-accordion-info{flex:1}.admin-challenge-accordion-title{font-size:18px;font-weight:600;color:#111827;margin:0 0 4px}.admin-challenge-accordion-subtitle{font-size:14px;color:#6b7280;margin:0;font-weight:500}.admin-challenge-accordion-right{display:flex;align-items:center;gap:16px}.admin-challenge-accordion-count{font-size:14px;font-weight:600;color:#374151;background:#fff;padding:6px 12px;border-radius:6px;border:1px solid #d1d5db}.admin-challenge-accordion-toggle{font-size:16px;color:#6b7280;transition:transform .2s ease;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.admin-challenge-accordion-content{background:#fff;border-top:1px solid #e5e7eb}.admin-challenge-empty{padding:40px 24px;text-align:center;color:#6b7280}.admin-challenge-empty p{font-size:16px;margin:0}.admin-challenge-add-row{cursor:pointer;transition:all .2s ease;border-top:2px dashed #d1d5db}.admin-challenge-add-row:hover{background:#f9fafb;border-top-color:#3b82f6}.admin-challenge-add-row-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:#6b7280;font-size:14px;font-weight:500;transition:all .2s ease}.admin-challenge-add-row:hover .admin-challenge-add-row-content{color:#3b82f6}.admin-challenge-add-icon{font-size:16px;transition:transform .2s ease}.admin-challenge-add-row:hover .admin-challenge-add-icon{transform:scale(1.1)}.admin-challenge-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.admin-challenge-loading p{color:#6b7280;font-size:16px;margin:0}.admin-challenge-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.admin-challenge-error p{color:#ef4444;font-size:16px;margin-bottom:24px}.retry-button{background:#3b82f6;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.admin-challenge-count-condition{display:flex;align-items:center;padding:8px 12px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;min-height:36px}.count-condition-text{font-size:13px;font-weight:500;color:#475569;background:#e0f2fe;padding:4px 8px;border-radius:4px;border:1px solid #b3e5fc}.admin-challenge-modal-content form{display:flex;flex-direction:column;gap:20px}.form-group input,.form-group textarea,.form-group select{padding:12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:border-color .2s ease}.form-group textarea{min-height:80px;resize:vertical}.checkbox-group{flex-direction:row;align-items:center}.checkbox-label input[type=checkbox]{width:18px;height:18px;margin:0}.form-help-text{font-size:12px;color:#6b7280;margin-top:4px;line-height:1.4}.stats-table-container{overflow-x:auto}.stats-table{width:100%;border-collapse:collapse;font-size:14px}.stats-table th{background:#f8fafc;padding:12px;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb}.stats-table td{padding:12px;border-bottom:1px solid #e5e7eb}.stat-title{font-weight:500;color:#111827;margin-bottom:4px}.stat-category{font-size:12px;color:#6b7280}.type-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.type-badge.permanent{background:#dbeafe;color:#1e40af}.type-badge.daily{background:#fef3c7;color:#d97706}.type-badge.weekly{background:#e9d5ff;color:#7c3aed}.type-badge.monthly{background:#fecaca;color:#dc2626}.rate-badge{display:inline-block;padding:4px 8px;background:#f3f4f6;border-radius:4px;font-size:12px;font-weight:500;color:#374151}.number-cell{text-align:right;font-weight:500;color:#111827}.achievement-chart{display:flex;gap:16px;align-items:end;height:160px;padding:20px 0}.achievement-bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}.achievement-bar-wrapper{height:120px;display:flex;align-items:end;width:100%;justify-content:center}.achievement-bar{width:24px;background:linear-gradient(to top,#3b82f6,#60a5fa);border-radius:4px 4px 0 0;position:relative;transition:all .3s ease}.achievement-bar:hover{background:linear-gradient(to top,#2563eb,#3b82f6)}.bar-value{position:absolute;top:-20px;left:50%;transform:translate(-50%);font-size:11px;font-weight:600;color:#374151;white-space:nowrap}.bar-label{font-size:11px;color:#6b7280;text-align:center;max-width:60px;line-height:1.2;word-break:break-word}.rate-indicator{margin-top:4px}.rate-value{font-size:11px;font-weight:600;color:#10b981;background:#d1fae5;padding:2px 6px;border-radius:3px}.chart-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center}.chart-placeholder-icon{font-size:48px;margin-bottom:16px}.chart-placeholder-text{font-size:16px;font-weight:600;color:#374151;margin-bottom:8px}.chart-placeholder-subtext{font-size:14px;color:#6b7280;line-height:1.5}.achievement-horizontal-layout{display:flex;gap:24px;min-height:400px}.achievement-sidebar{width:300px;background:#f8fafc;border-radius:8px;padding:16px;overflow-y:auto;max-height:400px}.achievement-sidebar-item{padding:12px;margin-bottom:8px;background:#fff;border-radius:6px;border:1px solid #e5e7eb;cursor:pointer;transition:all .2s ease}.achievement-sidebar-item:hover{border-color:#3b82f6;box-shadow:0 2px 4px #3b82f61a}.achievement-sidebar-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}.achievement-sidebar-title{font-size:14px;font-weight:500;color:#111827;line-height:1.3;flex:1;margin-right:8px}.achievement-sidebar-type{font-size:11px;font-weight:600;padding:2px 6px;border-radius:3px;background:#f3f4f6;white-space:nowrap}.achievement-sidebar-stats{display:flex;justify-content:space-between;align-items:center}.achievement-sidebar-completion{font-size:12px;font-weight:600;color:#10b981}.achievement-sidebar-users{font-size:11px;color:#6b7280}.achievement-bars{flex:1;display:flex;flex-direction:column;gap:12px;padding:16px 0}.achievement-bar-row{display:flex;align-items:center;gap:16px}.achievement-bar-label{width:200px;font-size:13px;font-weight:500;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.achievement-bar-container{flex:1;height:24px;background:#f3f4f6;border-radius:12px;overflow:hidden;position:relative}.achievement-bar-fill{height:100%;border-radius:12px;position:relative;transition:width .3s ease}.achievement-bar-text{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}.stats-accordion{display:flex;flex-direction:column;gap:12px}.stats-accordion-item{border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}.stats-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#f8fafc;cursor:pointer;transition:all .2s ease}.stats-accordion-header:hover{background:#f1f5f9}.stats-accordion-left{display:flex;align-items:center;gap:12px}.stats-accordion-icon{font-size:20px}.stats-accordion-info{flex:1}.stats-accordion-title{font-size:16px;font-weight:600;color:#111827;margin:0 0 4px}.stats-accordion-subtitle{font-size:13px;color:#6b7280;margin:0}.stats-accordion-right{display:flex;align-items:center;gap:12px}.stats-accordion-count{font-size:14px;font-weight:600;color:#374151;background:#fff;padding:4px 8px;border-radius:4px}.stats-accordion-toggle{font-size:12px;color:#6b7280;transition:transform .2s ease}.stats-accordion-content{padding:0;background:#fff}.stats-empty{padding:40px 20px;text-align:center;color:#6b7280}.data-table-wrapper{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:14px}.data-table th{background:#f8fafc;padding:12px;text-align:left;font-weight:600;color:#374151;border-bottom:2px solid #e5e7eb}.data-table td{padding:12px;border-bottom:1px solid #e5e7eb}.data-title{font-weight:500;color:#111827;margin-bottom:4px}.data-type{font-size:12px;color:#6b7280;background:#f3f4f6;padding:2px 6px;border-radius:3px;display:inline-block}.export-btn{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s ease}.export-btn:hover{background:#2563eb}.period-indicator{font-size:13px;color:#6b7280;background:#f3f4f6;padding:4px 8px;border-radius:4px}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:20px}.kpi-card-large{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;transition:all .2s ease}.kpi-card-large:hover{border-color:#3b82f6;box-shadow:0 4px 12px #3b82f61a}.kpi-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.kpi-card-header .kpi-icon{font-size:24px}.kpi-card-header .kpi-label{font-size:16px;font-weight:600;color:#111827}.kpi-value-large{display:flex;align-items:center;gap:12px;margin-bottom:8px}.kpi-number{font-size:32px;font-weight:700;color:#111827}.kpi-trend{font-size:20px;font-weight:600}.kpi-trend.positive{color:#10b981}.kpi-trend.negative{color:#ef4444}.kpi-subtext{font-size:14px;color:#6b7280;margin-bottom:16px}.kpi-details{display:flex;justify-content:space-between;gap:16px}.kpi-detail-item{flex:1;text-align:center;padding:12px;background:#f8fafc;border-radius:8px}.detail-label{display:block;font-size:12px;color:#6b7280;margin-bottom:4px}.detail-value{display:block;font-size:16px;font-weight:600;color:#111827}.admin-coupon-management{padding:24px;background:#f8fafc;min-height:100vh}.admin-coupon-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;padding:24px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-coupon-title h1{font-size:28px;font-weight:700;color:#111827;margin:0 0 8px}.admin-coupon-title p{font-size:16px;color:#6b7280;margin:0}.admin-coupon-actions{display:flex;gap:12px}.admin-coupon-tabs{display:flex;gap:4px;margin-bottom:24px;background:#fff;padding:4px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.admin-coupon-tab{padding:12px 24px;border:none;background:transparent;border-radius:6px;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .2s ease}.admin-coupon-tab:hover{background:#f3f4f6;color:#374151}.admin-coupon-tab.active{background:#3b82f6;color:#fff;box-shadow:0 1px 3px #3b82f64d}.admin-coupon-section{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.admin-coupon-filters{display:flex;gap:16px;padding:20px 24px;border-bottom:1px solid #e5e7eb;background:#f9fafb}.admin-coupon-search{flex:1}.admin-coupon-search-input{width:100%;padding:10px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color .2s ease}.admin-coupon-search-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.admin-coupon-filter{min-width:120px}.admin-coupon-filter-select{width:100%;padding:10px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;background:#fff;cursor:pointer}.admin-coupon-table-container{overflow-x:auto}.admin-coupon-table{width:100%;border-collapse:collapse;font-size:14px}.admin-coupon-table th{background:#f9fafb;padding:16px 12px;text-align:left;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb;white-space:nowrap}.admin-coupon-table td{padding:16px 12px;border-bottom:1px solid #f3f4f6;vertical-align:middle}.admin-coupon-table tr:hover{background:#f9fafb}.admin-coupon-code{font-family:Courier New,monospace;font-weight:600;color:#1f2937;background:#f3f4f6;padding:4px 8px;border-radius:4px;display:inline-block}.admin-coupon-name{font-weight:500;color:#111827}.admin-coupon-description{color:#6b7280;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-coupon-reward{font-weight:500;color:#059669;background:#ecfdf5;padding:4px 8px;border-radius:4px;display:inline-block}.admin-coupon-usage{display:flex;align-items:center;gap:4px;font-size:13px}.usage-count{font-weight:600;color:#3b82f6}.usage-separator{color:#9ca3af}.usage-max{color:#6b7280}.admin-coupon-status{display:flex;flex-direction:column;gap:4px}.admin-coupon-status-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;text-align:center;display:inline-block;width:fit-content}.admin-coupon-status-badge.active{background:#dcfce7;color:#166534}.admin-coupon-status-badge.inactive{background:#fee2e2;color:#991b1b}.usability-status{font-size:11px;padding:2px 6px;border-radius:3px;font-weight:500;display:inline-block;width:fit-content}.usability-status.available{background:#dcfce7;color:#166534}.usability-status.exhausted{background:#fef3c7;color:#92400e}.usability-status.expired{background:#fee2e2;color:#991b1b}.usability-status.inactive{background:#f3f4f6;color:#6b7280}.admin-coupon-visibility{display:flex;align-items:center}.visibility-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;display:inline-block}.visibility-badge.public{background:#dcfce7;color:#166534}.visibility-badge.private{background:#fef3c7;color:#92400e}.admin-coupon-expiry,.admin-coupon-date{font-size:13px;color:#6b7280}.admin-coupon-actions-cell{display:flex;gap:6px;align-items:center}.admin-coupon-action-btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.admin-coupon-action-btn.primary{background:#3b82f6;color:#fff}.admin-coupon-action-btn.primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.admin-coupon-action-btn.secondary{background:#f3f4f6;color:#374151}.admin-coupon-action-btn.secondary:hover{background:#e5e7eb}.admin-coupon-action-btn.small{padding:6px 10px;font-size:12px;min-width:32px;justify-content:center}.admin-coupon-action-btn.small.danger{background:#fee2e2;color:#991b1b}.admin-coupon-action-btn.small.danger:hover{background:#fecaca}.admin-coupon-action-btn.small.warning{background:#fef3c7;color:#92400e}.admin-coupon-action-btn.small.warning:hover{background:#fde68a}.admin-coupon-action-btn.small.success{background:#dcfce7;color:#166534}.admin-coupon-action-btn.small.success:hover{background:#bbf7d0}.admin-coupon-add-row{cursor:pointer;transition:background-color .2s ease}.admin-coupon-add-row:hover{background:#f0f9ff!important}.admin-coupon-add-row-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:#3b82f6;font-weight:500;font-size:14px}.admin-coupon-add-icon{font-size:16px}.admin-coupon-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.admin-coupon-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;max-width:600px;width:100%;max-height:90vh;overflow-y:auto}.admin-coupon-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 0;border-bottom:1px solid #e5e7eb;margin-bottom:24px}.admin-coupon-modal-header h3{font-size:20px;font-weight:600;color:#111827;margin:0}.admin-coupon-modal-close{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.admin-coupon-modal-close:hover{background:#f3f4f6;color:#374151}.admin-coupon-modal-content{padding:0 24px 24px}.admin-coupon-modal-content form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group input,.form-group textarea,.form-group select{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:border-color .2s ease}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.checkbox-group{display:flex;align-items:center;gap:8px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer}.checkbox-label input[type=checkbox]{width:16px;height:16px;margin:0}.checkbox-text{font-size:14px;color:#374151}.form-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:20px;border-top:1px solid #e5e7eb}.admin-coupon-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-coupon-loading p{font-size:16px;color:#6b7280;margin:0}.admin-coupon-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-coupon-error p{font-size:16px;color:#6b7280;margin:0 0 20px}@media (max-width: 768px){.admin-coupon-management{padding:16px}.admin-coupon-header{flex-direction:column;gap:16px;align-items:stretch}.admin-coupon-filters{flex-direction:column;gap:12px}.form-row{grid-template-columns:1fr}.admin-coupon-table-container{font-size:12px}.admin-coupon-table th,.admin-coupon-table td{padding:12px 8px}.admin-coupon-actions-cell{flex-direction:column;gap:4px}}.admin-library-management{padding:24px;background:#f8fafc;min-height:100vh}.admin-library-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;padding:24px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-library-title h1{font-size:28px;font-weight:700;color:#111827;margin:0 0 8px}.admin-library-title p{font-size:16px;color:#6b7280;margin:0}.admin-library-actions{display:flex;gap:12px}.admin-library-tabs{display:flex;gap:4px;margin-bottom:24px;background:#fff;padding:4px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.admin-library-tab{padding:12px 24px;border:none;background:transparent;border-radius:6px;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;transition:all .2s ease;flex:1}.admin-library-tab:hover:not(:disabled){background:#f3f4f6;color:#374151}.admin-library-tab.active{background:#3b82f6;color:#fff;box-shadow:0 1px 3px #3b82f64d}.admin-library-tab.disabled{opacity:.5;cursor:not-allowed;background:#f9fafb;color:#9ca3af}.admin-library-tab.disabled:hover{background:#f9fafb;color:#9ca3af}.admin-library-section{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.admin-library-stats{display:flex;gap:24px;padding:20px 24px;background:#f9fafb;border-bottom:1px solid #e5e7eb}.admin-library-stat-item{text-align:center}.admin-library-stat-label{font-size:14px;color:#6b7280;margin-bottom:4px}.admin-library-stat-value{font-size:24px;font-weight:700;color:#111827}.admin-library-table-container{overflow-x:auto}.admin-library-table{width:100%;border-collapse:collapse;font-size:14px}.admin-library-table th{background:#f9fafb;padding:16px 12px;text-align:left;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb;white-space:nowrap}.admin-library-table td{padding:16px 12px;border-bottom:1px solid #f3f4f6;vertical-align:middle}.admin-library-table tr:hover{background:#f9fafb}.admin-library-table tr.selected{background:#eff6ff;border-left:4px solid #3b82f6}.admin-library-story-title{font-weight:600;color:#111827;font-size:15px}.admin-library-level{font-weight:500;color:#6b7280;background:#f3f4f6;padding:4px 8px;border-radius:4px;display:inline-block;font-size:12px}.admin-library-badge{background:#dbeafe;color:#1e40af;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;display:inline-block}.admin-library-character{font-size:20px;text-align:center}.admin-library-tag{background:#f3f4f6;color:#6b7280;padding:4px 8px;border-radius:4px;font-size:12px;display:inline-block}.admin-library-description{color:#6b7280;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-library-chapter-num{font-weight:600;color:#3b82f6;background:#eff6ff;padding:4px 8px;border-radius:4px;display:inline-block;font-size:12px}.admin-library-chapter-title{font-weight:500;color:#111827}.admin-library-chapter-description{color:#6b7280;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-library-thai-text{font-family:Noto Sans Thai,sans-serif;font-weight:500;color:#111827;font-size:15px}.admin-library-korean-text{color:#6b7280;font-size:14px}.admin-library-audio{text-align:center;font-size:16px}.admin-library-order{font-weight:500;color:#6b7280;text-align:center}.admin-library-date{font-size:13px;color:#6b7280}.admin-library-status-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;text-align:center;display:inline-block}.admin-library-status-badge.active{background:#dcfce7;color:#166534}.admin-library-status-badge.inactive{background:#fee2e2;color:#991b1b}.admin-library-type-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;display:inline-block}.admin-library-type-badge.dialogue{background:#dbeafe;color:#1e40af}.admin-library-type-badge.vocabulary{background:#dcfce7;color:#166534}.admin-library-type-badge.grammar{background:#fef3c7;color:#92400e}.admin-library-type-badge.exercise{background:#f3e8ff;color:#7c3aed}.admin-library-type-badge.default{background:#f3f4f6;color:#6b7280}.admin-library-actions-cell{display:flex;gap:6px;align-items:center}.admin-library-action-btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.admin-library-action-btn.primary{background:#3b82f6;color:#fff}.admin-library-action-btn.primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.admin-library-action-btn.secondary{background:#f3f4f6;color:#374151}.admin-library-action-btn.secondary:hover{background:#e5e7eb}.admin-library-action-btn.small{padding:6px 10px;font-size:12px;min-width:32px;justify-content:center}.admin-library-action-btn.small.danger{background:#fee2e2;color:#991b1b}.admin-library-action-btn.small.danger:hover{background:#fecaca}.admin-library-add-row{cursor:pointer;transition:background-color .2s ease}.admin-library-add-row:hover{background:#f0f9ff!important}.admin-library-add-row-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:#3b82f6;font-weight:500;font-size:14px}.admin-library-add-icon{font-size:16px}.admin-library-story-image{width:120px;height:160px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#f3f4f6}.admin-library-story-image img{width:100%;height:100%;object-fit:cover}.admin-library-image-placeholder{font-size:24px;color:#9ca3af}.admin-library-image-preview{margin-top:8px}.admin-library-image-preview img{width:100px;height:100px;object-fit:cover;border-radius:8px;border:1px solid #e5e7eb}.admin-library-accordion-container{padding:24px}.admin-library-accordion-item{margin-bottom:16px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#fff}.admin-library-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#f9fafb;border-left:4px solid #3b82f6;cursor:pointer;transition:all .2s ease}.admin-library-accordion-header:hover{background:#f3f4f6}.admin-library-accordion-left{display:flex;align-items:center;gap:12px}.admin-library-accordion-icon{font-size:24px}.admin-library-accordion-info{flex:1}.admin-library-accordion-title{font-size:16px;font-weight:600;color:#111827;margin:0 0 4px}.admin-library-accordion-subtitle{font-size:14px;color:#6b7280;margin:0}.admin-library-accordion-right{display:flex;align-items:center;gap:12px}.admin-library-accordion-count{font-size:14px;color:#6b7280;background:#e5e7eb;padding:4px 8px;border-radius:4px}.admin-library-accordion-toggle{font-size:12px;color:#6b7280;transition:transform .2s ease}.admin-library-accordion-content{border-top:1px solid #e5e7eb;background:#fff}.admin-library-accordion-empty{padding:40px 20px;text-align:center;color:#6b7280}.admin-library-chapter-table-wrapper{padding:20px}.admin-library-chapter-table{width:100%;border-collapse:collapse;font-size:14px}.admin-library-chapter-table th{background:#f9fafb;padding:12px;text-align:left;font-weight:600;color:#374151;border-bottom:1px solid #e5e7eb}.admin-library-chapter-table td{padding:12px;border-bottom:1px solid #f3f4f6;vertical-align:middle}.admin-library-chapter-table tr:hover{background:#f9fafb}.admin-library-content-accordion{padding:24px}.admin-library-content-story-group{margin-bottom:20px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#fff}.admin-library-content-story-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#f9fafb;border-left:4px solid #3b82f6;cursor:pointer;transition:all .2s ease}.admin-library-content-story-header:hover{background:#f3f4f6}.admin-library-content-story-left{display:flex;align-items:center;gap:12px}.admin-library-content-story-icon{font-size:24px}.admin-library-content-story-info{flex:1}.admin-library-content-story-title{font-size:16px;font-weight:600;color:#111827;margin:0 0 4px}.admin-library-content-story-subtitle{font-size:14px;color:#6b7280;margin:0}.admin-library-content-story-right{display:flex;align-items:center;gap:12px}.admin-library-content-story-count{font-size:14px;color:#6b7280;background:#e5e7eb;padding:4px 8px;border-radius:4px}.admin-library-content-story-toggle{font-size:12px;color:#6b7280}.admin-library-content-story-content{border-top:1px solid #e5e7eb;background:#fff}.admin-library-content-chapter-group{border-bottom:1px solid #f3f4f6}.admin-library-content-chapter-group:last-child{border-bottom:none}.admin-library-content-chapter-header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#fafafa;cursor:pointer;transition:all .2s ease}.admin-library-content-chapter-header:hover{background:#f0f0f0}.admin-library-content-chapter-left{display:flex;align-items:center;gap:12px}.admin-library-content-chapter-num{font-size:14px;font-weight:600;color:#3b82f6;background:#eff6ff;padding:4px 8px;border-radius:4px;min-width:24px;text-align:center}.admin-library-content-chapter-info{flex:1}.admin-library-content-chapter-title{font-size:14px;font-weight:500;color:#111827;margin:0 0 2px}.admin-library-content-chapter-subtitle{font-size:12px;color:#6b7280;margin:0}.admin-library-content-chapter-right{display:flex;align-items:center;gap:12px}.admin-library-content-chapter-count{font-size:12px;color:#6b7280;background:#f3f4f6;padding:2px 6px;border-radius:3px}.admin-library-content-chapter-toggle{font-size:10px;color:#6b7280}.admin-library-content-chapter-content{background:#fafafa;padding:16px 20px}.admin-library-content-add-section{margin-bottom:16px;padding:12px;background:#f8fafc;border-radius:8px;border:1px solid #e5e7eb}.admin-library-content-add-btn{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.admin-library-content-add-btn:hover{background:#2563eb;transform:translateY(-1px)}.admin-library-content-add-btn:active{transform:translateY(0)}.admin-library-content-empty{text-align:center;padding:40px 20px;color:#9ca3af;background:#fff;border-radius:8px;border:2px dashed #e5e7eb}.admin-library-content-pages{display:flex;flex-direction:column;gap:16px}.admin-library-content-page{background:#fff;border-radius:12px;border:1px solid #e5e7eb;overflow:hidden;transition:all .2s ease}.admin-library-content-page:hover{border-color:#3b82f6;box-shadow:0 4px 12px #3b82f61a}.admin-library-content-page-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#f8fafc;border-bottom:1px solid #e5e7eb}.admin-library-content-page-info h5{font-size:16px;font-weight:600;color:#111827;margin:0 0 4px}.admin-library-content-page-info p{font-size:14px;color:#6b7280;margin:0}.admin-library-content-page-actions{display:flex;gap:8px}.admin-library-content-preview-btn,.admin-library-content-edit-btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.admin-library-content-preview-btn{background:#3b82f6;color:#fff}.admin-library-content-preview-btn:hover{background:#2563eb}.admin-library-content-edit-btn{background:#f3f4f6;color:#374151;border:1px solid #d1d5db}.admin-library-content-edit-btn:hover{background:#e5e7eb}.admin-library-content-page-preview{padding:20px}.admin-library-content-page-sentences{display:flex;flex-direction:column;gap:12px}.admin-library-content-sentence{display:flex;gap:12px;padding:12px;background:#f9fafb;border-radius:8px;border-left:3px solid #3b82f6}.admin-library-content-sentence-number{display:flex;align-items:center;justify-content:center;width:24px;height:24px;background:#3b82f6;color:#fff;border-radius:50%;font-size:12px;font-weight:600;flex-shrink:0}.admin-library-content-sentence-content{flex:1;display:flex;flex-direction:column;gap:4px}.admin-library-content-sentence-thai{font-size:16px;font-weight:500;color:#111827;line-height:1.4}.admin-library-content-sentence-korean{font-size:14px;color:#6b7280;line-height:1.4}.admin-library-content-sentence-roman{font-size:14px;color:#6b7280;font-style:italic;margin-top:4px}.admin-library-content-sentence-words{margin-top:12px;padding:12px;background:#f8fafc;border-radius:8px;border:1px solid #e5e7eb}.admin-library-content-words-header{margin-bottom:8px}.admin-library-content-words-title{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.admin-library-content-words-list{display:flex;flex-wrap:wrap;gap:6px}.admin-library-content-word{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#fff;border:1px solid #d1d5db;border-radius:6px;font-size:12px}.admin-library-content-word-thai{font-weight:600;color:#111827}.admin-library-content-word-roman{color:#6b7280;font-style:italic}.admin-library-content-word-translation{color:#374151}.admin-library-content-word-level{background:#3b82f6;color:#fff;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600}.admin-library-edit-modal{position:fixed;inset:0;z-index:1001;display:flex;align-items:center;justify-content:center;padding:20px}.admin-library-edit-overlay{position:absolute;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.admin-library-edit-content{position:relative;background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:1400px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.admin-library-edit-header{padding:20px 24px;background:#f8fafc;border-bottom:1px solid #e5e7eb;position:relative}.admin-library-edit-header h3{font-size:18px;font-weight:600;color:#111827;margin:0 0 8px}.admin-library-edit-header p{font-size:14px;color:#6b7280;margin:0 0 4px}.admin-library-edit-close{position:absolute;top:16px;right:20px;background:none;border:none;font-size:20px;color:#6b7280;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease}.admin-library-edit-close:hover{background:#e5e7eb;color:#374151}.admin-library-edit-body{display:flex;flex:1;overflow:hidden}.admin-library-edit-left{flex:1;padding:24px;overflow-y:auto;border-right:1px solid #e5e7eb}.admin-library-edit-right{flex:1;padding:24px;overflow-y:auto;background:#f9fafb}.admin-library-edit-form h4{font-size:16px;font-weight:600;color:#111827;margin:0 0 16px}.admin-library-edit-form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #e5e7eb}.admin-library-edit-form-header h4{margin:0;font-size:18px;font-weight:600;color:#111827}.admin-library-edit-form-header-buttons{display:flex;gap:8px;align-items:center}.admin-library-edit-sentence-toggle-btn{background:#8b5cf6;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.admin-library-edit-sentence-toggle-btn:hover{background:#7c3aed;transform:translateY(-1px)}.admin-library-edit-sentence-toggle-btn:active{transform:translateY(0)}.admin-library-edit-delete-sentence-btn{background:#ef4444;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.admin-library-edit-delete-sentence-btn:hover{background:#dc2626;transform:translateY(-1px)}.admin-library-edit-add-sentence-btn{background:#10b981;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.admin-library-edit-add-sentence-btn:hover{background:#059669;transform:translateY(-1px)}.admin-library-edit-sentence-item{border:1px solid #e5e7eb;border-radius:8px;margin-bottom:16px;background:#fff;overflow:hidden;transition:all .2s}.admin-library-edit-sentence-item:hover{border-color:#3b82f6;box-shadow:0 2px 8px #3b82f61a}.admin-library-edit-sentence-header{display:flex;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;background:#f9fafb;transition:background-color .2s}.admin-library-edit-sentence-header:hover{background:#f3f4f6}.admin-library-edit-sentence-info{display:flex;align-items:flex-start;gap:16px;flex:1;min-width:0}.admin-library-edit-sentence-number{background:#3b82f6;color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}.admin-library-edit-sentence-item:first-child .admin-library-edit-sentence-number{background:#f59e0b;font-weight:700;font-size:13px;padding:8px 14px}.admin-library-edit-sentence-item:first-child .admin-library-edit-sentence-header{background:#fef3c7;border:2px solid #f59e0b;border-radius:8px;margin-bottom:16px}.admin-library-edit-sentence-item:first-child .admin-library-edit-sentence-header:hover{background:#fde68a}.admin-library-edit-sentence-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.admin-library-edit-sentence-text input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:all .2s}.admin-library-edit-sentence-text input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.admin-library-edit-sentence-save-btn{background:#10b981;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.admin-library-edit-sentence-save-btn:hover{background:#059669}.admin-library-edit-sentence-thai{font-size:16px;font-weight:500;color:#111827;line-height:1.5;word-break:break-word}.admin-library-edit-sentence-korean{font-size:14px;color:#6b7280;line-height:1.5;word-break:break-word}.admin-library-edit-sentence-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.admin-library-edit-sentence-delete-btn{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:6px 12px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s}.admin-library-edit-sentence-delete-btn:hover{background:#fecaca;border-color:#fca5a5}.admin-library-edit-sentence-toggle{font-size:18px;color:#6b7280;transition:transform .2s;-webkit-user-select:none;user-select:none}.admin-library-edit-sentence-words{padding:20px;background:#fafbfc;border-top:1px solid #e5e7eb}.admin-library-edit-words-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #e5e7eb}.admin-library-edit-words-header h5{margin:0;font-size:16px;font-weight:600;color:#111827}.admin-library-edit-words-header>div{display:flex;gap:8px;align-items:center}.admin-library-edit-add-word-btn{background:#10b981;color:#fff;border:none;padding:7px 14px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.admin-library-edit-add-word-btn:hover{background:#059669;transform:translateY(-1px)}.admin-library-edit-add-word-btn.danger{background:#ef4444}.admin-library-edit-add-word-btn.danger:hover{background:#dc2626}.admin-library-edit-words-list{display:flex;flex-direction:column;gap:12px}.admin-library-edit-word-item{display:flex;flex-direction:column;gap:12px;padding:16px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;transition:all .2s;overflow:visible;position:relative}.admin-library-edit-word-item:hover{border-color:#3b82f6;box-shadow:0 2px 8px #3b82f61a}.admin-library-edit-word-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;flex:1;min-width:0;margin-bottom:8px}.admin-library-edit-word-field{display:flex;flex-direction:column;gap:6px;min-width:0}.admin-library-edit-word-field label{font-size:11px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.admin-library-edit-word-field input{width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:all .2s;background:#fff;min-width:0}.admin-library-edit-word-field input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.admin-library-edit-word-field input:disabled{background:#f9fafb;color:#6b7280;cursor:not-allowed;border-color:#e5e7eb}.admin-library-edit-word-delete{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:8px 12px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}.admin-library-edit-word-delete:hover{background:#fecaca;border-color:#fca5a5}.admin-library-edit-words-empty{text-align:center;padding:40px 20px;color:#9ca3af;font-style:italic;font-size:14px;background:#fff;border-radius:8px;border:2px dashed #e5e7eb}.admin-library-edit-preview h4{font-size:16px;font-weight:600;color:#111827;margin:0 0 16px}.admin-library-edit-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.admin-library-edit-title-btn{background:#3b82f6;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:background-color .2s}.admin-library-edit-title-btn:hover{background:#2563eb}.admin-library-edit-preview-content{background:#fff;border-radius:8px;border:1px solid #e5e7eb;overflow:hidden;min-height:300px;transform:scale(.7);transform-origin:top left;width:142.86%;height:142.86%}.admin-library-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1100}.admin-library-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;z-index:1101}.admin-library-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid #e5e7eb}.admin-library-modal-header h3{font-size:20px;font-weight:600;color:#111827;margin:0}.admin-library-modal-close{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px;border-radius:4px;transition:all .2s}.admin-library-modal-close:hover{background:#f3f4f6;color:#374151}.admin-library-modal-content{padding:24px}.admin-library-form-group{margin-bottom:20px}.admin-library-form-group label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.admin-library-form-group input,.admin-library-form-group textarea,.admin-library-form-group select{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:border-color .2s}.admin-library-form-group input:focus,.admin-library-form-group textarea:focus,.admin-library-form-group select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.admin-library-form-group textarea{resize:vertical;min-height:80px}.admin-library-form-group input[type=checkbox]{width:auto;margin-right:8px}.admin-library-tag-options{display:flex;flex-direction:column;gap:8px;margin-top:8px}.admin-library-tag-checkbox{display:flex;align-items:center;padding:12px 16px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;position:relative}.admin-library-tag-checkbox:hover:not(.disabled){border-color:#3b82f6;background:#f0f9ff}.admin-library-tag-checkbox.checked{border-color:#3b82f6;background:#eff6ff}.admin-library-tag-checkbox.disabled{opacity:.5;cursor:not-allowed;background:#f9fafb}.admin-library-tag-checkbox input[type=checkbox]{margin-right:12px;width:18px;height:18px;cursor:pointer}.admin-library-tag-checkbox .tag-icon{font-size:20px;margin-right:8px}.admin-library-tag-checkbox .tag-label{flex:1;font-size:14px;font-weight:500;color:#374151}.admin-library-tag-checkbox .tag-number{position:absolute;top:8px;right:8px;background:#3b82f6;color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}.admin-library-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb}.admin-library-btn{padding:12px 24px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.admin-library-btn.primary{background:#3b82f6;color:#fff}.admin-library-btn.primary:hover{background:#2563eb}.admin-library-btn.primary:disabled{background:#9ca3af;cursor:not-allowed}.admin-library-btn.secondary{background:#f3f4f6;color:#374151}.admin-library-btn.secondary:hover{background:#e5e7eb}.admin-library-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.empty-state-icon{font-size:48px;margin-bottom:16px;opacity:.6}.admin-library-empty-state h3{font-size:18px;font-weight:600;color:#374151;margin:0 0 8px}.admin-library-empty-state p{font-size:14px;color:#6b7280;margin:0;text-align:center}.admin-library-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.loading-spinner{width:40px;height:40px;border:4px solid #f3f4f6;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.admin-library-loading p{font-size:16px;color:#6b7280;margin:0}.admin-library-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-library-error p{font-size:16px;color:#6b7280;margin:0 0 20px}.retry-button{padding:10px 20px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.retry-button:hover{background:#2563eb}.admin-library-notification{position:fixed;top:20px;right:20px;z-index:1000;max-width:400px;border-radius:8px;box-shadow:0 4px 12px #00000026;animation:slideIn .3s ease}.admin-library-notification.warning{background:#fef3c7;border:1px solid #f59e0b;color:#92400e}.admin-library-notification.info{background:#dbeafe;border:1px solid #3b82f6;color:#1e40af}.admin-library-notification.success{background:#dcfce7;border:1px solid #10b981;color:#166534}.admin-library-notification.error{background:#fee2e2;border:1px solid #ef4444;color:#991b1b}.notification-content{display:flex;align-items:center;gap:12px;padding:16px}.notification-icon{font-size:20px}@media (max-width: 1200px){.admin-library-edit-word-fields{grid-template-columns:1fr 1fr;gap:10px}.admin-library-edit-body{flex-direction:column}.admin-library-edit-left{border-right:none;border-bottom:1px solid #e5e7eb}.admin-library-edit-right{background:#fff}}@media (max-width: 768px){.admin-library-management{padding:16px}.admin-library-header{flex-direction:column;gap:16px;align-items:stretch}.admin-library-tabs{flex-direction:column}.admin-library-tab{flex:none}.admin-library-table-container{font-size:12px}.admin-library-table th,.admin-library-table td{padding:12px 8px}.admin-library-actions-cell{flex-direction:column;gap:4px}.admin-library-description,.admin-library-chapter-description{max-width:150px}.admin-library-notification{right:10px;left:10px;max-width:none}.admin-library-edit-modal{padding:10px}.admin-library-edit-content{max-height:95vh}.admin-library-edit-left,.admin-library-edit-right{padding:16px}.admin-library-edit-header{padding:16px 20px}.admin-library-edit-header h3{font-size:16px}.admin-library-edit-header p{font-size:12px}.admin-library-edit-form-header{flex-direction:column;align-items:stretch;gap:12px}.admin-library-edit-form-header-buttons{flex-wrap:wrap}.admin-library-edit-sentence-info{flex-direction:column;gap:12px}.admin-library-edit-word-fields{grid-template-columns:1fr;gap:8px}.admin-library-edit-word-item{flex-direction:column;align-items:stretch}.admin-library-edit-word-actions{flex-direction:column;align-items:stretch;gap:8px}.admin-library-edit-word-save,.admin-library-edit-word-delete{width:100%;text-align:center}.admin-library-edit-words-header{flex-direction:column;align-items:stretch;gap:12px}.admin-library-edit-words-header>div{flex-wrap:wrap}}.admin-library-edit-word-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid #f3f4f6}.admin-library-edit-word-save{padding:8px 16px;background:#10b981;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;white-space:nowrap;flex-shrink:0}.admin-library-edit-word-save:hover{background:#059669;transform:translateY(-1px);box-shadow:0 4px 8px #10b9814d}.admin-library-edit-word-save:active{background:#047857;transform:translateY(0)}.admin-library-edit-word-delete{padding:8px 16px;background:#ef4444;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s;white-space:nowrap;flex-shrink:0}.admin-library-edit-word-delete:hover{background:#dc2626;transform:translateY(-1px);box-shadow:0 4px 8px #ef44444d}.admin-library-edit-word-delete:active{background:#b91c1c;transform:translateY(0)}.dictionary-management{padding:24px;background-color:#f8fafc;min-height:100vh}.dictionary-header{margin-bottom:32px}.dictionary-header h1{font-size:28px;font-weight:700;color:#1f2937;margin:0 0 8px}.dictionary-header p{font-size:16px;color:#6b7280;margin:0}.dictionary-controls{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px}.dictionary-search{position:relative;flex:1;max-width:400px}.dictionary-search-input{width:100%;padding:12px 16px 12px 44px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:border-color .2s}.dictionary-search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.dictionary-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:16px}.dictionary-add-btn{padding:12px 24px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s;white-space:nowrap}.dictionary-add-btn:hover{background:#5a67d8}.dictionary-stats{display:flex;gap:24px;margin-bottom:24px}.dictionary-stat-item{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:14px;color:#6b7280;font-weight:500}.stat-value{font-size:20px;font-weight:700;color:#1f2937}.dictionary-table-container{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow-x:auto;overflow-y:visible;scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9}.dictionary-table-container::-webkit-scrollbar{height:8px}.dictionary-table-container::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.dictionary-table-container::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.dictionary-table-container::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dictionary-table{width:100%;min-width:1200px;border-collapse:collapse}.dictionary-table thead{background:#f8fafc;border-bottom:2px solid #e5e7eb}.dictionary-table th{padding:16px 12px;text-align:left;font-size:14px;font-weight:600;color:#374151;border-right:1px solid #e5e7eb;white-space:nowrap}.dictionary-table th:last-child{border-right:none}.dictionary-table td{padding:16px 12px;border-bottom:1px solid #f3f4f6;border-right:1px solid #f3f4f6;vertical-align:top}.dictionary-table td:last-child{border-right:none}.dictionary-table tbody tr:hover{background:#f9fafb}.dictionary-thai{font-size:16px;font-weight:600;color:#1f2937;min-width:120px}.dictionary-roman{font-size:14px;color:#6b7280;font-style:italic;min-width:100px}.dictionary-translation{font-size:14px;color:#374151;min-width:120px}.dictionary-level-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;text-align:center;min-width:60px}.dictionary-level-1{background:#dbeafe;color:#1e40af}.dictionary-level-2{background:#dcfce7;color:#166534}.dictionary-level-3{background:#fef3c7;color:#92400e}.dictionary-level-4{background:#fed7aa;color:#c2410c}.dictionary-level-5{background:#fecaca;color:#dc2626}.dictionary-level-6{background:#e9d5ff;color:#7c3aed}.dictionary-type{font-size:14px;color:#6b7280;min-width:80px}.dictionary-category{font-size:14px;color:#6b7280;min-width:100px}.dictionary-example{min-width:200px}.example-thai{font-size:14px;color:#1f2937;margin-bottom:4px}.example-translation{font-size:12px;color:#6b7280;font-style:italic}.example-no-translation{font-size:12px;color:#f59e0b;font-style:italic}.example-none{font-size:12px;color:#9ca3af;font-style:italic}.dictionary-actions{text-align:center;min-width:140px;display:flex;gap:6px;justify-content:center}.dictionary-edit-btn,.dictionary-preview-btn,.dictionary-delete-btn{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:14px;transition:all .2s}.dictionary-edit-btn{background:#f3f4f6;color:#374151}.dictionary-edit-btn:hover{background:#e5e7eb;border-color:#9ca3af}.dictionary-preview-btn{background:#eff6ff;color:#2563eb;border-color:#bfdbfe}.dictionary-preview-btn:hover{background:#dbeafe;border-color:#93c5fd}.dictionary-delete-btn{background:#fef2f2;color:#dc2626;border-color:#fecaca}.dictionary-delete-btn:hover{background:#fee2e2;border-color:#fca5a5}.dictionary-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.loading-spinner{width:40px;height:40px;border:4px solid #e5e7eb;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.dictionary-loading p{font-size:16px;color:#6b7280;margin:0}.dictionary-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.dictionary-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;width:100%;max-width:600px;max-height:90vh;overflow-y:auto}.dictionary-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 0;border-bottom:1px solid #e5e7eb;margin-bottom:24px}.dictionary-modal-header h3{font-size:20px;font-weight:700;color:#1f2937;margin:0}.dictionary-modal-close{background:none;border:none;font-size:20px;color:#6b7280;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s}.dictionary-modal-close:hover{background:#f3f4f6}.dictionary-modal-content{padding:0 24px}.dictionary-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}.dictionary-form-group{display:flex;flex-direction:column;gap:6px}.dictionary-form-group label{font-size:14px;font-weight:600;color:#374151}.dictionary-form-group input,.dictionary-form-group select{padding:10px 12px;border:2px solid #e5e7eb;border-radius:6px;font-size:14px;transition:border-color .2s}.dictionary-form-group input:focus,.dictionary-form-group select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.dictionary-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e5e7eb;margin-top:24px}.dictionary-cancel-btn{padding:10px 20px;background:#f3f4f6;color:#374151;border:1px solid #d1d5db;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.dictionary-cancel-btn:hover{background:#e5e7eb;border-color:#9ca3af}.dictionary-save-btn{padding:10px 20px;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s}.dictionary-save-btn:hover:not(:disabled){background:#5a67d8}.dictionary-save-btn:disabled{background:#d1d5db;color:#9ca3af;cursor:not-allowed}@media (max-width: 768px){.dictionary-management{padding:16px}.dictionary-controls{flex-direction:column;align-items:stretch}.dictionary-search{max-width:none}.dictionary-stats{flex-direction:column;gap:16px}.dictionary-table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.dictionary-table{min-width:1200px}.dictionary-form-row{grid-template-columns:1fr}.dictionary-modal{margin:0;max-height:95vh}.dictionary-modal-header,.dictionary-modal-content,.dictionary-modal-footer{padding-left:16px;padding-right:16px}}.dictionary-id{font-size:12px;color:#9ca3af;font-weight:600;text-align:center;min-width:60px;width:60px}.example-roman{font-size:12px;color:#f59e0b;font-style:italic;margin-bottom:4px;font-weight:500}.dictionary-media{min-width:200px;width:200px;text-align:center}.media-indicators{display:flex;flex-direction:column;gap:4px;margin-bottom:8px;align-items:center}.media-badge{display:inline-block;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600}.media-badge-image{background:#dbeafe;color:#1e40af}.media-badge-audio{background:#dcfce7;color:#166534}.media-badge-sentence{background:#fef3c7;color:#92400e}.media-badge-none{font-size:11px;color:#9ca3af;font-style:italic}.dictionary-media-btn{padding:6px 12px;background:#667eea;color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s;width:100%;max-width:140px}.dictionary-media-btn:hover{background:#5a67d8}.dictionary-media-modal{max-width:700px}.media-management-section{margin-bottom:24px;padding:16px;background:#f8fafc;border-radius:8px;border:1px solid #e5e7eb}.media-management-section h4{margin:0 0 12px;font-size:16px;font-weight:700;color:#1f2937}.media-current{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px;background:#fff;border-radius:6px;border:1px solid #e5e7eb}.media-filename{flex:1;font-size:13px;color:#16a34a;font-weight:600}.media-filename-none{flex:1;font-size:13px;color:#9ca3af;font-style:italic}.media-delete-btn{padding:4px 8px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:4px;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}.media-delete-btn:hover{background:#fee2e2;border-color:#fca5a5}.media-upload-input{width:100%;padding:8px;border:2px dashed #d1d5db;border-radius:6px;font-size:13px;cursor:pointer;transition:border-color .2s}.media-upload-input:hover{border-color:#667eea}.media-upload-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.media-recording-section{margin-top:16px;padding:16px;background:#f1f5f9;border-radius:8px;border:1px solid #e2e8f0}.media-record-btn{width:100%;padding:12px 16px;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;gap:8px}.media-record-btn:hover{background:#5a67d8}.media-record-btn:disabled{background:#9ca3af;cursor:not-allowed}.media-recording-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;color:#6b7280;font-size:14px}.media-spinner{width:20px;height:20px;border:2px solid #e5e7eb;border-top:2px solid #667eea;border-radius:50%;animation:spin 1s linear infinite}.media-recording-controls{background:#fff;border-radius:8px;padding:16px;border:1px solid #e5e7eb}.media-recording-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.media-recording-indicator{display:flex;align-items:center;gap:8px;color:#dc2626;font-weight:600;font-size:14px}.media-recording-dot{width:8px;height:8px;background:#dc2626;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.media-recording-time{font-family:Courier New,monospace;font-size:16px;font-weight:700;color:#1f2937;background:#f3f4f6;padding:4px 8px;border-radius:4px}.media-waveform{display:flex;align-items:end;gap:2px;height:40px;margin-bottom:16px;padding:8px;background:#f8fafc;border-radius:4px;border:1px solid #e2e8f0}.media-waveform-bar{flex:1;min-height:2px;border-radius:1px;transition:height .1s ease}.media-recording-actions{display:flex;gap:12px;justify-content:center}.media-cancel-btn{padding:8px 16px;background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.media-cancel-btn:hover{background:#fee2e2;border-color:#fca5a5}.media-save-recording-btn{padding:8px 16px;background:#dcfce7;color:#166534;border:1px solid #bbf7d0;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.media-save-recording-btn:hover{background:#bbf7d0;border-color:#86efac}.media-preview{margin-top:16px;padding:16px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.media-preview-audio{width:100%;margin-bottom:12px}.media-upload-recorded-btn{width:100%;padding:10px 16px;background:#10b981;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s;display:flex;align-items:center;justify-content:center;gap:8px}.media-upload-recorded-btn:hover{background:#059669}.admin-flashcard-preview-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.admin-flashcard-preview-wrapper{position:relative;width:100%;max-width:800px;max-height:90vh;background:#fff;border-radius:16px;box-shadow:0 25px 50px -12px #00000040;overflow-y:auto}.admin-flashcard-preview-close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;background:#00000080;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;z-index:1001;transition:background-color .2s}.admin-flashcard-preview-close-btn:hover{background:#000000b3}.admin-flashcard-spinner{width:16px;height:16px;border:2px solid #e5e7eb;border-top:2px solid #3b82f6;border-radius:50%;animation:admin-flashcard-spin .8s linear infinite}@keyframes admin-flashcard-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.dictionary-media{min-width:150px}.dictionary-media-btn{font-size:11px;padding:5px 10px}.dictionary-media-modal{max-width:95%}.media-management-section,.media-recording-section,.media-recording-controls{padding:12px}.media-recording-header{flex-direction:column;gap:8px;align-items:flex-start}.media-recording-actions{flex-direction:column}.media-cancel-btn,.media-save-recording-btn{width:100%}}.admin-banner-management{padding:24px;background-color:#f8fafc;min-height:100vh}.admin-banner-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:32px;padding:24px;background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a}.admin-banner-title h1{font-size:28px;font-weight:700;color:#1e293b;margin:0 0 8px}.admin-banner-title p{font-size:16px;color:#64748b;margin:0}.admin-banner-actions{display:flex;gap:12px}.admin-banner-action-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.admin-banner-action-btn.primary{background-color:#3b82f6;color:#fff}.admin-banner-action-btn.primary:hover{background-color:#2563eb}.admin-banner-action-btn.secondary{background-color:#e2e8f0;color:#475569}.admin-banner-action-btn.secondary:hover{background-color:#cbd5e1}.admin-banner-action-btn.small{padding:8px 12px;font-size:12px}.admin-banner-action-btn.danger{background-color:#ef4444;color:#fff}.admin-banner-action-btn.danger:hover{background-color:#dc2626}.admin-banner-tabs{display:flex;gap:4px;margin-bottom:24px;padding:4px;background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a}.admin-banner-tab{flex:1;padding:12px 20px;border:none;background:transparent;color:#64748b;font-size:14px;font-weight:500;cursor:pointer;border-radius:6px;transition:all .2s ease}.admin-banner-tab.active{background-color:#3b82f6;color:#fff}.admin-banner-tab:hover:not(.active){background-color:#f1f5f9;color:#475569}.admin-banner-section{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;overflow:hidden}.admin-banner-stats{display:flex;gap:24px;padding:24px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.admin-banner-stat-item{display:flex;flex-direction:column;gap:4px}.admin-banner-stat-label{font-size:14px;color:#64748b;font-weight:500}.admin-banner-stat-value{font-size:24px;font-weight:700;color:#1e293b}.admin-banner-table-container{overflow-x:auto}.admin-banner-table{width:100%;border-collapse:collapse}.admin-banner-table th{background-color:#f8fafc;padding:16px 12px;text-align:left;font-size:14px;font-weight:600;color:#374151;border-bottom:1px solid #e2e8f0}.admin-banner-table td{padding:16px 12px;border-bottom:1px solid #f1f5f9;vertical-align:top}.admin-banner-table tr:hover{background-color:#f8fafc}.admin-banner-image{width:80px;height:60px;border-radius:6px;overflow:hidden;background-color:#f1f5f9}.admin-banner-image img{width:100%;height:100%;object-fit:cover}.admin-banner-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#94a3b8}.admin-banner-title-cell{font-size:14px;font-weight:500;color:#1e293b;line-height:1.4;max-width:200px}.admin-banner-subtitle{font-size:13px;color:#64748b;max-width:150px}.admin-banner-description{font-size:12px;color:#64748b;max-width:200px;line-height:1.3}.admin-banner-badge{font-size:12px;color:#3b82f6;font-weight:500}.admin-banner-order-cell{display:flex;flex-direction:column;align-items:center;gap:4px}.admin-banner-order-value{font-size:14px;font-weight:600;color:#3b82f6;background:#eff6ff;padding:4px 8px;border-radius:6px;text-align:center;min-width:40px}.admin-banner-order-controls{display:flex;gap:2px}.admin-banner-order-btn{width:24px;height:24px;border:1px solid #d1d5db;background:#fff;border-radius:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#6b7280;transition:all .2s ease}.admin-banner-order-btn:hover:not(:disabled){background:#f3f4f6;border-color:#9ca3af;color:#374151}.admin-banner-order-btn:disabled{opacity:.5;cursor:not-allowed}.admin-banner-date{font-size:12px;color:#64748b}.admin-banner-status-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.admin-banner-status-badge.active{background-color:#dcfce7;color:#166534}.admin-banner-status-badge.inactive{background-color:#fee2e2;color:#991b1b}.admin-banner-actions-cell{display:flex;gap:8px}.admin-banner-add-row{cursor:pointer;transition:background-color .2s ease}.admin-banner-add-row:hover{background-color:#f0f9ff!important}.admin-banner-add-row-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;color:#3b82f6;font-weight:500}.admin-banner-add-icon{font-size:16px}.admin-banner-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;color:#64748b}.loading-spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.admin-banner-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center}.error-icon{font-size:48px;margin-bottom:16px}.admin-banner-error p{color:#ef4444;font-size:16px;margin-bottom:16px}.retry-button{padding:12px 24px;background-color:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.retry-button:hover{background-color:#2563eb}.admin-banner-notification{position:fixed;top:24px;right:24px;z-index:1000;padding:16px 20px;border-radius:8px;box-shadow:0 4px 12px #00000026;animation:slideIn .3s ease}.admin-banner-notification.success{background-color:#dcfce7;color:#166534;border:1px solid #bbf7d0}.admin-banner-notification.error{background-color:#fee2e2;color:#991b1b;border:1px solid #fecaca}.admin-banner-notification.info{background-color:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}.notification-content{display:flex;align-items:center;gap:8px}.notification-icon{font-size:16px}.notification-message{font-size:14px;font-weight:500}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.admin-banner-modal-overlay{position:fixed;inset:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:24px}.admin-banner-modal{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a;width:100%;max-width:600px;max-height:90vh;overflow-y:auto}.admin-banner-modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 0;border-bottom:1px solid #e2e8f0;margin-bottom:24px}.admin-banner-modal-header h3{font-size:20px;font-weight:600;color:#1e293b;margin:0}.admin-banner-modal-close{background:none;border:none;font-size:24px;color:#64748b;cursor:pointer;padding:4px;border-radius:4px;transition:background-color .2s ease}.admin-banner-modal-close:hover{background-color:#f1f5f9}.admin-banner-modal-content{padding:0 24px}.admin-banner-form-group{margin-bottom:20px}.admin-banner-form-group label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:6px}.admin-banner-form-group input,.admin-banner-form-group textarea{width:100%;padding:12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:border-color .2s ease}.admin-banner-form-group input:focus,.admin-banner-form-group textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.admin-banner-form-group input[type=checkbox]{width:auto;margin-right:8px}.admin-banner-image-preview{margin-top:12px}.admin-banner-image-preview img{max-width:200px;max-height:120px;border-radius:6px;border:1px solid #e2e8f0}.admin-banner-uploading{margin-top:8px;padding:8px 12px;background-color:#f0f9ff;color:#0369a1;border-radius:4px;font-size:12px;font-weight:500}.admin-banner-modal-footer{display:flex;justify-content:flex-end;gap:12px;padding:24px;border-top:1px solid #e2e8f0;margin-top:24px}.admin-banner-btn{padding:12px 24px;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.admin-banner-btn.primary{background-color:#3b82f6;color:#fff}.admin-banner-btn.primary:hover:not(:disabled){background-color:#2563eb}.admin-banner-btn.primary:disabled{background-color:#94a3b8;cursor:not-allowed}.admin-banner-btn.secondary{background-color:#e2e8f0;color:#475569}.admin-banner-btn.secondary:hover{background-color:#cbd5e1}@media (max-width: 768px){.admin-banner-management{padding:16px}.admin-banner-header{flex-direction:column;gap:16px;align-items:stretch}.admin-banner-stats{flex-direction:column;gap:16px}.admin-banner-table-container{font-size:12px}.admin-banner-table th,.admin-banner-table td{padding:8px 6px}.admin-banner-image{width:60px;height:45px}.admin-banner-title-cell,.admin-banner-subtitle,.admin-banner-description{max-width:120px}.admin-banner-modal{margin:16px;max-height:calc(100vh - 32px)}}.registration-control{padding:24px;max-width:1200px;margin:0 auto}.registration-control-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;padding-bottom:16px;border-bottom:2px solid #e5e7eb}.registration-control-header h2{font-size:28px;font-weight:700;color:#111827;margin:0}.header-actions{display:flex;gap:12px}.refresh-btn{padding:8px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:8px;font-size:14px;font-weight:500;color:#374151;cursor:pointer;transition:all .2s ease}.refresh-btn:hover{background:#e5e7eb;border-color:#9ca3af}.registration-control-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.loading-spinner{width:40px;height:40px;border:4px solid #f3f4f6;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite}.alert{display:flex;align-items:center;gap:12px;padding:16px;border-radius:8px;margin-bottom:24px;font-weight:500}.alert-error{background:#fef2f2;border:1px solid #fecaca;color:#dc2626}.alert-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#16a34a}.alert button{background:none;border:none;font-size:18px;cursor:pointer;margin-left:auto}.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:32px}.stat-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;display:flex;align-items:center;gap:16px;box-shadow:0 1px 3px #0000001a}.stat-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#f3f4f6;border-radius:8px}.stat-content{flex:1}.stat-value{font-size:24px;font-weight:700;color:#111827;margin-bottom:4px}.stat-label{font-size:14px;color:#6b7280}.settings-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;margin-bottom:32px;box-shadow:0 1px 3px #0000001a}.settings-section h3{font-size:20px;font-weight:600;color:#111827;margin:0 0 24px}.settings-form{display:flex;flex-direction:column;gap:24px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:500;color:#374151}.form-help{font-size:12px;color:#6b7280;margin:0}.checkbox-label{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:16px;font-weight:500}.checkbox-label input[type=checkbox]{display:none}.checkmark{width:20px;height:20px;border:2px solid #d1d5db;border-radius:4px;position:relative;transition:all .2s ease}.checkbox-label input[type=checkbox]:checked+.checkmark{background:#3b82f6;border-color:#3b82f6}.checkbox-label input[type=checkbox]:checked+.checkmark:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.checkbox-group{display:flex;flex-direction:column;gap:12px}input[type=text],input[type=email],textarea,select{padding:12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color .2s ease}input[type=text]:focus,input[type=email]:focus,textarea:focus,select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}textarea{resize:vertical;min-height:80px}.save-btn,.add-btn{padding:12px 24px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease;align-self:flex-start}.save-btn:hover,.add-btn:hover{background:#2563eb}.save-btn:disabled,.add-btn:disabled{background:#9ca3af;cursor:not-allowed}.whitelist-section{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.whitelist-section h3{font-size:20px;font-weight:600;color:#111827;margin:0 0 24px}.whitelist-section h4{font-size:16px;font-weight:500;color:#374151;margin:0 0 16px}.add-email-form{background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:20px;margin-bottom:24px}.form-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:16px;align-items:end}.search-filters{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:16px}.search-group{display:flex;gap:8px;flex:1}.search-group input{flex:1}.search-group button{padding:12px 16px;background:#6b7280;color:#fff;border:none;border-radius:8px;font-size:14px;cursor:pointer;transition:background-color .2s ease}.search-group button:hover{background:#4b5563}.whitelist-table{overflow-x:auto;margin-bottom:24px}.whitelist-table table{width:100%;border-collapse:collapse;font-size:14px}.whitelist-table th,.whitelist-table td{padding:12px;text-align:left;border-bottom:1px solid #e5e7eb}.whitelist-table th{background:#f9fafb;font-weight:600;color:#374151}.whitelist-table tbody tr:hover{background:#f9fafb}.status-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.status-badge.active{background:#dcfce7;color:#166534}.status-badge.inactive{background:#fee2e2;color:#991b1b}.remove-btn{padding:6px 12px;background:#dc2626;color:#fff;border:none;border-radius:6px;font-size:12px;cursor:pointer;transition:background-color .2s ease}.remove-btn:hover{background:#b91c1c}.remove-btn:disabled{background:#9ca3af;cursor:not-allowed}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:24px}.pagination button{padding:8px 16px;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;font-size:14px;cursor:pointer;transition:all .2s ease}.pagination button:hover:not(:disabled){background:#e5e7eb;border-color:#9ca3af}.pagination button:disabled{background:#f9fafb;color:#9ca3af;cursor:not-allowed}.pagination span{font-size:14px;color:#6b7280}@media (max-width: 768px){.registration-control{padding:16px}.registration-control-header{flex-direction:column;gap:16px;align-items:flex-start}.stats-cards{grid-template-columns:repeat(2,1fr)}.form-row{grid-template-columns:1fr;gap:12px}.search-filters{flex-direction:column;align-items:stretch}.whitelist-table{font-size:12px}.whitelist-table th,.whitelist-table td{padding:8px}}@media (max-width: 480px){.stats-cards{grid-template-columns:1fr}.registration-control-header h2{font-size:24px}}.admin-dashboard{display:flex;min-height:100vh;background:#f3f4f6;width:100vw;max-width:100%}.admin-db-main{flex:1;margin-left:280px;transition:margin-left .3s ease;display:flex;flex-direction:column;min-height:100vh;width:calc(100vw - 280px);max-width:calc(100% - 280px)}.admin-db-main.collapsed{margin-left:80px;width:calc(100vw - 80px);max-width:calc(100% - 80px)}.admin-db-content{flex:1;padding:24px;overflow-y:auto;width:100%;max-width:100%}.admin-db-page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.admin-db-page-header h2{font-size:28px;font-weight:700;color:#111827;margin:0}.admin-db-header-actions{display:flex;gap:12px;align-items:center}.admin-db-primary-button{padding:10px 20px;font-size:14px;font-weight:600;color:#fff;background:#667eea;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease}.admin-db-primary-button:hover{background:#5568d3;transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.admin-db-secondary-button{padding:10px 20px;font-size:14px;font-weight:600;color:#374151;background:#fff;border:2px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s ease}.admin-db-secondary-button:hover{border-color:#d1d5db;background:#f9fafb}.admin-db-action-button{padding:8px 16px;font-size:13px;font-weight:500;color:#4b5563;background:#fff;border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;transition:all .2s ease}.admin-db-action-button:hover{background:#f9fafb;border-color:#d1d5db}.admin-db-action-button.danger{color:#dc2626}.admin-db-action-button.danger:hover{background:#fee2e2;border-color:#fecaca}.admin-db-search-input{padding:10px 16px;font-size:14px;border:2px solid #e5e7eb;border-radius:8px;min-width:250px}.admin-db-search-input:focus{outline:none;border-color:#667eea}.admin-db-filter-select{padding:10px 16px;font-size:14px;border:2px solid #e5e7eb;border-radius:8px;background:#fff;cursor:pointer}.admin-db-filter-select:focus{outline:none;border-color:#667eea}.admin-db-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.admin-db-stat-card{display:flex;align-items:center;gap:16px;background:#fff;padding:24px;border-radius:12px;box-shadow:0 1px 3px #0000001a;transition:all .2s ease}.admin-db-stat-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #0000001a}.admin-db-stat-icon{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:28px}.admin-db-stat-content h3{font-size:13px;font-weight:500;color:#6b7280;margin:0 0 8px;text-transform:uppercase;letter-spacing:.5px}.admin-db-stat-value{font-size:32px;font-weight:700;color:#111827;margin-bottom:4px}.admin-db-stat-label{font-size:14px;color:#9ca3af}.admin-db-stat-change{font-size:13px;font-weight:600;margin-top:4px}.admin-db-stat-change.positive{color:#10b981}.admin-db-stat-change.negative{color:#ef4444}.admin-db-dashboard-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}.admin-db-content-section{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a}.admin-db-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.admin-db-section-header h3{font-size:18px;font-weight:600;color:#111827;margin:0}.admin-db-view-all-button{padding:6px 12px;font-size:13px;font-weight:500;color:#667eea;background:transparent;border:none;cursor:pointer;transition:all .2s ease}.admin-db-view-all-button:hover{color:#5568d3;text-decoration:underline}:root{--ds-color-primary: #58cc02;--ds-color-primary-hover: #61e002;--ds-color-primary-light: #7ed321;--ds-color-primary-dark: #4db000;--ds-color-secondary: #1cb0f6;--ds-color-secondary-hover: #1899d6;--ds-color-secondary-light: #3ec8ff;--ds-color-secondary-dark: #1395d3;--ds-color-accent: #ffc800;--ds-color-accent-hover: #ffb000;--ds-color-accent-light: #ffd93d;--ds-color-accent-dark: #e6b400;--ds-color-success: #6bcf7f;--ds-color-success-hover: #5bb96f;--ds-color-success-light: #7dd08f;--ds-color-success-dark: #4caf50;--ds-color-error: #ff6b6b;--ds-color-error-hover: #ff3333;--ds-color-error-light: #ff8a8a;--ds-color-error-dark: #e63946;--ds-color-warning: #ffd93d;--ds-color-warning-hover: #ffc107;--ds-color-warning-light: #fff59d;--ds-color-warning-dark: #ff8f00;--ds-color-info: #1cb0f6;--ds-color-background: #f7f7f7;--ds-color-surface: #ffffff;--ds-color-surface-hover: #f9f9f9;--ds-color-surface-active: #f0f0f0;--ds-color-text-primary: #3c3c3c;--ds-color-text-secondary: #757575;--ds-color-text-tertiary: #9e9e9e;--ds-font-family: "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;--ds-color-text-inverse: #ffffff;--ds-color-border: #e5e5e5;--ds-color-border-light: #f0f0f0;--ds-color-border-dark: #d5d5d5;--ds-shadow-sm: 0 2px 4px rgba(0,0,0,.1);--ds-shadow-md: 0 4px 12px rgba(0,0,0,.15);--ds-shadow-lg: 0 8px 24px rgba(0,0,0,.2);--ds-shadow-xl: 0 20px 60px rgba(0,0,0,.3);--ds-shadow-primary: 0 4px 12px rgba(88, 204, 2, .3);--ds-shadow-secondary: 0 4px 12px rgba(28, 176, 246, .3);--ds-font-xs: 12px;--ds-font-sm: 14px;--ds-font-base: 16px;--ds-font-lg: 18px;--ds-font-xl: 20px;--ds-font-2xl: 24px;--ds-font-3xl: 32px;--ds-font-4xl: 40px;--ds-font-light: 300;--ds-font-normal: 400;--ds-font-medium: 500;--ds-font-semibold: 600;--ds-font-bold: 700;--ds-font-extrabold: 800;--ds-space-1: 4px;--ds-space-2: 8px;--ds-space-3: 12px;--ds-space-4: 16px;--ds-space-5: 20px;--ds-space-6: 24px;--ds-space-8: 32px;--ds-space-10: 40px;--ds-space-12: 48px;--ds-radius-sm: 8px;--ds-radius-md: 12px;--ds-radius-lg: 16px;--ds-radius-xl: 20px;--ds-radius-xxl: 24px;--ds-radius-full: 50%;--ds-button-height: 44px;--ds-input-height: 48px;--ds-card-padding: 16px;--ds-modal-padding: 24px;--ds-icon-sm: 20px;--ds-icon-md: 24px;--ds-icon-lg: 32px;--ds-icon-xl: 40px;--ds-icon-xxl: 48px;--ds-touch-target: 44px;--ds-gradient-primary: linear-gradient(135deg, var(--ds-color-primary) 0%, var(--ds-color-primary-light) 100%);--ds-gradient-secondary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--ds-gradient-accent: linear-gradient(135deg, var(--ds-color-accent) 0%, var(--ds-color-accent-light) 100%);--ds-gradient-success: linear-gradient(135deg, var(--ds-color-success) 0%, var(--ds-color-success-light) 100%);--ds-gradient-error: linear-gradient(135deg, var(--ds-color-error) 0%, var(--ds-color-error-light) 100%);--ds-transition-fast: .1s ease;--ds-transition-normal: .2s ease;--ds-transition-slow: .3s ease;--ds-transition-bounce: .5s cubic-bezier(.34, 1.56, .64, 1);--ds-z-base: 1;--ds-z-dropdown: 10;--ds-z-sticky: 100;--ds-z-overlay: 1000;--ds-z-modal: 2000;--ds-z-tooltip: 3000}:root{--ds-card-bg: var(--ds-color-surface);--ds-card-border: 2px solid var(--ds-color-border);--ds-card-radius: var(--ds-radius-md);--ds-card-padding: var(--ds-space-4);--ds-card-margin: var(--ds-space-3);--ds-card-shadow: var(--ds-shadow-md);--ds-card-shadow-hover: var(--ds-shadow-lg)}:root{--ds-btn-height: var(--ds-button-height);--ds-btn-padding: var(--ds-space-3) var(--ds-space-4);--ds-btn-radius: var(--ds-radius-sm);--ds-btn-font-size: var(--ds-font-sm);--ds-btn-font-weight: var(--ds-font-bold);--ds-btn-transition: var(--ds-transition-normal);--ds-btn-primary-bg: var(--ds-gradient-primary);--ds-btn-primary-color: var(--ds-color-text-inverse);--ds-btn-primary-shadow: var(--ds-shadow-primary);--ds-btn-secondary-bg: var(--ds-gradient-secondary);--ds-btn-secondary-color: var(--ds-color-text-inverse);--ds-btn-secondary-shadow: var(--ds-shadow-secondary);--ds-btn-outline-bg: transparent;--ds-btn-outline-border: 2px solid var(--ds-color-primary);--ds-btn-outline-color: var(--ds-color-primary)}:root{--ds-input-bg: var(--ds-color-surface);--ds-input-border: 2px solid var(--ds-color-border);--ds-input-radius: var(--ds-radius-sm);--ds-input-padding: var(--ds-space-3) var(--ds-space-4);--ds-input-font-size: var(--ds-font-base);--ds-input-height: var(--ds-input-height);--ds-input-focus-border: var(--ds-color-primary);--ds-input-focus-shadow: 0 0 0 3px rgba(88, 204, 2, .1)}:root{--ds-avatar-sm: 24px;--ds-avatar-md: 32px;--ds-avatar-lg: 40px;--ds-avatar-xl: 48px;--ds-badge-sm: 20px;--ds-badge-md: 24px;--ds-badge-lg: 28px;--ds-badge-xl: 32px}@media (max-width: 768px){:root{--ds-font-xs: 11px;--ds-font-sm: 12px;--ds-font-base: 14px;--ds-font-lg: 16px;--ds-font-xl: 18px;--ds-font-2xl: 20px;--ds-font-3xl: 24px;--ds-font-4xl: 28px;--ds-space-3: 10px;--ds-space-4: 12px;--ds-space-5: 16px;--ds-space-6: 20px;--ds-card-padding: var(--ds-space-4);--ds-modal-padding: var(--ds-space-5);--ds-icon-xl: 36px;--ds-icon-xxl: 44px;--ds-avatar-sm: 20px;--ds-avatar-md: 28px;--ds-avatar-lg: 36px;--ds-avatar-xl: 44px;--ds-badge-sm: 18px;--ds-badge-md: 22px;--ds-badge-lg: 26px;--ds-badge-xl: 30px;--ds-shadow-md: var(--ds-shadow-sm);--ds-shadow-lg: var(--ds-shadow-md)}}@media (max-width: 480px){:root{--ds-font-xs: 10px;--ds-font-sm: 11px;--ds-font-base: 13px;--ds-font-lg: 15px;--ds-font-xl: 17px;--ds-font-2xl: 19px;--ds-font-3xl: 22px;--ds-font-4xl: 26px;--ds-space-3: 8px;--ds-space-4: 10px;--ds-space-5: 14px;--ds-space-6: 18px;--ds-card-padding: var(--ds-space-3);--ds-modal-padding: var(--ds-space-4);--ds-icon-xl: 32px;--ds-icon-xxl: 40px;--ds-avatar-sm: 18px;--ds-avatar-md: 24px;--ds-avatar-lg: 32px;--ds-avatar-xl: 40px;--ds-badge-sm: 16px;--ds-badge-md: 20px;--ds-badge-lg: 24px;--ds-badge-xl: 28px;--ds-btn-padding: var(--ds-space-2) var(--ds-space-3);--ds-btn-font-size: var(--ds-font-xs)}}.ds-text-xs{font-size:var(--ds-font-xs)}.ds-text-sm{font-size:var(--ds-font-sm)}.ds-text-base{font-size:var(--ds-font-base)}.ds-text-lg{font-size:var(--ds-font-lg)}.ds-text-xl{font-size:var(--ds-font-xl)}.ds-text-2xl{font-size:var(--ds-font-2xl)}.ds-text-3xl{font-size:var(--ds-font-3xl)}.ds-text-4xl{font-size:var(--ds-font-4xl)}.ds-font-light{font-weight:var(--ds-font-light)}.ds-font-normal{font-weight:var(--ds-font-normal)}.ds-font-medium{font-weight:var(--ds-font-medium)}.ds-font-semibold{font-weight:var(--ds-font-semibold)}.ds-font-bold{font-weight:var(--ds-font-bold)}.ds-font-extrabold{font-weight:var(--ds-font-extrabold)}.ds-p-1{padding:var(--ds-space-1)}.ds-p-2{padding:var(--ds-space-2)}.ds-p-3{padding:var(--ds-space-3)}.ds-p-4{padding:var(--ds-space-4)}.ds-p-5{padding:var(--ds-space-5)}.ds-p-6{padding:var(--ds-space-6)}.ds-m-1{margin:var(--ds-space-1)}.ds-m-2{margin:var(--ds-space-2)}.ds-m-3{margin:var(--ds-space-3)}.ds-m-4{margin:var(--ds-space-4)}.ds-m-5{margin:var(--ds-space-5)}.ds-m-6{margin:var(--ds-space-6)}.ds-rounded-sm{border-radius:var(--ds-radius-sm)}.ds-rounded-md{border-radius:var(--ds-radius-md)}.ds-rounded-lg{border-radius:var(--ds-radius-lg)}.ds-rounded-xl{border-radius:var(--ds-radius-xl)}.ds-rounded-full{border-radius:var(--ds-radius-full)}.ds-shadow-sm{box-shadow:var(--ds-shadow-sm)}.ds-shadow-md{box-shadow:var(--ds-shadow-md)}.ds-shadow-lg{box-shadow:var(--ds-shadow-lg)}.ds-text-primary{color:var(--ds-color-text-primary)}.ds-text-secondary{color:var(--ds-color-text-secondary)}.ds-text-tertiary{color:var(--ds-color-text-tertiary)}.ds-text-inverse{color:var(--ds-color-text-inverse)}.ds-bg-surface{background-color:var(--ds-color-surface)}.ds-bg-primary{background-color:var(--ds-color-primary)}.ds-bg-secondary{background-color:var(--ds-color-secondary)}.ds-hover-lift:hover{transform:translateY(-2px);box-shadow:var(--ds-shadow-lg);transition:var(--ds-transition-normal)}.ds-interactive{cursor:pointer;transition:var(--ds-transition-normal)}.ds-interactive:hover{transform:translateY(-1px)}.ds-card{background:var(--ds-card-bg);border:var(--ds-card-border);border-radius:var(--ds-card-radius);padding:var(--ds-card-padding);margin-bottom:var(--ds-card-margin);box-shadow:var(--ds-card-shadow);transition:var(--ds-transition-normal)}.ds-card:hover{box-shadow:var(--ds-card-shadow-hover);transform:translateY(-2px)}.ds-btn{height:var(--ds-btn-height);padding:var(--ds-btn-padding);border-radius:var(--ds-btn-radius);font-size:var(--ds-btn-font-size);font-weight:var(--ds-btn-font-weight);border:none;cursor:pointer;transition:var(--ds-btn-transition);min-height:var(--ds-touch-target);display:inline-flex;align-items:center;justify-content:center}.ds-btn-primary{background:var(--ds-btn-primary-bg);color:var(--ds-btn-primary-color);box-shadow:var(--ds-btn-primary-shadow)}.ds-btn-primary:hover{transform:translateY(-2px);box-shadow:var(--ds-shadow-lg)}.ds-btn-secondary{background:var(--ds-btn-secondary-bg);color:var(--ds-btn-secondary-color);box-shadow:var(--ds-btn-secondary-shadow)}.ds-btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--ds-shadow-lg)}.ds-input{background:var(--ds-input-bg);border:var(--ds-input-border);border-radius:var(--ds-input-radius);padding:var(--ds-input-padding);font-size:var(--ds-input-font-size);height:var(--ds-input-height);transition:var(--ds-transition-normal);width:100%;box-sizing:border-box}.ds-input:focus{outline:none;border-color:var(--ds-input-focus-border);box-shadow:var(--ds-input-focus-shadow)}.ds-avatar{border-radius:var(--ds-radius-full);background:var(--ds-color-surface);border:2px solid var(--ds-color-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}.ds-avatar-sm{width:var(--ds-avatar-sm);height:var(--ds-avatar-sm);font-size:12px}.ds-avatar-md{width:var(--ds-avatar-md);height:var(--ds-avatar-md);font-size:16px}.ds-avatar-lg{width:var(--ds-avatar-lg);height:var(--ds-avatar-lg);font-size:20px}.ds-avatar-xl{width:var(--ds-avatar-xl);height:var(--ds-avatar-xl);font-size:24px}.ds-badge{border-radius:var(--ds-radius-full);display:flex;align-items:center;justify-content:center;font-weight:var(--ds-font-bold);flex-shrink:0}.ds-badge-sm{width:var(--ds-badge-sm);height:var(--ds-badge-sm);font-size:10px}.ds-badge-md{width:var(--ds-badge-md);height:var(--ds-badge-md);font-size:12px}.ds-badge-lg{width:var(--ds-badge-lg);height:var(--ds-badge-lg);font-size:14px}.ds-badge-xl{width:var(--ds-badge-xl);height:var(--ds-badge-xl);font-size:16px}.theme-default{--theme-primary: #58cc02;--theme-primary-hover: #61e002;--theme-primary-light: #7ed321;--theme-primary-dark: #4db000;--theme-secondary: #1cb0f6;--theme-secondary-hover: #1899d6;--theme-secondary-light: #3ec8ff;--theme-secondary-dark: #1395d3;--theme-accent: #ffc800;--theme-accent-hover: #ffb000;--theme-accent-light: #ffd93d;--theme-accent-dark: #e6b400;--theme-error: #ff4b4b;--theme-error-hover: #ff3333;--theme-error-light: #ff6b6b;--theme-error-dark: #e63946;--theme-success: #6bcf7f;--theme-success-hover: #5bb96f;--theme-success-light: #7dd08f;--theme-success-dark: #4caf50;--theme-warning: #ffd93d;--theme-warning-hover: #ffc107;--theme-warning-light: #fff59d;--theme-warning-dark: #ff8f00;--theme-background: #f7f7f7;--theme-background-secondary: #ffffff;--theme-background-tertiary: #fafafa;--theme-surface: #ffffff;--theme-surface-hover: #f9f9f9;--theme-surface-active: #f0f0f0;--theme-text-primary: #3c3c3c;--theme-text-secondary: #757575;--theme-text-tertiary: #9e9e9e;--theme-text-inverse: #ffffff;--theme-border: #e5e5e5;--theme-border-light: #f0f0f0;--theme-border-dark: #d5d5d5;--theme-gradient-primary: linear-gradient(135deg, #58cc02 0%, #89e219 100%);--theme-gradient-secondary: linear-gradient(135deg, #1cb0f6 0%, #3ec8ff 100%);--theme-gradient-accent: linear-gradient(135deg, #ffc800 0%, #ffd93d 100%);--theme-gradient-background: linear-gradient(135deg, #f7f7f7 0%, #ffffff 100%);--theme-shadow-sm: 0 2px 4px rgba(0,0,0,.05);--theme-shadow-md: 0 4px 12px rgba(0,0,0,.1);--theme-shadow-lg: 0 8px 24px rgba(0,0,0,.15);--theme-shadow-xl: 0 20px 60px rgba(0,0,0,.3);--theme-shadow-primary: 0 4px 12px rgba(88, 204, 2, .3);--theme-shadow-secondary: 0 4px 12px rgba(28, 176, 246, .3);--fill-blank-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--mode-accent-glow: rgba(88, 204, 2, .2);--mode-completion-bg: linear-gradient(135deg, #f7f7f7 0%, #ffffff 100%);--keyboard-container-bg: rgba(255, 255, 255, .9);--keyboard-container-border: rgba(0, 0, 0, .1);--korean-keyboard-container-bg: rgba(255, 255, 255, .9);--keyboard-button-bg: rgba(255, 255, 255, .95);--keyboard-button-hover: rgba(255, 255, 255, 1);--keyboard-button-active: rgba(240, 240, 240, .9);--keyboard-button-text: #333;--keyboard-button-border: rgba(0, 0, 0, .1);--korean-keyboard-button-bg: rgba(255, 255, 255, .95);--korean-keyboard-button-hover: rgba(255, 255, 255, 1);--korean-keyboard-button-text: #333;--theme-font-family: "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif}.theme-dark{--theme-primary: #7c3aed;--theme-primary-hover: #8b5cf6;--theme-primary-light: #a78bfa;--theme-primary-dark: #6d28d9;--theme-secondary: #06b6d4;--theme-secondary-hover: #0891b2;--theme-secondary-light: #22d3ee;--theme-secondary-dark: #0e7490;--theme-accent: #f59e0b;--theme-accent-hover: #d97706;--theme-accent-light: #fbbf24;--theme-accent-dark: #b45309;--theme-error: #ef4444;--theme-error-hover: #dc2626;--theme-error-light: #f87171;--theme-error-dark: #b91c1c;--theme-success: #10b981;--theme-success-hover: #059669;--theme-success-light: #34d399;--theme-success-dark: #047857;--theme-warning: #f59e0b;--theme-warning-hover: #d97706;--theme-warning-light: #fbbf24;--theme-warning-dark: #b45309;--theme-background: #0f0f0f;--theme-background-secondary: #1a1a1a;--theme-background-tertiary: #262626;--theme-surface: #1e1e1e;--theme-surface-hover: #2a2a2a;--theme-surface-active: #363636;--theme-text-primary: #ffffff;--theme-text-secondary: #d4d4d8;--theme-text-tertiary: #a1a1aa;--theme-text-inverse: #000000;--theme-border: #404040;--theme-border-light: #525252;--theme-border-dark: #2a2a2a;--theme-gradient-primary: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);--theme-gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #22d3ee 100%);--theme-gradient-accent: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);--theme-gradient-background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);--theme-shadow-sm: 0 2px 4px rgba(0,0,0,.3);--theme-shadow-md: 0 4px 12px rgba(0,0,0,.4);--theme-shadow-lg: 0 8px 24px rgba(0,0,0,.5);--theme-shadow-xl: 0 20px 60px rgba(0,0,0,.6);--theme-shadow-primary: 0 4px 12px rgba(124, 58, 237, .4);--theme-shadow-secondary: 0 4px 12px rgba(6, 182, 212, .4);--fill-blank-bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d1b69 50%, #0f0f0f 100%);--mode-accent-glow: rgba(124, 58, 237, .3);--mode-completion-bg: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);--keyboard-container-bg: rgba(30, 30, 30, .9);--keyboard-container-border: rgba(255, 255, 255, .1);--korean-keyboard-container-bg: rgba(30, 30, 30, .9);--keyboard-button-bg: rgba(45, 45, 45, .95);--keyboard-button-hover: rgba(60, 60, 60, 1);--keyboard-button-active: rgba(35, 35, 35, .9);--keyboard-button-text: #ffffff;--keyboard-button-border: rgba(255, 255, 255, .1);--korean-keyboard-button-bg: rgba(45, 45, 45, .95);--korean-keyboard-button-hover: rgba(60, 60, 60, 1);--korean-keyboard-button-text: #ffffff;--theme-font-family: "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif}.theme-dark .glow-effect{box-shadow:var(--theme-shadow-primary),0 0 20px var(--theme-primary)}.theme-dark .modal-overlay,.theme-dark .apply-success-overlay{background:#0f0f0fcc!important}.theme-premium{--theme-primary: #f59e0b;--theme-primary-hover: #d97706;--theme-primary-light: #fbbf24;--theme-primary-dark: #b45309;--theme-secondary: #ef4444;--theme-secondary-hover: #dc2626;--theme-secondary-light: #f87171;--theme-secondary-dark: #b91c1c;--theme-accent: #8b5cf6;--theme-accent-hover: #7c3aed;--theme-accent-light: #a78bfa;--theme-accent-dark: #6d28d9;--theme-error: #dc2626;--theme-error-hover: #b91c1c;--theme-error-light: #ef4444;--theme-error-dark: #991b1b;--theme-success: #16a34a;--theme-success-hover: #15803d;--theme-success-light: #22c55e;--theme-success-dark: #14532d;--theme-warning: #ea580c;--theme-warning-hover: #c2410c;--theme-warning-light: #fb923c;--theme-warning-dark: #9a3412;--theme-background: #fefbf3;--theme-background-secondary: #fffef7;--theme-background-tertiary: #fef7ed;--theme-surface: #ffffff;--theme-surface-hover: #fef3c7;--theme-surface-active: #fed7aa;--theme-text-primary: #92400e;--theme-text-secondary: #a16207;--theme-text-tertiary: #d97706;--theme-text-inverse: #ffffff;--theme-border: #fed7aa;--theme-border-light: #fef3c7;--theme-border-dark: #fdba74;--theme-gradient-primary: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);--theme-gradient-secondary: linear-gradient(135deg, #ef4444 0%, #f87171 100%);--theme-gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);--theme-gradient-background: linear-gradient(135deg, #fefbf3 0%, #fffef7 100%);--theme-shadow-sm: 0 2px 4px rgba(245, 158, 11, .1);--theme-shadow-md: 0 4px 12px rgba(245, 158, 11, .2);--theme-shadow-lg: 0 8px 24px rgba(245, 158, 11, .3);--theme-shadow-xl: 0 20px 60px rgba(245, 158, 11, .4);--theme-shadow-primary: 0 4px 12px rgba(245, 158, 11, .4);--theme-shadow-secondary: 0 4px 12px rgba(239, 68, 68, .4);--fill-blank-bg-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);--mode-accent-glow: rgba(245, 158, 11, .4);--mode-completion-bg: linear-gradient(135deg, #fefbf3 0%, #fffef7 100%);--premium-gold-shimmer: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);--keyboard-container-bg: rgba(245, 158, 11, .1);--keyboard-container-border: rgba(245, 158, 11, .2);--korean-keyboard-container-bg: rgba(245, 158, 11, .1);--keyboard-button-bg: rgba(255, 248, 220, .95);--keyboard-button-hover: rgba(255, 248, 220, 1);--keyboard-button-active: rgba(245, 222, 179, .9);--keyboard-button-text: #8B4513;--keyboard-button-border: rgba(245, 158, 11, .3);--korean-keyboard-button-bg: rgba(255, 248, 220, .95);--korean-keyboard-button-hover: rgba(255, 248, 220, 1);--korean-keyboard-button-text: #8B4513;--theme-font-family: "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif}.theme-premium .premium-sparkle:before{content:"✨";animation:sparkle 2s infinite}.theme-premium .apply-success-modal:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%);background-size:200% 200%;animation:shimmer 2s infinite;border-radius:inherit;pointer-events:none}.theme-premium .btn-primary:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:var(--premium-gold-shimmer);animation:premium-shimmer 3s infinite;opacity:0;transition:opacity .3s ease}@keyframes sparkle{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.theme-premium .modal-overlay,.theme-premium .apply-success-overlay{background:#92400e4d!important}.theme-rainbow{--theme-primary: #ec4899;--theme-primary-hover: #db2777;--theme-primary-light: #f472b6;--theme-primary-dark: #be185d;--theme-secondary: #8b5cf6;--theme-secondary-hover: #7c3aed;--theme-secondary-light: #a78bfa;--theme-secondary-dark: #6d28d9;--theme-accent: #06b6d4;--theme-accent-hover: #0891b2;--theme-accent-light: #22d3ee;--theme-accent-dark: #0e7490;--theme-error: #f43f5e;--theme-error-hover: #e11d48;--theme-error-light: #fb7185;--theme-error-dark: #be123c;--theme-success: #10b981;--theme-success-hover: #059669;--theme-success-light: #34d399;--theme-success-dark: #047857;--theme-warning: #f59e0b;--theme-warning-hover: #d97706;--theme-warning-light: #fbbf24;--theme-warning-dark: #b45309;--theme-background: #fdf4ff;--theme-background-secondary: #fefaff;--theme-background-tertiary: #f3e8ff;--theme-surface: #ffffff;--theme-surface-hover: #fae8ff;--theme-surface-active: #f3e8ff;--theme-text-primary: #831843;--theme-text-secondary: #9333ea;--theme-text-tertiary: #a855f7;--theme-text-inverse: #ffffff;--theme-border: #f3e8ff;--theme-border-light: #fae8ff;--theme-border-dark: #e9d5ff;--theme-gradient-primary: linear-gradient(135deg, #ec4899 0%, #f472b6 50%, #8b5cf6 100%);--theme-gradient-secondary: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 50%, #10b981 100%);--theme-gradient-accent: linear-gradient(135deg, #06b6d4 0%, #ec4899 50%, #f59e0b 100%);--theme-gradient-background: linear-gradient(135deg, #fdf4ff 0%, #fefaff 50%, #f3e8ff 100%);--theme-shadow-sm: 0 2px 4px rgba(236, 72, 153, .1);--theme-shadow-md: 0 4px 12px rgba(236, 72, 153, .2);--theme-shadow-lg: 0 8px 24px rgba(236, 72, 153, .3);--theme-shadow-xl: 0 20px 60px rgba(236, 72, 153, .4);--theme-shadow-primary: 0 4px 12px rgba(236, 72, 153, .4);--theme-shadow-secondary: 0 4px 12px rgba(139, 92, 246, .4);--fill-blank-bg-gradient: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%);--mode-accent-glow: rgba(236, 72, 153, .3);--mode-completion-bg: linear-gradient(135deg, #fdf4ff 0%, #fefaff 50%, #f3e8ff 100%);--rainbow-gradient: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);--keyboard-container-bg: rgba(236, 72, 153, .1);--keyboard-container-border: rgba(236, 72, 153, .2);--korean-keyboard-container-bg: rgba(236, 72, 153, .1);--keyboard-button-bg: rgba(255, 240, 245, .95);--keyboard-button-hover: rgba(255, 240, 245, 1);--keyboard-button-active: rgba(255, 228, 225, .9);--keyboard-button-text: #C71585;--keyboard-button-border: rgba(236, 72, 153, .3);--korean-keyboard-button-bg: rgba(255, 240, 245, .95);--korean-keyboard-button-hover: rgba(255, 240, 245, 1);--korean-keyboard-button-text: #C71585;--theme-font-family: "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif}.theme-rainbow .rainbow-animation{background:linear-gradient(45deg,red,#ff7f00,#ff0,#0f0,#00f,indigo,#9400d3);background-size:400% 400%;animation:rainbow 4s ease infinite}.theme-rainbow .apply-success-icon{background:linear-gradient(45deg,red,#ff7f00,#ff0,#0f0,#00f,indigo,#9400d3);background-size:400% 400%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:rainbowShift 2s infinite}@keyframes rainbow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes rainbowShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.theme-rainbow .modal-overlay,.theme-rainbow .apply-success-overlay{background:#8318434d!important}.theme-learning{--theme-primary: #667eea;--theme-primary-hover: #7c89f0;--theme-primary-light: #8b9aff;--theme-primary-dark: #5a6fd8;--theme-secondary: #764ba2;--theme-secondary-hover: #8b5fb8;--theme-secondary-light: #a373ce;--theme-secondary-dark: #68428c;--theme-accent: #f093fb;--theme-accent-hover: #f5a8ff;--theme-accent-light: #fbb8ff;--theme-accent-dark: #e777f0;--theme-error: #ff6b9d;--theme-error-hover: #ff5588;--theme-error-light: #ff8bb3;--theme-error-dark: #e63581;--theme-success: #7dd3fc;--theme-success-hover: #67c7f7;--theme-success-light: #93ddff;--theme-success-dark: #5bb8e8;--theme-warning: #ffd93d;--theme-warning-hover: #ffc107;--theme-warning-light: #fff59d;--theme-warning-dark: #ff8f00;--theme-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--theme-background-secondary: rgba(255,255,255,.1);--theme-background-tertiary: rgba(255,255,255,.05);--theme-surface: rgba(255,255,255,.1);--theme-surface-hover: rgba(255,255,255,.2);--theme-surface-active: rgba(255,255,255,.15);--theme-text-primary: #ffffff;--theme-text-secondary: rgba(255,255,255,.8);--theme-text-tertiary: rgba(255,255,255,.6);--theme-text-inverse: #333333;--theme-border: rgba(255,255,255,.2);--theme-border-light: rgba(255,255,255,.1);--theme-border-dark: rgba(255,255,255,.3);--theme-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--theme-gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--theme-gradient-accent: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);--theme-gradient-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--theme-shadow-sm: 0 2px 4px rgba(0,0,0,.2);--theme-shadow-md: 0 4px 12px rgba(0,0,0,.3);--theme-shadow-lg: 0 8px 24px rgba(0,0,0,.4);--theme-shadow-xl: 0 20px 60px rgba(0,0,0,.5);--theme-shadow-primary: 0 4px 12px rgba(102, 126, 234, .4);--theme-shadow-secondary: 0 4px 12px rgba(118, 75, 162, .4);--fill-blank-bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--theme-font-family: "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif}.theme-learning .fill-blank-mode,.theme-learning .thai-to-korean-mode{background:var(--fill-blank-bg-gradient)}.theme-learning .modal-overlay,.theme-learning .apply-success-overlay{background:#667eea4d!important}.theme-flame{--theme-primary: #ff4500;--theme-primary-hover: #ff6347;--theme-primary-light: #ff7f50;--theme-primary-dark: #dc143c;--theme-secondary: #ffa500;--theme-secondary-hover: #ff8c00;--theme-secondary-light: #ffb347;--theme-secondary-dark: #ff7f00;--theme-accent: #ff1493;--theme-accent-hover: #ff69b4;--theme-accent-light: #ff6347;--theme-accent-dark: #c71585;--theme-error: #b22222;--theme-error-hover: #8b0000;--theme-error-light: #cd5c5c;--theme-error-dark: #800000;--theme-success: #ff6347;--theme-success-hover: #ff4500;--theme-success-light: #ff7f50;--theme-success-dark: #dc143c;--theme-warning: #ffa500;--theme-warning-hover: #ff8c00;--theme-warning-light: #ffb347;--theme-warning-dark: #ff7f00;--theme-background: #1a0000;--theme-background-secondary: #2d0808;--theme-background-tertiary: #400808;--theme-surface: #2d0808;--theme-surface-hover: #400808;--theme-surface-active: #4d0d0d;--theme-text-primary: #fff8dc;--theme-text-secondary: #ffdab9;--theme-text-tertiary: #daa520;--theme-text-inverse: #1a0000;--theme-border: #8b0000;--theme-border-light: #a0522d;--theme-border-dark: #654321;--theme-gradient-primary: linear-gradient(135deg, #ff4500 0%, #dc143c 50%, #8b0000 100%);--theme-gradient-secondary: linear-gradient(135deg, #ffa500 0%, #ff8c00 50%, #ff4500 100%);--theme-gradient-accent: linear-gradient(135deg, #ff1493 0%, #ff6347 50%, #ffa500 100%);--theme-gradient-background: linear-gradient(135deg, #1a0000 0%, #2d0808 50%, #400808 100%);--theme-shadow-sm: 0 2px 4px rgba(255, 69, 0, .3);--theme-shadow-md: 0 4px 12px rgba(255, 69, 0, .4);--theme-shadow-lg: 0 8px 24px rgba(255, 69, 0, .5);--theme-shadow-xl: 0 20px 60px rgba(255, 69, 0, .6);--theme-shadow-primary: 0 4px 12px rgba(255, 69, 0, .6);--theme-shadow-secondary: 0 4px 12px rgba(255, 165, 0, .6);--fill-blank-bg-gradient: linear-gradient(135deg, #ff4500 0%, #dc143c 50%, #8b0000 100%);--mode-accent-glow: rgba(255, 69, 0, .6);--mode-completion-bg: linear-gradient(135deg, #1a0000 0%, #2d0808 50%, #400808 100%);--flame-fire-gradient: linear-gradient(0deg, #ff4500 0%, #ff6347 25%, #ffa500 50%, #ff8c00 75%, #ff4500 100%);--flame-ember-glow: rgba(255, 69, 0, .8);--flame-heat-shimmer: linear-gradient(45deg, transparent 30%, rgba(255, 165, 0, .4) 50%, transparent 70%);--keyboard-container-bg: rgba(255, 69, 0, .2);--keyboard-container-border: rgba(255, 165, 0, .4);--korean-keyboard-container-bg: rgba(255, 69, 0, .2);--keyboard-button-bg: rgba(45, 8, 8, .95);--keyboard-button-hover: rgba(64, 8, 8, 1);--keyboard-button-active: rgba(77, 13, 13, .9);--keyboard-button-text: #fff8dc;--keyboard-button-border: rgba(255, 69, 0, .5);--korean-keyboard-button-bg: rgba(45, 8, 8, .95);--korean-keyboard-button-hover: rgba(64, 8, 8, 1);--korean-keyboard-button-text: #fff8dc;--theme-font-family: "MaplestoryOTFBold", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif}.theme-flame .fill-blank-learning-content{background-image:url(/assets/FireStreak-Bx-KQYnk.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;position:relative}.theme-flame .fill-blank-learning-content:before{content:"";position:absolute;inset:0;background:#1a00004d;z-index:0}.theme-flame .fill-blank-learning-content>*{position:relative;z-index:1}.theme-flame .thai-to-korean-learning-content{background-image:url(/assets/FireStreak-Bx-KQYnk.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;position:relative}.theme-flame .thai-to-korean-learning-content:before{content:"";position:absolute;inset:0;background:#1a00004d;z-index:0}.theme-flame .thai-to-korean-learning-content>*{position:relative;z-index:1}.theme-flame .typing-content{background-image:url(/assets/FireStreak-Bx-KQYnk.png);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;position:relative}.theme-flame .typing-content:before{content:"";position:absolute;inset:0;background:#1a000033;z-index:0}.theme-flame .typing-content>*{position:relative;z-index:1}.theme-flame .flame-fire-effect{background:var(--flame-fire-gradient);background-size:400% 400%;animation:flameFlicker 3s ease-in-out infinite}.theme-flame .btn-primary{background:var(--flame-fire-gradient);background-size:400% 400%;animation:flameButton 4s ease infinite;box-shadow:0 0 20px #ff450080}.theme-flame .btn-primary:hover{animation:flameButtonHover 2s ease infinite;box-shadow:0 0 30px #ff4500cc}.theme-flame .progress-fill{background:var(--flame-fire-gradient);background-size:200% 200%;animation:flameProgress 3s linear infinite;box-shadow:0 0 15px #ff450099}@keyframes flameFlicker{0%{background-position:0% 0%;filter:brightness(1)}25%{background-position:100% 25%;filter:brightness(1.2)}50%{background-position:50% 100%;filter:brightness(.9)}75%{background-position:0% 75%;filter:brightness(1.1)}to{background-position:0% 0%;filter:brightness(1)}}@keyframes flameButton{0%{background-position:0% 50%;transform:scale(1)}50%{background-position:100% 50%;transform:scale(1.02)}to{background-position:0% 50%;transform:scale(1)}}@keyframes flameButtonHover{0%{background-position:0% 50%;transform:scale(1.05) rotate(-.5deg)}50%{background-position:100% 50%;transform:scale(1.08) rotate(.5deg)}to{background-position:0% 50%;transform:scale(1.05) rotate(-.5deg)}}@keyframes flameProgress{0%{background-position:0% 0%;filter:hue-rotate(0deg)}33%{background-position:100% 50%;filter:hue-rotate(10deg)}66%{background-position:50% 100%;filter:hue-rotate(-10deg)}to{background-position:0% 0%;filter:hue-rotate(0deg)}}.theme-flame .fill-blank-translation-card,.theme-flame .thai-to-korean-translation-card{border:2px solid rgba(255,69,0,.6);box-shadow:0 0 20px #ff450066,inset 0 0 20px #ffa5001a;background:#2d0808cc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.theme-flame .fill-blank-translation-card:hover,.theme-flame .thai-to-korean-translation-card:hover{border-color:#ffa500cc;box-shadow:0 0 30px #ff450099,inset 0 0 30px #ffa50033;animation:flameCardPulse 2s ease-in-out infinite}@keyframes flameCardPulse{0%,to{box-shadow:0 0 20px #ff450099,inset 0 0 20px #ffa50033}50%{box-shadow:0 0 40px #ff4500cc,inset 0 0 40px #ffa5004d}}.theme-flame .glow-effect{box-shadow:var(--theme-shadow-primary),0 0 30px #ff450099}.theme-flame .glow-effect:hover{box-shadow:var(--theme-shadow-lg),0 0 50px #ff4500cc}.theme-flame .modal-overlay,.theme-flame .apply-success-overlay{background:#1a0000b3!important}.theme-flame .particles .particle{background:radial-gradient(circle,rgba(255,69,0,.8) 0%,rgba(255,165,0,.6) 50%,transparent 100%);animation:flameParticle 4s ease-in-out infinite}@keyframes flameParticle{0%,to{transform:translateY(0) scale(1);opacity:.8;filter:brightness(1)}25%{transform:translateY(-15px) scale(1.2);opacity:1;filter:brightness(1.3)}50%{transform:translateY(-8px) scale(.9);opacity:.6;filter:brightness(.8)}75%{transform:translateY(-20px) scale(1.1);opacity:.9;filter:brightness(1.1)}}.theme-flame .fill-blank-thai-input,.theme-flame .thai-to-korean-input{border:2px solid rgba(255,69,0,.6);background:#2d0808cc;color:#fff8dc;box-shadow:0 0 10px #ff45004d,inset 0 0 10px #ffa5001a}.theme-flame .fill-blank-thai-input:focus,.theme-flame .thai-to-korean-input:focus{border-color:#ffa500cc;box-shadow:0 0 20px #ff450099,inset 0 0 15px #ffa50033;animation:flameInputFocus 2s ease-in-out infinite}@keyframes flameInputFocus{0%,to{box-shadow:0 0 15px #ff450099,inset 0 0 10px #ffa50033}50%{box-shadow:0 0 25px #ff4500cc,inset 0 0 20px #ffa5004d}}:root{--shop-primary: var(--theme-primary);--shop-secondary: var(--theme-secondary);--shop-accent: var(--theme-accent);--shop-success: var(--theme-success);--shop-error: var(--theme-error);--shop-warning: var(--theme-warning);--shop-background: var(--theme-background);--shop-surface: var(--theme-surface);--shop-surface-hover: var(--theme-surface-hover);--shop-surface-active: var(--theme-surface-active);--shop-text-primary: var(--theme-text-primary);--shop-text-secondary: var(--theme-text-secondary);--shop-text-tertiary: var(--theme-text-tertiary);--shop-text-inverse: var(--theme-text-inverse);--shop-border: var(--theme-border);--shop-border-light: var(--theme-border-light);--shop-border-dark: var(--theme-border-dark);--shop-shadow-sm: var(--theme-shadow-sm);--shop-shadow-md: var(--theme-shadow-md);--shop-shadow-lg: var(--theme-shadow-lg);--shop-shadow-xl: var(--theme-shadow-xl);--shop-shadow-primary: var(--theme-shadow-primary);--shop-shadow-secondary: var(--theme-shadow-secondary);--shop-gradient-primary: var(--theme-gradient-primary);--shop-gradient-secondary: var(--theme-gradient-secondary);--shop-gradient-accent: var(--theme-gradient-accent);--shop-gradient-background: var(--theme-gradient-background)}.theme-shop-main{background:var(--shop-background)!important;color:var(--shop-text-primary)!important}.shop-title{color:var(--shop-text-primary)!important}.crystal-amount{background:var(--shop-gradient-accent)!important;color:var(--shop-text-inverse)!important;box-shadow:var(--shop-shadow-md)}.shop-content{background:var(--shop-background)!important}.theme-card{background:var(--shop-surface)!important;border-color:var(--shop-border)!important;color:var(--shop-text-primary)!important}.theme-card:hover:not(.active){border-color:var(--shop-primary)!important;box-shadow:var(--shop-shadow-primary)!important}.theme-card.active{border-color:var(--shop-primary)!important;background:var(--shop-surface-hover)!important;box-shadow:var(--shop-shadow-primary)!important}.theme-name{color:var(--shop-text-primary)!important}.theme-price{color:var(--shop-text-secondary)!important}.character-card{background:var(--shop-surface)!important;border:1px solid var(--shop-border)!important;color:var(--shop-text-primary)!important}.character-card:hover{background:var(--shop-surface-hover)!important;border-color:var(--shop-primary)!important}.item-card{background:var(--shop-surface)!important;border-color:var(--shop-border)!important;color:var(--shop-text-primary)!important}.item-card:hover{border-color:var(--shop-primary)!important;box-shadow:var(--shop-shadow-primary)!important}.tab-navigation{background:var(--shop-surface-hover)!important}.tab-btn{color:var(--shop-text-secondary)!important}.tab-btn.active{background:var(--shop-surface)!important;color:var(--shop-primary)!important;box-shadow:var(--shop-shadow-sm)}.modal-overlay{background:#0009!important;overflow:hidden!important}.modal-content{background:var(--shop-surface)!important;border-color:var(--shop-border)!important;color:var(--shop-text-primary)!important;scrollbar-width:none!important;-ms-overflow-style:none!important}.modal-content::-webkit-scrollbar{display:none!important}.apply-success-overlay{background:#0009!important;overflow:hidden!important}.apply-success-modal{background:var(--shop-gradient-primary)!important;color:var(--shop-text-inverse)!important;border-color:var(--shop-primary)!important;box-shadow:var(--shop-shadow-xl),0 0 0 6px rgba(var(--shop-primary),.2)!important;max-height:none!important;overflow:hidden!important}body{transition:background .3s ease,background-color .3s ease,color .3s ease}.theme-shop-main,.theme-card,.character-card,.item-card,.modal-content,.apply-success-modal,.fill-blank-mode,.thai-to-korean-mode,.typing-practice-mode{transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease!important}@media (max-width: 768px){:root{--theme-shadow-sm: 0 1px 2px rgba(0,0,0,.05);--theme-shadow-md: 0 2px 8px rgba(0,0,0,.1);--theme-shadow-lg: 0 4px 16px rgba(0,0,0,.15);--theme-shadow-xl: 0 8px 32px rgba(0,0,0,.2)}.theme-rainbow .rainbow-animation{animation-duration:6s}.theme-flame .flame-fire-effect{animation-duration:4s}.theme-flame .btn-primary{animation-duration:5s}.modal-content{max-height:85vh!important}.apply-success-modal{max-width:300px}}@media (max-width: 480px){.modal-content{max-height:80vh!important;margin:10px!important}.apply-success-modal{max-width:280px}.theme-flame .flameFlicker,.theme-flame .flameButton{animation-duration:6s}}@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}.theme-premium .premium-sparkle:before,.theme-premium .apply-success-modal:before,.theme-rainbow .rainbow-animation,.theme-rainbow .apply-success-icon,.theme-flame .flame-fire-effect,.theme-flame .btn-primary,.theme-flame .progress-fill{animation:none!important}.theme-rainbow .apply-success-icon{background:var(--shop-text-inverse, white)!important;-webkit-text-fill-color:var(--shop-text-inverse, white)!important}.theme-flame .btn-primary{background:var(--theme-primary)!important}}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:var(--theme-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);background:transparent;color:var(--theme-text-primary, var(--ds-color-text-primary));line-height:1.4;overflow-x:hidden;overflow-y:auto;width:100%;max-width:100vw;height:100vh;scrollbar-width:none;-ms-overflow-style:none;transition:background-color var(--ds-transition-slow),color var(--ds-transition-slow)}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:var(--ds-transition-normal)}button:focus{outline:2px solid var(--theme-secondary, var(--ds-color-secondary));outline-offset:2px}a{color:inherit;text-decoration:none;transition:color var(--ds-transition-normal)}.loading-spinner{width:var(--ds-icon-xl);height:var(--ds-icon-xl);border:4px solid var(--theme-border, var(--ds-color-border));border-top:4px solid var(--theme-primary, var(--ds-color-primary));border-radius:var(--ds-radius-full);animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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}.btn-primary{background:var(--theme-gradient-primary, var(--ds-gradient-primary));color:var(--theme-text-inverse, var(--ds-color-text-inverse));border:none;border-radius:var(--ds-radius-md);padding:var(--ds-space-4) var(--ds-space-6);font-size:var(--ds-font-sm);font-weight:var(--ds-font-bold);cursor:pointer;transition:var(--ds-transition-normal);width:100%;text-transform:uppercase;letter-spacing:.8px;box-shadow:var(--theme-shadow-primary, var(--ds-shadow-primary));min-height:var(--ds-touch-target)}.btn-primary:hover{background:var(--theme-primary-hover, var(--ds-color-primary-hover));transform:translateY(-2px);box-shadow:var(--theme-shadow-lg, var(--ds-shadow-lg))}.btn-primary:active{transform:translateY(0);box-shadow:var(--theme-shadow-md, var(--ds-shadow-md))}.btn-secondary{background:var(--theme-gradient-secondary, var(--ds-gradient-secondary));color:var(--theme-text-inverse, var(--ds-color-text-inverse));border:none;border-radius:var(--ds-radius-md);padding:var(--ds-space-4) var(--ds-space-6);font-size:var(--ds-font-sm);font-weight:var(--ds-font-bold);cursor:pointer;transition:var(--ds-transition-normal);width:100%;text-transform:uppercase;letter-spacing:.8px;margin-top:var(--ds-space-3);box-shadow:var(--theme-shadow-secondary, var(--ds-shadow-secondary));min-height:var(--ds-touch-target)}.btn-secondary:hover{background:var(--theme-secondary-hover, var(--ds-color-secondary-hover));transform:translateY(-2px);box-shadow:var(--theme-shadow-lg, var(--ds-shadow-lg))}.btn-secondary:active{transform:translateY(0);box-shadow:var(--theme-shadow-md, var(--ds-shadow-md))}.theme-premium .btn-primary{position:relative;overflow:hidden}.theme-premium .btn-primary:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:var(--premium-gold-shimmer, linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%));animation:premium-shimmer 3s infinite;opacity:0;transition:opacity var(--ds-transition-slow)}.theme-premium .btn-primary:hover:before{opacity:1}@keyframes premium-shimmer{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.theme-rainbow .btn-primary{background:var(--rainbow-gradient);background-size:400% 400%;animation:rainbow-pulse 4s ease infinite}@keyframes rainbow-pulse{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.content-card{background:var(--theme-surface, var(--ds-color-surface));border:2px solid var(--theme-border, var(--ds-color-border));border-radius:var(--ds-radius-lg);padding:var(--ds-space-6);margin-bottom:var(--ds-space-6);box-shadow:var(--theme-shadow-md, var(--ds-shadow-md));transition:var(--ds-transition-slow)}.content-card:hover{background:var(--theme-surface-hover, var(--ds-color-surface-hover));border-color:var(--theme-border-dark, var(--ds-color-border-dark));box-shadow:var(--theme-shadow-lg, var(--ds-shadow-lg))}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--ds-space-4)}.card-title{font-size:var(--ds-font-xl);font-weight:var(--ds-font-extrabold);color:var(--theme-text-primary, var(--ds-color-text-primary))}.view-all-link{color:var(--theme-secondary, var(--ds-color-secondary));text-decoration:none;font-size:var(--ds-font-sm);font-weight:var(--ds-font-bold);transition:color var(--ds-transition-normal)}.view-all-link:hover{color:var(--theme-secondary-hover, var(--ds-color-secondary-hover));text-decoration:underline}.progress-bar{width:100%;height:var(--ds-space-4);background:var(--theme-border-light, var(--ds-color-border-light));border-radius:var(--ds-radius-sm);overflow:hidden;margin:var(--ds-space-4) 0;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;background:var(--theme-gradient-primary, var(--ds-gradient-primary));border-radius:var(--ds-radius-sm);transition:width var(--ds-transition-slow);position:relative}.theme-rainbow .progress-fill{background:var(--rainbow-gradient);background-size:200% 200%;animation:rainbow-progress 2s linear infinite}@keyframes rainbow-progress{0%{background-position:0% 0%}to{background-position:100% 100%}}.theme-premium .progress-fill:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:premium-progress-shine 2s infinite}@keyframes premium-progress-shine{0%{left:-100%}to{left:100%}}.simple-layout{width:100%;min-height:100vh;overflow-x:hidden;overflow-y:auto;background:var(--theme-background, var(--ds-color-background));color:var(--theme-text-primary, var(--ds-color-text-primary))}.error-message{background:var(--theme-error-light, #ffebee);border:2px solid var(--theme-error, var(--ds-color-error));border-radius:var(--ds-radius-md);padding:var(--ds-space-4);color:var(--theme-error-dark, var(--ds-color-error-dark));text-align:center;font-size:var(--ds-font-sm);font-weight:var(--ds-font-semibold);animation:error-pulse 2s infinite}@keyframes error-pulse{0%{background-color:var(--theme-error-light, #ffebee)}50%{background-color:var(--theme-error, rgba(255, 75, 75, .1))}to{background-color:var(--theme-error-light, #ffebee)}}.loading-skeleton{background:linear-gradient(90deg,var(--theme-border-light, var(--ds-color-border-light)) 25%,var(--theme-border, var(--ds-color-border)) 50%,var(--theme-border-light, var(--ds-color-border-light)) 75%);background-size:200% 100%;animation:loading 1.5s infinite;border-radius:var(--ds-radius-sm)}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.glow-effect{box-shadow:var(--theme-shadow-primary, var(--ds-shadow-primary));transition:box-shadow var(--ds-transition-slow)}.glow-effect:hover{box-shadow:var(--theme-shadow-lg, var(--ds-shadow-lg))}.theme-dark .glow-effect{box-shadow:var(--theme-shadow-primary, var(--ds-shadow-primary)),0 0 20px #7c3aed33}.interactive{cursor:pointer;transition:var(--ds-transition-normal)}.interactive:hover{transform:translateY(-2px);box-shadow:var(--theme-shadow-lg, var(--ds-shadow-lg))}.card-hover{transition:var(--ds-transition-slow)}.card-hover:hover{transform:translateY(-4px);box-shadow:var(--theme-shadow-lg, var(--ds-shadow-lg))}.form-input{background:var(--ds-color-surface);border:2px solid var(--ds-color-border);border-radius:var(--ds-radius-sm);padding:var(--ds-space-3) var(--ds-space-4);font-size:var(--ds-font-base);color:var(--ds-color-text-primary);transition:var(--ds-transition-normal);width:100%;min-height:var(--ds-touch-target)}.form-input:focus{outline:none;border-color:var(--ds-color-primary);box-shadow:0 0 0 3px #58cc021a}.form-input:disabled{background:var(--ds-color-border-light);color:var(--ds-color-text-tertiary);cursor:not-allowed}.form-textarea{background:var(--ds-color-surface);border:2px solid var(--ds-color-border);border-radius:var(--ds-radius-sm);padding:var(--ds-space-3) var(--ds-space-4);font-size:var(--ds-font-base);color:var(--ds-color-text-primary);transition:var(--ds-transition-normal);width:100%;min-height:100px;resize:vertical;font-family:inherit}.form-textarea:focus{outline:none;border-color:var(--ds-color-primary);box-shadow:0 0 0 3px #58cc021a}.form-select{background:var(--ds-color-surface);border:2px solid var(--ds-color-border);border-radius:var(--ds-radius-sm);padding:var(--ds-space-3) var(--ds-space-4);font-size:var(--ds-font-base);color:var(--ds-color-text-primary);transition:var(--ds-transition-normal);width:100%;min-height:var(--ds-touch-target);cursor:pointer}.form-select:focus{outline:none;border-color:var(--ds-color-primary);box-shadow:0 0 0 3px #58cc021a}.form-checkbox{width:var(--ds-space-5);height:var(--ds-space-5);border:2px solid var(--ds-color-border);border-radius:var(--ds-radius-sm);position:relative;cursor:pointer;transition:var(--ds-transition-normal)}.form-checkbox:checked{background:var(--ds-color-primary);border-color:var(--ds-color-primary)}.form-checkbox:checked:after{content:"✓";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--ds-color-text-inverse);font-size:var(--ds-font-xs);font-weight:var(--ds-font-bold)}.table{width:100%;border-collapse:collapse;background:var(--ds-color-surface);border-radius:var(--ds-radius-md);overflow:hidden;box-shadow:var(--ds-shadow-md)}.table th,.table td{padding:var(--ds-space-3) var(--ds-space-4);text-align:left;border-bottom:1px solid var(--ds-color-border)}.table th{background:var(--ds-color-border-light);font-weight:var(--ds-font-bold);font-size:var(--ds-font-sm);color:var(--ds-color-text-primary)}.table td{font-size:var(--ds-font-sm);color:var(--ds-color-text-primary)}.table tr:hover{background:var(--ds-color-surface-hover)}.table tr:last-child td{border-bottom:none}.badge{display:inline-flex;align-items:center;justify-content:center;padding:var(--ds-space-1) var(--ds-space-2);border-radius:var(--ds-radius-sm);font-size:var(--ds-font-xs);font-weight:var(--ds-font-bold);text-transform:uppercase;letter-spacing:.5px}.badge-primary{background:var(--ds-color-primary);color:var(--ds-color-text-inverse)}.badge-secondary{background:var(--ds-color-secondary);color:var(--ds-color-text-inverse)}.badge-success{background:var(--ds-color-success);color:var(--ds-color-text-inverse)}.badge-error{background:var(--ds-color-error);color:var(--ds-color-text-inverse)}.badge-warning{background:var(--ds-color-warning);color:var(--ds-color-text-primary)}.badge-outline{background:transparent;border:2px solid var(--ds-color-primary);color:var(--ds-color-primary)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.theme-rainbow .btn-primary,.theme-rainbow .progress-fill,.theme-premium .btn-primary:before,.theme-premium .progress-fill:after{animation:none!important}}@media (prefers-contrast: high){.content-card{border-width:3px}.btn-primary,.btn-secondary,.progress-bar{border:2px solid var(--theme-text-primary, var(--ds-color-text-primary))}.form-input,.form-textarea,.form-select{border-width:3px}}@media (prefers-color-scheme: dark){.loading-skeleton{background:linear-gradient(90deg,#333 25%,#444,#333 75%)}}@media (max-width: 768px){html,body{background:transparent!important;width:100vw;max-width:100vw;overflow-x:hidden;overflow-y:auto;margin:0;padding:0;height:100vh}.conquerthai-container,.main-content{width:100vw!important;max-width:100vw!important;margin-left:0!important;margin-right:0!important;overflow-x:hidden!important;background:transparent!important}.right-sidebar{display:none!important;width:0!important;min-width:0!important}.content-card{margin-left:0;margin-right:0;border-radius:var(--ds-radius-md);padding:var(--ds-space-4)}.btn-primary,.btn-secondary{width:100%;margin-left:0;margin-right:0;padding:var(--ds-space-3) var(--ds-space-5);font-size:var(--ds-font-sm)}.card-title{font-size:var(--ds-font-lg)}.content-card:hover,.card-hover:hover,.interactive:hover{transform:translateY(-1px);box-shadow:var(--theme-shadow-md, var(--ds-shadow-md))}.form-input,.form-textarea,.form-select{font-size:var(--ds-font-base)}.table{font-size:var(--ds-font-xs)}.table th,.table td{padding:var(--ds-space-2) var(--ds-space-3)}.form-checkbox{width:var(--ds-space-6);height:var(--ds-space-6)}}@media (max-width: 480px){.content-card{padding:var(--ds-space-3);margin-bottom:var(--ds-space-4)}.btn-primary,.btn-secondary{padding:var(--ds-space-3) var(--ds-space-4);font-size:var(--ds-font-xs);letter-spacing:.6px}.card-title{font-size:var(--ds-font-base)}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.table{min-width:300px}}