/* Lighter neutrals, clearer text and interleaved square tiles. */
html[data-theme=light]{--canvas:#f0f2f1;--page:#fbfcfa;--surface:#ffffff;--surface2:#f5f7f3;--surface3:#e9eee7;--border:#dce3db;--text:#27352e;--secondary:#4f6056;--faint:#68766b;--ink:#27352e;--muted:#68766b;--line:#dce3db;--bg:#fbfcfa;--p-intro:#f0f5ee;--hero:#f2f6ee;--hero2:#eaf1e5;--paper-ink:#303e35}
html[data-theme=dark]{--canvas:#111316;--page:#171a1e;--sidebar:#1b1e22;--surface:#23272d;--surface2:#2b3036;--surface3:#383f46;--border:#40474d;--text:#f0f3f2;--secondary:#c5cdc8;--faint:#aab7ad;--ink:#f0f3f2;--muted:#aab7ad;--line:#40474d;--bg:#171a1e;--p-intro:#27352e}
html[data-theme=comfort]{--canvas:#ebe5da;--page:#f3efe6;--sidebar:#f4f0e8;--surface:#f8f5ee;--surface2:#eee9de;--border:#d6cebf;--text:#3d4036;--secondary:#5b6254;--faint:#6f7565;--ink:#3d4036;--muted:#6f7565;--line:#d6cebf;--bg:#f3efe6;--p-intro:#e9eddf}
html[data-theme=dark] .app.mobile,html[data-theme=dark] .mobile .main,html[data-theme=dark] .mobile .topbar{background:#171a1e}html[data-entry=public] body{background:#fdfdfa}.l-landing{--li:#263c32;--lm:#5e7163;--ll:#dfe6dc;background:#fdfdfa}.l-landing .l-nav nav{color:#52675a;font-size:12px}.l-landing .l-login{font-size:13px!important}.l-landing .l-kicker{color:#627b66;font-weight:600}.l-landing .l-hero-copy>p{color:#586d5f;font-size:16px;line-height:1.9;max-width:410px}.l-landing .l-subtle{color:#6b7b6c;font-size:11px}.l-landing .l-hero h1{font-weight:550}.l-landing .l-text-button{color:#47634f!important;font-size:12px!important}.l-landing .l-beliefs{font-size:12px;color:#5c735e}.l-landing .l-step-tabs strong{font-size:16px}.l-landing .l-step-tabs p{font-size:13px;color:#687b64;line-height:1.9}.l-landing .l-step-tabs>button{color:#657d61}.l-landing .l-step-tabs>button.active{background:#f3f7ef;border-color:#dfe8d5}.l-landing .l-step-demo{background:#f2f6ee;border:1px solid #e3ebdc}.l-landing .l-step-demo-card strong{font-size:12px;color:#455f43}.l-landing .l-step-demo-card span{font-size:10px;color:#6a8062}.l-landing .l-demo-caption{font-size:9px;color:#728569}.l-landing .l-principle{background:#f0f6e9}.l-landing .l-principle>div>p{font-size:14px;color:#5f7655}.l-landing .l-principle-items{font-size:12px;color:#59754d}.l-landing .l-device-copy>p{font-size:14px;color:#62785b}.l-landing .l-device-copy>small{font-size:10px;color:#708265}.l-landing .l-device-tabs button{font-size:12px;color:#607c52;background:#fbfdf6}.l-landing .l-device-tabs button.active{background:#edf4e6;border-color:#8da77d;color:#3c6136}.l-landing .l-faq summary{font-size:14px;color:#45633e}.l-landing .l-faq details p{font-size:13px;color:#617953;line-height:1.95}.l-landing .l-last-call{background:#f2f7ec}.l-landing .l-last-call p{font-size:14px;color:#627a55}.l-landing .l-footer>span{color:#6e8163;font-size:11px}.l-landing .l-footer>div{color:#617b53;font-size:11px}.l-landing .l-footer>small{color:#738568;font-size:10px}.l-landing .l-hero{gap:45px;padding-top:70px;padding-bottom:78px}.l-bento-scene{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:12px;aspect-ratio:1;max-width:540px;width:100%;justify-self:end;isolation:isolate}.l-bento-tile{border-radius:15px;border:1px solid #e0e7da;padding:19px;min-width:0;min-height:0;overflow:hidden;color:#435f42!important;text-align:left;position:relative;display:flex;flex-direction:column;justify-content:flex-start;transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s,border-color .25s}.l-bento-tile>strong{font-size:22px;line-height:1.4;font-weight:550;letter-spacing:-.5px;display:block}.l-bento-tile>small{font-size:10px;color:#6c8265;line-height:1.8;display:block;margin-top:9px}.l-bento-tile .bt-top{display:flex;align-items:center;gap:7px;font-size:8px;font-weight:600;letter-spacing:1px;color:#6e8768}.bt-top svg{height:14px;width:14px}.bt-library{grid-column:1/3;grid-row:1/3;background:#eff4e8}.bt-ai{grid-column:3/5;grid-row:1/2;background:#f6f4eb;flex-direction:row;align-items:center;gap:12px;justify-content:flex-start}.bt-ai>svg:first-child{height:25px;width:25px;flex-shrink:0;color:#7c976b}.bt-ai>span{flex:1;min-width:0}.bt-ai small{font-size:8px;letter-spacing:1px;color:#8a927a;display:block}.bt-ai strong{font-size:23px;font-weight:500;letter-spacing:-.8px;line-height:1.4;display:block;margin-top:5px}.bt-ai>svg:last-child{width:14px;height:14px;color:#98a289;flex-shrink:0}.bt-sprout{grid-column:3/4;grid-row:2/3;align-items:center;justify-content:center;background:#e4efdd;padding:11px;gap:10px;text-align:center}.bt-sprout>svg{height:29px;width:29px;color:#719562;stroke-width:1.5}.bt-sprout>span{font-size:10px;color:#67865a;line-height:1.5}.bt-save{grid-column:4/5;grid-row:2/3;align-items:center;justify-content:center;background:#fafbf6;padding:10px;text-align:center}.bt-save>span{border:1px solid #dbe7d3;background:#f1f7eb;border-radius:50%;width:32px;height:32px;display:grid;place-items:center}.bt-save svg{height:16px;width:16px;color:#6c8f5d}.bt-save>small{font-size:9px;line-height:1.5;margin-top:7px;color:#87977c}.bt-note{grid-column:1/3;grid-row:3/4;background:#faf3e8;flex-direction:row;align-items:center;gap:12px}.bt-note>svg:first-child{height:24px;width:24px;flex-shrink:0;color:#ac946b}.bt-note>span{flex:1;min-width:0}.bt-note small{display:block;font-size:8px;letter-spacing:1px;color:#a2977b}.bt-note strong{font-size:17px;line-height:1.4;font-weight:500;color:#7f7155;display:block;margin-top:7px}.bt-note>svg:last-child{height:14px;width:14px;color:#b3a78c}.bt-review{grid-column:3/5;grid-row:3/5;background:#eef0f6;color:#58667f!important}.bt-review .bt-top{color:#8c97a9}.bt-review>small{color:#8491a6}.bt-review-symbol{width:44px;height:44px;background:#e1e6f0;display:grid;place-items:center;border-radius:12px;margin:21px 0 17px;color:#8999b4;transform:rotate(8deg)}.bt-review-symbol svg{height:24px;width:24px;stroke-width:1.5}.bt-quiet{grid-column:1/3;grid-row:4/5;justify-content:center;background:#f8faf4;padding:17px 20px}.bt-quiet>span{font-size:8px;color:#8b9a7d;margin-bottom:6px}.bt-quiet>strong{font-size:14px;color:#6f865e;line-height:1.55;font-weight:400;letter-spacing:0}.bt-quiet>i{position:absolute;right:-12px;bottom:-12px;width:65px;height:65px;border:1px solid #dfe8d4;border-radius:50%}.bt-quiet>i:before{content:'';position:absolute;inset:9px;border:1px solid #e7eddc;border-radius:50%}.bt-book{width:64px;height:77px;position:relative;background:#fffef8;border:1px solid #d9e2cf;border-radius:4px 11px 4px 4px;box-shadow:5px 5px 0 #e0e8d6;display:flex;flex-direction:column;gap:5px;padding:11px;margin:19px 0 18px 2px;transform:rotate(-7deg)}.bt-book svg{width:20px;height:20px;color:#83a06e;margin-bottom:5px}.bt-book i{height:2px;width:100%;background:#dbe4d1;border-radius:2px}.bt-book i:nth-last-child(2){width:75%}.bt-book small{font-size:3px;color:#9ba98b;margin-top:auto}.bt-corner{position:absolute;bottom:16px;right:16px;color:#9fb18f}.bt-corner svg{height:15px;width:15px}.bt-review .bt-corner{color:#9aa8bd}.l-bento-tile:is(button):hover{transform:translateY(-5px);border-color:#b0c49e;box-shadow:0 14px 24px #53694b12}.l-bento-tile:is(button):hover .bt-corner svg{transform:translateX(3px)}.l-bento-tile:is(button):hover .bt-book{transform:rotate(-1deg) translateY(-2px)}.l-square-quick>button{min-height:146px;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;border-radius:14px;padding:21px}.l-square-quick>button:first-child{background:var(--p-green);border-color:var(--hero-border)}.l-square-quick>button:last-child{background:var(--p-amber)}.l-square-quick>button>svg{position:absolute;right:17px;top:22px}.l-square-quick .p-icon{width:37px;height:37px;border-radius:10px}.l-square-quick strong{font-size:14px;font-weight:550}.l-square-quick small{font-size:11px;color:var(--secondary)}.l-home-welcome p,.p-pagehead p{color:var(--secondary);font-size:14px}.l-home-section .course p{font-size:12px}.l-home-recent strong{font-size:13px}.l-home-recent small{font-size:11px}.l-home-ai>p{font-size:13px;line-height:1.9}.l-home-plan-row strong{font-size:12px}.l-home-plan-row small{font-size:10px}.l-home-note p{font-size:12px;opacity:1}.p-tool small{font-size:12px;color:var(--secondary)}.p-tool strong{font-size:14px}.p-discovery-bar p,.p-group-heading p{font-size:12px;color:var(--secondary)}.p-note-card .note-text{font-size:13px;color:var(--secondary)}.l-home-welcome h1{font-weight:550}.l-landing :focus-visible{outline-color:#668d56;outline-width:3px}
/* Motion stays progressive: content is visible if observers are unsupported. */
@keyframes lumiRise{from{opacity:0;transform:translateY(17px)}to{opacity:1;transform:translateY(0)}}
@keyframes lumiTileArrive{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes lumiSparkTurn{0%,80%,100%{transform:rotate(0)}88%{transform:rotate(15deg)}94%{transform:rotate(-8deg)}}
@keyframes lumiSoftPulse{0%,100%{box-shadow:0 0 0 0 #6c925b14}50%{box-shadow:0 0 0 8px #6c925b00}}
@keyframes lumiRipple{from{transform:scale(.05);opacity:.2}to{transform:scale(1);opacity:0}}
.l-bento-tile{animation:lumiTileArrive .65s cubic-bezier(.16,.65,.25,1) both;animation-delay:calc(var(--tile-order,0)*75ms)}.l-bento-tile:nth-child(1){--tile-order:1}.l-bento-tile:nth-child(2){--tile-order:2}.l-bento-tile:nth-child(3){--tile-order:3}.l-bento-tile:nth-child(4){--tile-order:4}.l-bento-tile:nth-child(5){--tile-order:5}.l-bento-tile:nth-child(6){--tile-order:6}.l-bento-tile:nth-child(7){--tile-order:7}.l-hero-copy>.l-kicker{animation:lumiRise .5s .05s both}.l-hero h1{animation:lumiRise .65s .13s both}.l-hero-copy>p{animation:lumiRise .65s .23s both}.l-hero-actions{animation:lumiRise .65s .32s both}.bt-ai>svg:first-child{animation:lumiSparkTurn 6s ease-in-out 2s infinite}.bt-save>span{animation:lumiSoftPulse 4s ease-in-out 1s infinite}.l-reveal-pending{opacity:0;transform:translateY(17px)}.l-revealed{animation:lumiRise .6s cubic-bezier(.2,.65,.25,1) both;animation-delay:var(--reveal-delay,0ms)}.l-step-tabs>button,.l-device-tabs button,.p-category-tabs button,.p-week-day,.p-tool,.course,.p-note-card,.l-square-quick>button{transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .24s,background-color .24s}.l-step-tabs>button:hover{transform:translateX(4px)}.l-landing details[open]>p{animation:lumiRise .3s ease-out}.l-device-tabs button:hover,.p-week-day:hover{transform:translateY(-2px)}.p-tool:hover,.course:hover,.p-note-card:hover,.l-square-quick>button:hover{transform:translateY(-4px);box-shadow:0 9px 22px #3447340b}.l-button,.btn,.l-bento-tile{position:relative;overflow:hidden;isolation:isolate}.l-button:active,.btn:active,.l-bento-tile:is(button):active{transform:scale(.98)}.l-click-ripple{pointer-events:none;position:absolute;border-radius:50%;background:currentColor;opacity:0;animation:lumiRipple .65s ease-out forwards;z-index:-1}.l-button svg,.btn svg,.bt-corner svg,.bt-book{transition:transform .28s cubic-bezier(.2,.7,.3,1)}.l-button:hover>svg:last-child,.btn:hover>svg:last-child{transform:translateX(3px)}.l-nav nav a{position:relative;padding-bottom:4px}.l-nav nav a:after{content:'';position:absolute;height:1px;background:#728f65;left:0;right:0;bottom:0;transform:scaleX(0);transform-origin:left;transition:transform .25s}.l-nav nav a:hover:after{transform:scaleX(1)}html{scroll-behavior:smooth}.l-landing input,.lumi-form input,.lumi-form textarea,.aiinput,.l-home-ai textarea{transition:border-color .2s,box-shadow .2s}.lumi-form input:focus,.lumi-form textarea:focus,.l-home-ai textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bt-book{width:56px;height:65px;padding:9px;gap:4px;margin:14px 0 13px 2px}.bt-book svg{height:17px;width:17px;margin-bottom:2px}.l-bento-tile>strong{font-size:21px}.bt-review-symbol{width:38px;height:38px;margin:18px 0 15px;border-radius:11px}.l-bento-tile{animation-fill-mode:backwards}
@media(max-width:1100px) and (min-width:601px){.l-bento-scene{gap:10px}.l-bento-tile{padding:15px;border-radius:12px}.l-bento-tile>strong{font-size:18px}.l-bento-tile>small{font-size:9px;margin-top:6px}.l-bento-tile .bt-top{font-size:6px;letter-spacing:.7px;gap:5px}.bt-top svg{width:12px;height:12px}.bt-book{height:55px;width:47px;padding:8px;margin:11px 0 13px;gap:3px}.bt-book svg{height:14px;width:14px}.bt-book small{font-size:2px}.bt-ai{gap:8px}.bt-ai strong{font-size:20px}.bt-ai small{font-size:6px}.bt-ai>svg:first-child{width:20px;height:20px}.bt-ai>svg:last-child{width:11px;height:11px}.bt-sprout,.bt-save{padding:8px;gap:6px}.bt-sprout>svg{height:25px;width:25px}.bt-sprout>span,.bt-save>small{font-size:8px}.bt-save>span{height:27px;width:27px}.bt-note{gap:8px}.bt-note strong{font-size:14px;margin-top:5px}.bt-note small{font-size:6px}.bt-note>svg:first-child{height:20px;width:20px}.bt-note>svg:last-child{height:11px;width:11px}.bt-review-symbol{width:31px;height:31px;margin:14px 0 12px}.bt-review-symbol svg{width:19px;height:19px}.bt-quiet{padding:14px 16px}.bt-quiet>strong{font-size:12px}.bt-quiet>span{font-size:7px}.l-hero .l-hero-copy>p{font-size:14px}.l-home-quick strong{font-size:13px}.l-square-quick>button{padding:18px;min-height:138px}}
@media(max-width:800px) and (min-width:601px){.l-landing .l-hero{grid-template-columns:1fr;gap:45px;padding-top:55px}.l-hero-copy{max-width:550px}.l-bento-scene{max-width:475px;margin:0 auto;justify-self:center}.l-hero .l-hero-copy>p{font-size:15px}.l-bento-tile>strong{font-size:23px}.bt-book{height:68px;width:57px;margin:17px 0}.bt-ai strong{font-size:25px}.bt-review-symbol{width:40px;height:40px;margin:23px 0}.bt-quiet>strong{font-size:16px}.bt-note strong{font-size:19px}}
@media(max-width:600px){html[data-theme=dark] .app,html[data-theme=dark] .main,html[data-theme=dark] .topbar{background:#171a1e}.l-landing .l-hero{padding-top:44px;padding-bottom:46px;gap:35px}.l-landing .l-hero-copy>p{font-size:15px;line-height:1.85;max-width:355px}.l-landing .l-subtle{font-size:10px;line-height:1.8}.l-landing .l-hero h1{font-size:42px;letter-spacing:-1.8px;line-height:1.2}.l-landing .l-text-button{font-size:11px!important}.l-bento-scene{gap:9px;max-width:410px;margin:4px auto 0;justify-self:stretch}.l-bento-tile{border-radius:11px;padding:12px}.l-bento-tile>strong{font-size:17px;line-height:1.4;letter-spacing:-.4px}.l-bento-tile>small{font-size:8px;line-height:1.6;margin-top:6px}.l-bento-tile .bt-top{font-size:5px;letter-spacing:.7px;gap:5px}.bt-top svg{height:10px;width:10px}.bt-book{height:48px;width:41px;padding:7px;gap:3px;margin:12px 0 12px;box-shadow:3px 3px 0 #e0e8d6;border-radius:3px 9px 3px 3px}.bt-book svg{height:13px;width:13px;margin:0}.bt-book small{font-size:2px}.bt-corner{bottom:11px;right:11px}.bt-corner svg{height:11px;width:11px}.bt-ai{gap:7px;padding:12px}.bt-ai>svg:first-child{height:19px;width:19px}.bt-ai small{font-size:5px;letter-spacing:.7px}.bt-ai strong{font-size:18px;margin-top:4px;letter-spacing:-.6px}.bt-ai>svg:last-child{height:10px;width:10px}.bt-sprout{padding:8px;gap:6px}.bt-sprout>svg{height:22px;width:22px}.bt-sprout>span{font-size:8px}.bt-save{padding:8px}.bt-save>span{height:25px;width:25px}.bt-save svg{height:12px;width:12px}.bt-save>small{font-size:7px;line-height:1.5;margin-top:5px}.bt-note{gap:8px;padding:12px}.bt-note>svg:first-child{height:19px;width:19px}.bt-note small{font-size:5px;letter-spacing:.8px}.bt-note strong{font-size:13px;line-height:1.4;margin-top:6px}.bt-note>svg:last-child{height:10px;width:10px}.bt-review-symbol{height:30px;width:30px;border-radius:9px;margin:16px 0 13px}.bt-review-symbol svg{height:18px;width:18px}.bt-quiet{padding:12px 14px}.bt-quiet>span{font-size:6px;margin-bottom:4px}.bt-quiet>strong{font-size:11px;line-height:1.6;letter-spacing:0}.bt-quiet>i{height:45px;width:45px;bottom:-8px;right:-8px}.l-landing .l-beliefs{font-size:11px;gap:19px}.l-landing .l-step-tabs strong{font-size:14px}.l-landing .l-step-tabs p{font-size:12px;line-height:1.85}.l-landing .l-step-demo-card strong{font-size:11px}.l-landing .l-step-demo-card span{font-size:9px}.l-landing .l-demo-caption{font-size:8px}.l-landing .l-principle>div>p{font-size:13px;line-height:1.9}.l-landing .l-principle-items{font-size:12px}.l-landing .l-device-copy>p{font-size:13px}.l-landing .l-device-copy>small{font-size:10px;line-height:1.9}.l-landing .l-device-tabs button{font-size:11px}.l-landing .l-faq summary{font-size:13px;line-height:1.8}.l-landing .l-faq details p{font-size:12px;line-height:1.9}.l-landing .l-last-call p{font-size:13px;line-height:1.85}.l-landing .l-footer>span{font-size:10px}.l-landing .l-footer>div{font-size:11px}.l-landing .l-footer>small{font-size:9px}.l-home-welcome p{font-size:13px}.l-square-quick>button{min-height:151px;flex-wrap:nowrap;gap:15px;padding:17px;justify-content:space-between;aspect-ratio:1.12}.l-square-quick>button>span:not(.p-icon){min-width:0;flex:0}.l-square-quick strong{font-size:13px;line-height:1.6}.l-square-quick small{font-size:10px;line-height:1.7}.l-square-quick .p-icon{height:34px;width:34px;border-radius:10px}.l-square-quick>button>svg{display:none}.l-home-recent strong{font-size:13px}.l-home-recent small{font-size:10px}.l-home-ai>p{font-size:13px}.l-home-plan-row strong{font-size:13px}.l-home-note p{font-size:13px}.p-tool strong{font-size:14px}.p-tool small{font-size:12px}.p-note-card .note-text{font-size:14px}.p-discovery-bar p,.p-group-heading p{font-size:11px}.l-landing .l-bento-scene{pointer-events:auto}}
.mobile .l-square-quick>button{min-height:151px;flex-wrap:nowrap;gap:15px;padding:17px;justify-content:space-between;aspect-ratio:1.12}.mobile .l-square-quick>button>span:not(.p-icon){min-width:0;flex:0}.mobile .l-square-quick strong{font-size:13px;line-height:1.6}.mobile .l-square-quick small{font-size:10px;line-height:1.7}.mobile .l-square-quick .p-icon{height:34px;width:34px;border-radius:10px}.mobile .l-home-welcome p{font-size:13px}.mobile .l-home-recent strong{font-size:13px}.mobile .l-home-recent small{font-size:10px}.mobile .l-home-ai>p{font-size:13px}.mobile .l-home-note p{font-size:13px}.mobile .p-tool strong{font-size:14px}.mobile .p-tool small{font-size:12px}.mobile .p-note-card .note-text{font-size:14px}
@media(max-width:360px){.l-landing>main{padding:0 19px}.l-landing .l-hero h1{font-size:37px}.l-bento-scene{gap:7px}.l-bento-tile{padding:10px}.l-bento-tile>strong{font-size:15px}.l-bento-tile>small{font-size:7px}.bt-book{width:36px;height:41px;margin:9px 0}.bt-book small{display:none}.bt-ai{gap:5px;padding:9px}.bt-ai>svg:first-child{height:17px;width:17px}.bt-ai strong{font-size:16px}.bt-ai>svg:last-child{display:none}.bt-note{gap:6px;padding:9px}.bt-note strong{font-size:12px}.bt-note>svg:last-child{display:none}.bt-review-symbol{margin:11px 0 10px;height:26px;width:26px}.bt-quiet>strong{font-size:10px}.bt-save>small{font-size:6px}.bt-sprout>span{font-size:7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.l-bento-tile,.l-hero-copy>.l-kicker,.l-hero h1,.l-hero-copy>p,.l-hero-actions,.bt-ai>svg:first-child,.bt-save>span,.l-revealed,.l-landing details[open]>p{animation:none!important}.l-reveal-pending{opacity:1!important;transform:none!important}.l-click-ripple{display:none!important}.l-bento-tile,.p-tool,.course,.p-note-card,.l-square-quick>button,.l-step-tabs>button,.l-device-tabs button,.p-week-day,.l-button,.btn,.bt-book,.bt-corner svg{transition:none!important}.l-bento-tile:hover,.p-tool:hover,.course:hover,.p-note-card:hover,.l-square-quick>button:hover,.l-step-tabs>button:hover,.l-device-tabs button:hover,.p-week-day:hover{transform:none!important}}
@media(max-width:600px){.bt-library>small,.bt-review>small{display:none}}


/* ==========================================================================
 * PDF.js Viewer & AI Citation Enhancements (Non-invasive)
 * ========================================================================== */
.pdf-viewer-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--surface2);
  padding: 16px 8px;
  min-height: 500px;
}
.pdf-scroll-viewport {
  width: 100%;
  max-width: 760px;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.pdf-page-canvas {
  max-width: 100%;
  height: auto !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border-radius: 4px;
  background: white;
}
.pdf-page-badge {
  font-size: 11px;
  color: var(--secondary);
  margin-bottom: 6px;
  font-weight: 500;
}
.citation-ref-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--accent);
  cursor: pointer;
  margin-top: 4px;
}
.citation-ref-btn:hover {
  background: var(--accent-soft);
}
.reader-extra-modern {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.lumi-tool-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text);
  background: var(--surface2);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.lumi-tool-pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tool-icon-badge {
  display: inline-flex;
  align-items: center;
}


/* ==========================================================================
 * TRÀN VIỀN TOÀN MÀN HÌNH (FULL-WIDTH FLUID LAYOUT CHO MÀY TÍNH / MÀN HÌNH LỚN)
 * ========================================================================== */
.app:not(.mobile) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.app:not(.mobile) .workspace {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.app:not(.mobile) .topbar {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 clamp(24px, 3.5vw, 64px) !important;
}

.app:not(.mobile) .main {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 30px clamp(24px, 3.5vw, 64px) 40px !important;
  box-sizing: border-box !important;
}

.app:not(.mobile) .l-home-welcome {
  width: 100% !important;
  max-width: 100% !important;
}

.app:not(.mobile) .l-home-grid {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 380px) !important;
  gap: clamp(24px, 2.5vw, 42px) !important;
}

.app:not(.mobile) .homegrid {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 380px) !important;
  gap: clamp(24px, 2.5vw, 42px) !important;
}

.app:not(.mobile) .courses {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: clamp(16px, 1.8vw, 26px) !important;
}

.app:not(.mobile) .librarygrid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: clamp(16px, 1.8vw, 26px) !important;
}

.app:not(.mobile) .readergrid {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr) !important;
  gap: clamp(18px, 2vw, 32px) !important;
}

.app:not(.mobile) .p-planner-layout {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px) !important;
  gap: clamp(20px, 2vw, 36px) !important;
}

.app:not(.mobile) .p-flash-layout {
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: 280px minmax(0, 1fr) !important;
  gap: clamp(20px, 2vw, 36px) !important;
}

/* ==========================================================================
 * 1. GIAO DIỆN CHỈ SỐ GÓC HỌC TẬP (DASHBOARD KPI METRICS GRID - ẢNH SỐ 1)
 * ========================================================================== */
.l-library-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 18px 0 24px !important;
}

@media (max-width: 900px) {
  .l-library-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}

.l-kpi-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #dce3db) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  text-align: left !important;
}

.l-kpi-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--accent, #3fae74) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06) !important;
}

.l-kpi-card:active {
  transform: scale(0.98) !important;
}

.kpi-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 22px !important;
}

