:root{--border-radius-lg:16px;--border-radius-md:10px;--border-radius-sm:8px;--border-radius-xs:6px;--border-radius-round:50px;--border-width:1px;--border-style:solid;--font-primary:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;--font-heading:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;--font-brand:"Fredoka One","Nunito",-apple-system,BlinkMacSystemFont,sans-serif;--bg-primary:#F5F3FA;--bg-secondary:#EAE6F3;--bg-tertiary:#DDD8ED;--bg-sidebar:#EFECF7;--bg-rail:#E4E0F1;--bg-userpanel:#E7E3F4;--bg-header:#EBE7F6;--text-primary:#2D254F;--text-secondary:#61588C;--text-inverted:#FFFFFF;--primary-color:#6C5CE7;--primary-hover:#5849C4;--secondary-color:#FF7675;--secondary-hover:#E84393;--accent-color:#A855F7;--success-color:#10B981;--danger-color:#EF4444;--warning-color:#F59E0B;--info-color:#3B82F6;--border-color:#E1DBF4;--border-strong:#CFCEEE;--list-card-bg:#ECE8FF;--list-card-border:#D2C9FC;--list-card-header-bg:#DFD9FF;--list-group-bg:#E7E2FF;--list-group-border:#C5BAFC;--group-vocab-bg:#DFD6FF;--group-vocab-border:#B5A5FA;--group-vocab-accent:#6C5CE7;--group-grammar-bg:#D0F5F0;--group-grammar-border:#8CEBE0;--group-grammar-accent:#14B8A6;--group-slang-bg:#FFF0CC;--group-slang-border:#FCD34D;--group-slang-accent:#F59E0B;--group-default-bg:#D6EBFF;--group-default-border:#7FBFFF;--group-default-accent:#3B82F6;--card-vocab-bg:#FAF9FF;--card-vocab-border:#EBE9FC;--card-vocab-header-bg:#F4F2FF;--card-grammar-bg:#F5FDFB;--card-grammar-border:#D5F5F0;--card-grammar-header-bg:#E6FAF6;--card-slang-bg:#FFFAF2;--card-slang-border:#FCE8C3;--card-slang-header-bg:#FFF5E1;--card-default-bg:#F7FBFF;--card-default-border:#D8EBFF;--card-default-header-bg:#EBF5FF;--zone-home:#FF7675;--zone-learning:#6C5CE7;--zone-chats:#10B981;--zone-review:#F59E0B;--zone-achievement:#FD79A8;--zone-system:#3B82F6;--subject-vocabulary:#6C5CE7;--subject-grammar:#14B8A6;--subject-slang:#F59E0B;--shadow-color:rgba(45,37,79,0.08);--shadow-sm:0 1px 2px rgba(45,37,79,0.06);--shadow-md:0 1px 2px rgba(45,37,79,0.05),0 4px 16px rgba(45,37,79,0.08);--shadow-lg:0 8px 32px rgba(45,37,79,0.14);--card-shadow:var(--shadow-md);--gradient-primary:linear-gradient(135deg,var(--primary-color),var(--accent-color));--rail-width:72px;--sidebar-width:240px;--header-height:52px;--app-top:0px;--userpanel-height:56px;--userpanel-compact-width:52px;--content-panel-max-width:1180px;--pixel-icon-xs:24px;--pixel-icon-sm:30px;--pixel-icon-md:36px;--pixel-icon-lg:44px;--pixel-icon-xl:52px;--pixel-icon-2xl:64px;--spacing-xs:6px;--spacing-sm:12px;--spacing-md:20px;--spacing-lg:30px;--spacing-xl:40px;--z-dropdown:100;--z-sticky:200;--z-overlay:900;--z-modal:1000;--z-toast:1100;--z-loading:11000;--scrollbar-width:8px;--scrollbar-thumb:#C4C6CC;--scrollbar-track:transparent;--transition:background-color 0.2s cubic-bezier(0.2,0.8,0.2,1),color 0.2s cubic-bezier(0.2,0.8,0.2,1),border-color 0.2s cubic-bezier(0.2,0.8,0.2,1),transform 0.2s cubic-bezier(0.2,0.8,0.2,1),opacity 0.2s cubic-bezier(0.2,0.8,0.2,1),box-shadow 0.2s cubic-bezier(0.2,0.8,0.2,1);--transition-fast:background-color 0.15s ease,color 0.15s ease,border-color 0.15s ease,transform 0.15s ease,opacity 0.15s ease,box-shadow 0.15s ease;--ease-out:cubic-bezier(0.2,0.8,0.2,1);--suggestion-bg:rgba(108,92,231,0.08);--suggestion-border:rgba(108,92,231,0.24);--feedback-bg:rgba(16,185,129,0.08);--feedback-border:rgba(16,185,129,0.24);--card-bg:#FAF8FC;--hover-bg:rgba(108,92,231,0.06);--text-muted:#8880A8;--vocabulary-bg:rgba(108,92,231,0.08);--vocabulary-color:#6C5CE7;--grammar-bg:rgba(20,184,166,0.08);--grammar-color:#14B8A6;}[data-theme="dark"]{--bg-primary:#121124;--bg-secondary:#1A1932;--bg-tertiary:#232142;--bg-sidebar:#17162E;--bg-rail:#0C0B1B;--bg-userpanel:#14132A;--bg-header:#0C0B1B;--text-primary:#E5E3F8;--text-secondary:#A09CC4;--text-inverted:#0C0B1B;--primary-color:#7D5FFF;--primary-hover:#9275FF;--secondary-color:#FF7675;--secondary-hover:#FF8E8D;--accent-color:#FD79A8;--success-color:#2DC770;--danger-color:#F23F43;--warning-color:#F5C04E;--info-color:#3BBBFF;--border-color:#2B294A;--border-strong:#3A3763;--list-card-bg:#1A1932;--list-card-border:#2B294A;--list-card-header-bg:#232142;--list-group-bg:#1A1932;--list-group-border:#2B294A;--group-vocab-bg:#111021;--group-vocab-border:#211E3D;--group-vocab-accent:#7D5FFF;--group-grammar-bg:#061517;--group-grammar-border:#0D2D30;--group-grammar-accent:#2DD4BF;--group-slang-bg:#17110A;--group-slang-border:#332514;--group-slang-accent:#F5C04E;--group-default-bg:#0A101C;--group-default-border:#14243D;--group-default-accent:#3BBBFF;--card-vocab-bg:#201E3D;--card-vocab-border:#3A3763;--card-vocab-header-bg:#2A2852;--card-grammar-bg:#14353B;--card-grammar-border:#1E4E54;--card-grammar-header-bg:#1D4B52;--card-slang-bg:#30251A;--card-slang-border:#4A3A26;--card-slang-header-bg:#453120;--card-default-bg:#18253D;--card-default-border:#253C57;--card-default-header-bg:#223554;--zone-home:#FF7675;--zone-learning:#7D5FFF;--zone-chats:#2DC770;--zone-review:#F5C04E;--zone-achievement:#FD79A8;--zone-system:#3BBBFF;--subject-vocabulary:#7D5FFF;--subject-grammar:#2DD4BF;--subject-slang:#F5C04E;--shadow-color:rgba(0,0,0,0.5);--shadow-sm:0 1px 2px rgba(0,0,0,0.4);--shadow-md:0 1px 2px rgba(0,0,0,0.4),0 4px 16px rgba(0,0,0,0.45);--shadow-lg:0 8px 32px rgba(0,0,0,0.6);--scrollbar-thumb:#2B294A;--scrollbar-track:transparent;--suggestion-bg:rgba(125,95,255,0.14);--suggestion-border:rgba(125,95,255,0.32);--feedback-bg:rgba(45,199,112,0.12);--feedback-border:rgba(45,199,112,0.28);--card-bg:#1A1932;--hover-bg:rgba(125,95,255,0.10);--text-muted:#8280A3;--vocabulary-bg:rgba(125,95,255,0.14);--vocabulary-color:#AEB3FA;--grammar-bg:rgba(45,212,191,0.14);--grammar-color:#2DD4BF;}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}:root{color-scheme:light;}[data-theme="dark"]{color-scheme:dark;}html{position:relative;height:var(--app-height,100%);min-height:var(--app-height,100%);max-height:var(--app-height,100%);width:100%;overflow:hidden;overflow:clip;overflow-anchor:none;scroll-padding:0;background:var(--bg-rail);overscroll-behavior:none;touch-action:manipulation;}body{font-family:var(--font-primary);background:var(--bg-rail);color:var(--text-primary);line-height:1.6;height:var(--app-height,100%);min-height:var(--app-height,100%);max-height:var(--app-height,100%);width:100%;overflow:hidden;overflow:clip;overflow-anchor:none;overscroll-behavior:none;transition:background 0.4s ease,color 0.4s ease;position:absolute;top:0;left:0;-webkit-text-size-adjust:100%;text-size-adjust:100%;}input,textarea,select,[contenteditable="true"]{scroll-margin:0;scroll-padding:0;}body::before{content:'';position:fixed;inset:-20%;z-index:0;pointer-events:none;background:radial-gradient(42% 32% at 82% 8%,rgba(88,101,242,0.09),transparent 62%),radial-gradient(38% 30% at 6% 24%,rgba(139,92,246,0.07),transparent 62%),radial-gradient(40% 32% at 50% 104%,rgba(255,122,89,0.05),transparent 62%);animation:auroraDrift 90s ease-in-out infinite alternate;backface-visibility:hidden;}[data-theme="dark"] body::before{background:radial-gradient(42% 32% at 82% 8%,rgba(88,101,242,0.15),transparent 62%),radial-gradient(38% 30% at 6% 24%,rgba(167,139,250,0.11),transparent 62%),radial-gradient(40% 32% at 50% 104%,rgba(255,155,126,0.08),transparent 62%);}@keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(2.5%,-2%,0) scale(1.04);}100%{transform:translate3d(-2.5%,2%,0) scale(1.01);}}body.page-hidden::before,body.in-call::before,body.teaching-active::before,body.main-app-active::before,body.is-resizing::before{animation:none;will-change:auto;}body.bg-decor-lite::before{animation:none;will-change:auto;}@media (prefers-reduced-motion:reduce){body::before{animation:none;will-change:auto;}}body.is-resizing{transition:none !important;}.bg-decorations{display:none !important;}::-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);}.text-center{text-align:center;}.text-right{text-align:right;}.hidden{display:none !important;}.pixel-img{image-rendering:pixelated;image-rendering:crisp-edges;}.cartoon-loading{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(30,31,34,0.92);background-color:color-mix(in srgb,var(--bg-rail) 92%,transparent);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:var(--z-loading);backdrop-filter:none;-webkit-backdrop-filter:none;}.cartoon-spinner{font-size:48px;color:var(--primary-color);margin-bottom:16px;}#app{display:flex;flex-direction:column;height:var(--app-height);min-height:var(--app-height);max-height:var(--app-height);width:100%;overflow:hidden;position:absolute;top:0;left:0;flex-shrink:0;transform:translate3d(0,var(--app-vv-offset,0px),0);}html.keyboard-open .panel-card,html.keyboard-open #magic-book-panel .magic-book-shell.panel-card{overflow-x:hidden;overflow-y:auto;}.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:transparent;background-image:linear-gradient( to bottom,var(--chrome-glass-bg) 0%,var(--chrome-glass-bg) 70%,transparent 100% );display:flex;justify-content:space-between;align-items:center;padding:0 var(--spacing-sm) 0 var(--spacing-xs);border-bottom:none;z-index:var(--z-sticky);flex-shrink:0;}html:not([data-theme="dark"]) .app-header{border-bottom:none;box-shadow:none;}.header-left,.header-right{display:flex;align-items:center;gap:var(--spacing-sm);min-width:48px;}@media (min-width:769px){#sidebar-toggle{display:none;}}.brand-font{font-family:var(--font-brand);font-size:20px;font-weight:400;letter-spacing:0.02em;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;display:flex;align-items:center;gap:8px;}.brand-font i{color:var(--primary-color);-webkit-text-fill-color:var(--primary-color);font-size:18px;}.main-container{display:flex;flex:1;overflow:hidden;position:relative;min-height:0;}.zone-rail{width:var(--rail-width);background-color:transparent;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0 10px;flex-shrink:0;border-right:none;position:relative;z-index:95;isolation:isolate;contain:layout style;transform:translateZ(0);backface-visibility:hidden;}html:not([data-theme="dark"]) .zone-rail{border-right:none;}.zone-rail-nav{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1;min-height:0;}.rail-avatar-btn{position:relative;width:48px;height:48px;border-radius:50%;flex-shrink:0;margin-top:auto;display:flex;align-items:center;justify-content:center;transition:border-radius 0.18s var(--ease-out),background-color 0.15s ease,transform 0.15s var(--ease-out);}.rail-avatar-btn[aria-expanded="true"],.rail-avatar-btn:hover{border-radius:16px;background-color:color-mix(in srgb,var(--text-primary) 8%,transparent);}.rail-avatar-btn .user-avatar-img{width:40px;height:40px;border-radius:50%;object-fit:cover;background-color:var(--bg-tertiary);box-shadow:0 2px 8px rgba(0,0,0,0.4),0 0 1px rgba(0,0,0,0.35);}.rail-avatar-btn .user-status-dot{position:absolute;right:2px;bottom:2px;width:12px;height:12px;border-radius:50%;background-color:var(--success-color);border:3px solid var(--bg-rail);}.zone-radio{position:absolute;width:0;height:0;opacity:0;pointer-events:none;}.zone-btn{position:relative;width:48px;height:48px;border-radius:50%;background-color:var(--bg-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-radius 0.18s var(--ease-out),background-color 0.18s var(--ease-out),transform 0.15s var(--ease-out);-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,0.35),0 0 1px rgba(0,0,0,0.3);}.zone-btn img{width:var(--pixel-icon-lg);height:var(--pixel-icon-lg);pointer-events:none;}.zone-btn:hover{border-radius:16px;background-color:var(--primary-color);transform:translateY(-1px);}.zone-btn::before{content:'';position:absolute;left:-12px;top:50%;width:4px;height:36px;border-radius:0 4px 4px 0;background-color:var(--text-primary);transform:translateY(-50%) scaleY(0.22);transform-origin:center center;opacity:0;transition:transform 0.2s var(--ease-out),opacity 0.15s;}.zone-btn:hover::before{opacity:1;transform:translateY(-50%) scaleY(0.55);}.main-container[data-active-zone="home"] .zone-btn[for="zone-picker-home"],.main-container[data-active-zone="learning"] .zone-btn[for="zone-picker-learning"],.main-container[data-active-zone="chats"] .zone-btn[for="zone-picker-chats"],.main-container[data-active-zone="review"] .zone-btn[for="zone-picker-review"],.main-container[data-active-zone="achievement"] .zone-btn[for="zone-picker-achievement"],.main-container[data-active-zone="system"] .zone-btn[for="zone-picker-system"]{border-radius:16px;}.main-container[data-active-zone="home"] .zone-btn[for="zone-picker-home"]{background-color:var(--zone-home);}.main-container[data-active-zone="learning"] .zone-btn[for="zone-picker-learning"]{background-color:var(--zone-learning);}.main-container[data-active-zone="chats"] .zone-btn[for="zone-picker-chats"]{background-color:var(--zone-chats);}.main-container[data-active-zone="review"] .zone-btn[for="zone-picker-review"]{background-color:var(--zone-review);}.main-container[data-active-zone="achievement"] .zone-btn[for="zone-picker-achievement"]{background-color:var(--zone-achievement);}.main-container[data-active-zone="system"] .zone-btn[for="zone-picker-system"]{background-color:var(--zone-system);}.main-container[data-active-zone="home"] .zone-btn[for="zone-picker-home"]::before,.main-container[data-active-zone="learning"] .zone-btn[for="zone-picker-learning"]::before,.main-container[data-active-zone="chats"] .zone-btn[for="zone-picker-chats"]::before,.main-container[data-active-zone="review"] .zone-btn[for="zone-picker-review"]::before,.main-container[data-active-zone="achievement"] .zone-btn[for="zone-picker-achievement"]::before,.main-container[data-active-zone="system"] .zone-btn[for="zone-picker-system"]::before{opacity:1;transform:translateY(-50%) scaleY(1);}.zone-btn::after{content:attr(data-tooltip);position:absolute;left:calc(100% + 14px);top:50%;transform:translateY(-50%) scale(0.9);transform-origin:left center;background:#111214;color:#F2F3F5;font-size:13px;font-weight:700;padding:6px 10px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.12s ease,transform 0.12s ease;z-index:var(--z-dropdown);box-shadow:var(--shadow-md);}.zone-btn:hover::after{opacity:1;transform:translateY(-50%) scale(1);}.main-container.submenu-open .zone-btn::after{opacity:0 !important;transform:translateY(-50%) scale(0.9);}.sidebar{display:flex;flex-direction:column;z-index:96;overflow:hidden;opacity:1;visibility:visible;--submenu-bubble-bg:color-mix(in srgb,var(--bg-secondary) 94%,transparent);--submenu-bubble-border:var(--border-strong);}body.is-resizing .sidebar{transition:none !important;}.sidebar-scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 8px 12px;display:flex;flex-direction:column;}.zone-section{display:none;flex-direction:column;gap:2px;}#zone-picker-learning:checked ~ .sidebar-scroll .zone-section[data-zone="learning"],#zone-picker-chats:checked ~ .sidebar-scroll .zone-section[data-zone="chats"],#zone-picker-review:checked ~ .sidebar-scroll .zone-section[data-zone="review"],#zone-picker-system:checked ~ .sidebar-scroll .zone-section[data-zone="system"]{display:flex;}#zone-picker-home:checked ~ .sidebar-scroll .zone-section,#zone-picker-achievement:checked ~ .sidebar-scroll .zone-section{display:none;}.zone-title{font-family:var(--font-heading);font-size:15px;font-weight:700;color:#fff;padding:14px 12px 12px;margin:0 -8px 10px;border-bottom:none;letter-spacing:0.01em;border-radius:0;}html:not([data-theme="dark"]) .zone-title{border-bottom:none;}.zone-section[data-zone="learning"] .zone-title{background-color:var(--zone-learning);}.zone-section[data-zone="chats"] .zone-title{background-color:var(--zone-chats);}.zone-section[data-zone="review"] .zone-title{background-color:var(--zone-review);}.zone-section[data-zone="achievement"] .zone-title{background-color:var(--zone-achievement);}.zone-section[data-zone="system"] .zone-title{background-color:var(--zone-system);}@media (min-width:769px){.sidebar{position:absolute;left:calc(var(--rail-width) + 14px);top:var(--submenu-bubble-top,72px);width:max-content;min-width:148px;max-width:220px;height:auto;max-height:min(70vh,calc(100% - 16px));margin:0;padding:6px 6px 4px;flex-shrink:0;overflow:visible;background-color:var(--submenu-bubble-bg);border:2px solid var(--submenu-bubble-border);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,0.32),0 0 0 1px rgba(0,0,0,0.06);transition:opacity 0.15s ease,visibility 0.15s ease;isolation:isolate;transform:translateZ(0);backface-visibility:hidden;contain:layout style;}.sidebar::before{content:'';position:absolute;right:100%;top:var(--submenu-tail-y,24px);transform:translateY(-50%);width:0;height:0;border-style:solid;border-width:11px 14px 11px 0;border-color:transparent var(--submenu-bubble-border) transparent transparent;z-index:2;pointer-events:none;}.sidebar::after{content:'';position:absolute;right:100%;top:var(--submenu-tail-y,24px);transform:translateY(-50%);margin-right:-2px;width:0;height:0;border-style:solid;border-width:9px 12px 9px 0;border-color:transparent var(--submenu-bubble-bg) transparent transparent;z-index:3;pointer-events:none;}.sidebar.collapsed{opacity:0;visibility:hidden;pointer-events:none;}.sidebar.collapsed::before,.sidebar.collapsed::after{opacity:0;}.main-container[data-active-zone="learning"] .sidebar{--submenu-bubble-border:var(--zone-learning);}.main-container[data-active-zone="chats"] .sidebar{--submenu-bubble-border:var(--zone-chats);}.main-container[data-active-zone="review"] .sidebar{--submenu-bubble-border:var(--zone-review);}.main-container[data-active-zone="system"] .sidebar{--submenu-bubble-border:var(--zone-system);}.main-container[data-active-zone="home"] .sidebar,.main-container[data-active-zone="achievement"] .sidebar{--submenu-bubble-border:var(--border-strong);}.sidebar-resizer{display:none !important;}.zone-title{display:none;}.sidebar-scroll{flex:0 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 4px;position:relative;z-index:1;}}.user-panel{position:relative;width:100%;min-height:var(--userpanel-height);margin-top:auto;background-color:var(--chrome-glass-bg);display:flex;align-items:center;gap:8px;padding:6px 10px;flex-shrink:0;border-top:none;z-index:97;}@media (min-width:769px){.sidebar .user-panel{display:none;margin-top:0;min-height:0;padding:6px 8px;border-radius:10px;background-color:color-mix(in srgb,var(--text-primary) 6%,transparent);}.sidebar.account-open .user-panel{display:flex;}.sidebar.account-open .sidebar-scroll{display:none;}}html:not([data-theme="dark"]) .user-panel{border-top:none;}.user-panel-avatar--mobile{display:none;}.user-panel-avatar{position:relative;width:36px;height:36px;flex-shrink:0;}.user-avatar-img{width:36px;height:36px;border-radius:50%;background-color:var(--bg-tertiary);object-fit:cover;}.user-status-dot{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;background-color:var(--success-color);border:3px solid var(--bg-userpanel);}.user-panel-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}.user-panel-name{font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.user-panel-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);}.user-panel-status::before{content:'';width:7px;height:7px;border-radius:50%;background-color:var(--success-color);}.user-panel-actions{display:flex;align-items:center;gap:2px;margin-left:auto;flex-shrink:0;}.user-panel-btn{width:40px;height:40px;border-radius:var(--border-radius-xs);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:14px;transition:background-color 0.15s ease,color 0.15s ease;}.user-panel-btn:hover{background-color:color-mix(in srgb,var(--text-primary) 8%,transparent);color:var(--text-primary);}.user-panel-logout:hover{background-color:color-mix(in srgb,var(--danger-color) 15%,transparent);color:var(--danger-color);}.content-panel.active{animation:panelEnter 0.28s var(--ease-out);}@keyframes panelEnter{from{opacity:0;}to{opacity:1;}}@media (prefers-reduced-motion:reduce){.content-panel.active{animation:none;}}.sidebar .sidebar-btn img.nav-icon{width:var(--pixel-icon-md);height:var(--pixel-icon-md);flex-shrink:0;display:block;}.user-panel-btn img.user-panel-icon{width:var(--pixel-icon-md);height:var(--pixel-icon-md);}#theme-toggle i{display:none;}#theme-toggle .theme-icon{display:none;}[data-theme="light"] #theme-toggle .theme-icon-moon{display:block;}[data-theme="dark"] #theme-toggle .theme-icon-sun{display:block;}.panel-card h2 img.h2-icon{width:var(--pixel-icon-lg);height:var(--pixel-icon-lg);}.chat-toolbar img.act-icon,.input-controls img.input-icon{width:var(--pixel-icon-md);height:var(--pixel-icon-md);}.chat-toolbar img.ptt-btn-icon,.chat-toolbar img.send-icon,.input-controls img.ptt-icon,.input-controls img.send-icon{width:var(--pixel-icon-lg);height:var(--pixel-icon-lg);}img.header-icon{width:var(--pixel-icon-md);height:var(--pixel-icon-md);}img.btn-close-icon{width:var(--pixel-icon-sm);height:var(--pixel-icon-sm);}img.btn-inline-icon{width:var(--pixel-icon-sm);height:var(--pixel-icon-sm);}img.h2-icon{width:var(--pixel-icon-lg);height:var(--pixel-icon-lg);vertical-align:-8px;}img.label-icon{width:var(--pixel-icon-md);height:var(--pixel-icon-md);vertical-align:-8px;}img.act-icon{width:var(--pixel-icon-md);height:var(--pixel-icon-md);vertical-align:-7px;flex-shrink:0;}img.info-icon-img{width:var(--pixel-icon-lg);height:var(--pixel-icon-lg);flex-shrink:0;margin-top:0;}img.option-icon{width:var(--pixel-icon-xl);height:var(--pixel-icon-xl);vertical-align:middle;flex-shrink:0;}img.scenario-icon{width:var(--pixel-icon-lg);height:var(--pixel-icon-lg);}img.ratio-icon-img{width:var(--pixel-icon-md);height:var(--pixel-icon-md);}img.ratio-reset-img{width:var(--pixel-icon-xs);height:var(--pixel-icon-xs);}img.avail-icon-img{width:var(--pixel-icon-sm);height:var(--pixel-icon-sm);vertical-align:-6px;}img.hint-icon-img{width:var(--pixel-icon-xs);height:var(--pixel-icon-xs);vertical-align:-4px;}img.tab-icon{width:var(--pixel-icon-sm);height:var(--pixel-icon-sm);vertical-align:-6px;}img.hero-icon{width:var(--pixel-icon-2xl);height:var(--pixel-icon-2xl);}img.ptt-btn-icon{width:var(--pixel-icon-md);height:var(--pixel-icon-md);}img.submenu-icon{width:var(--pixel-icon-xs);height:var(--pixel-icon-xs);vertical-align:-4px;}.sidebar-resizer{position:absolute;top:0;bottom:0;left:calc(var(--rail-width) + var(--sidebar-width) - 3px);width:6px;cursor:col-resize;z-index:96;transition:background-color 0.15s ease,left 0.28s cubic-bezier(0.4,0,0.2,1);}.sidebar-resizer:hover,body.sidebar-resizing .sidebar-resizer{background:color-mix(in srgb,var(--primary-color) 45%,transparent);}.sidebar.collapsed ~ .sidebar-resizer{display:none;}body.sidebar-resizing{user-select:none;cursor:col-resize;}@media (max-width:768px){.sidebar-resizer{display:none;}}#modal-panel-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.62);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:calc(var(--z-modal) - 1);}#modal-panel-backdrop.show{opacity:1;pointer-events:auto;}.content-panel.modal-panel.active{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(880px,calc(100vw - 48px));height:min(920px,calc(var(--app-height) * 0.85));max-height:var(--app-height);max-width:none;margin:0;z-index:var(--z-modal);animation:modalPanelPop 0.22s var(--ease-out);}@keyframes modalPanelPop{from{opacity:0;transform:translate(-50%,-48.5%) scale(0.97);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}@media (prefers-reduced-motion:reduce){.content-panel.modal-panel.active{animation:none;}}.modal-panel .panel-card{background:var(--bg-secondary);border-radius:var(--border-radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);padding:var(--spacing-md) var(--spacing-lg) var(--spacing-lg);}.modal-panel-close{position:absolute;top:16px;right:16px;z-index:6;width:52px;height:52px;border-radius:var(--border-radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-muted);background:color-mix(in srgb,var(--bg-secondary) 70%,transparent);transition:background-color 0.15s ease,color 0.15s ease;}.modal-panel-close:hover{background:var(--bg-tertiary);color:var(--text-primary);}.modal-panel-close img{width:var(--pixel-icon-md);height:var(--pixel-icon-md);}.modal-panel .panel-card h2 img.h2-icon{width:var(--pixel-icon-2xl);height:var(--pixel-icon-2xl);}@media (max-width:768px){.content-panel.modal-panel.active{width:calc(100vw - 20px);height:min(100%,calc(var(--app-height) * 0.92));max-height:var(--app-height);}}#chat-score-report.content-panel.modal-panel.active{display:flex;flex-direction:column;width:min(560px,calc(100vw - 48px));height:auto;max-height:min(920px,calc(var(--app-height) * 0.85));}#chat-score-report.modal-panel .panel-card{display:flex;flex-direction:column;flex:1 1 auto;height:auto;max-height:100%;overflow:hidden;min-height:0;}#chat-score-report.modal-panel .panel-card > h2,#chat-score-report.modal-panel .panel-card > .panel-subtitle{flex:0 0 auto;}#chat-score-report.modal-panel .panel-card > h2{padding-right:56px;}@media (max-width:768px){#chat-score-report.content-panel.modal-panel.active{width:calc(100vw - 20px);max-height:min(100%,calc(var(--app-height) * 0.92));}}#main-page{--chrome-glass-bg:color-mix(in srgb,var(--bg-header) 68%,transparent);background-image:none;background-color:transparent;}#main-page::before,#main-page::after{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background-repeat:no-repeat;background-size:cover;background-position:center;image-rendering:auto;contain:paint;transform:translateZ(0);backface-visibility:hidden;transition:opacity 0.75s ease,visibility 0s linear 0.75s;}.theme-background-video{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;visibility:hidden;}.theme-background-video.is-playing{visibility:visible;}#main-page::before{background-image:var(--theme-bg-light,none);opacity:1;visibility:visible;transition:opacity 0.75s ease,visibility 0s linear 0s;}#main-page::after{background-image:var(--theme-bg-dark,none);opacity:0;visibility:hidden;}html[data-theme="dark"] #main-page::before{opacity:0;visibility:hidden;}html[data-theme="dark"] #main-page::after{opacity:1;visibility:visible;transition:opacity 0.75s ease,visibility 0s linear 0s;}@media (prefers-reduced-motion:reduce){#main-page::before,#main-page::after{transition:none;}}#main-page >:not(.theme-background-video){position:relative;z-index:1;}#main-page > #modal-panel-backdrop{position:fixed;inset:0;z-index:calc(var(--z-modal) - 1);}body.welcome-screen .main-content{background-color:transparent;background-image:none;}body.welcome-screen .main-content::before{content:'Welcome to TalkTalk';position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-brand);font-size:30px;letter-spacing:0.02em;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;pointer-events:none;contain:paint;}body.welcome-screen .main-content::after{content:'Pick an action from the left menu to get started';position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;transform:translate3d(0,36px,0);contain:paint;color:var(--text-muted);font-size:14px;font-weight:600;text-shadow:0 1px 0 color-mix(in srgb,var(--bg-primary) 70%,transparent),0 2px 10px color-mix(in srgb,var(--bg-primary) 85%,transparent);pointer-events:none;}body.welcome-screen.is-resizing .main-content::before,body.welcome-screen.is-resizing .main-content::after{visibility:hidden;}html.foreground-layer-recover #app{contain:none;backface-visibility:visible;}html.foreground-layer-recover .zone-rail,html.foreground-layer-recover #main-page,html.foreground-layer-recover #login-page,html.foreground-layer-recover .main-content{transform:none;contain:none;backface-visibility:visible;}html.foreground-layer-recover .sidebar{contain:none;backface-visibility:visible;}html.foreground-layer-recover #app *{contain:none;}html.foreground-layer-recover #main-page::before,html.foreground-layer-recover #main-page::after,html.foreground-layer-recover #login-page::before,html.foreground-layer-recover #login-page::after{transform:none;contain:none;backface-visibility:visible;}html.foreground-layer-recover body.welcome-screen .main-content::before,html.foreground-layer-recover body.welcome-screen .main-content::after{contain:none;backface-visibility:visible;}body[data-active-panel="teaching-form"] #teaching-menu-form,body[data-active-panel="teaching-lesson-list"] #teaching-menu-list,body[data-active-panel="teaching-classroom"] #teaching-menu-list,body[data-active-panel="teaching-stats"] #achievement-wall-btn,body[data-active-panel="session-form"] #new-session-btn,body[data-active-panel="session-list"] #my-chats-btn,body[data-active-panel="chat-interface"] #my-chats-btn,body[data-active-panel="live-interface"] #live-mode-btn,body[data-active-panel="review-panel"] #review-menu-enhance{background-color:color-mix(in srgb,var(--primary-color) 16%,transparent);color:var(--primary-color);font-weight:600;}.main-content{flex:1;position:relative;overflow:hidden;background-color:transparent;display:flex;flex-direction:column;padding:0;min-height:0;contain:layout style;}body.modal-panel-open .main-content,body.magic-book-explain-open .main-content{contain:style;}body.magic-book-explain-open #main-page::before,body.magic-book-explain-open #main-page::after{visibility:hidden;}body.modal-panel-open #main-page > .main-container{z-index:auto;}html:not([data-theme="dark"]) .main-content{box-shadow:none;}.content-panel{display:none;width:100%;height:100%;max-width:none;margin:0;flex-direction:column;min-height:0;}.content-panel.active{display:flex;}.content-panel:not(.modal-panel){min-width:0;max-width:var(--content-panel-max-width);margin-inline:auto;}.panel-card{background-color:transparent;border-radius:0;padding:18px clamp(20px,5vw,72px) 30px;height:100%;display:flex;flex-direction:column;position:relative;overflow-y:auto;overflow-x:hidden;border:none;box-shadow:none;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}.panel-card > h2{align-self:stretch;width:100%;max-width:none;margin:0;padding:12px 16px 6px;color:var(--text-primary);font-size:19px;font-weight:700;display:flex;align-items:center;gap:10px;background:var(--bg-secondary);border:1px solid var(--border-color);border-bottom:none;border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0;box-shadow:var(--shadow-sm);}.panel-card > h2:not(:has(+ .panel-subtitle)){margin-bottom:var(--spacing-md);padding-bottom:12px;border-bottom:1px solid var(--border-color);border-radius:var(--border-radius-lg);}.panel-card > h2 i{color:var(--primary-color);}.panel-subtitle{font-size:13px;color:var(--text-muted);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);}.panel-card > .panel-subtitle{align-self:stretch;width:100%;max-width:none;margin:0 0 var(--spacing-md);padding:0 16px 12px;font-size:13px;font-weight:600;line-height:1.45;color:var(--text-secondary);background:var(--bg-secondary);border:1px solid var(--border-color);border-top:none;border-radius:0 0 var(--border-radius-lg) var(--border-radius-lg);box-shadow:var(--shadow-sm);}.panel-card > .cartoon-btn.btn-outline{align-self:flex-start;background-color:var(--primary-color);color:#fff;border:1px solid var(--primary-color);box-shadow:var(--shadow-sm);}.panel-card > .cartoon-btn.btn-outline:hover{background-color:var(--primary-hover);border-color:var(--primary-hover);color:#fff;}.modal-panel .panel-card > h2,.modal-panel .panel-card > .panel-subtitle{width:auto;max-width:none;align-self:stretch;background:transparent;border:none;border-radius:0;box-shadow:none;padding-left:0;padding-right:0;}.modal-panel .panel-card > h2{margin-bottom:2px;padding-top:6px;padding-bottom:0;}.modal-panel .panel-card > .panel-subtitle{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-color);font-weight:400;color:var(--text-muted);}.modal-panel .panel-card > .cartoon-btn.btn-outline{background:transparent;box-shadow:none;}.current-session-bar{background-color:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color);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:var(--shadow-sm);flex-shrink:0;}.current-session-bar .session-bar-content i{color:var(--primary-color);}.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:2px;margin-top:2px;margin-bottom:6px;margin-left:21px;padding-left:11px;border-left:1px solid var(--border-color);max-height:300px;overflow-y:auto;transition:max-height 0.3s ease,opacity 0.3s ease;}.sidebar-submenu.hidden{display:none;}.submenu-item{padding:7px 10px;border-radius:var(--border-radius-sm);cursor:pointer;font-size:13px;color:var(--text-secondary);background:none;text-align:left;transition:background-color 0.15s ease,color 0.15s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px;}.submenu-item:hover{background-color:color-mix(in srgb,var(--text-primary) 7%,transparent);color:var(--text-primary);}.submenu-item.active{background-color:color-mix(in srgb,var(--primary-color) 16%,transparent);color:var(--primary-color);font-weight:600;}.submenu-loading{padding:10px;color:var(--text-secondary);font-size:0.8em;text-align:center;}.submenu-arrow{margin-left:auto;font-size:11px;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:color-mix(in srgb,var(--text-primary) 15%,transparent);border-radius:2px;}.sidebar-scroll::-webkit-scrollbar{width:6px;}.sidebar-scroll::-webkit-scrollbar-track{background:transparent;}.sidebar-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text-primary) 15%,transparent);border-radius:3px;}.submenu-view-all{font-size:12px;font-weight:600;color:var(--primary-color);text-align:center;padding:6px;cursor:pointer;margin-top:4px;border-radius:var(--border-radius-sm);transition:background-color 0.15s ease;}.submenu-view-all:hover{background-color:color-mix(in srgb,var(--primary-color) 10%,transparent);}#login-page{position:relative;height:var(--app-height,100%);min-height:var(--app-height,100%);max-height:var(--app-height,100%);width:100%;background-color:var(--bg-rail);display:flex;flex-direction:column;justify-content:center;align-items:center;flex-shrink:0;overflow:hidden;overflow-anchor:none;overscroll-behavior:none;padding:20px 0;}#login-page::before,#login-page::after{content:'';position:absolute;inset:0;background-repeat:no-repeat;background-size:cover;background-position:center;pointer-events:none;image-rendering:auto;contain:paint;transform:translateZ(0);backface-visibility:hidden;transition:opacity 0.75s ease,visibility 0s linear 0.75s;}#login-page::before{background-image:var(--theme-bg-light,none);opacity:1;visibility:visible;transition:opacity 0.75s ease,visibility 0s linear 0s;}#login-page::after{background-image:var(--theme-bg-dark,none);opacity:0;visibility:hidden;}html[data-theme="dark"] #login-page::before{opacity:0;visibility:hidden;}html[data-theme="dark"] #login-page::after{opacity:1;visibility:visible;transition:opacity 0.75s ease,visibility 0s linear 0s;}@media (prefers-reduced-motion:reduce){#login-page::before,#login-page::after{transition:none;}}.login-container{width:100%;max-width:400px;max-height:100%;min-height:0;padding:20px;z-index:10;position:relative;margin:0 auto;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}html.keyboard-open .login-container{overflow:hidden;}.login-card{background:color-mix(in srgb,var(--bg-secondary) 70%,transparent);border-radius:var(--border-radius-lg);padding:40px 32px;box-shadow:var(--shadow-lg);width:100%;text-align:center;position:relative;border:1px solid var(--border-color);animation:fadeInUp 0.5s var(--ease-out);}.login-card .logo{margin-bottom:30px;}.login-card .logo h1{font-family:var(--font-brand);font-size:2.1em;font-weight:400;letter-spacing:0.02em;margin-bottom:8px;background:var(--gradient-primary);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-flex;align-items:center;gap:10px;}.login-card .logo h1 i{color:var(--primary-color);-webkit-text-fill-color:var(--primary-color);}.login-card .logo p{color:var(--text-secondary);font-size:0.95em;}.login-form .form-group{margin-bottom:20px;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;}#login-theme-toggle.cartoon-btn-icon{width:48px;height:48px;border-radius:var(--border-radius-round);background:color-mix(in srgb,var(--bg-secondary) 88%,transparent);border:2px solid color-mix(in srgb,var(--primary-color) 55%,var(--border-strong));color:var(--primary-color);font-size:20px;box-shadow:var(--shadow-md);}#login-theme-toggle.cartoon-btn-icon:hover{background:var(--bg-secondary);border-color:var(--primary-color);color:var(--primary-hover);box-shadow:var(--shadow-lg);}#login-theme-toggle.cartoon-btn-icon:active{background:var(--primary-color);border-color:var(--primary-color);color:#fff;}html[data-theme="dark"] #login-theme-toggle.cartoon-btn-icon{background:color-mix(in srgb,var(--bg-secondary) 92%,#fff 8%);border-color:color-mix(in srgb,var(--primary-color) 70%,#fff 15%);color:#E5E3F8;}html[data-theme="dark"] #login-theme-toggle.cartoon-btn-icon:hover{background:var(--bg-tertiary);color:#fff;border-color:var(--primary-hover);}html:not(.bootstrap-ready) #app > *{visibility:hidden;}html:not(.bootstrap-ready) #ptt-dialog,html:not(.bootstrap-ready) #teaching-recall-modal,html:not(.bootstrap-ready) #review-paper-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:var(--bg-rail);z-index:var(--z-loading);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);font-weight:bold;letter-spacing:1px;}