:root{--border-radius-lg:24px;--border-radius-md:16px;--border-radius-sm:12px;--border-radius-round:50px;--border-width:3px;--border-style:solid;--font-primary:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;--font-heading:"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;--bg-primary:#E0F7FA;--bg-secondary:#FFFFFF;--bg-tertiary:#F1F8E9;--bg-sidebar:#FFF8E1;--text-primary:#455A64;--text-secondary:#78909C;--text-inverted:#FFFFFF;--primary-color:#FF8A65;--primary-hover:#FF7043;--secondary-color:#4DD0E1;--secondary-hover:#26C6DA;--accent-color:#FFD54F;--success-color:#81C784;--danger-color:#E57373;--warning-color:#FFF176;--info-color:#64B5F6;--border-color:#B0BEC5;--shadow-color:rgba(69,90,100,0.15);--card-shadow:0 8px 0 var(--shadow-color);--btn-shadow:0 4px 0 rgba(0,0,0,0.1);--btn-active-transform:translateY(4px);--btn-active-shadow:none;--sidebar-width:280px;--header-height:80px;--spacing-xs:6px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:30px;--spacing-xl:40px;--scrollbar-width:12px;--scrollbar-thumb:#FFCCBC;--scrollbar-track:transparent;--transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);--suggestion-bg:rgba(25,118,210,0.08);--suggestion-border:rgba(25,118,210,0.2);--feedback-bg:rgba(56,142,60,0.08);--feedback-border:rgba(56,142,60,0.2);--card-bg:#FFFFFF;--hover-bg:rgba(25,118,210,0.05);--text-muted:#78909C;--vocabulary-bg:rgba(156,39,176,0.06);--vocabulary-color:#9C27B0;--grammar-bg:rgba(0,150,136,0.06);--grammar-color:#009688;}[data-theme="dark"]{--bg-primary:#263238;--bg-secondary:#37474F;--bg-tertiary:#455A64;--bg-sidebar:#2d3d46;--text-primary:#ECEFF1;--text-secondary:#B0BEC5;--text-inverted:#263238;--primary-color:#FFAB91;--primary-hover:#FF8A65;--secondary-color:#80DEEA;--secondary-hover:#4DD0E1;--accent-color:#FFD54F;--border-color:#546E7A;--shadow-color:rgba(0,0,0,0.3);--scrollbar-thumb:#546E7A;--scrollbar-track:transparent;--suggestion-bg:rgba(100,181,246,0.12);--suggestion-border:rgba(100,181,246,0.25);--feedback-bg:rgba(129,199,132,0.12);--feedback-border:rgba(129,199,132,0.25);--card-bg:#37474F;--hover-bg:rgba(100,181,246,0.15);--text-muted:#90A4AE;--vocabulary-bg:rgba(206,147,216,0.12);--vocabulary-color:#CE93D8;--grammar-bg:rgba(128,203,196,0.12);--grammar-color:#80CBC4;}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}html{height:100%;min-height:100%;max-height:100%;width:100%;overflow:hidden;background:#E0F7FA;overscroll-behavior:none;touch-action:manipulation;}[data-theme="dark"] html{background:#2c5364;}body{font-family:var(--font-primary);background:linear-gradient(180deg,#4FC3F7 0%,#E0F7FA 100%);background-attachment:fixed;color:var(--text-primary);line-height:1.6;height:100%;min-height:100%;max-height:100%;width:100%;overflow:hidden;overscroll-behavior:none;transition:background 0.5s ease,color 0.5s ease;position:fixed;inset:0;-webkit-text-size-adjust:100%;text-size-adjust:100%;}[data-theme="dark"] body{background:linear-gradient(180deg,#0f2027 0%,#203a43 50%,#2c5364 100%);}.bg-decorations{position:fixed;top:var(--app-top,0px);left:0;width:100%;height:100vh;height:var(--app-height,100vh);z-index:0;pointer-events:none;overflow:hidden;will-change:transform;contain:layout style;}.sun{position:absolute;top:50px;right:50px;width:80px;height:80px;background:#FFD54F;border-radius:50%;box-shadow:0 0 40px #FFD54F;animation:sunSpin 20s linear infinite;z-index:1;transition:transform 0.5s ease,opacity 0.5s ease;}.sun::before{content:'';position:absolute;top:-20px;left:-20px;right:-20px;bottom:-20px;border-radius:50%;border:4px dashed #FFECB3;animation:sunPulse 4s ease-in-out infinite alternate;}@keyframes sunSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}@keyframes sunPulse{from{opacity:0.6;transform:scale(0.9);}to{opacity:1;transform:scale(1.1);}}.moon{position:absolute;top:60px;right:60px;width:60px;height:60px;background:#FFF9C4;border-radius:50%;box-shadow:0 0 20px #FFF9C4;opacity:0;transition:all 0.5s ease;transform:translateY(-50px) rotate(-20deg);}.moon::after{content:'';position:absolute;top:10px;left:10px;width:10px;height:10px;background:rgba(200,200,200,0.2);border-radius:50%;}[data-theme="dark"] .moon{opacity:1;transform:translateY(0) rotate(0deg);}[data-theme="dark"] .sun{opacity:0;transform:translateY(50px);}.stars{position:absolute;top:0;left:0;width:100%;height:80%;pointer-events:none;opacity:0;transition:opacity 1s ease;}[data-theme="dark"] .stars{opacity:1;}.star{position:absolute;background:#FFF;border-radius:50%;box-shadow:0 0 4px #FFF;opacity:0;animation:twinkle var(--duration,3s) infinite ease-in-out;}.star-1{top:10%;left:10%;width:3px;height:3px;--duration:3s;animation-delay:0s;}.star-2{top:20%;left:80%;width:4px;height:4px;--duration:4s;animation-delay:1s;}.star-3{top:40%;left:20%;width:2px;height:2px;--duration:2.5s;animation-delay:2s;}.star-4{top:15%;left:40%;width:3px;height:3px;--duration:3.5s;animation-delay:0.5s;}.star-5{top:30%;left:60%;width:2px;height:2px;--duration:4.5s;animation-delay:1.5s;}.star-6{top:50%;left:90%;width:3px;height:3px;--duration:3s;animation-delay:2.5s;}.star-7{top:5%;left:70%;width:2px;height:2px;--duration:5s;animation-delay:1s;}.star-8{top:25%;left:30%;width:4px;height:4px;--duration:3.8s;animation-delay:0.2s;}@keyframes twinkle{0%,100%{opacity:0.3;transform:scale(0.8);}50%{opacity:1;transform:scale(1.2);box-shadow:0 0 8px #FFF;}}.shooting-stars{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;}[data-theme="dark"] .shooting-stars{opacity:1;}.shooting-star{position:absolute;height:2px;background:linear-gradient(-45deg,rgba(255,255,255,1),rgba(255,255,255,0));border-radius:999px;box-shadow:0 0 6px rgba(255,255,255,0.8);animation:shoot 6s linear infinite;opacity:0;}.shooting-star::before{content:'';position:absolute;top:50%;transform:translateY(-50%);width:4px;height:4px;background:#fff;border-radius:50%;box-shadow:0 0 10px #FFF;}.shooting-star-1{top:0;right:20%;width:100px;transform:rotate(-45deg) translateX(0);animation-delay:2s;animation-duration:7s;}.shooting-star-2{top:10%;right:5%;width:150px;transform:rotate(-45deg) translateX(0);animation-delay:5s;animation-duration:8s;}.shooting-star-3{top:-5%;right:35%;width:80px;transform:rotate(-45deg) translateX(0);animation-delay:8s;animation-duration:6s;}@keyframes shoot{0%{transform:rotate(-45deg) translateX(0);opacity:1;}10%{opacity:1;}20%{transform:rotate(-45deg) translateX(-800px);opacity:0;}100%{transform:rotate(-45deg) translateX(-800px);opacity:0;}}.cloud{position:absolute;background:#FFFFFF;border-radius:50px;opacity:0.7;z-index:2;transition:background-color 0.5s ease,opacity 0.5s ease;}.cloud::after,.cloud::before{content:'';position:absolute;background:inherit;border-radius:50%;}.cloud-1{top:15%;left:-10%;width:100px;height:40px;animation:floatCloud 35s linear infinite;}.cloud-1::after{width:40px;height:40px;top:-20px;left:15px;}.cloud-1::before{width:30px;height:30px;top:-15px;left:50px;}.cloud-2{top:25%;left:-20%;width:140px;height:60px;animation:floatCloud 45s linear infinite;animation-delay:5s;}.cloud-2::after{width:60px;height:60px;top:-30px;left:25px;}.cloud-2::before{width:45px;height:45px;top:-20px;left:80px;}.cloud-3{top:8%;left:-15%;width:80px;height:35px;animation:floatCloud 55s linear infinite;animation-delay:20s;opacity:0.5;}.cloud-3::after{width:35px;height:35px;top:-18px;left:10px;}@keyframes floatCloud{0%{transform:translateX(0);}100%{transform:translateX(120vw);}}[data-theme="dark"] .cloud{opacity:0.1;background:#78909C;}.ground-elements{position:absolute;bottom:0;width:100%;height:200px;z-index:1;}.grass-hill{position:absolute;bottom:-50px;width:120%;height:150px;border-radius:50% 50% 0 0;transition:background-color 0.5s ease;}.grass-1{left:-10%;background:#81C784;z-index:1;}.grass-2{right:-10%;height:180px;background:#66BB6A;z-index:0;}[data-theme="dark"] .grass-1{background:#2E7D32;}[data-theme="dark"] .grass-2{background:#1B5E20;}.animals-container{position:absolute;bottom:0;width:100%;height:250px;z-index:2;pointer-events:none;}.animal-wrapper{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;}.animal-content{width:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,0.1));position:relative;z-index:2;transform-origin:bottom center;}.animal-shadow{width:60%;height:12px;background:radial-gradient(ellipse at center,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 70%);border-radius:50%;margin-top:-8px;z-index:1;transform-origin:center center;}.wrapper-panda{left:2%;bottom:10px;z-index:10;}.wrapper-panda .animal-content{height:150px;}.wrapper-rabbit{left:10%;bottom:60px;z-index:5;}.wrapper-rabbit .animal-content{height:110px;}.wrapper-monkey{left:20%;bottom:20px;z-index:9;}.wrapper-monkey .animal-content{height:140px;}.wrapper-cat{left:30%;bottom:70px;z-index:4;}.wrapper-cat .animal-content{height:130px;}.wrapper-dog{left:40%;bottom:40px;z-index:5;}.wrapper-dog .animal-content{height:140px;}.wrapper-cow{right:40%;bottom:25px;z-index:8;}.wrapper-cow .animal-content{height:160px;}.wrapper-horse{right:30%;bottom:45px;z-index:6;}.wrapper-horse .animal-content{height:160px;}.wrapper-giraffe{right:10%;bottom:50px;z-index:6;}.wrapper-giraffe .animal-content{height:240px;}.wrapper-sloth{right:5%;bottom:15px;z-index:3;}.wrapper-sloth .animal-content{height:100px;}.wrapper-raccoon{right:20%;bottom:10px;z-index:10;}.wrapper-raccoon .animal-content{height:120px;}.anim-bounce{animation:animBounce 2s infinite cubic-bezier(0.28,0.84,0.42,1);}.shadow-bounce{animation:shadowBounce 2s infinite cubic-bezier(0.28,0.84,0.42,1);}@keyframes animBounce{0%,100%{transform:translateY(0) scale(1,1);}45%{transform:translateY(-20px) scale(1,1);}50%{transform:translateY(-20px) scale(1,1);}60%{transform:translateY(0) scale(1.05,0.95);}}@keyframes shadowBounce{0%,100%{transform:scale(1);opacity:0.5;}45%,50%{transform:scale(0.7);opacity:0.2;}60%{transform:scale(1.1);opacity:0.6;}}.anim-hop{animation:animHop 2s infinite cubic-bezier(0.28,0.84,0.42,1);}.shadow-hop{animation:shadowHop 2s infinite cubic-bezier(0.28,0.84,0.42,1);}@keyframes animHop{0%,100%{transform:translateY(0);}50%{transform:translateY(-30px);}}@keyframes shadowHop{0%,100%{transform:scale(1);opacity:0.5;}50%{transform:scale(0.6);opacity:0.2;}}.anim-float{animation:animFloat 3s infinite ease-in-out;}.shadow-float{animation:shadowFloat 3s infinite ease-in-out;}@keyframes animFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);}}@keyframes shadowFloat{0%,100%{transform:scale(1);opacity:0.5;}50%{transform:scale(0.8);opacity:0.3;}}.anim-sway{animation:animSway 4s infinite ease-in-out;}@keyframes animSway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}.anim-sway-slow{animation:animSway 6s infinite ease-in-out;}.anim-swing{animation:animSwing 3s infinite ease-in-out;}@keyframes animSwing{0%,100%{transform:rotate(0deg) translateY(0);}25%{transform:rotate(5deg) translateY(-5px);}75%{transform:rotate(-5deg) translateY(-5px);}}.shadow-static{animation:shadowPulse 3s infinite ease-in-out;}@keyframes shadowPulse{0%,100%{transform:scale(1);opacity:0.5;}50%{transform:scale(1.05);opacity:0.4;}}::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width);}::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:10px;margin:4px;}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px;border:2px solid var(--scrollbar-track);}::-webkit-scrollbar-thumb:hover{background:var(--primary-color);}.cartoon-font{font-family:var(--font-heading);letter-spacing:1px;}.text-center{text-align:center;}.text-right{text-align:right;}.hidden{display:none !important;}.cartoon-loading{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,0.8);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:2000;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}.cartoon-spinner{font-size:48px;color:var(--primary-color);margin-bottom:16px;}[data-theme="dark"] .cartoon-loading{background-color:rgba(38,50,56,0.9);}#app{display:flex;flex-direction:column;height:100vh;height:var(--app-height,100vh);max-height:var(--app-height,100vh);width:100%;overflow:hidden;position:fixed;top:var(--app-top,0px);left:0;min-height:0;}.page{display:none !important;width:100%;height:100%;flex-direction:column;position:relative;z-index:1;min-height:0;overflow:hidden;}.page.active{display:flex !important;}.app-header{height:var(--header-height);background-color:var(--bg-secondary);display:flex;justify-content:space-between;align-items:center;padding:0 var(--spacing-lg);box-shadow:0 2px 10px rgba(0,0,0,0.05);z-index:100;flex-shrink:0;}.header-left,.header-right{display:flex;align-items:center;gap:var(--spacing-md);}.header-center h2{color:var(--primary-color);font-size:24px;text-shadow:1px 1px 0 var(--bg-secondary);}.user-info{display:flex;align-items:center;gap:8px;padding:4px 12px;background-color:var(--bg-primary);border-radius:var(--border-radius-round);font-weight:bold;color:var(--text-primary);}.avatar-circle{width:32px;height:32px;background-color:var(--secondary-color);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;}.main-container{display:flex;flex:1;overflow:hidden;position:relative;min-height:0;}.sidebar{width:var(--sidebar-width);background-color:var(--bg-sidebar);display:flex;flex-direction:column;padding:var(--spacing-md);gap:var(--spacing-md);transition:margin-left 0.3s cubic-bezier(0.4,0,0.2,1);z-index:90;border-right:2px solid rgba(0,0,0,0.05);flex-shrink:0;}.sidebar.collapsed{margin-left:calc(var(--sidebar-width) * -1);}.sidebar-section{display:flex;flex-direction:column;gap:var(--spacing-sm);}.sidebar h3{font-size:14px;color:var(--text-secondary);text-transform:uppercase;margin-bottom:8px;padding-left:8px;}.sidebar-divider{height:2px;background-color:rgba(0,0,0,0.05);border-radius:2px;margin:var(--spacing-xs) 0;}.main-content{flex:1;position:relative;overflow:hidden;background-color:transparent;display:flex;flex-direction:column;padding:var(--spacing-md);min-height:0;}.content-panel{display:none;width:100%;height:100%;max-width:1000px;margin:0 auto;flex-direction:column;min-height:0;}.content-panel.active{display:flex;}.panel-card{background-color:rgba(255,255,255,0.85);border-radius:var(--border-radius-lg);padding:var(--spacing-lg);height:100%;display:flex;flex-direction:column;position:relative;overflow-y:auto;overflow-x:hidden;border:2px solid rgba(0,0,0,0.03);min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}[data-theme="dark"] .panel-card{background-color:rgba(55,71,79,0.9);}.panel-card h2{margin-bottom:var(--spacing-lg);color:var(--primary-color);display:flex;align-items:center;gap:10px;}.current-session-bar{background-color:var(--primary-color);color:#fff;padding:10px var(--spacing-md);border-radius:var(--border-radius-md);margin-bottom:var(--spacing-md);display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 10px rgba(255,138,101,0.3);flex-shrink:0;}.session-bar-content{font-family:var(--font-heading);display:flex;align-items:center;gap:8px;}.sidebar-overlay{display:none;}.sidebar-submenu{display:flex;flex-direction:column;gap:5px;margin-top:5px;margin-left:15px;padding-left:10px;border-left:2px solid rgba(0,0,0,0.1);max-height:300px;overflow-y:auto;transition:all 0.3s ease;}.sidebar-submenu.hidden{display:none;}.submenu-item{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:0.9em;color:var(--text-secondary);transition:background-color 0.2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px;}.submenu-item:hover{background-color:rgba(0,0,0,0.05);color:var(--primary-color);}.submenu-item.active{background-color:var(--primary-color-light);color:var(--primary-color);font-weight:bold;}.submenu-loading{padding:10px;color:var(--text-secondary);font-size:0.8em;text-align:center;}.submenu-arrow{transition:transform 0.3s ease;}.submenu-arrow.rotate{transform:rotate(180deg);}.sidebar-submenu::-webkit-scrollbar{width:4px;}.sidebar-submenu::-webkit-scrollbar-track{background:transparent;}.sidebar-submenu::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.1);border-radius:2px;}.submenu-view-all{font-size:0.8em;color:var(--primary-color);text-align:center;padding:5px;cursor:pointer;margin-top:5px;border-top:1px dashed rgba(0,0,0,0.1);}#login-page{position:relative;height:100%;min-height:0;width:100%;background-color:transparent;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:20px 0;}.login-container{width:100%;max-width:420px;padding:20px;z-index:10;margin:0 auto;}.login-card{background:var(--bg-secondary);border-radius:var(--border-radius-lg);padding:40px 30px;box-shadow:var(--card-shadow);width:100%;text-align:center;position:relative;border:3px solid #FFF;animation:popIn 0.5s cubic-bezier(0.175,0.885,0.32,1.275);}.login-card .logo{margin-bottom:30px;}.login-card .logo h1{font-size:2.8em;margin-bottom:5px;color:var(--primary-color);text-shadow:2px 2px 0 #FFF3E0;}.login-card .logo p{color:var(--text-secondary);font-weight:bold;font-size:1.1em;}.login-form .form-group{margin-bottom:25px;text-align:left;}.login-actions{margin-top:25px;}@media (max-height:600px){.login-container{padding-top:40px;padding-bottom:40px;}.login-card{box-shadow:none;}}.login-theme-toggle-wrapper{position:absolute;top:20px;right:20px;z-index:20;}html:not(.bootstrap-ready) #app > *:not(#loading){visibility:hidden;}html:not(.bootstrap-ready) #ptt-dialog,html:not(.bootstrap-ready) #teaching-recall-modal{visibility:hidden;}html:not(.bootstrap-ready) #loading{display:flex !important;visibility:visible;}#app .modal:not(.active){display:none !important;}.loading{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.9);z-index:2000;align-items:center;justify-content:center;flex-direction:column;}.loading.active{display:flex;}.cartoon-loading p{margin-top:15px;font-size:1.2em;color:var(--primary-color,#6b9bd1);font-weight:bold;letter-spacing:1px;}