.kpi-body {
  flex: 1;
  min-width: 0;
}

.kpi-number {
  font-size: 22px;
  font-weight: 700;
  color: var(--text, #27352e);
  line-height: 1.1;
  margin-bottom: 2px;
}

.kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #27352e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-hint {
  font-size: 11px;
  color: var(--muted, #68766b);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-arrow {
  color: var(--muted, #68766b);
  opacity: 0.5;
  transition: opacity 0.2s, transform 0.2s;
}

.l-kpi-card:hover .kpi-arrow {
  opacity: 1;
  transform: translateX(3px);
  color: var(--accent, #3fae74);
}

/* ==========================================================================
 * 2. GIAO DIỆN VIDEO BÀI GIẢNG ĐA NỀN TẢNG (WEB & MOBILE VIEW - ẢNH SỐ 3)
 * ========================================================================== */
.video-pagehead-desktop {
  display: block;
}
.video-pagehead-mobile {
  display: none;
}

.mobile .video-pagehead-desktop,
.app.mobile .video-pagehead-desktop,
[data-device="phone"] .video-pagehead-desktop {
  display: none !important;
}

.mobile .video-pagehead-mobile,
.app.mobile .video-pagehead-mobile,
[data-device="phone"] .video-pagehead-mobile {
  display: block !important;
  margin-bottom: 6px !important;
}

.video-player-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface2, #f5f7f3);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.video-player-wrap iframe,
.video-player-wrap video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: transparent;
}

.mobile .video-player-wrap,
.app.mobile .video-player-wrap,
[data-device="phone"] .video-player-wrap {
  border-radius: 10px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.video-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
  margin-top: 14px;
}

.mobile .video-layout,
.app.mobile .video-layout,
[data-device="phone"] .video-layout {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

@media (max-width: 820px) {
  .video-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 4px !important;
  }
}

.video-action-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  margin-top: 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.video-action-scroll::-webkit-scrollbar {
  display: none;
}

.video-action-scroll button {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 20px;
}

.video-mobile-tabs {
  display: none;
  background: var(--surface2, #f5f7f3);
  padding: 4px;
  border-radius: 10px;
  margin: 14px 0 16px;
  gap: 4px;
}

.mobile .video-mobile-tabs,
.app.mobile .video-mobile-tabs,
[data-device="phone"] .video-mobile-tabs {
  display: flex !important;
}

@media (max-width: 820px) {
  .video-mobile-tabs {
    display: flex !important;
  }
}

.video-mobile-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--secondary, #4f6056);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.video-mobile-tabs button.active {
  background: var(--surface, #ffffff);
  color: var(--accent, #3fae74);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.video-page-container {
  padding-bottom: 24px;
}

.mobile .video-page-container,
.app.mobile .video-page-container,
[data-device="phone"] .video-page-container {
  padding-bottom: 100px !important;
}

@media (max-width: 820px) {
  .video-page-container {
    padding-bottom: 100px !important;
  }
}

/* Mobile Tab Panels Visibility */
.mobile .video-page-container.tab-chapters #videoChaptersPanel,
.app.mobile .video-page-container.tab-chapters #videoChaptersPanel,
[data-device="phone"] .video-page-container.tab-chapters #videoChaptersPanel {
  display: block !important;
}
.mobile .video-page-container.tab-chapters #videoAiPanel,
.app.mobile .video-page-container.tab-chapters #videoAiPanel,
[data-device="phone"] .video-page-container.tab-chapters #videoAiPanel,
.mobile .video-page-container.tab-chapters #videoSummaryPanel,
.app.mobile .video-page-container.tab-chapters #videoSummaryPanel,
[data-device="phone"] .video-page-container.tab-chapters #videoSummaryPanel {
  display: none !important;
}

.mobile .video-page-container.tab-chat #videoAiPanel,
.app.mobile .video-page-container.tab-chat #videoAiPanel,
[data-device="phone"] .video-page-container.tab-chat #videoAiPanel {
  display: block !important;
}
.mobile .video-page-container.tab-chat #videoChaptersPanel,
.app.mobile .video-page-container.tab-chat #videoChaptersPanel,
[data-device="phone"] .video-page-container.tab-chat #videoChaptersPanel,
.mobile .video-page-container.tab-chat #videoSummaryPanel,
.app.mobile .video-page-container.tab-chat #videoSummaryPanel,
[data-device="phone"] .video-page-container.tab-chat #videoSummaryPanel {
  display: none !important;
}

