:root{--bg:#f5f5f5;--panel:#fff;--muted:#969696;--line:#d9d9d9;--accent-bright:#4ee4a4;--green:#4fdda9;--green2:#03e4a1;--blue:#3f8fe0;--dark:#252525;--grad:linear-gradient(110deg,#86c929 0%,#48d29d 53%,#3e8de2 100%);--font:"PingFang HK","PingFang SC","Microsoft YaHei",Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);font-family:var(--font);color:var(--dark)}body{overflow:auto}.canvas{position:relative;margin:0 auto;background:#eee;overflow:hidden}.page1{width:1922px;height:1164px}.page2{width:2064px;height:893px}.page3left{width:2501px;height:2407px}.page3right{width:1768px;height:2407px}
.header{height:100px;background:var(--grad);position:relative;color:#fff}.header .nav{position:absolute;left:50%;top:37px;transform:translateX(-50%);display:flex;gap:52px;font-size:16px;opacity:.95}.header .nav span:first-child{font-weight:600}.header .avatar{position:absolute;right:62px;top:31px;width:40px;height:40px;border-radius:50%;background:#fff}.avatar:before{content:"";position:absolute;left:13px;top:7px;width:14px;height:14px;border-radius:50%;background:#ddd}.avatar:after{content:"";position:absolute;left:8px;bottom:5px;width:24px;height:13px;border-radius:14px 14px 8px 8px;background:#ddd}
/* homepage */
.home-main{position:relative;height:1064px;padding-top:48px}.home-title{font-size:38px;font-weight:700;margin-left:275px;line-height:1;color:#606060}.home-actions{position:absolute;right:225px;top:52px;display:flex;gap:25px}.pill-action{height:42px;min-width:132px;border:0;border-radius:24px;background:#fff;color:#777;font-size:16px}.pill-action.play:before{content:"";display:inline-block;width:22px;height:22px;border:2px solid #777;border-radius:50%;vertical-align:-6px;margin-right:8px}.pill-action.play:after{content:"";display:inline-block;margin-left:-23px;margin-right:9px;border-left:7px solid #777;border-top:5px solid transparent;border-bottom:5px solid transparent;vertical-align:-1px}
.home-grid{position:absolute;left:171px;top:130px;display:grid;grid-template-columns:1158px 430px;grid-template-rows:423px 401px;gap:25px}.hero,.card-panel,.profile{background:#fff;border-radius:7px}.hero{padding:42px 38px;position:relative}.hero h2{margin:0;font-size:28px;line-height:1.3}.underbar{width:96px;height:4px;background:linear-gradient(90deg,#7ecb3b,#3f9cdb);margin-top:12px}.hero p{width:505px;color:#aaa;font-size:18px;line-height:1.65;margin:25px 0 22px}.learn{width:190px;height:52px;border:0;border-radius:28px;background:var(--green);color:#fff;font-size:16px;box-shadow:0 14px 25px rgba(86,147,238,.25)}.hero-placeholder{position:absolute;right:38px;top:44px;width:490px;height:306px;background:#d9d9d9;border-radius:5px}.hero-slider{position:absolute;left:437px;bottom:24px;display:flex;gap:20px}.hero-slider i{display:block;height:8px;width:150px;border-radius:5px;background:#d2d2d2}.hero-slider i:first-child{width:150px;background:var(--green)}
.profile{grid-column:2;grid-row:1 / span 2;padding:31px 35px;position:relative}.profile-head{display:flex;gap:18px;align-items:center}.profile-avatar{width:58px;height:58px;border-radius:50%;background:#ddd;position:relative}.profile-avatar:before{content:"";position:absolute;left:20px;top:11px;width:18px;height:18px;border-radius:50%;background:#fff}.profile-avatar:after{content:"";position:absolute;left:11px;bottom:9px;width:36px;height:19px;border-radius:20px 20px 10px 10px;background:#fff}.profile-name{font-weight:600;font-size:17px;line-height:1.5}.profile-links{margin-top:32px;font-size:16px;line-height:2.5}.profile-rule{border-top:2px solid #333;margin:20px 0 16px}.calendar{font-size:12px;color:#6c6c6c;text-align:center}.week{display:grid;grid-template-columns:repeat(7,1fr);font-size:11px;margin-bottom:8px}.days{display:grid;grid-template-columns:repeat(7,1fr);row-gap:13px}.days span{height:15px}.days span.muted{color:#ccc}.days span.sun{color:#dd6868}.countdown{margin-top:24px;text-align:center;color:#777;font-size:14px}.countdown b{color:#444;margin:0 5px}
.panel-heading{font-size:25px;font-weight:700}.panel-link{float:right;color:#888;font-size:14px;margin-top:6px}.card-panel{padding:24px 35px;position:relative}.class-panel{grid-column:1;grid-row:2}.books-panel{grid-column:1;grid-row:2;margin-left:588px}.panel-heading .underbar{margin-top:10px}.tile-grid{display:grid;gap:23px;margin-top:22px}.class-panel .tile-grid{grid-template-columns:repeat(2,1fr)}.books-panel .tile-grid{grid-template-columns:repeat(3,1fr)}.tile{height:93px;border-radius:7px;background:var(--green);display:flex;align-items:center;justify-content:center;color:#fff;font-size:19px;box-shadow:0 16px 24px rgba(89,125,221,.17)}.books-panel .tile{height:188px}.panel-scroll{position:absolute;bottom:14px;left:35px;right:35px;height:11px;border-radius:7px;background:#d0d0d0}.panel-scroll:before{content:"";display:block;width:48%;height:100%;background:#fff;border-radius:7px}
/* class page */
.class-canvas{position:relative;background:#eee;min-height:100%}.class-body{position:absolute;left:0;top:100px;width:100%;height:793px;padding:0 24px}.class-frame{position:relative;background:#fff;border-radius:7px;height:100%;padding-top:0}.class-tabs{height:75px;display:flex;justify-content:center;align-items:center;gap:60px}.class-tabs span{background:#f6f6f6;color:#777;border-radius:18px;padding:8px 37px;font-size:16px}.class-tabs span.active{background:var(--green);color:#fff}.class-layout{display:flex;gap:24px;padding:0 42px 40px}.mastery{width:338px;height:640px;border-radius:20px;background:linear-gradient(150deg,#a9d63a 0%,#55d59b 50%,#4c9cdb 100%);padding:72px 42px 30px;display:flex;flex-direction:column;gap:17px}.mastery div{height:55px;border-radius:8px;border:1px solid rgba(255,255,255,.9);background:rgba(239,255,227,.5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;white-space:nowrap}.student-grid{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:146px;gap:16px;position:relative;padding-right:28px;overflow:hidden}.student-card{border:1px solid #aaa;border-radius:6px;position:relative;padding:16px 20px;background:#fff}.student-card .mini-avatar{width:62px;height:62px;background:#ddd;border-radius:50%;position:absolute;left:12px;top:12px}.student-card .student-name{position:absolute;left:86px;top:20px;font-size:18px;font-weight:600;line-height:1.35}.student-card .class-name{position:absolute;right:13px;top:12px;color:#ddd;font-size:15px}.student-card .stats{position:absolute;right:14px;bottom:17px;text-align:right;font-size:13px;line-height:1.5;color:#555}.student-card .stats b{color:#49cfa1;font-weight:500}.student-grid:after{content:"";position:absolute;right:4px;top:0;width:11px;height:100%;border-radius:8px;background:#dedede}.student-grid:before{content:"";position:absolute;right:4px;top:4px;width:11px;height:170px;border-radius:8px;background:#aaa;z-index:1}
/* shared recent books */
.recent-canvas{background:#eee;min-height:100%;position:relative}.screen{position:absolute;left:130px;width:1768px;height:793px;background:#eee;border-radius:2px;overflow:hidden}.screen .header{height:100px}.screen.one{top:0}.screen.two{top:807px}.screen.three{top:1614px}.screen-content{position:absolute;left:0;right:0;top:100px;height:693px;background:#fff;border-radius:0 0 8px 8px;padding:32px 55px}.content-tabs{display:flex;gap:16px;margin-bottom:32px}.content-tabs span{background:#f5f5f5;border-radius:16px;padding:7px 31px;color:#777;font-size:16px}.content-tabs span.active{background:var(--green);color:#fff}.books-row{display:grid;grid-template-columns:repeat(4,1fr);gap:42px;padding:10px 35px}.book-card{height:215px;background:var(--green);border-radius:5px;display:flex;align-items:flex-end;justify-content:center;color:#555;font-size:16px;padding-bottom:17px;box-shadow:0 14px 20px rgba(93,142,237,.16)}.screen.two .screen-content{padding-top:28px}.screen.two .search{width:340px;height:40px;border-radius:20px;background:#ddd;color:#999;font-size:16px;padding:10px 18px;margin-bottom:28px}.screen.two .books-row{grid-template-columns:repeat(3,1fr);gap:38px 48px;padding:10px 35px}.screen.two .book-card{height:230px}.detail .screen-content{padding:27px 35px}.detail-title{font-size:18px;color:#666;margin-bottom:18px}.searchbar{height:36px;border-radius:18px;background:#f3f3f3;border:1px solid #ddd;width:420px;padding:8px 20px;color:#999;font-size:14px;margin-bottom:20px}.detail-columns{display:grid;grid-template-columns:1.15fr 1fr;gap:38px;height:550px}.word-list{border:1px solid #e2e2e2;border-radius:4px;padding:6px 12px;overflow:hidden}.word-row{height:47px;border-bottom:1px solid #eee;display:flex;align-items:center;color:#8a8a8a;font-size:17px}.word-row:last-child{border-bottom:0}.check{width:18px;height:18px;border:1px solid #ccc;border-radius:50%;margin-right:16px}.check.checked{background:var(--green);border-color:var(--green);position:relative}.check.checked:after{content:"✓";color:white;font-size:13px;position:absolute;left:3px;top:0}.detail-list{border:1px solid #bbb;border-radius:4px;padding:12px 18px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.12)}.detail-item{height:89px;border-bottom:1px solid #eee;position:relative;padding-left:28px;padding-top:8px;color:#666;font-size:14px;line-height:1.45}.detail-item:last-child{border-bottom:0}.detail-item:before{content:"";position:absolute;left:0;top:13px;width:13px;height:13px;background:var(--green);border-radius:50%}.detail-item:after{content:"★";position:absolute;right:4px;top:12px;color:#f4d400;font-size:17px}
/* annotation-free side label */


.profile{grid-column:2;grid-row:1;height:588px}
.screen.one .books-row{grid-template-columns:repeat(4,220px);gap:56px;justify-content:center}.screen.one .book-card{height:230px}
.screen.two .books-row{grid-template-columns:repeat(3,220px);gap:38px 95px;justify-content:center}.screen.two .book-card{height:230px}

.screen.one .books-row{grid-template-columns:repeat(4,170px);gap:62px}.screen.two .books-row{grid-template-columns:repeat(3,170px);gap:38px 110px}


/* full class-page board from the Figma source */
.page2{width:1920px;height:4664px}
.page2.class-canvas{background:#eee;min-height:4664px}
.page2>.header{width:1920px}
.class-screen{position:absolute;left:360px;width:1200px;height:793px;background:#fff;border-radius:8px;overflow:hidden}
.chart-screen{top:100px}
.overview-screen{top:1002px}
.class-screen .class-tabs{height:75px}
.class-screen .class-layout{padding:0 42px 40px;gap:24px}
.class-screen .student-grid{grid-auto-rows:146px}
.chart-panel{width:338px;height:640px;border-radius:20px;background:linear-gradient(150deg,#a9d63a 0%,#55d59b 50%,#4c9cdb 100%);padding:23px 24px;color:#fff;overflow:hidden}
.chart-panel h3{font-size:17px;text-align:center;font-weight:500;margin:0 0 10px;white-space:nowrap}
.bar-chart{height:250px;display:flex;align-items:flex-end;justify-content:space-around;padding:18px 4px 24px;border-left:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.55);gap:13px}
.bar{width:25px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.bar b{position:absolute;top:-19px;font-size:11px;font-weight:400;color:#fff}
.bar i{display:block;width:22px;flex:1;min-height:10px;background:rgba(255,255,255,.9)}
.bar small{position:absolute;bottom:-22px;font-size:10px;color:#fff;white-space:nowrap}
.chart-buttons{margin-top:27px;display:flex;flex-direction:column;gap:13px}
.chart-buttons div{height:43px;border:1px solid rgba(255,255,255,.9);border-radius:8px;background:rgba(240,255,232,.5);display:flex;align-items:center;justify-content:center;font-size:14px;white-space:nowrap}
.overview-screen .mastery{height:640px}
.student-group{position:absolute;left:210px;top:2083px;width:1649px;height:2423px}
.student-main{position:absolute;left:160px;top:0;width:1240px;height:900px;background:#fff;border-radius:8px;overflow:hidden}
.student-main .class-tabs{height:75px}
.student-dashboard{display:grid;grid-template-columns:340px 1fr;grid-template-rows:250px 260px;gap:18px;padding:0 30px 30px}
.student-summary,.pie-card,.progress-card{border:1px solid #aaa;border-radius:6px;background:#fff}
.student-summary{padding:18px 20px;color:#666;font-size:14px}
.summary-head{display:flex;align-items:center;gap:18px;font-size:17px;color:#444;margin-bottom:20px}
.summary-avatar{width:58px;height:58px;border-radius:50%;background:#ddd}
.student-summary p{margin:10px 0;color:#777}.student-summary b{color:#4fd5ac;font-weight:500}
.pie-card{padding:20px;display:flex;align-items:center;gap:20px}
.pie{width:155px;height:155px;border-radius:50%;background:conic-gradient(#4fd5ac 0 43%,#a9df55 43% 70%,#d8edb0 70% 84%,#4c9cdb 84% 100%);position:relative}
.pie:after{content:"";position:absolute;inset:38px;border-radius:50%;background:#fff}
.pie-legend{display:flex;flex-direction:column;gap:10px;color:#888;font-size:12px}
.pie-legend span:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:#4fd5ac;margin-right:7px}.pie-legend span:nth-child(2):before{background:#a9df55}.pie-legend span:nth-child(3):before{background:#4c9cdb}
.progress-card{grid-column:2;grid-row:1 / span 2;padding:22px 28px;position:relative;overflow:hidden}
.progress-head{display:flex;justify-content:space-between;color:#555;font-size:16px;margin-bottom:15px}
.total-progress{height:26px;border-radius:13px;background:#f0f0f0;margin-bottom:13px;overflow:hidden}.total-progress i{display:block;width:66%;height:100%;border-radius:13px;background:var(--green)}
.progress-list{display:flex;flex-direction:column;gap:14px}.progress-list>div{display:grid;grid-template-columns:185px 1fr;align-items:center;gap:14px;color:#777;font-size:13px}.progress-list b{font-weight:400;white-space:nowrap}.progress-list i{height:18px;border-radius:9px;background:linear-gradient(90deg,#4fd5ac,#a6df56);display:block}
.side-tabs{position:absolute;right:12px;top:145px;display:flex;flex-direction:column;gap:4px}.side-tabs span{width:36px;height:74px;border-radius:8px;background:#bbb;color:#fff;writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;font-size:12px}.side-tabs span:first-child{background:var(--green)}
.blank-card{position:absolute;background:#fff;border-radius:7px;box-shadow:0 1px 2px rgba(0,0,0,.18);width:650px;height:610px;top:970px}.blank-a{left:0}.blank-b{left:770px}.blank-c{left:770px;top:1600px}

/* chart panel: the Figma chart is a fixed 338×640 composition */
.page2 .chart-panel{position:relative;width:337px;height:641px;padding:0;border-radius:8px;background:linear-gradient(158deg,rgba(180,195,2,.8) 2%,rgba(120,195,2,.8) 18%,rgba(66,195,63,.8) 40%,rgba(1,185,148,.8) 63%,rgba(44,128,227,.8) 100%)}
.page2 .chart-panel h3{position:absolute;left:0;top:18px;width:100%;margin:0;font-size:20px;line-height:28px;font-weight:600;letter-spacing:.2px}
.page2 .chart-y-title{position:absolute;left:16px;top:70px;font-family:Roboto,Arial,sans-serif;font-size:10px;line-height:normal;color:#fff}
.page2 .chart-y-labels{position:absolute;left:16px;top:94px;width:20px;height:229px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:#fff;font-family:Roboto,Arial,sans-serif;font-size:10px;line-height:normal}
.page2 .bar-chart{position:absolute;left:41.703px;top:98.393px;width:249.807px;height:229.249px;margin:0;padding:0;display:block;border:1px solid rgba(255,255,255,.36);border-bottom-color:rgba(255,255,255,.72);overflow:visible}
.page2 .bar-chart:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.32) 0 1px,transparent 1px 25%,rgba(255,255,255,.32) 25% calc(25% + 1px),transparent calc(25% + 1px) 50%,rgba(255,255,255,.32) 50% calc(50% + 1px),transparent calc(50% + 1px) 75%,rgba(255,255,255,.32) 75% calc(75% + 1px),transparent calc(75% + 1px) 100%)}
.page2 .bar-chart:after{content:"";position:absolute;right:-1px;top:0;bottom:-1px;border-right:1px solid rgba(255,255,255,.3);pointer-events:none}
.page2 .bar{width:12.459px;height:auto;position:absolute;bottom:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.page2 .bar:nth-child(1){left:11.837px}.page2 .bar:nth-child(2){left:47.968px}.page2 .bar:nth-child(3){left:83.477px}.page2 .bar:nth-child(4){left:119.608px}.page2 .bar:nth-child(5){left:153.871px}.page2 .bar:nth-child(6){left:191.249px}.page2 .bar:nth-child(7){left:225.397px}
.page2 .bar b{top:-18px;font-family:Roboto,Arial,sans-serif;font-size:10px;line-height:normal;font-weight:400;color:#fff}
.page2 .bar i{display:block;width:12.459px;height:100%;min-height:0;flex:0 0 auto;background:rgba(255,255,255,.9)}
.page2 .bar small{bottom:-22px;font-family:Roboto,Arial,sans-serif;font-size:10px;line-height:normal;color:#fff}
.page2 .chart-x-title{position:absolute;left:299px;top:326px;font-family:Roboto,Arial,sans-serif;font-size:10px;line-height:14px;color:#fff;white-space:nowrap}
.page2 .chart-buttons{position:absolute;left:47px;top:377px;width:246px;margin:0;display:flex;flex-direction:column;gap:23px}
.page2 .chart-buttons div{height:58px;border:0;border-radius:8px;background:rgba(255,255,255,.7);color:#43c996;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:28px;font-weight:600;letter-spacing:.2px;white-space:nowrap}

/* Figma class composites use a 1232×840 white frame with tabs above it. */
.page2 .class-screen{width:1232px;height:893px;background:transparent;overflow:visible}
.page2 .class-screen:before{content:"";position:absolute;left:0;top:53px;width:1232px;height:840px;background:#fff;border-radius:8px;z-index:-1}
.page2 .class-screen .class-tabs{position:absolute;left:0;top:0;width:100%;height:42px;padding-left:41px;justify-content:flex-start;gap:41.1px;align-items:flex-start}
.page2 .class-screen .class-tabs span{width:158.606px;height:30.342px;padding:0;border-radius:30px;font-size:20px;line-height:30.342px;font-weight:500;text-align:center;color:#616161;background:#fff}
.page2 .class-screen .class-tabs span.active{background:#03e4a1;color:#fff}
.page2 .class-screen .class-layout{position:absolute;left:0;top:93px;width:1232px;height:641px;padding:0 0 0 41px;gap:27px;align-items:flex-start}
.page2 .class-screen .student-grid{flex:0 0 740px;width:740px;padding-right:0;grid-template-columns:repeat(2,362.803px);grid-auto-rows:154.942px;column-gap:14.557px;row-gap:8.058px;overflow:hidden}
.page2 .class-screen .student-card{width:362.803px;height:154.942px;border:1px solid #616161;border-radius:8px;padding:0;background:#fff}
.page2 .class-screen .student-card .mini-avatar{width:63.571px;height:63.571px;left:10.36px;top:16.7px;background:#d9d9d9}
.page2 .class-screen .student-card .student-name{left:87.4px;top:21.3px;font-size:20px;line-height:31.5px;font-weight:600;color:#616161}
.page2 .class-screen .student-card .class-name{right:14.5px;top:5px;font-size:20px;line-height:30px;color:rgba(97,97,97,.2)}
.page2 .class-screen .student-card .stats{right:14.5px;bottom:7px;font-size:14px;line-height:28px;color:#616161}
.page2 .class-screen .student-card .stats b{color:#03e4a1;font-weight:500}
.page2 .class-screen .student-grid:after{right:-40px;top:0;width:16px;height:645px;border-radius:14px;background:#d9d9d9}
.page2 .class-screen .student-grid:before{right:-32px;top:61px;width:8px;height:268px;border-radius:8px;background:#aaa;z-index:1}
.page2 .class-screen .class-layout:after{content:"";position:absolute;left:1181px;top:0;width:16px;height:645px;border-radius:14px;background:#d9d9d9}
.page2 .class-screen .class-layout:before{content:"";position:absolute;left:1185px;top:61px;width:8px;height:268px;border-radius:8px;background:#aaa;z-index:2}

/* The six-state mastery panel follows Figma's nonuniform vertical rhythm. */
.page2 .mastery{position:relative;width:337px;height:641px;padding:0;border-radius:8px;background:linear-gradient(158deg,rgba(180,195,2,.8) 2%,rgba(120,195,2,.8) 18%,rgba(66,195,63,.8) 40%,rgba(1,185,148,.8) 63%,rgba(44,128,227,.8) 100%);display:block;flex:0 0 337px}
.page2 .mastery div{position:absolute;left:47px;width:246px;height:58px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.7);color:#43c996;font-size:20px;line-height:58px;font-weight:600;letter-spacing:.2px;white-space:nowrap}
.page2 .mastery div:nth-child(1){top:75px}.page2 .mastery div:nth-child(2){top:156px}.page2 .mastery div:nth-child(3){top:237px}.page2 .mastery div:nth-child(4){top:345px}.page2 .mastery div:nth-child(5){top:426px}.page2 .mastery div:nth-child(6){top:507px}


/* recent-books composite alignment and source layer opacity */
.page3left .screen{left:195px;width:1920px}
.page3left .screen.one{opacity:.2}
.page3left .screen.two{top:1000px}
.page3left .screen.two .header{display:none}
.page3left .screen.two .screen-content{top:0;left:360px;right:auto;width:1200px}
.page3left .screen.one .screen-content{left:360px;right:auto;width:1200px}
.page3left .screen.two .books-row{grid-template-columns:repeat(4,170px);gap:38px 72px}
.page3right .screen.two .header,.page3right .screen.three .header{display:none}
.page3right .screen.two .screen-content,.page3right .screen.three .screen-content{top:0}
.page3right .screen.one .screen-content,.page3right .screen.three .screen-content{opacity:.2}

.page3left .screen.two{opacity:.2}

/* recent-book cards use the same Button component as the Figma homepage */
.page3left,.page3right{--green:#03e4a1;--green2:#03e4a1}
.page3left .content-tabs span.active,.page3right .content-tabs span.active{background:#03e4a1;color:#fff}
.page3left .book-card,.page3right .book-card{background:#03e4a1;color:#555;border-radius:8px;box-shadow:0 12px 15px rgba(24,92,255,.18);font-weight:400;align-items:flex-end;padding-bottom:17px}
.page3left .screen.two .search,.page3right .searchbar{background:#f5f5f5;border-color:#d9d9d9}
.page3right .check.checked,.page3right .detail-item:before{background:#03e4a1;border-color:#03e4a1}

/* Keep the other pages at their current gradient. */
.page2,.page3left,.page3right{--grad:linear-gradient(110deg,#74c132 0%,#43c47b 34%,#3dbb92 55%,#3e83de 100%)}

/* page1 corrections from the Figma review */
.page1{--green:#4ee4a4;--grad:linear-gradient(110deg,#74c132 0%,#43c47b 34%,#3dbb92 55%,#3e83de 100%)}
.page1 .home-grid{top:200px}
.page1 .header .avatar{background:#d9d9d9}
.page1 .header .avatar:before,.page1 .header .avatar:after{background:#fff}
.page1 .home-actions .pill-action.play{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 18px 0 15px;min-width:146px}
.page1 .home-actions .pill-action.play:before{content:"";display:block;width:21px;height:21px;box-sizing:border-box;border:2px solid #777;border-radius:50%;margin:0}
.page1 .home-actions .pill-action.play:after{content:"";display:block;width:0;height:0;border-left:7px solid #777;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:-23px;margin-right:0}
.page1 .class-panel{width:570px}
.page1 .books-panel{width:570px;margin-left:588px}
.page1 .panel-scroll{overflow:hidden;cursor:grab;touch-action:none}
.page1 .panel-scroll:before{display:none}
.page1 .panel-scroll span{position:absolute;left:0;top:0;width:54%;height:100%;border-radius:7px;background:#fff}
.page1 .panel-scroll.dragging{cursor:grabbing}
.page1 .home-title{font-size:46px;font-weight:800;line-height:60px}
.page1 .home-title{color:#858585;width:540px;margin:24px 0 30px 275px}
.page1 .home-actions .pill-action.play:before,.page1 .home-actions .pill-action.play:after{display:none}
.page1 .home-actions .pill-action.play .play-icon{position:relative;display:inline-block;flex:0 0 32px;width:32px;height:32px}
.page1 .home-actions .pill-action.play .play-icon:before{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;border:2px solid #858585;border-radius:50%}
.page1 .home-actions .pill-action.play .play-icon:after{content:"";position:absolute;left:13px;top:10px;width:0;height:0;border-left:8px solid #858585;border-top:6px solid transparent;border-bottom:6px solid transparent}
.page1 .days{row-gap:22px}
.page1 .days span{position:relative;line-height:15px}
.page1 .days .event-date:after{content:"";position:absolute;left:50%;top:22px;width:3px;height:3px;transform:translateX(-50%);border-radius:50%;background:#e61529}

/* Figma canvas and chart text refinements. */
.page2.class-canvas,.page3left.recent-canvas,.page3right.recent-canvas{background:#f5f5f5}
.page3left .screen,.page3right .screen{background:#f5f5f5}

/* page2: final alignment pass against the Figma class screens */
.page2.class-canvas{background:#f5f5f5;min-height:4664px;padding-top:31px}
.page2>.header{height:100px;background:linear-gradient(110deg,#4fc832 0%,#43c887 43%,#37b9a1 70%,#3eaaa3 100%)}
.page2>.header .brand{position:absolute;left:49px;top:39px;width:137px;height:46px;background:#d9d9d9;color:#616161;font:14px/46px Inter,Arial,sans-serif;text-align:center}
.page2>.header .avatar{right:62px;top:45px;width:37px;height:37px;background:#d9d9d9}
.page2>.header .avatar:before{left:12px;top:7px;width:13px;height:13px;background:#fff}
.page2>.header .avatar:after{left:8px;bottom:4px;width:22px;height:13px;background:#fff}
.page2>.header .nav{left:48%;right:auto;top:53px;transform:translateX(-50%);gap:52px;font-size:14px;line-height:18px;opacity:1;white-space:nowrap}
.page2>.header .nav span{font-weight:400}
.page2>.header .nav span:first-child{font-weight:400}
.page2>.header .nav-help{position:relative;padding-right:19px}
.page2>.header .nav-help:after{content:"";position:absolute;right:0;top:3px;width:8px;height:8px;border-right:1.7px solid #fff;border-bottom:1.7px solid #fff;transform:rotate(45deg)}

/* Tabs sit on the grey canvas and the white content frame starts below them. */
.page2 .class-screen{left:48px;width:1232px;height:893px}
.page2 .class-screen:before{top:41px;height:840px;z-index:0}
.page2 .class-screen .class-tabs,.page2 .class-screen .class-layout{z-index:1}
.page2 .class-screen .class-tabs{top:0;height:31px;padding-left:41px;gap:41px}
.page2 .class-screen .class-tabs span.active{background:#4fd5ac}
.page2 .class-screen .class-layout{top:93px}
.page2 .chart-screen{top:169px}
.page2 .overview-screen{top:1145px}
.page2 .overview-screen .class-layout{top:93px}

/* Student detail screen shown in the third Figma frame. */
.page2 .student-group{left:0;top:2140px;width:1460px;height:1100px}
.page2 .student-main{left:20px;top:0;width:1232px;height:908px;background:transparent;overflow:visible}
.page2 .student-main:before{content:"";position:absolute;left:0;top:58px;width:1232px;height:850px;border-radius:8px;background:#fff;z-index:0}
.page2 .student-main .class-tabs,.page2 .student-main .student-dashboard{z-index:1}
.page2 .student-main .class-tabs{position:absolute;left:0;top:0;width:100%;height:31px;padding-left:0;justify-content:flex-start;gap:41px;align-items:flex-start}
.page2 .student-main .class-tabs span{width:159px;height:30px;padding:0;border-radius:30px;line-height:30px;background:#f5f5f5;color:#616161;font-size:20px;font-weight:500;text-align:center}
.page2 .student-main .class-tabs span.active{background:#4fd5ac;color:#fff}
.page2 .student-dashboard{position:absolute;left:36px;top:106px;width:1092px;height:646px;display:grid;grid-template-columns:362px 658px;grid-template-rows:152px 152px 314px;column-gap:48px;row-gap:16px;padding:0}
.page2 .student-summary,.page2 .student-metrics,.page2 .pie-card,.page2 .progress-card{border:1px solid #999;border-radius:7px;background:#fff;box-shadow:none}
.page2 .student-summary{grid-column:1;grid-row:1;padding:16px 18px;color:#616161;font-size:14px;position:relative}
.page2 .summary-head{height:67px;display:flex;align-items:flex-start;gap:18px;margin:0;font-size:20px;line-height:31px;color:#616161}
.page2 .summary-avatar{width:64px;height:64px;flex:0 0 64px;border-radius:50%;background:#d9d9d9}
.page2 .student-summary em{position:absolute;right:13px;top:8px;color:#c9c9c9;font-size:18px;font-style:normal}
.page2 .summary-ratios{position:absolute;right:13px;bottom:7px;text-align:right}
.page2 .summary-ratios p{margin:0;color:#616161;font-size:14px;line-height:22px}
.page2 .summary-ratios b,.page2 .student-metrics b{color:#03dca0;font-weight:500}
.page2 .student-metrics{grid-column:1;grid-row:2;padding:19px 22px;color:#616161;font-size:14px;line-height:28px}
.page2 .student-metrics p{margin:0;white-space:nowrap}
.page2 .pie-card{grid-column:1;grid-row:3;padding:0;position:relative;display:block;overflow:hidden}
.page2 .pie{position:absolute;left:78px;top:34px;width:155px;height:155px;border-radius:50%;background:conic-gradient(from -90deg,#78e4c5 0 12%,#4edca4 12% 57%,#cdf4e8 57% 87%,#f2fbf9 87% 100%);}
.page2 .pie:after{display:none}
.page2 .pie-label{position:absolute;color:#616161;font-size:14px;line-height:17px;text-shadow:none}
.page2 .pie-label.p12{left:89px;top:18px}.page2 .pie-label.p45{left:78px;top:76px}.page2 .pie-label.p30{left:24px;top:76px}.page2 .pie-label.p13{left:44px;top:27px}
.page2 .pie-legend{position:absolute;left:46px;bottom:14px;width:270px;display:flex;gap:17px;color:#888;font-size:11px;line-height:14px;flex-direction:row;white-space:nowrap}
.page2 .pie-legend span:before{content:"";display:inline-block;width:13px;height:13px;border:1px solid #bbb;margin-right:6px;vertical-align:-3px;background:#fff;border-radius:0}
.page2 .pie-legend span:nth-child(1):before{background:#f2fbf9;border-color:#999}.page2 .pie-legend span:nth-child(2):before{background:#cdf4e8;border-color:#cdf4e8}.page2 .pie-legend span:nth-child(3):before{background:#78e4c5;border-color:#78e4c5}.page2 .pie-legend span:nth-child(4):before{background:#4edca4;border-color:#4edca4}
.page2 .progress-card{grid-column:2;grid-row:1 / span 3;width:658px;height:646px;padding:15px 18px;position:relative;overflow:visible;color:#616161}
.page2 .progress-head{height:41px;display:flex;align-items:center;justify-content:space-between;color:#616161;font-size:18px;margin:0;padding:0 2px;border-bottom:1px solid #ededed}
.page2 .progress-head span:first-child:before{content:"⌄";display:inline-flex;width:18px;height:18px;border:1px solid #777;border-radius:50%;align-items:center;justify-content:center;margin-right:17px;font-size:13px;line-height:16px;vertical-align:1px}
.page2 .progress-primary{height:39px;margin:10px 0 23px;display:flex;align-items:center;position:relative;border-radius:12px;background:#f5f5f5;padding:0 9px;color:#03dca0;font-size:14px;font-weight:600}
.page2 .progress-primary i{display:block;height:15px;width:150px;margin-left:8px;border-radius:8px;background:#4fd5ac}
.page2 .progress-primary b{position:absolute;right:10px;width:11px;height:11px;border:1px solid #fff;background:#fff;border-radius:2px}
.page2 .mastery-grid{height:204px;border-radius:18px;background:#f0f0f0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);padding:7px 11px;column-gap:13px;row-gap:0;overflow:hidden}
.page2 .mastery-grid div{display:flex;align-items:center;gap:13px;border-bottom:1px solid #e3e3e3;color:#616161;font-size:14px;white-space:nowrap}
.page2 .mastery-grid div:nth-last-child(-n+2){border-bottom:0}
.page2 .mastery-grid span{width:20px;height:20px;border-radius:50%;border:1px solid #4fd5ac;color:#4fd5ac;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.page2 .mastery-grid label{overflow:hidden;text-overflow:ellipsis}
.page2 .progress-card .progress-list{margin-top:20px;display:flex;flex-direction:column;gap:20px;padding:0}
.page2 .progress-card .progress-list>div{height:36px;display:flex;align-items:center;gap:9px;color:#03dca0;font-size:16px}
.page2 .progress-card .progress-list b{width:37px;font-weight:600;white-space:nowrap}
.page2 .progress-card .progress-list i{height:14px;border-radius:8px;background:#4fd5ac;display:block;border:1px solid #d9d9d9;box-shadow:inset -7px 0 0 #fff}
.page2 .side-tabs{position:absolute;right:-42px;top:193px;display:flex;flex-direction:column;gap:16px}
.page2 .side-tabs span{width:40px;height:126px;border-radius:14px;background:#bdbdbd;color:#fff;writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;font-size:16px;letter-spacing:2px}
.page2 .side-tabs span:first-child{background:#4fd5ac}
.page2 .floating-progress{position:absolute;left:1300px;top:0;width:200px;height:38px;border-radius:20px;background:#4fd5ac;color:#fff;padding:0 17px;display:flex;align-items:center;font-size:14px;font-weight:600}
.page2 .floating-progress i{height:14px;flex:1;margin-left:8px;border-radius:8px;background:#fff;position:relative}
.page2 .floating-progress i:after{content:"";position:absolute;right:4px;top:3px;width:6px;height:6px;background:#4fd5ac;border-radius:1px}
.page2 .floating-progress small{position:absolute;left:49px;top:43px;color:#888;font-size:9px;font-weight:400;white-space:nowrap}
.page2 .student-group .blank-card{display:none}

/* page3 is implemented as editable HTML cards/lists; the exported SVGs remain reference assets only. */
.page3left.recent-canvas{width:2501px;height:2407px;background:#eee;overflow:hidden;position:relative}
.page3left .page3-main{position:absolute;left:581px;top:0;width:1920px;height:2407px;background:#eee}
.page3left .page3-main>.header{height:100px;background:linear-gradient(110deg,#79c200 0%,#00c288 43%,#00b19c 76%,#2b80e2 100%);position:relative;color:#fff}
.page3left .page3-main>.header .brand{position:absolute;left:368px;top:39px;width:137px;height:46px;background:#d9d9d9;color:#616161;font:14px/46px Inter,Arial,sans-serif;text-align:center}
.page3left .page3-main>.header .nav{position:absolute;left:694px;top:53px;transform:none;display:flex;gap:52px;font-size:14px;line-height:18px;white-space:nowrap;color:#fff}
.page3left .page3-main>.header .nav span{font-weight:400}
.page3left .page3-main>.header .nav-help{position:relative;padding-right:19px}
.page3left .page3-main>.header .nav-help:after{content:"";position:absolute;right:0;top:3px;width:8px;height:8px;border-right:1.7px solid #fff;border-bottom:1.7px solid #fff;transform:rotate(45deg)}
.page3left .page3-main>.header .avatar{position:absolute;right:277px;top:45px;width:37px;height:37px;background:#d9d9d9}
.page3left .page3-main>.header .avatar:before{left:12px;top:7px;width:13px;height:13px;background:#fff}
.page3left .page3-main>.header .avatar:after{left:8px;bottom:4px;width:22px;height:13px;background:#fff}
.page3left .books-screen{position:absolute;left:350px;top:0;width:1232px;height:2146px}
.page3left .books-tabs{position:absolute;left:41px;display:flex;gap:41px;height:31px;z-index:2}
.page3left .books-screen-one .books-tabs{top:167px}.page3left .books-screen-two .books-tabs{top:1100px}
.page3left .books-tabs span{display:block;width:159px;height:30px;border-radius:30px;background:#fff;color:#616161;font-size:20px;line-height:30px;text-align:center;font-weight:500}
.page3left .books-tabs span.active{background:#03e4a1;color:#fff}
.page3left .books-panel{position:absolute;left:0;width:1232px;background:#fff;border-radius:8px;overflow:hidden}
.page3left .books-screen-one .books-panel{top:210px;height:768px}.page3left .books-screen-two .books-panel{top:1142px;height:1004px}
.page3left .book-grid{position:absolute;left:160px;top:78px;display:grid;grid-template-columns:repeat(4,167px);column-gap:64px;row-gap:101px}
.page3left .book-grid.two-rows{top:186px}
.page3left .book-tile{width:167px;color:#616161;text-align:center;font-size:20px;line-height:28px}
.page3left .book-cover{width:167px;height:231px;border-radius:8px;background:#03e4a1;box-shadow:6px 4px 9px rgba(0,0,0,.25);display:flex;align-items:flex-end;justify-content:center;padding:0 8px 14px;color:#616161;font-size:18px}
.page3left .book-tile>span{display:block;margin-top:16px;white-space:nowrap}
.page3left .screen-scrollbar{position:absolute;right:35px;top:78px;width:16px;height:595px;border-radius:8px;background:#d9d9d9}
.page3left .screen-scrollbar i{display:block;width:8px;height:502px;margin:26px 4px;border-radius:8px;background:#f5f5f5}
.page3left .books-screen-two .screen-scrollbar{top:186px}

.page3right.recent-canvas{width:1768px;height:2407px;background:#eee;overflow:hidden;position:relative}
.page3right .detail-screen{position:absolute;left:0;width:1768px;height:704px;background:#eee;overflow:hidden}
.page3right .detail-screen-custom{top:0}.page3right .detail-screen-book{top:820px}.page3right .detail-screen-favorite{top:1612px}
.page3right .detail-titlebar{height:82px;background:#fff;color:#616161;font-size:20px;line-height:82px;padding-left:36px}
.page3right .detail-toolbar{height:47px;background:#d9d9d9;color:#616161;display:flex;align-items:center;justify-content:flex-end;gap:30px;padding:0 45px;font-size:14px}
.page3right .search-control{margin-right:auto;margin-left:43px;width:444px;height:25px;border-radius:13px;background:#fff;display:flex;align-items:center;gap:15px;padding:0 12px}
.page3right .search-icon{width:10px;height:10px;border:1px solid #616161;border-radius:50%;position:relative;display:inline-block}
.page3right .search-icon:after{content:"";position:absolute;width:6px;height:1px;background:#616161;right:-5px;bottom:-3px;transform:rotate(45deg)}
.page3right .detail-main{position:absolute;left:78px;top:128px;width:1668px;height:563px;border-radius:8px;background:#fff;box-shadow:0 7px 6px rgba(0,0,0,.18);overflow:hidden}
.page3right .detail-word-list{position:absolute;left:8px;top:53px;width:713px;height:470px;overflow:visible}
.page3right .detail-row{position:relative;z-index:1;width:713px;height:47px;border-bottom:1px solid #d9d9d9;display:flex;align-items:center;gap:19px;padding-left:9px;color:#616161;font-size:14px;white-space:nowrap;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.page3right .detail-row:hover,.page3right .detail-row:focus-within{z-index:4;width:calc(100% + 55px);transform:translate(4px,-1px);border-radius:7px;background:#fff;box-shadow:0 5px 14px rgba(0,0,0,.24),0 1px 3px rgba(0,0,0,.12)}
.page3right .detail-check{width:19px;height:19px;border:2px solid #d9d9d9;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 19px;color:#fff;font-size:13px;line-height:15px}
.page3right .detail-check.selected{border-color:#03e4a1;background:#03e4a1}
.page3right .detail-examples{position:absolute;left:755px;top:53px;width:797px}
.page3right .detail-examples article{height:97px;border-bottom:1px solid #d9d9d9;display:flex;align-items:flex-start;gap:18px;padding:20px 32px 0 12px;color:#616161;position:relative;z-index:1;font-size:14px;background:#fff;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease}
.page3right .detail-examples article:hover,.page3right .detail-examples article:focus-within{z-index:4;transform:translate(-8px,-2px);border-radius:7px;background:#fff;box-shadow:0 5px 14px rgba(0,0,0,.24),0 1px 3px rgba(0,0,0,.12)}
.page3right .detail-examples article div{line-height:22px}.page3right .detail-examples article b{display:block;font-weight:400;line-height:22px}.page3right .detail-examples article p{margin:0;white-space:nowrap;line-height:22px}
.page3right .detail-examples .star{position:absolute;right:10px;top:16px;color:#ffe500;font-size:20px}
.page3right .detail-screen-favorite .detail-examples .star,.page3right .detail-screen-book .detail-examples .star{color:#d9d9d9}
.page3right .detail-main:after{content:"";position:absolute;right:18px;top:52px;width:16px;height:460px;border-radius:8px;background:#d9d9d9}
.page3right .detail-main:before{content:"";position:absolute;right:22px;top:117px;width:8px;height:113px;border-radius:8px;background:#f5f5f5;z-index:1}

/* Editable page3-left DOM used by page3-left.html. */
.page3left.page3-editable{position:relative;width:2501px;height:2407px;background:#f5f5f5;overflow:hidden}
.page3left .recent-header{position:absolute;left:581px;top:0;width:1920px;height:100px;background:linear-gradient(110deg,#79c200 0%,#00c288 43%,#00b19c 76%,#2b80e2 100%);color:#fff}
.page3left .recent-logo{position:absolute;left:368px;top:39px;width:137px;height:46px;background:#d9d9d9;color:#616161;font:14px/46px Inter,Arial,sans-serif;text-align:center;text-decoration:none}
.page3left .recent-nav{position:absolute;left:694px;top:53px;display:flex;gap:52px;align-items:center;font-size:14px;line-height:18px;white-space:nowrap}
.page3left .recent-nav a{color:#fff;text-decoration:none}
.page3left .recent-nav a:nth-child(2){position:relative;padding-right:19px}
.page3left .nav-chevron{position:absolute;right:0;top:3px;width:8px;height:8px;border-right:1.7px solid #fff;border-bottom:1.7px solid #fff;transform:rotate(45deg)}
.page3left .recent-avatar{position:absolute;right:277px;top:45px;width:37px;height:37px;border:0;border-radius:50%;background:#d9d9d9}
.page3left .recent-avatar span{position:absolute;left:12px;top:7px;width:13px;height:13px;border-radius:50%;background:#fff}
.page3left .recent-avatar i{position:absolute;left:8px;bottom:4px;width:22px;height:13px;border-radius:13px 13px 7px 7px;background:#fff}
.page3left .books-panel{position:absolute;left:931px;width:1232px;margin-left:0;grid-column:auto;grid-row:auto;padding:0;background:transparent;border-radius:8px;overflow:visible}
.page3left .recent-mine{top:115px;height:863px}.page3left .recent-all{top:1047px;height:1099px}
.page3left .books-panel:before{content:"";position:absolute;left:0;top:95px;width:1232px;height:768px;border-radius:8px;background:#fff;z-index:0}
.page3left .recent-all:before{top:95px;height:1004px}
.page3left .panel-tabs{position:absolute;left:41px;top:52px;display:flex;gap:41px;height:31px;z-index:1}
.page3left .recent-tab{width:159px;height:30px;padding:0;border:0;border-radius:30px;background:#fff;color:#616161;font:500 20px/30px var(--font);text-align:center}
.page3left .recent-tab.is-active{background:#03e4a1;color:#fff}
.page3left .book-grid{position:absolute;left:160px;display:grid;grid-template-columns:repeat(4,167px);column-gap:64px;row-gap:101px;z-index:1}
.page3left .top-grid{top:173px}.page3left .all-grid{top:281px}
.page3left .book-tile{width:167px;color:#616161;text-align:center}
.page3left .cover{width:167px;height:231px;border-radius:8px;background:#03e4a1;box-shadow:6px 4px 9px rgba(0,0,0,.25)}
.page3left .book-name{margin:16px 0 0;color:#616161;font-size:20px;line-height:28px;white-space:nowrap}
.page3left .pencil-icon{display:inline-block;width:14px;height:14px;margin-right:7px;border:2px solid #616161;border-radius:2px;transform:rotate(-45deg);vertical-align:-1px}
.page3left .vertical-scrollbar{position:absolute;right:35px;top:173px;width:16px;height:595px;border-radius:8px;background:#d9d9d9}
.page3left .vertical-scrollbar span{display:block;width:8px;height:502px;margin:26px 4px;border-radius:8px;background:#f5f5f5}
.page3left .recent-all .vertical-scrollbar{top:281px}
.page3left .book-search{position:absolute;left:399px;top:145px;width:420px;height:36px;border-radius:18px;background:#f5f5f5;border:1px solid #d9d9d9;display:flex;align-items:center;gap:12px;padding:0 18px;color:#999;font-size:14px;z-index:1}
.page3left .book-search input{width:100%;border:0;outline:0;background:transparent;color:#616161;font:14px var(--font)}
.page3left .search-icon{width:12px;height:12px;border:1px solid #616161;border-radius:50%;position:relative;display:inline-block;flex:0 0 12px}
.page3left .search-icon:after{content:"";position:absolute;width:6px;height:1px;background:#616161;right:-5px;bottom:-3px;transform:rotate(45deg)}
/* Final editable Page 3 geometry, aligned to the simplified Figma Dev Mode frame. */
.page3-editable{font-family:"PingFang HK","PingFang SC","Microsoft YaHei",Arial,sans-serif;color:#616161}
.page3-editable.page3left{position:relative;width:1920px;height:2407px;background:#eee;overflow:hidden}
.page3-editable .recent-header{position:absolute;left:0;top:0;width:1920px;height:100px;background:linear-gradient(90deg,#79c200 0%,#00c288 42.7083%,#00b19c 76.0417%,#2b80e2 100%);color:#fff}
.page3-editable .recent-logo{position:absolute;left:368px;top:39px;width:137px;height:46px;background:#d9d9d9;color:#616161;text-decoration:none;text-align:center;font:14px/46px Arial,sans-serif}
.page3-editable .recent-nav{position:absolute;left:700px;top:48px;display:flex;align-items:center;gap:43px;height:24px;white-space:nowrap}
.page3-editable .recent-nav a{color:#fff;text-decoration:none;font-size:14px;line-height:20px;font-weight:400}
.page3-editable .nav-chevron{display:inline-block;width:7px;height:7px;margin:0 0 3px 5px;border-right:1px solid #fff;border-bottom:1px solid #fff;transform:rotate(45deg)}
.page3-editable .recent-avatar{position:absolute;left:1606px;top:45px;width:37px;height:37px;border:0;border-radius:50%;background:#d9d9d9;padding:0}
.page3-editable .recent-avatar span{position:absolute;left:12px;top:6px;width:13px;height:13px;border-radius:50%;background:#fff}
.page3-editable .recent-avatar i{position:absolute;left:7px;bottom:5px;width:23px;height:13px;border-radius:14px 14px 7px 7px;background:#fff}
.page3-editable .books-panel{position:absolute;left:350px;width:1232px;margin:0;padding:0;background:#fff;border-radius:8px;overflow:visible;grid-column:auto;grid-row:auto}
.page3-editable .books-panel:before{display:none}
.page3-editable .recent-mine{top:210px;height:768px}
.page3-editable .recent-all{top:1142px;height:1004px}
.page3-editable .panel-tabs{position:absolute;left:41px;top:-42.485px;display:flex;gap:41.096px;width:auto;height:30.342px;margin:0;z-index:2}
.page3-editable .recent-tab{width:158.606px;height:30.342px;border:0;border-radius:15.171px;padding:0;background:#fff;color:#616161;font:500 20px/30.342px "PingFang HK","PingFang SC","Microsoft YaHei",sans-serif;cursor:pointer}
.page3-editable .recent-tab.is-active{background:#03e4a1;color:#fff}
.page3-editable .book-grid{position:absolute;left:160px;display:grid;grid-template-columns:repeat(4,167px);column-gap:64px;margin:0;padding:0;z-index:1}
.page3-editable .top-grid{top:78px;row-gap:0}
.page3-editable .all-grid{top:186px;row-gap:68px;grid-auto-rows:264px}
.page3-editable .book-tile{width:167px;height:264px;margin:0;padding:0;text-align:center;color:#616161}
.page3-editable .cover{width:167px;height:231px;border-radius:8px;background:#03e4a1;box-shadow:6px 4px 9px rgba(0,0,0,.25)}
.page3-editable .book-name{height:24px;margin:9px 0 0;color:#616161;font-size:16px;line-height:24px;font-weight:400;white-space:nowrap}
.page3-editable .book-name.with-pencil{display:flex;align-items:center;justify-content:center;gap:8px}
.page3-editable .pencil-icon{position:relative;display:inline-block;width:14px;height:14px;border:1.5px solid #616161;border-radius:1px;transform:rotate(-45deg) scale(.7);transform-origin:center}
.page3-editable .pencil-icon:after{content:"";position:absolute;right:-3px;bottom:-3px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:5px solid #616161;transform:rotate(45deg)}
.page3-editable .vertical-scrollbar{position:absolute;left:1181px;top:78px;width:16px;height:595px;border-radius:8px;background:#d9d9d9}
.page3-editable .vertical-scrollbar span{position:absolute;left:4px;top:26px;width:8px;height:502px;border-radius:8px;background:#f5f5f5}
.page3-editable .recent-all .vertical-scrollbar{top:186px}
.page3-editable .recent-all .vertical-scrollbar span{top:19px;height:249px}

/* Keep both page3-left scrollbar thumbs mathematically centered in their tracks. */
.page3-editable .vertical-scrollbar{
  left:1181px;
  width:16px;
  border-radius:8px;
  background:#d9d9d9;
}
.page3-editable .vertical-scrollbar span{
  position:absolute;
  left:50%;
  margin:0;
  transform:translateX(-50%);
  width:8px;
  border-radius:8px;
  background:#f5f5f5;
}
.page3-editable .book-search{position:absolute;left:399px;top:65px;width:419px;height:45px;border-radius:14.5px;background:#d9d9d9;display:flex;align-items:center;padding:0 15px;color:#888;z-index:2}
.page3-editable .book-search input{width:100%;height:100%;border:0;outline:0;background:transparent;padding:0 0 0 15px;color:#616161;font:16px/45px "PingFang HK","PingFang SC","Microsoft YaHei",sans-serif}
.page3-editable .book-search input::placeholder{color:#888;opacity:1}
.page3-editable .search-icon{position:relative;display:inline-block;flex:0 0 14px;width:14px;height:14px;border:1.5px solid #616161;border-radius:50%}
.page3-editable .search-icon:after{content:"";position:absolute;width:6px;height:1.5px;right:-5px;bottom:-3px;background:#616161;transform:rotate(45deg);transform-origin:left center}

/* Right page: three 1768×704 detail states are independently editable. */
.page3-editable.page3right{position:relative;width:1768px;height:2407px;background:#eee;overflow:hidden}
.page3-editable .detail-screen{position:absolute;left:0;width:1768px;height:704px;background:#fff;overflow:visible}
.page3-editable .detail-custom{top:0}.page3-editable .detail-book{top:820px}.page3-editable .detail-favorite{top:1612px}
.page3-editable .detail-header{position:absolute;left:0;top:0;width:1746px;height:82px;background:#fff;border:1px solid #fff}
.page3-editable .detail-header h1{position:absolute;left:36px;top:25px;margin:0;color:#616161;font-size:20px;line-height:30px;font-weight:400}
.page3-editable .detail-toolbar{position:absolute;left:0;top:82px;width:1746px;height:47px;background:#d9d9d9;border:1px solid #d9d9d9}
.page3-editable .detail-search{position:absolute;left:44px;top:7px;width:419px;height:25px;border-radius:12.5px;background:#fff;display:flex;align-items:center;padding-left:21px}
.page3-editable .detail-search input{width:365px;height:23px;border:0;outline:0;background:transparent;padding:0 0 0 19px;color:#616161;font:14px/23px "PingFang HK","PingFang SC","Microsoft YaHei",sans-serif}
.page3-editable .detail-search input::placeholder{color:#616161;opacity:1}
.page3-editable .detail-search .search-icon{width:12px;height:12px;flex-basis:12px;border-width:1.5px}
.page3-editable .detail-search .search-icon:after{width:5px;right:-4px;bottom:-3px}
.page3-editable .toolbar-actions{position:absolute;right:39px;top:10px;display:flex;align-items:center;gap:41px;height:27px}
.page3-editable .toolbar-actions button{border:0;background:transparent;padding:0;color:#616161;font:14px/24px "PingFang HK","PingFang SC","Microsoft YaHei",sans-serif;white-space:nowrap}
.page3-editable .toolbar-actions .add-to{margin-right:8px}
.page3-editable .detail-body{position:absolute;left:0;top:125.5px;width:1746px;height:567px;background:#fff;border:1px solid #fff}
.page3-editable .word-list{position:absolute;left:78px;top:43.5px;width:713px;height:471px;margin:0;padding:0;overflow:hidden;background:#fff}
.page3-editable .word-row{position:relative;display:flex;align-items:center;width:713px;height:47px;border:0;border-bottom:1px solid #d9d9d9;margin:0;padding:0 0 0 7px;background:#fff;color:#969696;font:16px/47px "PingFang HK","PingFang SC","Microsoft YaHei",sans-serif;text-align:left}
.page3-editable .word-row{width:644px;margin-left:8px;padding-left:1px}
.page3-editable .word-row.is-selected{width:713px;margin-left:0;padding-left:9px}
.page3-editable .word-row.is-selected:nth-child(2){z-index:2;box-shadow:0 3px 8px rgba(0,0,0,.22)}
.page3-editable .check-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:16px;border:2px solid #d9d9d9;border-radius:50%;color:transparent;font:14px/18px Arial,sans-serif}
.page3-editable .word-row.is-selected .check-icon{border-color:#03e4a1;background:#03e4a1;color:#fff}
.page3-editable .definition-card{position:absolute;left:791px;top:2.5px;width:955px;height:563px;border-radius:7px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.26);padding:41px 0 0 42px;overflow:hidden}
.page3-editable .definition-row{position:relative;display:flex;width:796px;height:97px;margin:0;padding:10px 40px 0 21px;border-bottom:1px solid #d9d9d9;color:#969696;font:14px/22px "PingFang HK","PingFang SC","Microsoft YaHei",sans-serif}
.page3-editable .definition-row>div{min-width:0}
.page3-editable .definition-row strong{display:block;margin:0;font-size:14px;font-weight:400;color:#969696;line-height:22px}
.page3-editable .definition-row p{margin:0;white-space:nowrap;color:#969696;font-size:14px;line-height:26px}
.page3-editable .meaning-dot{position:absolute;left:2px;top:14px;width:19px;height:19px;border-radius:50%;background:#03e4a1}
.page3-editable .star{position:absolute;right:5px;top:10px;color:#d9d9d9;font:24px/26px Arial,sans-serif}
.page3-editable .star.is-favorite{color:#ffe500}
.page3-editable .detail-scrollbar{position:absolute;top:54.5px;width:16px;height:460px;border-radius:8px;background:#d9d9d9}
.page3-editable .detail-scrollbar span{position:absolute;left:4px;top:61px;width:8px;height:117px;border-radius:8px;background:#f5f5f5}
.page3-editable .left-scroll{left:28px}.page3-editable .right-scroll{left:1706px}

/* Final page2 student-detail alignment: the Figma detail card uses compact green pills,
   a centered heading, CSS-drawn mastery icons, and four attached filter tabs. */
.page2 .progress-card{width:658px;height:646px;padding:15px 18px}
.page2 .progress-head{position:relative;height:35px;display:block;padding:0;border-bottom:1px solid #ededed;font-size:18px;line-height:35px}
.page2 .progress-head>span:first-child{position:absolute;left:250px;top:0;padding-left:35px;white-space:nowrap;font-size:20px}
.page2 .progress-head>span:last-child{position:absolute;right:2px;top:0;white-space:nowrap;font-size:18px}
.page2 .progress-head>span:first-child{position:absolute}
.page2 .progress-head span:first-child:before{content:"";position:absolute;left:0;top:7px;display:block;width:20px;height:20px;border:1.5px solid #777;border-radius:50%;margin:0}
.page2 .progress-head span:first-child:after{content:"";position:absolute;left:8px;top:14px;width:5px;height:5px;border-right:1.5px solid #777;border-bottom:1.5px solid #777;transform:rotate(45deg)}
.page2 .progress-primary{position:relative;width:203px;height:38px;margin:15px 0 23px;padding:0;border-radius:20px;background:#4fd5ac;color:#fff;font-size:14px;font-weight:600}
.page2 .progress-primary>span{position:absolute;left:17px;top:0;line-height:38px;color:#fff}
.page2 .progress-primary>i{position:absolute;left:74px;top:11px;width:112px;height:15px;margin:0;border-radius:0;background:#fff}
.page2 .progress-primary>b{position:absolute;right:23px;top:12px;width:11px;height:11px;border:0;border-radius:1px;background:#4fd5ac}
.page2 .mastery-grid{width:618px;height:204px;margin-left:1px;padding:0 11px;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);column-gap:13px;row-gap:0;border-radius:18px;background:#ededed}
.page2 .mastery-grid div{gap:20px;padding-left:18px;border-bottom:1px solid #dedede;font-size:14px}
.page2 .mastery-grid div:nth-child(even){gap:24px;padding-left:23px;border-left:1px solid #dedede}
.page2 .mastery-grid div:nth-last-child(-n+2){border-bottom:0}
.page2 .mastery-grid span{position:relative;width:24px;height:24px;flex:0 0 24px;margin:0;transform:translateY(2px);border:1.5px solid #4fd5ac;border-radius:50%;color:transparent;font-size:0;background:transparent}
.page2 .mastery-grid div:nth-child(odd) span{background:linear-gradient(90deg,transparent 0 48%,#4fd5ac 48% 53%,transparent 53% 100%)}
.page2 .mastery-grid div:nth-child(even) span{background:linear-gradient(90deg,transparent 0 50%,#4fd5ac 50% 100%)}
.page2 .mastery-grid div:nth-child(even) span:after{content:"";position:absolute;left:50%;top:0;width:1px;height:100%;background:#ededed}
.page2 .mastery-grid label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page2 .progress-card .progress-list{width:203px;margin-top:20px;display:flex;flex-direction:column;gap:18px;padding:0}
.page2 .progress-card .progress-list>div{position:relative;width:203px;height:39px;display:block;border:2px solid #d9d9d9;border-radius:20px;background:#fff;color:#4fd5ac;font-size:16px}
.page2 .progress-card .progress-list b{position:absolute;left:17px;top:0;width:auto;font-weight:600;line-height:35px;white-space:nowrap}
.page2 .progress-card .progress-list i{position:absolute;left:74px;top:11px;width:112px!important;height:15px;margin:0;border:1px solid #4fd5ac;border-radius:0;background:#4fd5ac;box-shadow:inset -16px 0 0 #fff}
.page2 .side-tabs{position:absolute;right:-38px;top:51px;display:flex;flex-direction:column;gap:16px}
.page2 .side-tabs span{width:40px;height:126px;border:1px solid #888;border-left-color:#777;border-radius:0 17px 17px 0;background:#d1d1d1;color:#fff;writing-mode:vertical-rl;text-orientation:mixed;display:flex;align-items:center;justify-content:center;font-size:18px;letter-spacing:3px}
.page2 .side-tabs span.is-active{background:#fff;color:#03dca0;border-color:#777}
.page2 .side-tabs span:first-child:not(.is-active){background:#d1d1d1}
.page3-editable .pencil-icon{width:16px;height:16px;margin:0;border:0;border-radius:0;transform:none;background:transparent}
.page3-editable .pencil-icon:before{content:"✎";display:block;color:#616161;font:16px/16px Arial,sans-serif;transform:rotate(-15deg)}
.page3-editable .pencil-icon:after{display:none}
.page3-editable .detail-custom .definition-row:nth-child(-n+3) .star{color:#ffe500}
.page3-editable .detail-custom .definition-row:nth-child(n+4) .star{color:#d9d9d9}

/* Final page2 pass against the supplied Figma reference frames. */
.page1{--green:var(--accent-bright);--green2:var(--accent-bright)}
.page1 .profile-avatar{width:84px;height:84px;border-radius:50%;overflow:hidden;background:#d9d9d9}
.page1 .profile-avatar:before{left:26px;top:14px;width:32px;height:32px;background:#fff}
.page1 .profile-avatar:after{left:7px;top:53px;bottom:auto;width:70px;height:58px;background:#fff;border-radius:50% 50% 0 0}
.page2{--page2-bright:var(--accent-bright);--green:var(--accent-bright);--green2:var(--accent-bright)}
.page2>.header .brand{font-size:0;color:transparent}
.page2 .class-screen .class-tabs span.active,.page2 .student-main .class-tabs span.active{background:var(--page2-bright)}
.page2 .student-main .class-tabs span:not(.active){background:#fff}
.page2 .student-dashboard{grid-template-rows:152px 152px 314px;row-gap:14px}
.page2 .student-metrics{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;text-align:center;line-height:28px}
.page2 .student-metrics p{line-height:28px}
.page2 .pie-card{overflow:hidden}

/* Match the Figma page2 scrollbars: keep the gray track and use a white thumb. */
.page2 .student-grid:before{background:#f5f5f5}
.page2 .pie{left:74px;top:34px;width:200px;height:200px;background:conic-gradient(from 0deg,#7eefc9 0deg 59.6deg,#fff 59.6deg 60.4deg,#4ee4a4 60.4deg 204.6deg,#fff 204.6deg 205.4deg,#d2faec 205.4deg 294.6deg,#fff 294.6deg 295.4deg,#f6fefb 295.4deg 359.6deg,#fff 359.6deg 360deg)}
.page2 .pie-label{font-size:14px;line-height:17px;color:#616161;transform:translate(-50%,-50%)}
.page2 .pie-label.p12{left:66%;top:23%}.page2 .pie-label.p45{left:66.5%;top:66%}.page2 .pie-label.p30{left:24%;top:58%}.page2 .pie-label.p13{left:32.5%;top:23%}
.page2 .pie-legend{left:46px;bottom:20px;gap:17px;font-size:11px}
.page2 .pie-legend span:before{width:20px;height:16px;margin-right:8px;vertical-align:-4px}
.page2 .pie-legend span:nth-child(1):before{background:#f6fefb;border-color:#999}.page2 .pie-legend span:nth-child(2):before{background:#d2faec;border-color:#d2faec}.page2 .pie-legend span:nth-child(3):before{background:#7eefc9;border-color:#7eefc9}.page2 .pie-legend span:nth-child(4):before{background:var(--page2-bright);border-color:var(--page2-bright)}
.page2 .summary-ratios b,.page2 .student-metrics b,.page2 .student-card .stats b{color:var(--page2-bright)}
.page2 .class-screen .student-card .stats b{color:var(--page2-bright)}
.page2 .chart-buttons div,.page2 .mastery div{color:var(--page2-bright)}
.page2 .progress-primary{background:var(--page2-bright)}
.page2 .progress-primary>i{background:#fff}
.page2 .progress-primary>b{background:var(--page2-bright)}
.page2 .mastery-grid span{border-color:var(--page2-bright)}
.page2 .mastery-grid div:nth-child(odd) span{background:linear-gradient(90deg,transparent 0 48%,var(--page2-bright) 48% 53%,transparent 53% 100%)}
.page2 .mastery-grid div:nth-child(even) span{background:linear-gradient(90deg,transparent 0 50%,var(--page2-bright) 50% 100%)}
.page2 .progress-card .progress-list>div{color:var(--page2-bright)}
.page2 .progress-card .progress-list i{border-color:var(--page2-bright);background:var(--page2-bright)}
.page2 .side-tabs span.is-active{color:var(--page2-bright)}
.page2 .floating-progress{top:58px;background:var(--page2-bright)}
.page2 .floating-progress i:after{background:var(--page2-bright)}

/* Final page2 scrollbar override: both the grid and its class-layout track use a white thumb. */
.page2 .class-screen .student-grid:before{background:#f5f5f5}
.page2 .class-screen .class-layout:before{background:#f5f5f5}