:root{--paper:#f7f6f4;--ink:#29283d;--muted:#89889d;--line:#efedf0;--violet:#7765d8;--coral:#e99274;--green:#5baf8a}*{box-sizing:border-box}body{margin:0;background:#e9e8e8;color:var(--ink);font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif}.app-shell{position:relative;max-width:430px;height:min(920px,100dvh);min-height:690px;margin:0 auto;background:var(--paper);overflow:hidden;box-shadow:0 18px 60px #3030402a}.topbar{height:74px;display:flex;align-items:center;padding:0 22px;background:#fff;gap:11px;border-bottom:1px solid #f0eef0}.brand-mark{width:40px;height:40px;border-radius:14px;background:#eeeaff;color:var(--violet);display:grid;place-items:center;font-size:21px}.brand-copy{display:grid;line-height:1.1;flex:1}.brand-copy strong{font-size:15px;font-weight:800}.brand-copy span{font-size:8px;color:#a19db5;letter-spacing:1.5px;margin-top:5px}.icon-button,.avatar,.round-action{border:0;background:transparent;color:#77758b;position:relative}.icon-button{font-size:19px}.icon-button b{position:absolute;width:6px;height:6px;background:#ef7378;border:1px solid #fff;border-radius:50%;top:1px;right:0}.avatar{background:#eeeaff;color:#7160cc;border-radius:50%;width:31px;height:31px;font-weight:700}.screen-area{height:calc(100% - 139px);overflow:auto;padding:18px 20px 20px;scrollbar-width:none}.screen-area::-webkit-scrollbar{display:none}.greeting{display:flex;justify-content:space-between;align-items:center;margin:2px 0 16px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#aaa5b8}.greeting h1{font-size:21px;margin:5px 0 2px;font-weight:800;letter-spacing:-.6px}.greeting h1 span{font-size:16px}.greeting p{font-size:11px;color:var(--muted);margin:0}.greeting p strong{color:var(--violet)}.round-action{width:36px;height:36px;border-radius:12px;background:#fff;box-shadow:0 3px 12px #25203c0c;font-size:15px}.hero-card{height:212px;border-radius:21px;overflow:hidden;position:relative;background:#554854;color:#fff;box-shadow:0 10px 22px #503f4a25}.hero-card>img,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{background:linear-gradient(90deg,rgba(32,28,45,.79),rgba(45,37,54,.32) 66%,rgba(37,29,46,.06)),linear-gradient(0deg,rgba(35,30,43,.4),transparent 60%)}.hero-topline{position:absolute;left:15px;right:15px;top:14px;display:flex;justify-content:space-between;font-size:9px}.live{border:1px solid #ffffff66;padding:5px 8px;border-radius:20px;background:#ffffff17}.live i{display:inline-block;width:5px;height:5px;border-radius:100%;background:#90ecb5;margin-right:4px}.hero-copy{position:absolute;left:17px;top:66px}.hero-copy small{font-size:8px;letter-spacing:1.6px;opacity:.75;font-weight:700}.hero-copy h2{font-size:21px;line-height:1.38;margin:7px 0 5px;font-weight:800}.hero-copy p{font-size:10px;opacity:.83;margin:0}.hero-play{position:absolute;right:15px;bottom:36px;border:1px solid #ffffff85;background:#ffffff27;color:white;width:35px;height:35px;border-radius:50%;font-size:18px}.hero-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff37}.hero-progress span{display:block;width:35%;height:100%;background:#d6c9ff}.hero-foot{position:absolute;right:15px;bottom:12px;font-size:9px;opacity:.8}.hero-foot b{margin-left:6px}.section-head{display:flex;align-items:end;justify-content:space-between;margin:23px 1px 11px}.section-head h2{font-size:16px;font-weight:800;margin:4px 0 0}.link-button{border:0;background:none;color:var(--violet);font-size:10px;font-weight:700;padding:5px 0}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.stat-card{height:112px;border-radius:16px;padding:12px 10px;position:relative;overflow:hidden}.stat-card>span{display:block;font-size:9px;color:#78768b}.stat-card>b{font-size:23px;display:block;margin:5px 0 4px;line-height:1}.stat-card>b small{font-size:10px;color:#8c899b;font-weight:500}.stat-card em{font-size:8px;font-style:normal;color:#8d879a;white-space:nowrap}.stat-card em i{margin-right:2px}.lavender{background:#efedff}.lavender em{color:#7866d5}.peach{background:#fff0e9}.peach em{color:#cf896d}.mint{background:#e8f5ef}.mint em{color:#4c9f78}.spark{position:absolute;right:7px;bottom:9px;height:18px;display:flex;align-items:end;gap:3px;opacity:.44}.spark i{width:3px;border-radius:3px;background:#796ad3}.spark i:nth-child(1){height:5px}.spark i:nth-child(2){height:9px}.spark i:nth-child(3){height:7px}.spark i:nth-child(4){height:14px}.spark i:nth-child(5){height:10px}.spark i:nth-child(6){height:17px}.spark i:nth-child(7){height:13px}.ring{position:absolute;right:8px;bottom:9px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:7px;color:#b46647;border:3px solid #e8bcaa;border-top-color:#d88968}.schedule-head{margin-top:23px}.date-chip{border:1px solid #e9e6ee;background:#fff;color:#767387;border-radius:9px;padding:7px 9px;font-size:9px}.date-chip i:first-child{margin-right:4px;color:var(--violet)}.date-chip i:last-child{margin-left:5px}.schedule-list{background:#fff;border-radius:16px;padding:3px 11px;box-shadow:0 5px 18px #29203908}.lesson{display:grid;grid-template-columns:41px 12px 1fr;min-height:84px;padding-top:13px}.lesson time{font-size:10px;font-weight:800;color:#615d75}.lesson time small{display:block;color:#aaa6b7;font-size:8px;font-weight:500;margin-top:3px}.timeline{position:relative}.timeline:before{content:"";position:absolute;top:4px;left:4px;width:6px;height:6px;border-radius:50%;background:#d7d3df;z-index:2}.timeline:after{content:"";position:absolute;top:10px;bottom:-5px;left:6px;width:1px;background:#e8e5ed}.lesson:last-child .timeline:after{display:none}.lesson.active .timeline:before{background:#7968d9;box-shadow:0 0 0 4px #edeaff}.lesson-info{padding:0 0 12px 3px;border-bottom:1px solid #f3f1f4}.lesson:last-child .lesson-info{border:0}.lesson-title{display:flex;justify-content:space-between;gap:4px;align-items:center}.lesson-title strong{font-size:10px}.tag{font-size:8px;color:#9995a8;background:#f5f4f6;border-radius:5px;padding:4px 6px;white-space:nowrap}.live-tag{background:#eeeaff;color:#7160cc}.lesson-info p{font-size:8px;color:#9793a4;margin:7px 0 0}.lesson-info p i{color:#a8a3b5}.lesson-info p span{margin:0 4px}.lesson-actions{display:flex;gap:7px;margin-top:9px}.lesson-actions button{border:0;background:#f3f0ff;color:#7160cc;border-radius:7px;padding:6px 9px;font-size:8px}.lesson-actions button+button{background:#f7f6f8;color:#777387}.lower-head{margin-top:22px}.student-strip{background:#fff;padding:0 12px;border-radius:15px}.student-strip article{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid #f2f0f3}.student-strip article:last-child{border:0}.student-avatar{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-size:13px;font-weight:800}.coral{background:#fff0e9;color:#d37d63}.blue{background:#edf1ff;color:#6481cf}.student-strip article>div:nth-child(2){flex:1}.student-strip strong{font-size:10px}.student-strip small{display:block;font-size:8px;color:#9a96a7;margin-top:4px}.student-strip article>button{width:28px;height:28px;border:0;border-radius:9px;background:#f5f3fb;color:#7868d2}.pill-warning,.pill-blue{font-size:7px;padding:3px 5px;border-radius:5px;margin-left:4px;font-weight:600}.pill-warning{color:#d1886c;background:#fff1e8}.pill-blue{color:#6d7ec0;background:#eff1ff}.quick-tools{display:grid;grid-template-columns:repeat(4,1fr);margin:17px 0 0;background:#fff;border-radius:15px;padding:12px 3px}.quick-tools button{border:0;background:none;color:#78738a;font-size:8px;display:grid;justify-items:center;gap:5px}.quick-tools i{font-size:17px;color:#7969d5}.bottom-space{height:16px}.bottom-nav{height:65px;position:absolute;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #efedf1;display:flex;justify-content:space-around;padding:7px 7px max(7px,env(safe-area-inset-bottom));z-index:3}.bottom-nav button{position:relative;border:0;background:transparent;color:#aaa7b6;display:grid;justify-items:center;align-content:center;gap:3px;font-size:8px;min-width:48px}.bottom-nav button i{font-size:17px}.bottom-nav button.selected{color:#7665d3;font-weight:700}.bottom-nav button b{position:absolute;top:0;right:6px;background:#ec7c79;color:#fff;border-radius:8px;font-size:7px;padding:1px 4px}.toast-note{position:absolute;left:50%;bottom:80px;transform:translate(-50%,15px);opacity:0;pointer-events:none;transition:.25s;background:#29283d;color:white;border-radius:9px;padding:10px 14px;font-size:10px;z-index:8;white-space:nowrap}.toast-note.show{opacity:1;transform:translate(-50%,0)}.modal-backdrop{position:absolute;inset:0;background:#24203365;display:none;align-items:flex-end;z-index:9}.modal-backdrop.open{display:flex}.app-modal{position:relative;background:#fff;width:100%;border-radius:22px 22px 0 0;padding:27px 22px 30px;min-height:235px;max-height:80%;overflow:auto;animation:rise .22s ease}.modal-close{position:absolute;right:17px;top:16px;border:0;background:#f4f2f6;color:#686477;border-radius:50%;width:29px;height:29px}.modal-title{font-weight:800;font-size:17px;margin:0 34px 7px 0}.modal-sub{font-size:10px;color:#918d9d;margin-bottom:16px}.modal-content-list{display:grid;gap:8px}.modal-row{display:flex;align-items:center;gap:9px;background:#f8f7fa;border-radius:10px;padding:10px;font-size:10px}.modal-row i{font-size:15px;color:var(--violet)}.modal-primary{width:100%;border:0;background:#7665d3;color:#fff;border-radius:10px;padding:11px;font-size:11px;font-weight:700;margin-top:15px}.student-attendance{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0edf3;font-size:11px}.student-attendance label{color:#5baf8a}.form-row{display:grid;gap:6px;margin:11px 0}.form-row label{font-size:9px;color:#858194}.form-row input,.form-row select{width:100%;border:1px solid #ece9f0;border-radius:9px;padding:10px;font:inherit;font-size:11px;color:var(--ink)}@keyframes rise{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}@media(min-width:600px){.app-shell{height:min(900px,calc(100vh - 40px));min-height:690px;margin:20px auto;border-radius:26px}.screen-area{height:calc(100% - 139px)}.modal-backdrop{border-radius:26px}.app-modal{border-radius:20px 20px 0 0}}@media(max-height:740px){.hero-card{height:185px}.stat-card{height:102px}.lesson{min-height:75px}}

.video-preview{height:145px;border-radius:14px;background:linear-gradient(135deg,#343344,#7665d3);color:#fff;display:grid;place-content:center;justify-items:center}.video-preview i{font-size:38px}.video-preview p{margin:7px 0 1px;font-size:11px}.video-preview small{font-size:8px;opacity:.72}
/* D 头部 + 类型 3 入口卡片 + 类型 7 独立视频卡 */
.topbar.floating-header{height:58px;margin:10px 14px 0;padding:0 11px;border:1px solid #eeebf4;border-radius:16px;box-shadow:0 5px 16px #35294b0c;gap:8px}.floating-header .brand-mark{width:34px;height:34px;border-radius:11px}.floating-header .brand-copy strong{font-size:12px}.floating-header .brand-copy span{font-size:6px;letter-spacing:1px;margin-top:3px}.search-head{height:32px;width:33px;border:0;border-radius:10px;background:#f7f5fa;color:#8176a4;font-size:13px}.floating-header .icon-button{font-size:17px}.floating-header .avatar{width:28px;height:28px}.screen-area{height:calc(100% - 139px)}.module-head{margin-top:14px}.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.module-card{height:112px;border:0;border-radius:15px;padding:10px 11px;position:relative;text-align:left;overflow:hidden;color:#343147}.module-card .module-icon{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:#ffffffbd}.module-count{position:absolute;right:9px;top:11px;font-size:7px;opacity:.74}.module-card strong{display:block;font-size:11px;margin-top:8px}.module-card small{display:block;font-size:7px;opacity:.72;margin-top:3px}.module-arrow{position:absolute;right:10px;bottom:10px;font-size:10px;opacity:.65}.module-violet{background:#eeeaff;color:#6558a5}.module-peach{background:#fff0e8;color:#ac7058}.module-blue{background:#e9f0ff;color:#5c76ae}.module-green{background:#e9f4ed;color:#5a8369}.video-section{margin-top:17px}.video-section .section-head{margin:0 1px 8px}.video-duration{font-size:8px;color:#9a95a8;background:#f0edf4;border-radius:7px;padding:5px 7px}.video-tile{width:88%;height:112px;margin:0 auto;display:block;border:0;padding:0;border-radius:15px;position:relative;overflow:hidden;text-align:left;background:#443642;box-shadow:0 7px 18px #382b4318}.video-tile img{width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:brightness(.75)}.video-overlay{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:28px}.video-overlay i{width:42px;height:42px;display:grid;place-items:center;background:#ffffff38;border:1px solid #ffffffad;border-radius:50%;padding-left:3px}.video-caption{position:absolute;left:11px;bottom:9px;color:white;display:grid;gap:2px}.video-caption b{font-size:9px}.video-caption small{font-size:7px;opacity:.8}.video-section+.section-head{margin-top:18px}

/* Usable navigation sizing and viewport-contained mockup preview. */
.phone-shell,.app-shell{min-height:0!important}
.bottom-nav,.app-nav{box-sizing:border-box;min-height:4.2rem;padding-block:.42rem max(.48rem,env(safe-area-inset-bottom))}
.bottom-nav button,.bottom-nav a,.app-nav button,.app-nav a{box-sizing:border-box;min-width:2.75rem;min-height:2.85rem;padding:.22rem .12rem;gap:.24rem;font-size:.68rem;line-height:1.15;touch-action:manipulation}
.bottom-nav button>i,.bottom-nav a>i,.app-nav button>i,.app-nav a>i{font-size:1.3rem;line-height:1}
.bottom-nav button.scan,.bottom-nav button.nav-center{min-width:2.9rem;min-height:2.9rem}
.bottom-nav button.scan>i,.bottom-nav button.nav-center>i{font-size:1.35rem}.bottom-nav button.scan>span,.bottom-nav button.nav-center>span{font-size:.58rem}

.phone-shell,.app-shell{position:relative}.modal-wrap,.modal-backdrop{background:rgba(20,32,45,.34);backdrop-filter:none}.modal,.app-modal{max-height:68%}
