:root{--red:#c91533;--red-dark:#ad0c28;--text:#1d232a;--sub:#626a75;--muted:#8b929c;--line:#e8ebee;--surface:#fff;--bg:#f7f8fa;--tint:#fff1f3;--green:#19785e;--ok:#eaf7f1;--shadow:0 10px 32px rgba(17,32,47,.035);--rad:20px;--shell:1160px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Huawei Sans","HarmonyOS Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}button,input,a{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(201,21,51,.35);outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.5}p{line-height:1.55}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(26px,4vw,36px);letter-spacing:-.055em;font-weight:720;line-height:1.15;margin-bottom:10px}h2{font-size:22px;letter-spacing:-.035em}h3{font-size:17px;letter-spacing:-.02em}.small{font-size:13px}.muted{color:var(--sub)}.label{font-size:11px;font-weight:750;letter-spacing:.095em;text-transform:uppercase;color:var(--red)}.eyebrow{font-size:12px;font-weight:800;color:var(--red);letter-spacing:.085em;text-transform:uppercase}.hidden{display:none!important}
.app-shell{max-width:1600px;min-height:100vh;margin:auto;display:flex}.sidebar{width:260px;flex:0 0 260px;background:#fff;border-right:1px solid var(--line);min-height:100vh;padding:30px 19px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:12px;margin-bottom:48px;padding-left:12px}.brand-mark{width:28px;height:28px;position:relative;display:inline-block;flex:0 0 auto}.brand-mark i{display:block;position:absolute;width:10px;height:17px;background:var(--red);border-radius:9px 2px 6px 2px;transform-origin:50% 90%;left:9px;top:1px}.brand-mark i:nth-child(1){transform:rotate(-52deg)}.brand-mark i:nth-child(2){transform:rotate(-18deg)}.brand-mark i:nth-child(3){transform:rotate(18deg)}.brand-mark i:nth-child(4){transform:rotate(52deg)}.brand-type{display:flex;flex-direction:column;gap:1px;line-height:1}.brand-type strong{font-size:19px;letter-spacing:.035em}.brand-type small{font-size:10px;letter-spacing:.22em;font-weight:800;color:var(--sub)}.side-caption{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.13em;padding:0 12px;margin-bottom:14px}.side-nav{display:flex;flex-direction:column;gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:13px;padding:13px 14px;border:none;background:none;border-radius:12px;color:#535e68;text-align:left;font-size:14px;font-weight:640}.nav-item svg{width:19px;height:19px}.nav-item.active{color:var(--red);background:#fff1f3}.nav-item:not(.active):hover{background:#f5f6f8}.side-bottom{margin-top:auto;border-top:1px solid var(--line);padding:20px 12px 0;display:grid;gap:10px;color:var(--muted);font-size:10px;line-height:1.5}.side-version{font-weight:780;letter-spacing:.04em}
.app-main{flex:1;min-width:0}.topbar{height:78px;display:flex;justify-content:space-between;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:0 clamp(20px,5vw,54px)}.desktop-location{font-size:14px;font-weight:700}.mobile-brand{display:none;align-items:center;gap:5px;font-size:14px}.mobile-brand strong{font-size:16px;letter-spacing:.015em}.mobile-brand>span:last-child{font-size:10px;font-weight:800;letter-spacing:.13em;color:var(--sub)}.topbar-status{border:1px solid var(--line);background:white;padding:9px 11px;border-radius:40px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:680}.topbar-status svg{height:15px;width:15px}.status-dot{width:7px;height:7px;border-radius:100%;background:var(--red)}.main-content{padding:36px clamp(20px,5vw,54px) 84px;max-width:1220px;margin:0 auto}.page-title{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px}.page-title p{margin-bottom:0;color:var(--sub);font-size:14px;max-width:620px}.stack{display:grid;gap:18px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:30px 0 14px}.section-heading h2{margin:0}.text-button{border:0;background:none;color:var(--red);font-size:13px;font-weight:700;padding:6px;display:inline-flex;align-items:center;gap:6px}.text-button:hover{text-decoration:underline}.text-button svg{width:15px;height:15px}.hero{border-radius:24px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.55fr);background:#fff;border:1px solid var(--line);min-height:292px;box-shadow:var(--shadow)}.hero-body{padding:36px 34px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px}.hero h1{max-width:520px;margin:0}.hero p{max-width:475px;margin:0;color:var(--sub);font-size:14px}.hero-visual{background:#f3f4f7;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.hero-visual:before{content:"";position:absolute;inset:-90px -120px 0 0;background:radial-gradient(circle at 60% 50%,rgba(229,40,65,.13),transparent 63%)}.hero-logo{font-size:clamp(80px,11vw,156px);line-height:1;font-weight:800;letter-spacing:-.16em;color:#bfc5cb;opacity:.35;transform:rotate(-11deg);padding-right:50px}.hero-mini{position:absolute;bottom:26px;right:25px;background:#fff;border:1px solid var(--line);padding:13px 15px;border-radius:14px;box-shadow:0 12px 40px #1b33410b}.hero-mini strong{display:block;font-size:20px}.hero-mini span{font-size:11px;color:var(--sub)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;padding:12px 17px;border:1px solid transparent;background:#fff;font-size:13px;font-weight:740;white-space:normal;text-align:center;min-height:43px}.btn svg{width:17px;height:17px;flex:none}.btn.primary{background:var(--red);color:white}.btn.primary:hover{background:var(--red-dark)}.btn.secondary{border-color:var(--line);color:var(--text)}.btn.secondary:hover{border-color:#c4cbd3;background:#fafafa}.btn.soft{background:#fff3f5;color:var(--red)}.btn.naked{background:transparent;color:var(--red);padding:10px 4px}.btn.danger{color:var(--red);border-color:#edbdc5}.btn.sm{padding:8px 12px;min-height:35px;font-size:12px}.action-row{display:flex;flex-wrap:wrap;gap:10px}.tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tile{display:flex;align-items:flex-start;gap:15px;padding:23px;min-height:160px;background:#fff;border:1px solid var(--line);border-radius:20px;text-align:left;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}.tile:hover,.lesson-card:hover{transform:translateY(-2px);border-color:#ddd1d4}.tile-icon,.circle-icon{display:grid;place-items:center;border-radius:14px;background:#f7f8fa;color:var(--text);width:45px;height:45px;flex:0 0 auto}.tile-icon.red{background:#fff2f4;color:var(--red)}.tile-icon svg,.circle-icon svg{width:22px;height:22px}.tile-content{display:grid;gap:7px}.tile-title{font-size:16px;font-weight:760}.tile-detail{font-size:13px;color:var(--sub);line-height:1.5}.tile-end{display:flex;align-items:center;gap:4px;color:var(--red);font-size:12px;font-weight:750;margin-top:8px}.tile-end svg{width:14px;height:14px}
.stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.stat-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:17px 19px}.stat-card strong{display:block;font-size:24px;letter-spacing:-.045em}.stat-card span{display:block;font-size:12px;color:var(--sub);margin-top:5px}.surface{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.surface-pad{padding:25px}.source-banner{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:23px;border:1px solid #eed2d7;background:linear-gradient(115deg,#fff,#fff8f9);border-radius:20px}.source-info{display:flex;align-items:center;gap:15px;min-width:0}.source-thumb{width:90px;aspect-ratio:16/9;object-fit:cover;border:1px solid #eee;box-shadow:0 2px 5px #0001;border-radius:6px}.source-info h3{margin:0 0 5px}.source-info p{font-size:12px;color:var(--sub);margin:0}.source-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0}.alert{border:1px solid #e5e9ef;background:#f8f9fa;border-radius:14px;padding:13px 16px;font-size:12px;color:#5f6772;line-height:1.6}.alert.warn{border-color:#eee2c9;background:#fffbf2;color:#746044}.alert strong{color:var(--text)}.lesson-list{display:grid;gap:10px}.lesson-card{width:100%;border:1px solid var(--line);background:#fff;border-radius:16px;padding:17px 19px;display:flex;align-items:center;gap:16px;text-align:left;transition:transform .15s,border-color .15s}.lesson-num{width:46px;height:46px;border:1px solid var(--line);border-radius:13px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#656d78;flex:none}.lesson-card .lesson-content{flex:1;min-width:0;display:grid;gap:5px}.lesson-card strong{font-size:15px}.lesson-card .lesson-content>span{font-size:12px;color:var(--sub)}.lesson-card .lesson-status{font-size:11px;font-weight:710;color:var(--sub);margin-left:auto;min-width:90px;text-align:right}.lesson-card svg{width:18px;height:18px;color:#9aa0aa}.lesson-card.done .lesson-num{border-color:#c6e6da;background:var(--ok);color:var(--green)}.chip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:30px;padding:6px 10px;font-size:11px;font-weight:690;color:#58616b;background:#fff}.chip.red{border-color:#f1d3da;background:#fff4f6;color:var(--red)}.chip.green{border-color:#d3e9df;background:#ecf9f2;color:#167659}.chip svg{height:14px;width:14px}.pills{display:flex;flex-wrap:wrap;gap:7px}.breadcrumbs{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--sub);margin-bottom:23px}.breadcrumbs button{border:0;background:transparent;color:var(--sub);padding:4px 0}.breadcrumbs svg{width:14px;height:14px}.lesson-intro{font-size:16px;color:#424953;line-height:1.65;max-width:790px}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px}.text-card{background:white;border:1px solid var(--line);border-radius:18px;padding:25px}.text-card h3{margin:0 0 17px}.prose-list{display:grid;gap:15px;margin:0;padding:0;list-style:none}.prose-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.65}.prose-list .list-dot{width:6px;height:6px;background:var(--red);border-radius:50%;margin-top:9px;flex-shrink:0}.aside-card{background:#fafafb;border:1px solid var(--line);padding:19px;border-radius:16px}.aside-card h3{margin-bottom:10px;font-size:14px}.aside-card p,.aside-card li{font-size:12px;color:var(--sub);line-height:1.7}.aside-card ul{padding-left:16px}.practice-note{padding:23px;border:1px solid #e8ebee;background:#f9fafb;border-radius:17px}.practice-note .label{margin-bottom:12px;display:block}.practice-note h3{margin:0 0 8px}.practice-note p{font-size:14px;color:#4a535d;line-height:1.7;margin:0}.source-mini{display:flex;align-items:center;gap:11px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;margin-top:10px}.source-mini img{width:105px;aspect-ratio:16/9;object-fit:cover;border-radius:5px;flex:none}.source-mini strong{font-size:12px;display:block}.source-mini span{color:var(--sub);font-size:11px}.source-mini button{margin-left:auto}.quiz-shell{max-width:760px;margin:0 auto}.quiz-progress{height:6px;background:#e9edf0;border-radius:7px;overflow:hidden;margin:20px 0 27px}.quiz-progress>span{height:100%;background:var(--red);display:block;transition:width .25s}.quiz-answers{display:grid;gap:10px;margin:25px 0}.quiz-option{border:1px solid var(--line);border-radius:14px;background:#fff;text-align:left;padding:15px 16px;font-size:14px;display:flex;align-items:center;gap:13px;line-height:1.45}.quiz-option:hover:not(:disabled){border-color:#d3a5af;background:#fffafb}.quiz-option.selected{border:2px solid var(--red);padding:14px 15px;background:#fff7f9}.quiz-option.correct{border-color:#8ac9ad;background:#f0faf5}.quiz-option.incorrect{border-color:#e4a3b1;background:#fff0f3}.quiz-letter{width:26px;height:26px;border-radius:8px;border:1px solid #e0e4e8;color:#606a75;display:grid;place-items:center;font-size:12px;font-weight:760;flex:none}.quiz-feedback{border:1px solid #dce8e1;background:#f7fbf8;border-radius:14px;padding:15px;font-size:13px;color:#425349;line-height:1.65}.quiz-feedback.wrong{border-color:#f2d8de;background:#fff9fa;color:#67444c}.quiz-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px}.result-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:20px;color:var(--green);background:var(--ok);margin-bottom:18px}.result-icon:not(.pass){color:var(--red);background:var(--tint)}.result-icon svg{width:35px;height:35px}.result-score{font-size:48px;letter-spacing:-.06em;font-weight:800;margin:4px 0}.result-summary{border-top:1px solid var(--line);margin-top:24px;padding-top:20px;display:grid;gap:12px}.result-summary-row{font-size:13px;display:flex;justify-content:space-between;gap:12px}.result-summary-row small{color:var(--sub)}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.product-card{border:1px solid var(--line);border-radius:20px;background:white;padding:23px;display:grid;gap:13px;text-align:left}.product-card .tile-icon{width:52px;height:52px}.product-card h3{margin:0}.product-card p{color:var(--sub);font-size:13px;margin:0}.product-card .arrow{justify-self:start;color:var(--red);font-size:12px;font-weight:720}.product-detail .questions{display:grid;gap:12px;padding:0;list-style:none}.product-detail .questions li{display:flex;gap:13px;align-items:flex-start;padding:13px;background:#f8f9fb;border-radius:11px;font-size:14px;line-height:1.5}.product-detail .questions b{color:var(--red);font-size:12px}.product-detail h3{margin:0 0 14px}.configure{display:grid;gap:8px;margin-top:16px}.configure label{font-weight:750;font-size:12px}.configure input{width:100%;min-width:0;border:1px solid var(--line);border-radius:12px;padding:13px 14px;background:#fff;color:var(--text);font-size:13px}.configure .small{color:var(--sub);margin:0}.progress-track{height:8px;background:#e9edf0;border-radius:12px;overflow:hidden}.progress-track div{height:100%;background:var(--red);border-radius:12px}.progress-list{display:grid;gap:15px}.progress-row{display:flex;align-items:center;gap:15px;font-size:13px}.progress-row .p-name{width:200px;flex:none}.progress-row .progress-track{flex:1}.progress-row .p-status{width:84px;text-align:right;color:var(--sub);font-size:11px}.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(20px);padding:12px 18px;background:#242c34;color:#fff;border-radius:12px;box-shadow:0 12px 40px #0003;font-size:13px;z-index:20;opacity:0;transition:all .2s;pointer-events:none;max-width:88vw;text-align:center}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
.bottom-nav{display:none}.modal{position:fixed;inset:0;background:#11151cfa;z-index:30;display:flex;flex-direction:column;color:#fff}.modal-head{height:70px;display:flex;align-items:center;gap:15px;padding:10px 22px;background:#1c2027;border-bottom:1px solid #ffffff25}.modal-head>div{display:flex;flex-direction:column;gap:2px;flex:1}.modal-head strong{font-size:13px}.modal-head small{font-size:11px;color:#adb5be}.modal-head a,.modal-head button{color:#fff}.icon-button{border:0;background:#ffffff13;color:var(--text);width:38px;height:38px;border-radius:12px;display:grid;place-items:center}.icon-button svg{width:19px;height:19px}.slide-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:15px 18px}.slide-stage img{object-fit:contain;max-width:calc(100% - 116px);max-height:100%;border:1px solid #ffffff36;background:white;box-shadow:0 12px 54px #0009}.slide-arrow{width:45px;height:45px;border:1px solid #ffffff38;background:#ffffff17;color:#fff;border-radius:50%;display:grid;place-items:center}.slide-arrow svg{width:24px;height:24px}.slide-bottom{display:flex;align-items:center;gap:12px;padding:14px 20px 23px;background:#1c2027}.slide-bottom input{flex:1;accent-color:var(--red)}.slide-bottom span{font-size:11px;color:#b2bbc5}.slide-bottom .tiny-link{color:white;background:none;border:0;text-decoration:underline;font-size:11px}.bottom-nav{display:none}
@media(max-width:1020px){.sidebar{width:215px;flex-basis:215px;padding:26px 12px}.brand{padding-left:7px}.main-content{padding:28px 24px 85px}.topbar{padding:0 24px}.source-banner{align-items:flex-start;flex-direction:column}.content-grid{grid-template-columns:1fr}}
@media(max-width:760px){.sidebar{display:none}.app-main{width:100%}.topbar{height:62px;padding:0 17px;position:sticky;top:0;z-index:5}.desktop-location{display:none}.mobile-brand{display:flex}.mobile-brand .brand-mark{height:25px;width:26px;transform:scale(.8);transform-origin:left center;margin-right:-7px}.topbar-status{padding:8px 9px;font-size:11px}.main-content{padding:23px 16px calc(110px + env(safe-area-inset-bottom,0px));}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:10;justify-content:space-around;align-items:stretch;background:#fff;border-top:1px solid var(--line);height:calc(67px + env(safe-area-inset-bottom,0px));padding:4px 8px env(safe-area-inset-bottom,0px)}.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:1;border:0;background:none;color:#848b93}.bottom-nav button.active{color:var(--red)}.bottom-nav svg{height:21px;width:21px}.bottom-nav small{font-size:10px;font-weight:650}.hero{grid-template-columns:1fr;min-height:0}.hero-body{padding:27px 24px 30px;min-height:255px;gap:13px}.hero-visual{display:none}.tile-grid,.product-grid{grid-template-columns:1fr}.tile{min-height:0;padding:18px}.stats-row{gap:8px}.stat-card{padding:14px}.stat-card strong{font-size:21px}.stat-card span{font-size:10px}.section-heading{margin-top:24px}.source-banner{padding:17px}.source-thumb{width:74px}.source-actions{width:100%}.source-actions .btn{flex:1}.page-title{align-items:flex-start}.page-title h1{font-size:26px}.lesson-card{padding:14px;gap:11px}.lesson-card .lesson-status{min-width:0;font-size:10px}.lesson-num{height:39px;width:39px}.text-card{padding:19px}.content-grid{gap:12px}.pills{gap:5px}.progress-row .p-name{width:100px;font-size:12px}.progress-row .p-status{width:70px}.modal-head{height:61px;padding:10px 12px}.slide-stage{padding:8px;gap:6px}.slide-stage img{max-width:calc(100% - 60px)}.slide-arrow{height:29px;width:29px;flex:0 0 29px}.slide-arrow svg{width:17px;height:17px}.slide-bottom{padding:13px 14px calc(14px + env(safe-area-inset-bottom,0px))}.slide-bottom span{display:none}}
@media(max-width:420px){.topbar-status span:nth-child(2){display:none}.topbar-status{padding:8px 10px}.lesson-card .lesson-status{display:none}.stat-card strong{font-size:20px}.source-actions .btn{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