.mobile .video-page-container.tab-summary #videoSummaryPanel,
.app.mobile .video-page-container.tab-summary #videoSummaryPanel,
[data-device="phone"] .video-page-container.tab-summary #videoSummaryPanel {
  display: block !important;
}
.mobile .video-page-container.tab-summary #videoChaptersPanel,
.app.mobile .video-page-container.tab-summary #videoChaptersPanel,
[data-device="phone"] .video-page-container.tab-summary #videoChaptersPanel,
.mobile .video-page-container.tab-summary #videoAiPanel,
.app.mobile .video-page-container.tab-summary #videoAiPanel,
[data-device="phone"] .video-page-container.tab-summary #videoAiPanel {
  display: none !important;
}

@media (max-width: 820px) {
  .video-page-container.tab-chapters #videoChaptersPanel { display: block !important; }
  .video-page-container.tab-chapters #videoAiPanel { display: none !important; }
  .video-page-container.tab-chapters #videoSummaryPanel { display: none !important; }

  .video-page-container.tab-chat #videoAiPanel { display: block !important; }
  .video-page-container.tab-chat #videoChaptersPanel { display: none !important; }
  .video-page-container.tab-chat #videoSummaryPanel { display: none !important; }

  .video-page-container.tab-summary #videoSummaryPanel { display: block !important; }
  .video-page-container.tab-summary #videoChaptersPanel { display: none !important; }
  .video-page-container.tab-summary #videoAiPanel { display: none !important; }
}

