:root{--ink:#14213d;--ink2:#243552;--muted:#718096;--line:#e7ebf3;--bg:#f5f7fb;--card:#fff;--brand:#3157d5;--brand2:#6e55df;--brandSoft:#eef2ff;--good:#16a085;--warn:#e69a24;--bad:#d9534f;--shadow:0 18px 60px rgba(24,39,75,.10)}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}

/* Login */
.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(520px,1.08fr) minmax(430px,.92fr);background:#fff}.login-visual{position:relative;overflow:hidden;padding:42px clamp(42px,6vw,92px);display:flex;flex-direction:column;min-height:100vh;color:#fff;background:linear-gradient(145deg,#173c9f 0%,#3157d5 45%,#654ad2 100%)}.login-visual:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 85%)}.visual-glow{position:absolute;border-radius:50%;filter:blur(4px);pointer-events:none}.visual-glow-one{width:520px;height:520px;right:-150px;top:-170px;background:radial-gradient(circle,rgba(160,185,255,.38),rgba(160,185,255,0) 68%)}.visual-glow-two{width:480px;height:480px;left:-220px;bottom:-220px;background:radial-gradient(circle,rgba(184,125,255,.30),rgba(184,125,255,0) 70%)}.login-brand{position:relative;z-index:3;display:flex;align-items:center;gap:13px}.brand-logo{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:25px;font-weight:900;letter-spacing:-.05em;color:#294ec7;background:#fff;box-shadow:0 10px 30px rgba(8,24,76,.16)}.brand-logo.small{width:39px;height:39px;border-radius:12px;font-size:20px;color:#fff;background:linear-gradient(145deg,var(--brand),var(--brand2));box-shadow:0 8px 20px rgba(49,87,213,.25)}.brand-copy strong,.mobile-brand strong{display:block;font-size:18px}.brand-copy span,.mobile-brand span{display:block;margin-top:2px;font-size:11px;letter-spacing:.08em;opacity:.72}.visual-content{position:relative;z-index:3;margin:auto 0;max-width:720px;padding:70px 0 105px}.visual-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.18em;color:#dce5ff}.visual-kicker:before{content:"";width:24px;height:2px;background:#b9c9ff;border-radius:9px}.visual-content h1{font-size:clamp(44px,5vw,72px);line-height:1.08;letter-spacing:-.05em;margin:20px 0 20px}.visual-content>p{max-width:650px;margin:0;color:#d9e2ff;font-size:17px;line-height:1.8}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px;max-width:680px}.feature-row>div{padding:15px 14px;border:1px solid rgba(255,255,255,.15);border-radius:16px;background:rgba(255,255,255,.08);backdrop-filter:blur(8px)}.feature-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;margin-bottom:12px;background:rgba(255,255,255,.13);font-size:13px;font-weight:900}.feature-row b{display:block;font-size:13px}.feature-row small{display:block;margin-top:4px;color:#ced9ff;font-size:11px}.math-stage{position:absolute;right:0;bottom:0;width:48%;height:38%;pointer-events:none}.math-card{position:absolute;display:flex;align-items:center;gap:8px;padding:12px 15px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:rgba(255,255,255,.10);backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(16,31,86,.18);font-size:15px}.math-card b{font-size:12px;color:#dbe4ff}.math-card i{font-style:normal;color:#b9c8ff}.card-a{right:9%;bottom:26%;transform:rotate(-3deg)}.card-b{right:34%;bottom:8%;transform:rotate(5deg)}.math-ring{position:absolute;display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);border-radius:50%;background:rgba(255,255,255,.07);font-family:Georgia,serif}.ring-a{width:78px;height:78px;right:12%;bottom:4%;font-size:28px}.ring-b{width:54px;height:54px;right:3%;bottom:43%;font-size:20px}.grid-art{position:absolute;width:200px;height:120px;right:40%;bottom:20%;border:1px solid rgba(255,255,255,.12);transform:skewY(-8deg);background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:20px 20px}.visual-footer{position:relative;z-index:3;color:#c4d2fb;font-size:11px;letter-spacing:.03em}
.login-panel{display:grid;place-items:center;padding:54px clamp(34px,6vw,88px);background:linear-gradient(180deg,#fff,#fbfcff)}.auth-wrap{width:min(440px,100%)}.mobile-brand{display:none;align-items:center;gap:11px;margin-bottom:40px}.auth-heading .eyebrow{color:#4561bb}.eyebrow{font-size:11px;font-weight:850;letter-spacing:.16em;margin:0 0 10px;color:#7e8ba0}.auth-heading h2{font-size:34px;letter-spacing:-.035em;margin:0;color:#16233e}.auth-heading p{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.6}.login-role-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0 26px;padding:5px;border:1px solid #e7ebf3;border-radius:16px;background:#f8f9fc}.role-tab{display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:12px;padding:11px 12px;text-align:left;color:#66748c;background:transparent;transition:.2s}.role-tab:hover{color:#314158}.role-tab.active{border-color:#e0e5fb;background:#fff;color:#2448bc;box-shadow:0 5px 18px rgba(38,61,125,.08)}.role-tab-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:12px;font-weight:900;background:#e9edf5;color:#61708a}.role-tab.active .role-tab-icon{color:#fff;background:linear-gradient(145deg,var(--brand),var(--brand2))}.role-tab b{display:block;font-size:13px}.role-tab small{display:block;margin-top:2px;font-size:10px;color:#93a0b4}.auth-card{width:100%}.field{display:block;margin-top:17px}.field>span{display:block;margin-bottom:8px;font-size:13px;font-weight:700;color:#384861}.input-shell{height:50px;display:flex;align-items:center;gap:9px;border:1px solid #dfe5ef;border-radius:13px;padding:0 13px;background:#fff;transition:.2s}.input-shell:focus-within{border-color:#8097e5;box-shadow:0 0 0 4px rgba(49,87,213,.08)}.input-icon{color:#99a6ba;font-size:14px}.input-shell input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:#1e2b45}.input-shell input::placeholder{color:#aab4c4}.password-toggle{border:0;background:transparent;color:#6d7d95;font-size:12px;padding:5px}.login-meta{display:flex;justify-content:space-between;gap:12px;margin:11px 1px 0;color:#8b97a9;font-size:11px}.primary{border:0;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;padding:11px 17px;border-radius:11px;font-weight:750;box-shadow:0 8px 20px rgba(49,87,213,.20)}.wide{width:100%;margin-top:22px;padding:14px 17px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:13px;transition:transform .15s,box-shadow .15s}.wide:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(49,87,213,.26)}.wide:disabled{opacity:.65;cursor:wait;transform:none}.error{color:var(--bad);min-height:20px;margin:10px 0 0;text-align:center;font-size:12px}.login-help{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:22px;padding-top:22px;border-top:1px solid #eef1f6;color:#98a3b5;font-size:11px}.login-help .dot{color:#c5ccd7}

/* App */
.app{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:#111a2c;color:#fff;padding:26px 18px;display:flex;flex-direction:column}.side-brand{display:flex;align-items:center;gap:12px;padding:0 7px 28px}.side-brand b{display:block}.side-brand span{display:block;color:#8090ad;font-size:12px;margin-top:3px}.sidebar nav{display:grid;gap:8px}.nav{border:0;color:#aab5c9;background:transparent;border-radius:12px;padding:12px 14px;text-align:left}.nav.active,.nav:hover{color:#fff;background:#1e2a42}.account-box{margin-top:auto;border-top:1px solid #253149;padding-top:20px;display:flex;align-items:center;gap:10px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#6d5ce7;font-weight:800}.account-copy{min-width:0;flex:1}.account-copy b,.account-copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-copy span{color:#7e8ca5;font-size:11px;margin-top:3px}.icon-btn{border:0;background:transparent;color:inherit;font-size:22px;padding:6px}.main{padding:0 34px 50px;min-width:0}.topbar{height:104px;display:flex;align-items:center;justify-content:space-between}.topbar h2{margin:0;font-size:25px}.search-wrap{width:min(330px,35vw);display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 13px}.search-wrap input{border:0;outline:0;width:100%;background:transparent}.hero{background:linear-gradient(120deg,#3157d5,#5e55df 58%,#745fdf);color:#fff;border-radius:24px;padding:30px 36px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);overflow:hidden;position:relative}.hero:after{content:"";position:absolute;width:260px;height:260px;border:45px solid rgba(255,255,255,.08);border-radius:50%;right:-70px;top:-90px}.hero h1{font-size:32px;margin:8px 0}.hero p{margin:0;opacity:.8}.pill{display:inline-block;font-size:12px;font-weight:800;padding:6px 9px;background:rgba(255,255,255,.16);border-radius:20px}.hero-stat{min-width:120px;text-align:center;z-index:1}.hero-stat strong{display:block;font-size:46px}.hero-stat span{font-size:12px;opacity:.8}.edition-tabs{margin:26px 0 14px;display:flex;gap:8px}.edition-tabs button{border:1px solid var(--line);background:#fff;padding:10px 16px;border-radius:12px;color:#6b778c}.edition-tabs button.active{border-color:#d9d4ff;background:#f0edff;color:#5147cf;font-weight:800}.edition-tabs span{margin-left:6px;background:#edf0f5;border-radius:9px;padding:2px 7px;font-size:11px}.grade-chips{display:flex;gap:8px;overflow:auto;padding:4px 0 18px}.grade-chips button{white-space:nowrap;border:0;background:#e9edf5;color:#5f6b7d;padding:8px 13px;border-radius:20px}.grade-chips button.active{background:#1e2a42;color:#fff}.catalog{display:grid;gap:14px}.grade-card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 5px 18px rgba(30,45,85,.04);overflow:hidden}.grade-head{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.grade-head:hover{background:#fafbfe}.grade-title{display:flex;align-items:center;gap:12px}.grade-badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#efedff;color:#5b50db;font-weight:900}.grade-title h3{margin:0;font-size:17px}.grade-title p{margin:4px 0 0;color:var(--muted);font-size:12px}.chev{transition:.2s}.grade-card.closed .chev{transform:rotate(-90deg)}.grade-card.closed .lesson-list{display:none}.lesson-list{border-top:1px solid var(--line)}.lesson-row{display:grid;grid-template-columns:110px 1.1fr 2fr 125px;align-items:center;gap:15px;padding:14px 20px;border-top:1px solid #f0f3f8}.lesson-row:first-child{border-top:0}.lesson-row:hover{background:#fbfcff}.code{font-family:ui-monospace,Consolas,monospace;color:#667085;font-size:13px}.unit{font-weight:700;font-size:13px}.lesson-title{color:#526075;font-size:14px}.action{display:flex;justify-content:flex-end;gap:7px}.btn-sm{border:1px solid #dfe4ed;background:#fff;padding:7px 10px;border-radius:9px;text-decoration:none;color:#40506a;font-size:12px}.btn-sm.primary-soft{border-color:#d9d3ff;background:#f1eeff;color:#5146d4}.btn-sm.disabled{opacity:.42;pointer-events:none}.preview{font-size:10px;background:#fff3da;color:#b56c00;padding:3px 7px;border-radius:8px;margin-left:6px}.empty{text-align:center;padding:70px 20px;color:var(--muted)}.empty div{font-size:45px}.empty h3{color:var(--ink);margin-bottom:5px}.admin-head{display:flex;justify-content:space-between;align-items:center;margin:5px 0 22px}.admin-head h3{font-size:22px;margin:0}.admin-head p{margin:5px 0 0;color:var(--muted)}.admin-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.admin-kpis div{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}.admin-kpis span{color:var(--muted);font-size:12px}.admin-kpis strong{display:block;font-size:28px;margin-top:7px}.table-card{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid #eef1f6;font-size:13px}th{background:#fafbfc;color:#758198;font-size:11px;letter-spacing:.04em}.status{display:inline-block;padding:4px 8px;border-radius:12px;font-size:11px}.status.active{background:#e8f7f2;color:#11735e}.status.disabled{background:#fbeaea;color:#b64040}.table-actions button{border:0;background:transparent;color:#59677f;margin-right:6px}dialog{border:0;border-radius:20px;width:min(820px,94vw);box-shadow:0 30px 100px rgba(15,25,45,.25);padding:0}dialog::backdrop{background:rgba(14,22,40,.52)}#userForm{padding:24px}.dialog-head,.perm-title,.dialog-actions{display:flex;align-items:center;justify-content:space-between}.dialog-head h3{margin:0;font-size:22px}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 16px}.form-grid label{display:block;font-weight:650;font-size:14px;margin:22px 0 0}.form-grid input,.form-grid select{width:100%;margin-top:8px;padding:13px 14px;border:1px solid #dfe5ef;border-radius:12px;outline:none;background:#fff}.form-grid input:focus,.form-grid select:focus{border-color:#8e7bf2;box-shadow:0 0 0 3px rgba(91,92,226,.10)}.form-grid small{color:var(--muted);font-weight:400}.perm-section{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}.perm-title button{border:0;background:transparent;color:#5b5ce2}.perm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.perm-grid label{border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:12px;display:flex;gap:7px;align-items:center}.dialog-actions{margin-top:24px;justify-content:flex-end;gap:10px}.dialog-actions>button:not(.primary){border:1px solid var(--line);background:#fff;padding:10px 16px;border-radius:10px}#toast{position:fixed;z-index:1000;right:24px;top:24px;background:#15233b;color:#fff;padding:12px 16px;border-radius:12px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:none}

@media(max-width:1000px){.login-shell{grid-template-columns:1fr}.login-visual{display:none}.login-panel{min-height:100vh}.mobile-brand{display:flex}.app{grid-template-columns:72px 1fr}.sidebar{padding:18px 10px}.side-brand>div:not(.brand-logo),.nav span,.account-copy{display:none}.side-brand{justify-content:center;padding-left:0;padding-right:0}.nav{text-align:center}.account-box{justify-content:center}.main{padding:0 20px 35px}.lesson-row{grid-template-columns:90px 1fr 1.6fr 110px}}
@media(max-width:700px){.login-panel{padding:34px 22px}.auth-heading h2{font-size:30px}.login-role-tabs{gap:6px}.role-tab{padding:10px 9px}.role-tab-icon{width:30px;height:30px}.main{padding:0 14px 30px}.topbar{height:auto;padding:22px 0;gap:14px;align-items:flex-start;flex-direction:column}.search-wrap{width:100%}.hero{padding:24px;align-items:flex-start}.hero-stat{display:none}.lesson-row{grid-template-columns:1fr;gap:7px}.action{justify-content:flex-start}.form-grid{grid-template-columns:1fr}.perm-grid{grid-template-columns:repeat(2,1fr)}.admin-kpis{grid-template-columns:1fr}.admin-head{align-items:flex-start;gap:14px;flex-direction:column}}

.small-dialog{width:min(520px,94vw)}#passwordForm{padding:24px}.form-grid.one-col{grid-template-columns:1fr}.account-box .icon-btn{font-size:17px}.account-box .icon-btn:hover{background:#1e2a42;border-radius:9px}.error{min-height:18px;color:#c23b52;font-size:13px;margin-top:12px}


/* Know How Academy branding */
.academy-logo{display:block;object-fit:contain}.academy-logo-dark{width:min(360px,62%);max-height:150px;object-position:left center}.academy-logo-light{width:250px;max-width:78vw;height:100px;object-fit:contain;object-position:left center}.side-academy-logo{width:185px;max-height:90px;object-fit:contain;object-position:left center}.trial-box{margin-top:22px;padding-top:18px;border-top:1px solid #eef1f6}.trial-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.trial-head b{display:block;font-size:13px}.trial-head span{font-size:11px;color:#98a3b5}.trial-list{display:grid;gap:7px;max-height:170px;overflow:auto}.trial-card{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;padding:9px 10px;border:1px solid #e5e9f2;border-radius:11px;text-decoration:none;color:#243552;background:#fff}.trial-card:hover{border-color:#bfcaf2;background:#fafbff}.trial-card b{font-size:12px}.trial-card small{grid-column:2;color:#7b8799;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trial-badge{grid-row:1/3;padding:4px 6px;border-radius:7px;background:#fff0d5;color:#b66c00;font-size:10px;font-weight:900}.muted{color:#8b97a9}
/* Six lesson resources */
.lesson-row.resource-row{grid-template-columns:105px 130px minmax(220px,1fr) minmax(460px,1.8fr)}.resource-actions{justify-content:flex-start;flex-wrap:wrap}.resource-btn{display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:6px 9px;border-radius:8px;text-decoration:none;color:#fff;font-size:11px;font-weight:800;box-shadow:0 3px 8px rgba(20,35,70,.08)}.resource-btn.res-course{background:#3157d5}.resource-btn.res-plan{background:#1d9a78}.resource-btn.res-thinking{background:#7657d8}.resource-btn.res-homework{background:#a24fba}.resource-btn.res-pre{background:#178fa7}.resource-btn.res-exit{background:#df7b2d}.resource-btn.disabled{background:#e3e7ed;color:#9ba5b3;box-shadow:none;cursor:not-allowed;pointer-events:none}
/* Course configuration */
.course-config-tools{display:flex;gap:14px;margin-bottom:14px}.course-config-tools label{display:grid;gap:6px;font-size:12px;font-weight:800}.course-config-tools select{min-width:210px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.course-config-note{padding:11px 13px;margin-bottom:14px;border-radius:11px;background:#eef6ff;color:#3d5c86;font-size:12px}.course-config-list{display:grid;gap:12px}.course-config-row{padding:16px;background:#fff;border:1px solid var(--line);border-radius:15px}.course-config-title{display:flex;align-items:center;gap:14px;margin-bottom:12px}.course-config-title b,.course-config-title span{display:block}.course-config-title span{margin-top:3px;color:var(--muted);font-size:12px}.trial-radio{padding:7px 9px;border-radius:9px;background:#fff4dd;color:#ad6900;font-size:12px;font-weight:900}.resource-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.resource-fields label{display:grid;gap:5px}.resource-fields span{font-size:11px;font-weight:800;color:#65738a}.resource-fields input{min-width:0;padding:9px 10px;border:1px solid #dfe5ef;border-radius:9px;font-size:11px}.resource-fields input:focus{outline:0;border-color:#8097e5;box-shadow:0 0 0 3px rgba(49,87,213,.08)}
@media(max-width:1250px){.lesson-row.resource-row{grid-template-columns:90px 100px minmax(180px,1fr) minmax(330px,1.5fr)}.resource-fields{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.side-academy-logo{width:50px}.academy-logo-light{width:220px}.lesson-row.resource-row{grid-template-columns:1fr}.resource-actions{justify-content:flex-start}}
@media(max-width:700px){.resource-fields{grid-template-columns:1fr}.course-config-tools{flex-direction:column}.course-config-tools select{width:100%}.academy-logo-light{height:82px}}