:root{--ink:#17324d;--muted:#708196;--blue:#2979d9;--blue-weak:#eaf4ff;--coral:#fa735b;--yellow:#ffc94a;--line:#e7edf3;--paper:#fffdf8;--bg:#f6f9fc;--green:#35aa7b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans","Noto Sans SC",sans-serif;font-size:14px}.app{min-height:100vh}.nav{height:70px;background:#fff;display:flex;align-items:center;padding:0 max(24px,calc((100vw - 1280px)/2));gap:38px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:700;white-space:nowrap}.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--coral);display:grid;place-items:center;color:#fff;font-size:18px;box-shadow:0 4px 10px #fa735b44}.nav-links{display:flex;gap:26px;height:100%;align-items:center}.nav-links a{color:#63758b;text-decoration:none;font-weight:600}.nav-links a.active{color:var(--blue);height:100%;display:flex;align-items:center;border-bottom:3px solid var(--blue)}.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px}.streak{color:#e97737;font-weight:700}.avatar{width:34px;height:34px;border-radius:50%;background:#ffe0b9;display:grid;place-items:center;font-size:17px}.shell{max-width:1280px;margin:auto;padding:28px 24px 54px}.crumb{color:#8b9aae;font-size:13px;margin-bottom:18px}.crumb span{color:var(--ink);font-weight:600}.title-row{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.title-row h1{font-size:27px;margin:0 0 7px;letter-spacing:0}.title-row p{margin:0;color:var(--muted)}.continue{background:#fff;border:1px solid var(--line);padding:9px 13px;border-radius:7px;color:var(--blue);font-weight:700;cursor:pointer}.layout{display:grid;grid-template-columns:265px minmax(0,1fr) 282px;gap:20px}.panel{background:#fff;border:1px solid var(--line);border-radius:8px}.book-panel{padding:14px}.book-cover{height:205px;border-radius:6px;background:linear-gradient(180deg,#274d70aa,#0d284ecc),url('https://images.unsplash.com/photo-1512820790803-83ca734da794?auto=format&fit=crop&w=600&q=85') center/cover;position:relative;padding:18px;color:#fff;overflow:hidden}.book-cover:after{content:"";position:absolute;inset:auto 0 0;height:45%;background:linear-gradient(transparent,#112b4fcc)}.cover-copy{position:absolute;bottom:18px;z-index:1}.cover-copy small{font-weight:600;opacity:.85}.cover-copy b{display:block;font-size:21px;margin-top:2px}.cover-lines{font-size:11px;opacity:.8;margin-top:6px}.book-info{padding:16px 3px 5px}.tag{display:inline-block;padding:4px 7px;border-radius:4px;background:var(--blue-weak);color:var(--blue);font-size:11px;font-weight:700}.book-info h2{font-size:17px;margin:10px 0 7px}.book-info p{font-size:12px;line-height:1.65;color:var(--muted);margin:0}.meta{display:flex;border-top:1px solid var(--line);margin-top:14px;padding-top:13px;gap:11px;color:#75879a;font-size:11px}.chapters{margin-top:20px}.chapters h3,.tool-title{font-size:13px;margin:0 0 9px}.chapter{display:flex;align-items:center;gap:10px;padding:11px 8px;border-radius:6px;color:#61738a;font-size:13px;cursor:pointer}.chapter b{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#edf2f7;color:#75879a;font-size:11px}.chapter.active{background:#eaf4ff;color:var(--blue);font-weight:700}.chapter.active b{background:var(--blue);color:#fff}.reader{overflow:hidden}.reader-head{height:59px;padding:0 18px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:10px}.reader-head strong{font-size:15px}.reader-head .sub{margin-right:auto;color:#9aa7b5;font-size:12px}.icon-btn{border:0;background:transparent;color:#62758b;font-size:18px;width:30px;height:30px;border-radius:5px;cursor:pointer}.icon-btn:hover{background:#edf5ff;color:var(--blue)}.modes{display:flex;background:#f1f5f8;border-radius:5px;padding:2px;gap:2px;margin-right:5px}.mode{border:0;background:transparent;padding:5px 8px;border-radius:4px;color:#6f8194;font:600 11px inherit;cursor:pointer}.mode.active{background:#fff;color:var(--blue);box-shadow:0 1px 3px #17324d16}.reader-body{--reading-font:20px;padding:28px 9.5% 24px;min-height:548px;background:var(--paper)}.reading-label{color:#eb765c;font-size:11px;font-weight:700;letter-spacing:0;margin-bottom:10px}.story-title{font-size:27px;letter-spacing:0;margin:0 0 5px}.story-by{font-size:12px;color:#91a0ae;margin-bottom:24px}.sentence{font-family:Georgia,"Times New Roman",serif;font-size:var(--reading-font);line-height:1.85;margin:0 0 16px;color:#273d54}.sentence-cn{font-family:"Noto Sans SC",sans-serif;font-size:calc(var(--reading-font) - 5px);line-height:1.65;color:#8a99a8;margin:-7px 0 16px}.word{border-bottom:2px solid #ffd27a;cursor:pointer;position:relative}.word:hover,.word.selected{color:var(--blue);background:#fff2cc}.quote{margin:22px 0;border-left:3px solid var(--coral);padding:5px 0 5px 15px;color:#536b82;font:italic 15px/1.7 Georgia}.reader-footer{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-top:1px solid var(--line);background:#fff}.progress{display:flex;align-items:center;gap:9px;color:#8191a1;font-size:12px}.progress-line{width:126px;height:5px;border-radius:5px;background:#e7edf2}.progress-line i{display:block;width:38%;height:100%;border-radius:5px;background:var(--blue)}.next{background:var(--blue);border:0;color:#fff;padding:9px 14px;border-radius:6px;font-weight:700;cursor:pointer}.aside{display:flex;flex-direction:column;gap:15px}.vocab{padding:17px;position:sticky;top:88px;z-index:2}.vocab-empty{color:#94a2b1;font-size:12px;margin-top:3px}.wordcard{margin-top:12px;padding:13px;background:#f7fbff;border:1px solid #dceafa;border-radius:6px}.word-card-top{display:flex;justify-content:space-between;align-items:center}.wordcard .en{font:700 21px Georgia;color:var(--blue)}.word-speak{width:30px;height:30px;border:0;border-radius:50%;background:var(--coral);color:#fff;cursor:pointer}.phonetic{color:#8b9cac;font-size:12px;margin:4px 0 9px}.wordcard .meaning{font-weight:600}.wordcard .meaning span{font-weight:400;color:#8090a0;margin-left:5px}.save-word{width:100%;background:#fff;border:1px solid #bcd9f7;color:var(--blue);border-radius:5px;padding:7px;margin-top:12px;cursor:pointer;font-weight:700}.audio{padding:16px}.audio-row{display:flex;align-items:center;gap:11px}.play{width:35px;height:35px;background:var(--coral);color:#fff;border:0;border-radius:50%;cursor:pointer}.wave{flex:1;height:28px;background:repeating-linear-gradient(90deg,#d7e3ed 0 2px,transparent 2px 5px);mask:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);opacity:.9}.rate{font-size:12px;color:#78899a}.practice{padding:17px;background:#fff8e9;border-color:#f3dfb5}.practice .exercise{display:flex;align-items:center;gap:10px;margin-top:11px;background:#fff;padding:9px;border-radius:6px;font-size:12px}.exercise i{font-style:normal;width:25px;height:25px;border-radius:6px;background:#fff0d0;display:grid;place-items:center}.exercise b{font-size:12px}.exercise span{display:block;color:#8c9aa8;margin-top:2px}.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:#17324d;color:#fff;border-radius:6px;padding:11px 16px;font-size:13px;box-shadow:0 8px 20px #17324d33;transition:.25s;z-index:20}.toast.show{transform:translateX(-50%) translateY(0)}
    .book-meta-editor{padding:20px;margin-bottom:18px}.admin-commands{display:flex;gap:8px}.book-meta-editor .admin-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.book-meta-editor .admin-fields label:nth-last-child(-n+2){grid-column:1/-1}@media(max-width:720px){.book-meta-editor .admin-fields{grid-template-columns:1fr}.admin-commands{margin-top:12px}}
    @media(max-width:1020px){.layout{grid-template-columns:230px minmax(0,1fr)}.aside{display:none}.nav-links{gap:16px}.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:720px){.nav{padding:0 16px;height:62px;gap:16px}.nav-links{display:none}.nav-right{gap:10px}.streak{display:none}.shell,.library{padding:20px 14px}.title-row{align-items:flex-start}.continue{display:none}.layout{display:block}.book-panel{display:none}.reader-body{padding:25px 7%;min-height:520px}.reader-head{padding:0 10px}.reader-head .sub{display:none}.modes{margin-left:auto}.story-title{font-size:24px}.sentence{font-size:16px}.reader-footer{padding:13px}.progress-line{width:72px}.icon-btn:not(#bookmark){display:none}.library-head{display:block}.library-head h1{font-size:25px}.search{width:100%;margin-top:18px}.shelf-continue{gap:11px}.continue-progress{display:none}.shelf-continue .read-link{padding:8px 10px;font-size:12px}.library-content{display:block}.filters{display:flex;gap:8px;overflow:auto;margin-bottom:20px}.filters h3{display:none}.filter-group{display:contents}.filter{white-space:nowrap;background:#fff;border:1px solid var(--line);border-radius:20px;padding:7px 11px}.filter.active{border-color:#8dc2f5;background:var(--blue-weak)}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.library-cover{height:190px}.back-to-shelf{display:block}.reader-view .crumb{margin-bottom:12px}.reader-view .title-row{margin-bottom:17px}}

/* Library, learning, and management views. Kept separate from markup to prevent layout regressions. */
.hidden{display:none!important}
.mobile-chapter-select{display:none}
@media(max-width:720px){#fontSize{display:block!important;font-size:0}#fontSize::after{content:'A+';font:700 13px "DM Sans",sans-serif}}
@media(max-width:720px){.reader-head>strong{display:none}.mobile-chapter-select{display:block;min-width:76px;height:31px;padding:0 22px 0 7px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);font:700 13px inherit}.reader-head .modes{margin-left:auto}}
@media(max-width:720px){.sentence{font-size:var(--reading-font)}}
.toast{z-index:50}
.admin-login{display:none;position:fixed;inset:0;z-index:40;align-items:center;justify-content:center;padding:20px;background:#17324d55}.admin-login.show{display:flex}.admin-login-form{position:relative;width:min(390px,100%);padding:28px;background:#fff;border-radius:8px;box-shadow:0 18px 48px #17324d40}.admin-login-form h2{margin:0 0 8px;font-size:21px}.admin-login-form>p{margin:0 0 20px;color:var(--muted)}.admin-login-form label{display:grid;gap:7px;margin-top:14px;color:#586d82;font-size:12px;font-weight:700}.admin-login-form input{width:100%;border:1px solid var(--line);border-radius:6px;padding:10px;color:var(--ink);font:400 14px inherit;outline:none}.admin-login-form input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #eaf4ff}.admin-login-form .next{width:100%;margin-top:20px}.admin-login-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:0;border-radius:50%;background:#f1f5f8;color:#62758b;font-size:21px;cursor:pointer}.admin-login-form .admin-login-error{min-height:18px;margin:8px 0 -10px;color:#d45849;font-size:12px}
@media(max-width:1020px){.mobile-word-panel{position:fixed;z-index:30;left:50%;bottom:0;width:min(560px,100%);padding:18px 16px calc(18px + env(safe-area-inset-bottom));background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;box-shadow:0 -10px 30px #17324d24;transform:translate(-50%,110%);transition:transform .22s ease}.mobile-word-panel.show{transform:translate(-50%,0)}.mobile-word-panel .wordcard{margin:0}.mobile-word-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;background:#edf2f7;color:#62758b;font-size:21px;line-height:1;cursor:pointer}}
.library,.learning-view{max-width:1280px;margin:0 auto;padding:34px 24px 56px}
.library-head,.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.library-head h1,.view-head h1{font-size:28px;line-height:1.2;margin:0 0 8px}
.library-head p,.view-head p{margin:0;color:var(--muted)}
.search{width:280px;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);outline:none}
.search:focus{border-color:#8ec1f3;box-shadow:0 0 0 3px #eaf4ff}
.shelf-continue{display:flex;align-items:center;gap:15px;padding:14px 17px;margin-bottom:26px;background:#fff;border:1px solid var(--line);border-radius:8px}
.mini-cover{width:36px;height:45px;flex:0 0 auto;border-radius:4px;background:linear-gradient(145deg,#ffbc5c,#fa735b)}
.continue-copy{min-width:0;display:grid;gap:4px}.continue-copy b{font-size:14px}.continue-copy span{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.continue-progress{width:130px;height:5px;margin-left:auto;background:#e8eff5;border-radius:4px}.continue-progress i{display:block;width:38%;height:100%;background:var(--blue);border-radius:inherit}
.read-link,.review-word{border:1px solid #bcd9f7;background:#fff;color:var(--blue);border-radius:6px;padding:8px 12px;font-weight:700;cursor:pointer;white-space:nowrap}
.library-content{display:grid;grid-template-columns:184px minmax(0,1fr);gap:28px}.filters{align-self:start}.filter-group{padding:0 0 20px}.filter-group h3{font-size:13px;margin:0 0 10px}.filter{display:block;width:100%;padding:8px 10px;border:0;background:transparent;text-align:left;color:#687b90;border-radius:6px;cursor:pointer}.filter:hover,.filter.active{background:var(--blue-weak);color:var(--blue);font-weight:700}
.shelf-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.shelf-title h2{margin:0;font-size:19px}.shelf-title span{color:var(--muted);font-size:12px}
.book-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.library-book{min-width:0;padding:0 0 14px;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .18s,box-shadow .18s}.library-book:hover{transform:translateY(-2px);box-shadow:0 8px 20px #17324d14}.library-cover{height:177px;padding:16px;color:#fff;background:linear-gradient(150deg,#26557d,#62a2d9);position:relative}.library-cover.cover-15{background:linear-gradient(150deg,#427b7c,#193e5f)}.library-cover.cover-16{background:linear-gradient(150deg,#9b6072,#4e3f73)}.library-cover .cover-copy{position:absolute;inset:auto 16px 16px}.library-cover .cover-copy b{font-size:16px;line-height:1.25;overflow-wrap:anywhere}.library-book h3{font-size:15px;margin:13px 14px 6px}.library-book>p{height:39px;overflow:hidden;margin:0 14px 12px;font-size:12px;line-height:1.6;color:var(--muted)}.book-meta{display:flex;justify-content:space-between;gap:7px;margin:0 14px;color:#748699;font-size:11px}.empty{grid-column:1/-1;color:var(--muted);padding:28px 0;text-align:center}
.back-to-shelf{margin:0 0 17px;border:0;background:transparent;color:var(--blue);font-weight:700;cursor:pointer}.reader-view{display:block}
.learning-view{min-height:calc(100vh - 70px)}.word-list,.admin-book-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.word-row{display:flex;gap:13px;align-items:center;padding:16px}.word-row>b{font:700 20px Georgia;color:var(--blue)}.word-row>div{flex:1}.word-row small{display:block;margin-top:4px;color:var(--muted)}.word-list-speak{width:32px;height:32px;flex:0 0 32px;border:1px solid #bcd9f7;border-radius:50%;background:#fff;color:var(--blue);font-size:15px;cursor:pointer}.word-list-speak:hover{background:var(--blue-weak)}.word-empty,.practice-wrap,.report-card{padding:22px}.practice-wrap{max-width:760px}.question{padding:17px 0;border-bottom:1px solid var(--line)}.answers{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.answer-option{border:1px solid var(--line);background:#fff;border-radius:6px;padding:8px 10px;color:var(--ink);cursor:pointer}.answer-option.selected{border-color:var(--blue);background:var(--blue-weak);color:var(--blue)}.submit-practice{margin-top:20px}.report-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px}.metric{padding:19px}.metric b{display:block;font-size:24px;color:var(--blue)}.metric span{color:var(--muted);font-size:12px}.bar-row{display:grid;grid-template-columns:42px minmax(80px,1fr) 50px;gap:12px;align-items:center;margin-top:14px}.bar-row i{display:block;height:8px;background:#8abcf0;border-radius:6px;width:var(--width)}
.admin-book{position:relative;padding:18px;cursor:pointer}.admin-book b,.admin-book span{display:block}.admin-book b{font-size:16px;margin:0 48px 4px 0}.admin-book span{color:var(--muted);font-size:12px}.admin-book p{margin:12px 0 0;font-size:12px;color:#687b90}.delete-book,.delete-chapter,.delete-paragraph{border:0;background:#fff0ef;color:#d45849;border-radius:5px;cursor:pointer}.delete-book{position:absolute;right:13px;top:13px;padding:6px 9px}.chapter-layout{display:grid;grid-template-columns:275px minmax(0,1fr);gap:18px}.chapter-list,.chapter-editor{padding:15px}.chapter-entry{display:flex;gap:6px;margin-bottom:6px}.chapter-item{flex:1;border:0;background:transparent;text-align:left;padding:10px;border-radius:6px;color:#60758a;cursor:pointer}.chapter-item.active{background:var(--blue-weak);color:var(--blue);font-weight:700}.delete-chapter{width:30px}.editor-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px}.admin-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.admin-fields label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#586d82}.admin-fields input,.admin-fields textarea,.admin-fields select{width:100%;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);padding:9px;font:inherit;font-weight:400;outline:none}.admin-fields textarea{min-height:88px;resize:vertical}.paragraph-actions,#paragraphList{grid-column:1/-1}.paragraph-actions{display:flex;align-items:center;justify-content:space-between;margin-top:8px}.paragraph-actions button{border:1px solid #bcd9f7;background:#fff;color:var(--blue);border-radius:6px;padding:7px 9px;font-weight:700;cursor:pointer}.paragraph-block{border-top:1px solid var(--line);padding-top:15px}.paragraph-head{display:flex;justify-content:space-between;margin-bottom:11px}.delete-paragraph{padding:5px 8px}.book-meta-editor{padding:20px;margin-bottom:18px}.admin-commands{display:flex;gap:8px}.book-meta-editor .admin-fields label:nth-last-child(-n+2){grid-column:1/-1}
@media(max-width:1020px){.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.layout{grid-template-columns:230px minmax(0,1fr)}.aside{display:none}}
@media(max-width:720px){.nav{padding:0 16px;height:62px;gap:16px}.nav-links{display:none}.nav-right{gap:10px}.streak{display:none}.library,.learning-view,.shell{padding:22px 14px}.library-head,.view-head{display:block}.library-head h1,.view-head h1{font-size:25px}.search{width:100%;margin-top:17px}.shelf-continue{gap:11px}.continue-progress{display:none}.library-content{display:block}.filters{display:flex;gap:8px;overflow:auto;margin-bottom:18px}.filter-group{display:contents}.filter-group h3{display:none}.filter{display:inline-block;width:auto;white-space:nowrap;border:1px solid var(--line);background:#fff}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.library-cover{height:150px}.library-book h3{font-size:14px}.library-book>p{display:none}.book-meta{margin-top:14px}.chapter-layout{grid-template-columns:1fr}.word-list,.admin-book-list,.report-grid{grid-template-columns:1fr}.admin-commands{margin-top:12px}.book-meta-editor .admin-fields,.admin-fields{grid-template-columns:1fr}.reader-body{padding:25px 7%;min-height:520px}.reader-head{padding:0 10px}.reader-head .sub{display:none}.modes{margin-left:auto}.story-title{font-size:24px}.reader-footer{padding:13px}.progress-line{width:72px}.icon-btn:not(#bookmark){display:none}}