:root{--demo-surface:#fff;--demo-ink:#0f1f4d;--demo-muted:#64748b;--demo-border:#dce2ea;--demo-soft:#f3f6fa;--demo-gold:#b58a2e;--demo-open:#16734c;--demo-shadow:0 16px 50px #0f1f4d26;}
#demoPage.active{display:block;min-height:100dvh;overflow-y:auto;}
.demo-shell{width:100%;padding:0;color:var(--demo-ink);display:flex;height:100dvh;overflow:hidden;}
#demoPage .demo-portal-sidebar{height:100dvh;flex-shrink:0;position:relative;}.demo-portal-main{min-width:0;min-height:0;height:100dvh;}#demoPage .demo-portal-content{min-height:0;}.demo-portal-sidebar button.nav-item{width:calc(100% - 16px);border:0;background:none;text-align:left;font-family:inherit;}.demo-portal-sidebar button.nav-item.active{background:color-mix(in srgb,var(--demo-surface) 12%,transparent);}.demo-menu-lock{margin-left:auto;font-size:10px;}.demo-sidebar-account{padding:20px;overflow-wrap:anywhere;font-size:11px;color:var(--demo-surface);line-height:1.8;border-top:1px solid color-mix(in srgb,var(--demo-surface) 12%,transparent);}.demo-sidebar-account .demo-badge{color:var(--demo-gold);}.demo-mobile-menu{display:none;}.demo-course-header:before{display:none;}.demo-zero-progress{width:0;}.demo-view-title{font-size:22px;margin:0 0 20px;}.demo-portal-content .tab{border:0;background:transparent;font:inherit;font-size:13px;}.demo-portal-content .tab.active{background:var(--demo-soft);color:var(--demo-ink);font-weight:700;}.demo-portal-content .mdv-header{display:flex;align-items:center;gap:12px;margin:20px 0;}.demo-portal-content .mdv-title{margin:0;}.demo-course-link{font-size:12px;font-weight:700;color:var(--demo-gold);margin-top:auto;}.demo-profile{border-top:1px solid var(--demo-border);padding-top:24px;}.demo-profile .avatar{margin-bottom:16px;}.demo-folder-card{min-height:180px;}.demo-portal-content [hidden]{display:none!important;}
.demo-entry-btn i{margin-right:8px;}
#an-demo{background:transparent;border:0;font-family:inherit;width:calc(100% - 16px);text-align:left;}
.demo-top,.demo-toolbar,.demo-row,.demo-heading{display:flex;align-items:center;gap:14px;justify-content:space-between;}
.demo-top{border-bottom:1px solid var(--demo-border);padding-bottom:20px;margin-bottom:24px;flex-wrap:wrap;}
.demo-top h1{font-size:26px;margin:0;}.demo-kicker{color:var(--demo-gold);font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:6px;}
.demo-muted{color:var(--demo-muted);font-size:13px;line-height:1.6;}.demo-toolbar{flex-wrap:wrap;margin:18px 0;justify-content:flex-start;}
.demo-toolbar select,.demo-toolbar input{font:inherit;font-size:13px;padding:11px 12px;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-surface);color:var(--demo-ink);max-width:100%;}
.demo-toolbar input{flex:1;min-width:150px;}.demo-list{border-top:1px solid var(--demo-border);}
.demo-row{padding:16px 8px;border-bottom:1px solid var(--demo-border);min-height:68px;}.demo-label{min-width:0;display:flex;align-items:center;gap:12px;}.demo-label strong{overflow-wrap:anywhere;font-size:14px;}.demo-label i{color:var(--demo-gold);width:20px;text-align:center;flex-shrink:0;}
.demo-child{margin-left:22px;border-left:1px solid var(--demo-border);padding-left:14px;}.demo-state{font-size:11px;color:var(--demo-muted);margin-top:5px;}.demo-toggle{display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:12px;cursor:pointer;}.demo-toggle input{appearance:none;width:34px;height:20px;background:var(--demo-muted);border-radius:20px;position:relative;cursor:pointer;}.demo-toggle input:after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;top:3px;left:3px;background:var(--demo-surface);transition:transform .15s;}.demo-toggle input:checked{background:var(--demo-open);}.demo-toggle input:checked:after{transform:translateX(14px);}
.demo-btn{font:inherit;font-size:13px;font-weight:700;padding:10px 14px;border:1px solid var(--demo-border);border-radius:6px;background:var(--demo-surface);color:var(--demo-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;}.demo-btn:hover{background:var(--demo-soft);}.demo-btn.primary{background:var(--demo-ink);color:var(--demo-surface);border-color:var(--demo-ink);}.demo-btn:disabled{opacity:.6;cursor:wait;}.demo-entry-btn{width:100%;margin-top:12px;}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}.demo-card{border:1px solid var(--demo-border);border-radius:8px;background:var(--demo-surface);padding:22px;text-align:left;min-height:160px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;cursor:pointer;color:var(--demo-ink);font:inherit;}.demo-card:hover{border-color:var(--demo-gold);}.demo-card>i{font-size:28px;color:var(--demo-gold);}.demo-card strong{font-size:15px;overflow-wrap:anywhere;}.demo-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--demo-muted);}.demo-badge.open{color:var(--demo-open);}.demo-empty{padding:32px 0;color:var(--demo-muted);}
.demo-overlay{position:fixed;inset:0;z-index:200000;background:var(--demo-ink);background:color-mix(in srgb,var(--demo-ink) 75%,transparent);display:flex;align-items:center;justify-content:center;padding:20px;}.demo-dialog{width:min(440px,100%);border-radius:8px;background:var(--demo-surface);padding:28px;box-shadow:var(--demo-shadow);color:var(--demo-ink);}.demo-dialog h2{margin:0 0 12px;font-size:22px;}.demo-dialog input{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--demo-border);border-radius:6px;font:inherit;margin:8px 0 14px;}.demo-dialog .demo-heading{margin-bottom:12px;}.demo-error{color:var(--demo-muted);font-size:13px;margin-bottom:12px;}.demo-video-dialog{width:min(960px,100%);}.demo-video-stage{aspect-ratio:16/9;background:var(--demo-ink);position:relative;}.demo-video-stage iframe,.demo-video-stage video{width:100%;height:100%;border:0;}.demo-watermark{position:absolute;top:8%;left:6%;font-size:12px;color:var(--demo-surface);pointer-events:none;text-shadow:0 1px 3px var(--demo-ink);}.demo-title-link{border:0;background:none;font:inherit;color:inherit;text-align:left;padding:0;cursor:pointer;}.demo-summary{font-size:13px;color:var(--demo-muted);margin:10px 0;}
.demo-lesson-card{padding:0;overflow:hidden;gap:0;}.demo-thumbnail{display:block;position:relative;aspect-ratio:16/9;width:100%;background:var(--demo-ink);overflow:hidden;}.demo-thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}.demo-thumbnail-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--demo-gold);font-size:40px;}.demo-play-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--demo-ink) 85%,transparent);color:var(--demo-surface);display:flex;align-items:center;justify-content:center;z-index:2;}.demo-duration{position:absolute;bottom:10px;right:10px;background:var(--demo-ink);color:var(--demo-surface);font-size:11px;padding:4px 6px;border-radius:4px;z-index:2;}.demo-lesson-info{padding:16px;display:flex;flex-direction:column;gap:10px;width:100%;box-sizing:border-box;}.demo-lesson-info .demo-kicker{margin:0;}
@media(max-width:900px){#demoPage .demo-portal-sidebar{display:none;}#demoPage .demo-menu-expanded .demo-portal-sidebar{display:flex;width:220px;min-width:220px;position:absolute;top:0;bottom:0;left:0;z-index:110;}.demo-mobile-menu{display:inline-flex;}#demoPage .header{padding:12px 16px;height:auto;min-height:70px;}#demoPage .header-actions{gap:8px;}#demoPage .user-chip>div:not(.avatar){display:none;}#demoPage .content{padding:20px 16px;}#demoPage .course-header{flex-wrap:wrap;}#demoPage .ch-info{min-width:160px;}#demoPage .demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:700px){.demo-child{margin-left:8px;padding-left:8px;}.demo-toggle span{display:none;}.demo-top h1{font-size:22px;}.demo-row{gap:8px;}}
@media(max-width:420px){.demo-grid,#demoPage .demo-grid{grid-template-columns:1fr;}}
@media(prefers-reduced-motion:reduce){.demo-toggle input:after{transition:none;}}