/* ==========================================================================
 * 3. FIX TRIỆT ĐỂ BỐ CỤC MOBILE VÀ KHUNG ĐIỆN THOẠI (CUỘN MƯỢT 100%)
 * ========================================================================== */
@keyframes lumiSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mobile.app,
.app.mobile {
  width: 414px !important;
  max-width: calc(100% - 24px) !important;
  margin: 16px auto 30px auto !important;
  border-radius: 28px !important;
  border: 2px solid var(--border, #dce2d8) !important;
  box-shadow: 0 16px 48px rgba(23, 105, 87, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  background: var(--page) !important;
  height: min(850px, calc(100vh - 65px)) !important;
  max-height: calc(100vh - 65px) !important;
  min-height: 580px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  overflow: hidden !important;
}

@media (max-width: 600px) {
  .mobile.app,
  .app.mobile {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
}

.mobile .workspace,
.app.mobile .workspace {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}

.mobile .topbar,
.app.mobile .topbar {
  flex-shrink: 0 !important;
  height: 60px !important;
  z-index: 10 !important;
}

.mobile .main,
.app.mobile .main,
[data-device="phone"] .main {
  flex: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 12px 14px 115px !important;
  scroll-behavior: smooth;
}

.mobile .bottomnav,
.app.mobile .bottomnav {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 24px) !important;
  max-width: 380px !important;
  z-index: 100 !important;
  border: 1px solid var(--border) !important;
  border-radius: 28px !important;
  background: var(--surface2, #1b2029) !important;
  backdrop-filter: blur(20px) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25) !important;
  padding: 4px 6px !important;
}

html[data-device="phone"] .app,
html[data-device="phone"] .mobile.app {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
}

html[data-device="phone"] .bottomnav {
  position: fixed !important;
  bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

/* Thanh cuộn siêu mảnh, thanh lịch cho giao diện điện thoại (chuẩn iOS/Android) */
.mobile .main::-webkit-scrollbar,
.app.mobile .main::-webkit-scrollbar,
[data-device="phone"] .main::-webkit-scrollbar {
  width: 4px !important;
}
.mobile .main::-webkit-scrollbar-track,
.app.mobile .main::-webkit-scrollbar-track,
[data-device="phone"] .main::-webkit-scrollbar-track {
  background: transparent !important;
}
.mobile .main::-webkit-scrollbar-thumb,
.app.mobile .main::-webkit-scrollbar-thumb,
[data-device="phone"] .main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.16) !important;
  border-radius: 4px !important;
}
html[data-theme="dark"] .mobile .main::-webkit-scrollbar-thumb,
html[data-theme="dark"] .app.mobile .main::-webkit-scrollbar-thumb,
html[data-theme="dark"] [data-device="phone"] .main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22) !important;
}

