.marquee-bar{position:relative;width:100%;z-index:100;overflow:hidden}.marquee-content{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 48px;min-height:40px;transition:background-color .4s ease}.marquee-text{margin:0;font-size:.85rem;font-weight:500;line-height:1.5;text-align:center}.marquee-link{font-weight:700;text-decoration:none;white-space:nowrap;opacity:.8;transition:opacity .2s}.marquee-link:hover{opacity:1}.marquee-dots{position:absolute;bottom:4px;left:50%;transform:translate(-50%);display:flex;gap:4px}.marquee-dot{width:5px;height:5px;border-radius:50%;background:#0003;cursor:pointer;transition:background .2s,transform .2s}.marquee-dot.active{background:#00000080;transform:scale(1.3)}.marquee-close{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;opacity:.5;padding:4px;display:flex;transition:opacity .2s;color:inherit}.marquee-close:hover{opacity:1}@media(max-width:768px){.marquee-text{font-size:.78rem}.marquee-content{padding:8px 40px 8px 12px}}.topbar{position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 20px;background:var(--bg-topbar);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .4s,border-color .4s}.topbar-left{display:flex;align-items:center;gap:12px}.topbar-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--text-primary);border-radius:8px;transition:background .2s}.topbar-menu-btn:hover{background:var(--accent-light)}.topbar-logo{display:flex;align-items:center;text-decoration:none}.topbar-logo-img{height:28px}.topbar-right{display:flex;align-items:center;gap:4px}.topbar-icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:10px;cursor:pointer;color:var(--text-secondary);transition:background .2s,color .2s;text-decoration:none}.topbar-icon-btn:hover{background:var(--accent-light);color:var(--accent)}.topbar-cta{display:inline-flex;align-items:center;padding:6px 16px;border-radius:20px;background:var(--accent);color:#fff;font-size:.8rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .2s,transform .15s}.topbar-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}.topbar-dropdown{position:relative}.topbar-dropdown-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--card-shadow),0 8px 32px var(--shadow);overflow:hidden;animation:dropIn .18s ease-out;z-index:100}@keyframes dropIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.notif-panel{width:360px;max-height:480px;overflow-y:auto}.user-panel{width:200px;padding:6px 0}.theme-panel{width:220px;padding:12px}.notif-header{padding:14px 16px 10px;font-size:.9rem;font-weight:600;color:var(--text-primary);border-bottom:1px solid var(--border-light)}.notif-list{padding:4px 0}.notif-item{padding:12px 16px;border-bottom:1px solid var(--border-light)}.notif-item:last-child{border-bottom:none}.notif-content{margin:0 0 4px;font-size:.82rem;line-height:1.5;color:var(--text-primary)}.notif-content a{color:var(--accent);text-decoration:none}.notif-content a:hover{text-decoration:underline}.notif-date{font-size:.72rem;color:var(--text-muted)}.user-menu-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.85rem;color:var(--text-primary);text-decoration:none;transition:background .15s}.user-menu-item:hover{background:var(--accent-light)}.dropdown-divider{height:1px;margin:4px 0;background:var(--border-light)}.dropdown-section-title{font-size:.7rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}.theme-options{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}.theme-option{display:flex;align-items:center;gap:8px;padding:7px 10px;border:none;background:none;border-radius:8px;cursor:pointer;font-size:.82rem;color:var(--text-primary);transition:background .15s;text-align:left;width:100%;font-family:inherit}.theme-option:hover{background:var(--accent-light)}.theme-option.active{background:var(--accent-light);font-weight:600;color:var(--accent)}.theme-swatch{width:14px;height:14px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}.theme-swatch--auto{background:conic-gradient(#fff8ed,#eef2fb,#f5ece2,#1c1c30,#fff8ed)}.theme-swatch--morning{background:#fff0dc}.theme-swatch--afternoon{background:#d4def4}.theme-swatch--evening{background:#f0dfd0}.theme-swatch--night{background:#1c1c30}@media(max-width:991px){.topbar-menu-btn{display:flex}.topbar-cta,.topbar-logo{display:none}}@media(max-width:480px){.topbar{padding:0 12px;height:50px}.notif-panel{width:calc(100vw - 24px);right:-60px}}.sidebar{position:fixed;left:0;top:0;bottom:0;width:230px;background:var(--bg-sidebar);border-right:1px solid var(--border);z-index:80;overflow-y:auto;overflow-x:hidden;transition:background .4s,border-color .4s,transform .3s ease;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.sidebar-inner{display:flex;flex-direction:column;min-height:100%;padding:72px 0 20px}.sidebar-nav{display:flex;flex-direction:column;flex:1}.sidebar-section{padding:4px 10px}.sidebar-footer-nav{margin-top:auto}.sidebar-divider{height:1px;margin:6px 18px;background:var(--border-light)}.sidebar-link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;color:var(--text-secondary);text-decoration:none;font-size:.88rem;font-weight:400;transition:background .15s,color .15s;border:none;background:none;cursor:pointer;width:100%;text-align:left;font-family:inherit;position:relative}.sidebar-link:hover{background:var(--accent-light);color:var(--accent)}.sidebar-link.active{background:var(--accent-light);color:var(--accent);font-weight:600}.sidebar-link.active svg{color:var(--accent)}.sidebar-link.muted{color:var(--text-muted);font-size:.84rem}.sidebar-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-lock{display:inline-flex;opacity:.4;margin-left:auto}.sidebar-chevron{display:inline-flex;transition:transform .25s ease;margin-left:auto}.sidebar-chevron.expanded{transform:rotate(180deg)}.sidebar-toggle{font-weight:400}.sidebar-submenu{padding:2px 0 2px 12px;animation:slideDown .2s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.sidebar-sublink{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:8px;color:var(--text-muted);text-decoration:none;font-size:.82rem;transition:background .15s,color .15s}.sidebar-sublink:hover{background:var(--accent-light);color:var(--accent)}.sidebar-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#0000004d;z-index:79;opacity:0;transition:opacity .3s}@media(max-width:991px){.sidebar{transform:translate(-100%);width:270px;padding-top:0}.sidebar.open{transform:translate(0)}.sidebar-inner{padding-top:20px}.sidebar-overlay{display:block}.sidebar-overlay.visible{opacity:1}}.lesson-section{margin-bottom:36px}.lesson-section-title{margin:0 0 14px;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.lesson-scroll-wrapper{position:relative}.lesson-scroll{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}.lesson-scroll::-webkit-scrollbar{display:none}.lesson-scroll.fade-left{mask-image:linear-gradient(to right,transparent 0%,black 8%,black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 100%)}.lesson-scroll.fade-right{mask-image:linear-gradient(to right,black 0%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,black 0%,black 92%,transparent 100%)}.lesson-scroll.fade-left.fade-right{mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%)}.lesson-scroll-btn{position:absolute;top:40%;transform:translateY(-50%);z-index:5;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--bg-card);color:var(--text-primary);font-size:1.4rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px var(--shadow);transition:background .2s,transform .15s}.lesson-scroll-btn:hover{background:var(--accent-light);transform:translateY(-50%) scale(1.05)}.lesson-scroll-btn.left{left:-18px}.lesson-scroll-btn.right{right:-18px}.lesson-card{flex:0 0 180px;scroll-snap-align:start;text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;transition:transform .2s ease,box-shadow .2s}.lesson-card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow)}.lesson-card-img-wrap{position:relative;width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--bg-secondary)}.lesson-card-img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.lesson-card:hover .lesson-card-img{transform:scale(1.05)}.lesson-card-duration{position:absolute;top:8px;left:8px;display:flex;align-items:baseline;gap:2px;padding:3px 8px;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:8px;z-index:2}.duration-num{font-size:.95rem;font-weight:700;color:#fff;line-height:1}.duration-unit{font-size:.6rem;font-weight:500;color:#fffc;line-height:1}.lesson-card-title{margin:10px 0 4px;font-size:.88rem;font-weight:600;color:var(--text-primary);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lesson-card-subtitle{margin:0;font-size:.76rem;color:var(--text-muted);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:768px){.lesson-card{flex:0 0 150px}.lesson-scroll-btn{display:none}.lesson-section-title{font-size:1rem}}@media(max-width:480px){.lesson-card{flex:0 0 135px}}.main-content{flex:1;min-width:0;margin-left:230px;transition:margin .3s ease}.hero{position:relative;padding:40px 32px 28px;overflow:hidden}.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-hero);z-index:0;transition:background .6s ease}.hero-inner{position:relative;z-index:1}.hero-greeting{margin:0 0 4px;font-size:.85rem;font-weight:500;color:var(--text-muted);letter-spacing:.02em}.hero-title{margin:0 0 8px;font-size:1.75rem;font-weight:700;color:var(--text-primary);line-height:1.3}.hero-subtitle{margin:0;font-size:.9rem;color:var(--text-secondary);line-height:1.5}.main-body{padding:28px 32px 48px}.plans-section{margin-top:12px}.plans-title{margin:0 0 16px;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}.plan-card{border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;background:var(--bg-card);border:1px solid var(--border-light);transition:transform .2s,box-shadow .2s}.plan-card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow)}.plan-card-img-wrap{position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden}.plan-card-img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.plan-card:hover .plan-card-img{transform:scale(1.04)}.plan-card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%)}.plan-progress-badge{position:absolute;top:10px;right:10px;padding:3px 10px;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:12px;font-size:.7rem;font-weight:600;color:#fff}.plan-progress-bar{position:absolute;bottom:0;left:0;right:0;height:3px;background:#fff3}.plan-progress-fill{height:100%;background:var(--progress-bar);border-radius:0 2px 2px 0;transition:width .4s ease}.plan-card-body{padding:14px 16px}.plan-card-title{margin:0 0 6px;font-size:.95rem;font-weight:600;color:var(--text-primary)}.plan-card-desc{margin:0;font-size:.78rem;color:var(--text-muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:991px){.main-content{margin-left:0}.hero{padding:28px 20px 20px}.main-body{padding:20px 20px 40px}.hero-title{font-size:1.5rem}}@media(max-width:768px){.plans-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}}@media(max-width:480px){.hero{padding:20px 16px 16px}.main-body{padding:16px 16px 32px}.hero-title{font-size:1.3rem}.hero-subtitle{font-size:.82rem}.plans-grid{grid-template-columns:1fr}}.chatbot-container{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:12px}.chatbot-teaser{position:relative;padding:12px 36px 12px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:16px 16px 4px;box-shadow:0 4px 20px var(--shadow);cursor:pointer;max-width:260px;animation:teaserIn .4s ease-out}@keyframes teaserIn{0%{opacity:0;transform:translateY(8px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.chatbot-teaser-text{margin:0;font-size:.84rem;color:var(--text-primary);line-height:1.45}.chatbot-teaser-close{position:absolute;top:4px;right:8px;background:none;border:none;font-size:1.1rem;color:var(--text-muted);cursor:pointer;padding:2px 4px}.chatbot-fab{width:54px;height:54px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0003;transition:transform .2s,box-shadow .2s}.chatbot-fab:hover{transform:scale(1.08);box-shadow:0 6px 24px #00000040}.chatbot-panel{width:360px;max-height:520px;display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;box-shadow:0 8px 40px var(--shadow);overflow:hidden;animation:panelIn .25s ease-out}@keyframes panelIn{0%{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.chatbot-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-light)}.chatbot-header-info{display:flex;align-items:center;gap:10px}.chatbot-avatar{width:28px;height:28px;border-radius:8px;overflow:hidden}.chatbot-avatar img{width:100%;height:100%;object-fit:cover}.chatbot-header-title{font-size:.88rem;font-weight:600;color:var(--text-primary)}.chatbot-close{display:flex;background:none;border:none;cursor:pointer;color:var(--text-muted);padding:4px;border-radius:6px;transition:background .15s}.chatbot-close:hover{background:var(--accent-light)}.chatbot-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:280px}.chatbot-msg{display:flex}.chatbot-msg.user{justify-content:flex-end}.chatbot-msg.assistant{justify-content:flex-start}.chatbot-msg-bubble{max-width:82%;padding:10px 14px;border-radius:16px;font-size:.84rem;line-height:1.5}.chatbot-msg.assistant .chatbot-msg-bubble{background:var(--accent-light);color:var(--text-primary);border-bottom-left-radius:4px}.chatbot-msg.user .chatbot-msg-bubble{background:var(--accent);color:#fff;border-bottom-right-radius:4px}.chatbot-input-area{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border-light)}.chatbot-input{flex:1;border:1px solid var(--border);border-radius:12px;padding:9px 14px;font-size:.84rem;font-family:inherit;background:var(--bg-primary);color:var(--text-primary);outline:none;transition:border-color .2s}.chatbot-input:focus{border-color:var(--accent)}.chatbot-input::placeholder{color:var(--text-muted)}.chatbot-send{width:36px;height:36px;border:none;border-radius:50%;background:var(--accent);color:#fff;font-size:1.1rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,opacity .2s;flex-shrink:0}.chatbot-send:disabled{opacity:.4;cursor:not-allowed}.chatbot-send:not(:disabled):hover{background:var(--accent-hover)}@media(max-width:480px){.chatbot-container{bottom:16px;right:16px;left:16px}.chatbot-panel{width:100%;max-height:calc(100dvh - 120px);border-radius:16px}.chatbot-fab{width:48px;height:48px}.chatbot-teaser{max-width:100%}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-primary: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--bg-primary: #F8FAFF;--bg-secondary: #EEF2FB;--bg-card: #FFFFFF;--bg-sidebar: #FFFFFF;--bg-topbar: #FFFFFF;--text-primary: #1A1A2E;--text-secondary: #4A4A6A;--text-muted: #8888A8;--accent: #1B45BE;--accent-light: #E8EEFB;--accent-hover: #143A9E;--border: #E4E8F0;--border-light: #F0F2F8;--shadow: rgba(27, 69, 190, .06);--card-shadow: 0 2px 16px rgba(27,69,190,.08);--gradient-hero: linear-gradient(135deg, #EEF2FB 0%, #E0E8F8 50%, #D4DEF4 100%);--progress-bar: #1B45BE;--tag-bg: #E8EEFB;--tag-text: #1B45BE}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}body{font-family:var(--font-primary);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100dvh;transition:background-color .4s ease,color .4s ease}a{color:inherit}img{max-width:100%;display:block}button{font-family:inherit}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-layout{display:flex;min-height:100dvh;position:relative}.app-main-area{display:flex;flex-direction:column;flex:1;min-width:0}vite-error-overlay{z-index:99999}::selection{background:var(--accent);color:#fff}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}