*{box-sizing:border-box}:root{color:#404040;background:#f6f8fb;font-family:PingFang SC,Microsoft YaHei,Arial,sans-serif;font-size:16px}body{background:#f6f8fb;margin:0}.page{min-height:100vh}.topbar{z-index:2;background:#fff;justify-content:center;align-items:center;height:82px;display:flex;position:sticky;top:0;box-shadow:0 6px 8px #c7c7c745}.topbar-inner{justify-content:space-between;align-items:center;width:1200px;display:flex}.logo{object-fit:contain;width:auto;height:40px}.user{color:#535353;align-items:center;gap:12px;font-size:18px;display:flex}.user-avatar{object-fit:cover;border-radius:50%;width:40px;height:40px}.shell{max-width:1200px;margin:24px auto 31px}.course-summary{background:#fff;align-items:center;height:118px;margin-bottom:15px;display:flex;box-shadow:0 6px 21px #c7c7c733}.course-cover{background-position:50%;background-size:cover;border-radius:8px;flex:none;justify-content:center;align-items:center;width:210px;height:118px;display:flex}.course-cover span{color:#fff;text-align:center;text-shadow:0 2px 3px #0f3bbc5c;max-height:66px;padding:0 12px;font-size:23px;font-weight:700;line-height:33px;overflow:hidden;transform:skew(-5deg)}.course-meta{flex:1;min-width:0;padding-left:46px}.course-line{align-items:flex-start;display:flex}.course-meta h1{color:#3c3c3c;margin:0;font-size:20px;font-weight:400}.date{color:#565656;margin:6px 0 0 20px;font-size:16px}.meta-row{color:#565656;flex-wrap:wrap;gap:33px;margin-top:10px;font-size:13px;display:flex}.meta-row b{color:#ed7248;background:#fdf7f4;padding:3px 9px;font-weight:500}.meta-row .gold{color:#f2af60;background:#fef7ec}.progress{color:#50be41;white-space:nowrap;padding-right:63px;font-size:18px}.catalog{background:#fff;border-radius:12px;min-width:1200px;margin-bottom:10px;padding:0 30px 20px;box-shadow:0 6px 8px #c7c7c745}.catalog-heading{padding-top:14px}.catalog-heading h2{color:#000;margin:0;font-size:20px;line-height:39px}.heading-line{background:#f6f6f6;height:1px;margin-bottom:19px;position:relative}.heading-line:before{content:"";background:#cd3029;width:80px;height:2px;display:block;position:absolute;top:-1px}.stage{border-radius:20px;margin-bottom:15px;overflow:hidden;box-shadow:0 6px 8px #c7c7c733}.stage-header{color:#fff;text-align:left;cursor:pointer;background:#ff7d82 url(/images/catalog-bg.png) 50%/cover no-repeat;border:0;justify-content:space-between;align-items:center;width:100%;height:66px;padding:0 37px 0 32px;font-size:20px;display:flex}.items{background:#fff}.course-item{cursor:pointer;border-bottom:1px solid #f7f7f7;justify-content:space-between;align-items:center;width:1077px;min-height:81px;margin:0 auto;display:flex}.course-item:hover{background:#fdf8f8}.course-name{color:#3c3c3c;align-items:center;gap:16px;min-width:0;font-size:18px;display:flex}.course-name svg{color:#ff919a;fill:#ffb0b5;flex:none}.course-name small{color:#c7c7c7;margin-left:15px;font-size:16px}.learn,.wait{color:#d74743;cursor:pointer;white-space:nowrap;background:#fff;border:2px solid #d3524d;border-radius:19px;width:124px;height:41px;font-size:16px}.wait{color:#fff;background:#cacaca;border:0;border-radius:50px;height:39px}.toast{color:#fff;z-index:5;background:#30343a;border-radius:4px;padding:11px 20px;font-size:14px;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 5px 18px #b8bcc0}@media (width<=1240px){.topbar-inner{width:calc(100% - 40px)}.shell{margin:24px 20px}.catalog{min-width:0}.course-item{width:calc(100% - 64px)}}@media (width<=700px){.topbar{height:64px}.topbar-inner{width:calc(100% - 32px)}.logo{height:31px}.user{gap:7px;font-size:14px}.user-avatar{width:34px;height:34px}.shell{margin:14px 10px}.course-summary{flex-wrap:wrap;align-items:flex-start;gap:13px;height:auto;min-height:145px;padding:16px}.course-cover{width:135px;height:74px}.course-cover span{font-size:13px;line-height:19px}.course-meta{width:calc(100% - 148px);padding-left:0}.course-line{display:block}.course-meta h1{margin-top:3px;font-size:15px}.date{margin:5px 0;font-size:12px}.meta-row{margin-top:0;font-size:11px;line-height:27px;display:block}.meta-row span{display:block}.meta-row b{padding:4px 6px}.progress{margin-top:102px;padding:0;font-size:14px;position:absolute;right:25px}.catalog{border-radius:10px;padding:0 12px 14px}.catalog-heading h2{font-size:18px}.stage-header{height:53px;padding:0 18px;font-size:15px}.course-item{gap:8px;width:calc(100% - 20px);height:auto;min-height:69px}.course-name{gap:8px;font-size:14px;line-height:20px}.course-name small{margin-left:2px;font-size:11px}.learn,.wait{width:auto;min-width:74px;height:33px;padding:0 10px;font-size:12px}}.logo-button{cursor:pointer;background:0 0;border:0;padding:0;line-height:0}.logout-icon{color:#9a9a9a;cursor:pointer;background:0 0;border:0;padding:3px}.portal-layout{align-items:flex-start;gap:24px;max-width:1200px;margin:24px auto 0;display:flex}.side-nav{background:#fff;border-radius:4px;flex:none;width:220px;overflow:hidden;box-shadow:0 6px 8px #c7c7c72e}.side-item{color:#3c3c3c;cursor:pointer;text-align:left;background:#fff;border:0;border-left:4px solid #0000;align-items:center;gap:14px;width:100%;height:60px;padding:0 18px;font-size:16px;display:flex}.side-item svg:first-child{color:#aaa}.side-item svg:last-child{color:#bbb;margin-left:auto}.side-item.active{color:#cd3029;background:#fff7f7;border-left-color:#cd3029;font-weight:600}.side-item.active svg:first-child{color:#cd3029}.portal-main{flex:1;min-width:0}.class-content,.personal-page{background:#fff;border-radius:4px;padding:24px 20px 30px;box-shadow:0 6px 8px #c7c7c726}.section-title{color:#000;border-bottom:1px solid #f1f1f1;font-size:20px;font-weight:700}.section-title span{border-bottom:2px solid #cd3029;padding-bottom:8px;display:inline-block}.course-tabs{gap:12px;margin-top:20px;display:flex}.tab-btn{color:#3c3c3c;cursor:pointer;background:#fff;border:1px solid #cd3029;border-radius:16px;min-width:96px;height:32px;padding:0 14px}.tab-btn small{color:#9a9a9a}.tab-btn.active{color:#fff;background:linear-gradient(#ec5f67,#eb4e54);border-color:#0000}.tab-btn.active small{color:#ffffffd9}.course-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px;display:grid}.course-card{background:#fff;border-radius:8px;flex-direction:column;transition:transform .2s;display:flex;overflow:hidden;box-shadow:0 1px 7px #c7c7c733,0 6px 8px #c7c7c733}.course-card:hover{transform:translateY(-3px)}.card-cover{aspect-ratio:237/134;background-position:50%;background-size:cover;justify-content:center;align-items:center;display:flex;position:relative}.card-cover:after{content:"";background:linear-gradient(#0000 50%,#00000059);position:absolute;inset:0}.card-cover span{z-index:1;color:#fff;text-align:center;text-shadow:0 2px 3px #0006;padding:12px;font-size:20px;font-weight:700;line-height:28px;position:relative}.card-info{flex:1;padding:14px 16px 10px}.card-head{color:#3c3c3c;flex-direction:column;gap:4px;margin-bottom:6px;padding-right:70px;font-size:13px;display:flex;position:relative}.card-head em{color:#9f9f9f;font-style:normal;position:absolute;top:2px;right:0}.card-head em.ongoing{color:#50be41}.card-period{color:#3c3c3c;margin:0 0 10px;font-size:13px;font-weight:600}.card-roles{flex-direction:column;gap:6px;font-size:12px;display:flex}.card-roles b{color:#ed7248;background:#fdf7f4;border-radius:3px;padding:2px 8px;font-weight:500}.card-actions{justify-content:space-between;align-items:center;padding:7px 16px 14px;display:flex}.card-actions button{color:#fff;cursor:pointer;background:#eb5b63;border:0;border-radius:50px;padding:8px 16px}.card-actions span{color:#888;font-size:12px}.personal-page{min-height:480px}.profile-card{background:#fff7f7;border-radius:8px;align-items:center;gap:18px;margin-top:26px;padding:24px;display:flex}.profile-card img{border-radius:50%;width:72px;height:72px}.profile-card h2{margin:0 0 8px;font-size:20px}.profile-card p{color:#888;margin:0}.profile-card button{color:#cd3029;background:#fff;border:1px solid #cd3029;border-radius:18px;margin-left:auto;padding:8px 20px}.settings-list{border-top:1px solid #eee;margin-top:20px}.settings-list button{color:#444;text-align:left;cursor:pointer;background:#fff;border:0;border-bottom:1px solid #eee;justify-content:space-between;width:100%;padding:18px 8px;display:flex}.learning-page{background:#fff;min-height:560px;padding:20px}.video-placeholder{color:#fff;background:#25282e;flex-direction:column;justify-content:center;align-items:center;height:500px;display:flex}.video-placeholder svg{color:#ff5861}.video-placeholder h2{margin:20px 0 8px}.video-placeholder p{color:#bbb}.login-page{background:#f6f8fb;min-height:100vh}.login-brand{color:#fff;background:linear-gradient(135deg,#c92d22,#e54730);flex-direction:column;justify-content:center;align-items:center;height:240px;display:flex}.login-brand img{filter:brightness(0)invert();width:auto;height:58px;margin-bottom:18px}.login-brand strong{font-size:24px}.login-brand small{opacity:.85;margin-top:10px;font-size:14px}.login-panel{background:#fff;width:420px;margin:0 auto;padding:34px 32px 28px}.login-panel h1{margin:0;font-size:25px}.login-panel>p{color:#888;margin:12px 0 28px}.login-tabs{border-bottom:1px solid #eee;gap:32px;margin-bottom:26px;display:flex}.login-tabs>*{padding:0 0 13px}.login-tabs b{color:#c92d2d;border-bottom:2px solid #c92d2d}.login-tabs span{color:#777}.login-panel label{color:#555;margin:18px 0 0;font-size:14px;display:block}.login-panel input{width:100%;height:42px;font:inherit;border:1px solid #ddd;border-radius:7px;margin-top:8px;padding:0 13px;display:block}.password-field{position:relative}.password-field input{padding-right:90px}.password-field a{color:#de5148;font-size:13px;position:absolute;top:14px;right:13px}.login-submit{color:#fff;cursor:pointer;background:#d83329;border:0;border-radius:6px;width:100%;height:43px;margin-top:24px;font-size:16px}.login-page footer{text-align:center;color:#999;margin-top:22px;font-size:13px}.detail-standalone{max-width:1200px;margin:24px auto 31px}.detail-standalone .detail-page,.detail-standalone .course-summary{width:100%}@media (width<=900px){.portal-layout{gap:12px;margin:14px 12px}.side-nav{width:175px}.course-list{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog{min-width:0}.course-item{width:calc(100% - 20px)}}@media (width<=640px){.portal-layout{display:block}.side-nav{width:100%;margin-bottom:12px;display:flex}.side-item{justify-content:center;height:48px}.side-item svg:last-child{display:none}.course-list{grid-template-columns:1fr}.class-content,.personal-page{padding:18px 12px}.login-panel{width:100%;max-width:420px}.course-summary{margin-bottom:12px}}