/* Đảm bảo khung đọc văn bản AI trên mobile cuộn liền mạch không bị lồng scrollbar */
.mobile #lumiTextWrapper,
.app.mobile #lumiTextWrapper,
[data-device="phone"] #lumiTextWrapper {
  max-height: none !important;
  overflow-y: visible !important;
}

.mobile .doc-mode-toggle button,
.app.mobile .doc-mode-toggle button,
[data-device="phone"] .doc-mode-toggle button {
  padding: 4px 8px !important;
  font-size: 10.5px !important;
}

/* ==========================================================================
 * BENTO KPI GRID (GÓC HỌC TẬP - ẢNH 2)
 * ========================================================================== */
.l-library-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin: 18px 0 24px !important;
}

@media (max-width: 900px) {
  .l-library-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

.mobile .l-library-kpi-grid,
.app.mobile .l-library-kpi-grid,
[data-device="phone"] .l-library-kpi-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 12px 0 18px !important;
}

.l-kpi-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #dce3db) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.l-kpi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
  border-color: var(--accent) !important;
}

.l-kpi-card .kpi-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.l-kpi-card .kpi-icon-wrap svg {
  width: 22px !important;
  height: 22px !important;
}

.l-kpi-card.course-kpi .kpi-icon-wrap {
  background: rgba(109, 94, 228, 0.12) !important;
  color: #6d5ee4 !important;
}

