/* Presentation chrome lives outside the product viewport. */
body.device-preview-host{margin:0;overflow:hidden;background:#e9edf6;color:#263551}
.device-preview-host>#toast,.device-preview-host>#modal-root{display:none}
.device-preview-host #app{height:100dvh}
.dp-preview{height:100dvh;width:100%;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#f8faff 0,#edf1f9 52%,#e7ecf6 100%);font-family:"Segoe UI","Microsoft YaHei","PingFang SC",sans-serif}
.dp-header{width:100%;max-width:1640px;flex-shrink:0;min-height:106px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:21px 34px 15px;margin:0 auto;box-sizing:border-box}
.dp-identity{display:flex;align-items:center;gap:14px;min-width:0}.dp-brand-mark{width:43px;height:48px;display:grid;place-items:center;background:#20346d;color:#b2eddb;border-radius:12px;font-size:31px;font-weight:650;box-shadow:0 5px 16px #263e7510;line-height:1}
.dp-eyebrow{font-size:10px;letter-spacing:1.4px;color:#8a98b2;margin:0 0 3px}.dp-header h1{font-size:22px;font-weight:650;letter-spacing:.3px;color:#2b3a5c;line-height:1.4;margin:0}.dp-meta{font-size:11px;letter-spacing:.5px;color:#8b99b3;margin:4px 0 0}
.dp-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.dp-controls button{min-height:40px;border:1px solid #d8e0ef;color:#6a7e9f;border-radius:9px;background:#f7f9fe;padding:9px 12px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;line-height:1.4;font-family:inherit}.dp-controls button:hover{background:#fff;border-color:#bacbef;color:#315cf5}.dp-controls button:focus-visible{outline:3px solid #90a6ff;outline-offset:3px}
.dp-case-picker{position:relative;flex:none}
.dp-controls .dp-case-toggle{background:#fff;border-color:#ced8eb;color:#405c8f;box-shadow:0 2px 6px #28497704}
.dp-controls .dp-case-toggle[aria-expanded="true"]{border-color:#aebfe0;color:#315cf5;background:#f8faff}
.dp-case-panel{position:absolute;z-index:120;right:0;top:calc(100% + 12px);width:344px;max-width:calc(100vw - 30px);max-height:min(630px,calc(100dvh - 140px));overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:14px 10px 10px;border:1px solid #e1e7f1;border-radius:15px;background:#fff;box-shadow:0 16px 50px #263c6c21,0 3px 10px #263c6c0c;scrollbar-width:thin;scrollbar-color:#cfdaec transparent}
.dp-case-panel[hidden]{display:none}
.dp-case-panel>header{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 10px 8px}
.dp-case-panel>header>b{color:#273f68;font-size:15px;line-height:1.7;font-weight:650}
.dp-case-panel>header>span{color:#91a1b9;font-size:11px;letter-spacing:.04em}
.dp-case-section-label{color:#9ba8bd;font-size:11px;line-height:1.7;margin:10px 10px 5px;letter-spacing:.06em}
.dp-case-panel .dp-case-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:64px;border:0;border-radius:9px;background:#fff;padding:10px;text-align:left;white-space:normal;box-shadow:none}
.dp-case-panel .dp-case-option:hover{background:#f5f8fe}
.dp-case-option>span{display:block;min-width:0}
.dp-case-option>span>b{display:flex;align-items:center;gap:9px;color:#415d86;font-size:13px;font-weight:650;line-height:1.7}
.dp-case-option>span>b>small{font-size:11px;color:#90a0b9;font-weight:400}
.dp-case-option>span>span{display:block;color:#9aa9bf;font-size:11px;line-height:1.8;margin-top:3px}
.dp-case-option>i{font-style:normal;font-size:20px;color:#b2bfd2;flex:none}
.dp-case-option[data-device-case="multiple-lessons"]{background:#f5f9f8}
.dp-case-option[data-device-case="multiple-lessons"]>span>b{color:#477e71}
.dp-role-controls{display:flex;gap:3px;padding:3px;border:1px solid #d8e1f1;border-radius:11px;background:#e1e7f2;margin-left:auto;margin-right:12px}.dp-role-controls>button{min-height:36px;padding:7px 13px;border:0;border-radius:7px;background:transparent;font-size:12px;font-weight:500;font-family:inherit;color:#7084a5;white-space:nowrap}.dp-role-controls>button[aria-pressed="true"]{background:#fff;color:#315cf5;box-shadow:0 2px 6px #29406b0a}.dp-role-controls>button:focus-visible{outline:3px solid #90a6ff;outline-offset:3px}
.device-preview-screen .workspace[data-view-role="student"] .role-switch{display:none}
.device-preview-screen .workspace.miniapp-workspace{padding:0;gap:0;background:#f3f5fc}.device-preview-screen .workspace.miniapp-workspace .miniapp-demo-bar{display:none}.device-preview-screen .workspace.miniapp-workspace .miniapp-phone{height:100dvh;max-width:none;border:0;border-radius:0;box-shadow:none}
.dp-scale-controls{display:flex;padding:3px;border:1px solid #d8e1f1;border-radius:11px;background:#e1e7f2;gap:3px}.dp-scale-controls button{min-height:34px;padding:7px 12px;border-color:transparent;background:transparent;border-radius:7px}.dp-scale-controls button.is-active{background:white;color:#315cf5;box-shadow:0 2px 6px #29406b0a}.dp-scale-value{font-size:11px;color:#8695b0;min-width:34px;font-variant-numeric:tabular-nums}.dp-controls .dp-icon-button{width:40px;padding:8px}.dp-controls .dp-fullscreen{color:#3e568b;background:#f5f8ff}
.dp-viewport{flex:1;min-height:0;overflow:auto;display:flex;padding:10px 32px 24px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c0cce1 transparent;box-sizing:border-box}
.dp-scaled-device{position:relative;flex-shrink:0;margin:auto;transition:width .22s,height .22s}
.dp-device{position:absolute;left:0;top:0;box-sizing:content-box;width:var(--dp-screen-width,1280px);height:var(--dp-screen-height,800px);padding:var(--dp-bezel,20px);border:1px solid #4c586e;border-radius:37px;background:linear-gradient(135deg,#424d63 0,#252d3e 4%,#171e2d 52%,#323d52 98%,#526078 100%);box-shadow:0 0 0 1px #ffffffa0,0 5px 0 2px #c4cddd,0 22px 45px #22355224,0 44px 100px #334c7214;transform-origin:top left;will-change:transform}
.dp-device::before{content:"";position:absolute;inset:3px;border:1px solid #ffffff12;border-radius:34px;pointer-events:none}.dp-screen{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;background:#f3f5fc;box-shadow:0 0 0 1px #0009}
#device-screen-frame{display:block;box-sizing:border-box;border:0;background:#f3f5fc;max-width:none;max-height:none}
.dp-camera{position:absolute;top:7px;left:calc(50% - 4px);width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3e5475 0 12%,#151b29 38%,#071020 75%);box-shadow:0 0 0 1px #58617344,inset 0 0 2px #000}
.dp-power,.dp-volume{position:absolute;top:-3px;width:66px;height:3px;background:#5d687e;border-radius:3px 3px 0 0;right:106px}.dp-volume{width:83px;right:201px}.dp-gesture{display:none}
.dp-loading{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:10px;background:#f3f5fc;font-size:15px;color:#7a8bad}.dp-loading[hidden]{display:none}.dp-loading>span{width:16px;height:16px;border:2px solid #d4def7;border-top-color:#315cf5;border-radius:50%;animation:dp-spin 1s linear infinite}
.dp-footer{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:6px 36px 17px;color:#91a0b8;font-size:10px;line-height:1.8;letter-spacing:.3px}.dp-footer>span:first-child{display:flex;align-items:center;gap:7px}.dp-footer i{width:5px;height:5px;background:#6cae9e;border-radius:50%}
.dp-preview[data-device-type="phone"] .dp-device{border-radius:41px;box-shadow:0 0 0 1px #ffffffa0,0 4px 0 2px #c4cddd,0 20px 45px #22355220,0 36px 90px #334c7214}.dp-preview[data-device-type="phone"] .dp-device::before{border-radius:38px}.dp-preview[data-device-type="phone"] .dp-screen{border-radius:27px}.dp-preview[data-device-type="phone"] .dp-camera{top:4px;width:6px;height:6px}.dp-preview[data-device-type="phone"] .dp-power{top:138px;right:-3px;width:3px;height:58px;border-radius:0 3px 3px 0}.dp-preview[data-device-type="phone"] .dp-volume{top:123px;left:-3px;width:3px;height:82px;border-radius:3px 0 0 3px}.dp-preview[data-device-type="phone"] .dp-gesture{display:block;position:absolute;bottom:5px;width:85px;height:3px;border-radius:3px;background:#8d96a8;left:calc(50% - 42px)}
.dp-preview:fullscreen{width:100vw;height:100dvh}.dp-preview:fullscreen .dp-header{min-height:88px;padding-top:15px}.dp-preview:fullscreen .dp-footer{padding-bottom:12px}
@keyframes dp-spin{to{transform:rotate(360deg)}}
@media(max-width:850px){.dp-header{padding:17px 20px 12px;min-height:103px;gap:12px}.dp-brand-mark{width:36px;height:42px;font-size:27px}.dp-identity{gap:10px}.dp-header h1{font-size:18px}.dp-controls{gap:7px}.dp-controls button{font-size:11px;padding:8px 10px}.dp-scale-value{display:none}.dp-viewport{padding:10px 20px 24px}.dp-footer{padding:6px 22px 14px;font-size:9px}}
@media(max-width:1050px){.dp-header{flex-wrap:wrap}.dp-role-controls{order:3;flex-basis:auto;margin-left:0;margin-right:0}.dp-controls{margin-left:auto}.dp-header .dp-identity{flex:1}.dp-role-controls>button{min-height:34px}.dp-role-controls{margin-top:-4px}.dp-preview:fullscreen .dp-header{min-height:103px}}
@media(max-width:560px){.dp-header .dp-identity{flex-basis:100%}.dp-role-controls{order:2;margin-top:0}.dp-controls{order:3}.dp-role-controls>button{min-height:36px}}
@media(max-width:560px){.dp-case-panel{position:fixed;top:172px;right:15px;left:15px;width:auto;max-width:none;max-height:calc(100dvh - 190px)}}
@media(max-width:560px){.dp-header{align-items:flex-start;flex-wrap:wrap;padding:16px 18px 12px;gap:12px}.dp-identity{width:100%}.dp-controls{width:100%;gap:8px}.dp-controls .dp-fullscreen{margin-left:auto}.dp-brand-mark{width:34px;height:38px;font-size:25px}.dp-eyebrow{font-size:9px}.dp-header h1{font-size:18px}.dp-meta{font-size:10px}.dp-viewport{padding:8px 13px 20px}.dp-footer{display:block;text-align:center;padding:6px 13px 14px}.dp-footer>span:first-child{justify-content:center}.dp-footer>span:last-child{display:block;font-size:9px;margin-top:3px}.dp-controls button{min-height:38px}.dp-scale-controls button{min-height:30px}}
@media(prefers-reduced-motion:reduce){.dp-scaled-device{transition:none}.dp-loading>span{animation:none}}
@media print{body.device-preview-host,.device-preview-host #app,.dp-preview{height:auto;overflow:visible;background:#fff}.dp-header,.dp-footer{display:none}.dp-viewport{display:block;overflow:visible;padding:0}.dp-scaled-device{width:1280px!important;height:800px!important;margin:0}.dp-device{position:static;padding:0;border:0;border-radius:0;box-shadow:none;transform:none!important}.dp-screen{border:0;border-radius:0;box-shadow:none}.dp-device::before,.dp-camera,.dp-power,.dp-volume,.dp-gesture{display:none}}