.l-kpi-card.source-kpi .kpi-icon-wrap {
  background: rgba(63, 174, 116, 0.12) !important;
  color: #3fae74 !important;
}

.l-kpi-card.note-kpi .kpi-icon-wrap {
  background: rgba(243, 156, 18, 0.12) !important;
  color: #f39c12 !important;
}

.l-kpi-card.card-kpi .kpi-icon-wrap {
  background: rgba(238, 84, 124, 0.12) !important;
  color: #ee547c !important;
}

.mobile .l-kpi-card,
.app.mobile .l-kpi-card,
[data-device="phone"] .l-kpi-card {
  padding: 12px 14px !important;
  gap: 10px !important;
  border-radius: 12px !important;
}

.mobile .l-kpi-card .kpi-icon-wrap,
.app.mobile .l-kpi-card .kpi-icon-wrap,
[data-device="phone"] .l-kpi-card .kpi-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  border-radius: 10px !important;
}

.mobile .l-kpi-card .kpi-icon-wrap svg,
.app.mobile .l-kpi-card .kpi-icon-wrap,
[data-device="phone"] .l-kpi-card .kpi-icon-wrap svg {
  width: 18px !important;
  height: 18px !important;
}

/* ==========================================================================
 * TỐI ƯU VIDEO PLAYER MOBILE (ẢNH SỐ 3)
 * ========================================================================== */
.mobile .video-pagehead-desktop,
.app.mobile .video-pagehead-desktop,
[data-device="phone"] .video-pagehead-desktop {
  display: none !important;
}

.mobile .video-pagehead-mobile,
.app.mobile .video-pagehead-mobile,
[data-device="phone"] .video-pagehead-mobile {
  display: block !important;
  margin: 0 0 10px 0 !important;
}

.mobile .video-player-wrap,
.app.mobile .video-player-wrap,
[data-device="phone"] .video-player-wrap {
  border-radius: 12px !important;
  background: #000 !important;
  border: 1px solid var(--border) !important;
  margin: 2px 0 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: 200px !important;
  overflow: hidden !important;
}

.mobile .video-player-wrap iframe,
.app.mobile .video-player-wrap iframe,
[data-device="phone"] .video-player-wrap iframe,
.mobile .video-player-wrap video,
.app.mobile .video-player-wrap video,
[data-device="phone"] .video-player-wrap video {
  width: 100% !important;
  height: 100% !important;
  max-height: 200px !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
  display: block !important;
  background: transparent !important;
}

.mobile .video-action-scroll,
.app.mobile .video-action-scroll,
[data-device="phone"] .video-action-scroll {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  padding: 4px 2px 10px !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
}
.mobile .video-action-scroll::-webkit-scrollbar,
.app.mobile .video-action-scroll::-webkit-scrollbar,
[data-device="phone"] .video-action-scroll::-webkit-scrollbar {
  display: none !important;
}

.mobile .video-action-scroll .btn,
.app.mobile .video-action-scroll .btn,
[data-device="phone"] .video-action-scroll .btn {
  font-size: 11px !important;
  padding: 6px 12px !important;
  flex-shrink: 0 !important;
  border-radius: 20px !important;
}

/* Tabs on Mobile for Video: Show only ONE active panel */
.mobile .video-mobile-tabs,
.app.mobile .video-mobile-tabs,
[data-device="phone"] .video-mobile-tabs {
  display: flex !important;
  gap: 6px !important;
  margin: 8px 0 12px !important;
  padding: 3px !important;
  background: var(--surface2) !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
}

.mobile .video-mobile-tab-btn,
.app.mobile .video-mobile-tab-btn,
[data-device="phone"] .video-mobile-tab-btn {
  flex: 1 !important;
  padding: 6px 4px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  text-align: center !important;
}

.mobile .video-mobile-tab-btn.active,
.app.mobile .video-mobile-tab-btn.active,
[data-device="phone"] .video-mobile-tab-btn.active {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

.mobile .video-page-container.tab-chapters #videoChaptersPanel,
.app.mobile .video-page-container.tab-chapters #videoChaptersPanel,
[data-device="phone"] .video-page-container.tab-chapters #videoChaptersPanel {
  display: block !important;
}
.mobile .video-page-container.tab-chapters #videoAiPanel,
.app.mobile .video-page-container.tab-chapters #videoAiPanel,
[data-device="phone"] .video-page-container.tab-chapters #videoAiPanel,
.mobile .video-page-container.tab-chapters #videoSummaryPanel,
.app.mobile .video-page-container.tab-chapters #videoSummaryPanel,
[data-device="phone"] .video-page-container.tab-chapters #videoSummaryPanel {
  display: none !important;
}

.mobile .video-page-container.tab-chat #videoAiPanel,
.app.mobile .video-page-container.tab-chat #videoAiPanel,
[data-device="phone"] .video-page-container.tab-chat #videoAiPanel {
  display: block !important;
}
.mobile .video-page-container.tab-chat #videoChaptersPanel,
.app.mobile .video-page-container.tab-chat #videoChaptersPanel,
[data-device="phone"] .video-page-container.tab-chat #videoChaptersPanel,
.mobile .video-page-container.tab-chat #videoSummaryPanel,
.app.mobile .video-page-container.tab-chat #videoSummaryPanel,
[data-device="phone"] .video-page-container.tab-chat #videoSummaryPanel {
  display: none !important;
}

.mobile .video-page-container.tab-summary #videoSummaryPanel,
.app.mobile .video-page-container.tab-summary #videoSummaryPanel,
[data-device="phone"] .video-page-container.tab-summary #videoSummaryPanel {
  display: block !important;
}
.mobile .video-page-container.tab-summary #videoChaptersPanel,
.app.mobile .video-page-container.tab-summary #videoChaptersPanel,
[data-device="phone"] .video-page-container.tab-summary #videoChaptersPanel,
.mobile .video-page-container.tab-summary #videoAiPanel,
.app.mobile .video-page-container.tab-summary #videoAiPanel,
[data-device="phone"] .video-page-container.tab-summary #videoAiPanel {
  display: none !important;
}