:root{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;color:#122e51;background:#eef7fc;font-size:16px}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;border:0}button:disabled{cursor:default;opacity:.45}.hidden{display:none!important}.screen{min-height:100dvh}.home-head{height:65px;padding:8px 26px;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #deebf4}.home-head h1{font-size:20px;margin:0}.home-head p{font-size:12px;color:#66809a;margin:0}.home-head button{border:1px solid #d9e9f4;border-radius:11px;background:#fff;padding:9px 14px;color:#125f9c}.home-main{max-width:1260px;margin:auto;padding:14px 25px}.tiny-title,.source-note{font-size:12px;color:#658098}.levels,.books{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.levels::-webkit-scrollbar,.books::-webkit-scrollbar{display:none}.levels{gap:8px;padding:6px 0 9px}.levels button{flex:0 0 80px;scroll-snap-align:start;padding:6px;border:1px solid #d9e8f3;border-radius:12px;background:#fff;color:#153657;font-weight:750}.levels button small{display:block;font-size:11px;color:#738ca4;font-weight:400}.levels button.active{background:#1388eb;color:#fff;border-color:#1388eb}.levels button.active small{color:#e7f4ff}.overview{border-top:1px solid #d9e8f3;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 0 12px}.overview h2{font-size:22px;margin:0}.overview p{font-size:12px;color:#69829a;margin:3px 0 0}.overview strong{font-size:24px;color:#1287e8;white-space:nowrap}.status-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.status-card{min-width:0;background:#fff;border:1px solid #dbe9f3;border-radius:14px;padding:10px 13px}.status-card.review{background:#fff8eb;border-color:#f9dfb1}.status-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.status-top span,.status-top button{background:transparent;color:#1486e7;font-size:12px;font-weight:700;padding:0}.status-card.review .status-top button{color:#d78400}.status-card strong{display:block;font-size:18px;margin:3px 0}.status-card small{font-size:11px;color:#73879b}.shelf-title{display:flex;justify-content:space-between;align-items:end;gap:15px;margin:4px 0 7px}.shelf-title h2{font-size:19px;margin:0}.shelf-title p,.shelf-title span{font-size:12px;color:#668099;margin:2px 0 0}.books{gap:12px;padding:2px 2px 9px}.book{flex:0 0 218px;scroll-snap-align:start;border:1px solid #d9e8f2;border-radius:14px;overflow:hidden;background:#fff}.cover{height:139px;position:relative;background:#e4f2fc;display:grid;place-items:center}.cover img{max-height:100%;max-width:100%;object-fit:contain}.book-number{position:absolute;top:7px;left:7px;background:#fff;border-radius:7px;padding:4px 7px;font-size:11px;font-weight:700}.book-body{padding:8px 10px 10px}.book-body h3{font-size:15px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-body p{color:#6d839b;font-size:11px;margin:3px 0 8px}.book-actions{display:flex;gap:6px}.book-actions button{flex:1;min-height:37px;border-radius:9px;border:1px solid #d9e9f4;background:#fff;color:#17446f;font-size:12px;padding:3px}.book-actions button:first-child{background:#1388eb;border-color:#1388eb;color:#fff}.book-actions button.pending{background:#f5f7f9;color:#697d91}.source-note{margin:5px 0 0}.reader-head{height:65px;background:#fff;display:flex;align-items:center;gap:13px;padding:8px 18px;border-bottom:1px solid #dbe9f3}.reader-head>button,.mode-switch button{border-radius:10px;padding:8px 12px;background:#ecf6fd;color:#1d5b91}.reader-head>button{font-size:27px;line-height:1}.reader-head h2{font-size:18px;margin:0}.reader-head small{font-size:12px;color:#6e8497}.reader-head>div:nth-child(2){flex:1;min-width:0}.mode-switch{display:flex;gap:6px}.mode-switch button.active{background:#1388eb;color:#fff}.reader-main{height:calc(100dvh - 129px);min-height:330px;display:flex}.tools{width:118px;flex:0 0 118px;background:#fff;border-right:1px solid #dbe9f3;display:flex;flex-direction:column;gap:8px;padding:13px 9px}.tools button{border:1px solid #d9e8f3;background:#f4faff;border-radius:10px;min-height:48px;color:#174b7b;font-size:13px}.tools button.active{background:#dbf0ff;color:#0876d5}.stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px;min-width:0}#page-frame{position:relative;max-height:100%;max-width:100%;display:inline-flex}#page-image{display:block;max-height:100%;max-width:100%;object-fit:contain}#qa-overlay{position:absolute;inset:0;pointer-events:none}.qa-pair{position:absolute;display:flex;gap:5px;transform:translate(-50%,-50%);pointer-events:auto}.qa-pair button{width:43px;height:43px;border-radius:50%;box-shadow:0 2px 8px #102e5066;color:#fff;font-size:19px;font-weight:800;border:3px solid #fff}.qa-pair .question{background:#1489eb}.qa-pair .answer{background:#f39018}.bubble{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);min-width:210px;max-width:min(360px,70vw);border-radius:13px;background:#fff;color:#142f50;border:3px solid #1489eb;box-shadow:0 4px 16px #183a5b40;padding:10px 13px;text-align:left;font-size:17px;font-weight:650;pointer-events:auto}.bubble.answer{border-color:#f39018}.bubble small{display:block;font-size:12px;font-weight:400;margin-top:4px}.reader-foot{height:64px;background:#fff;border-top:1px solid #dbe9f3;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 18px}#page-hint{font-size:12px;color:#617d97;flex:1}.page-nav{display:flex;align-items:center;gap:9px;white-space:nowrap}.page-nav button{border-radius:9px;background:#eaf5ff;color:#125f9c;font-size:24px;min-width:40px;height:39px}.primary{border-radius:10px;background:#1388eb;color:#fff;padding:10px 15px;white-space:nowrap}dialog{border:0;border-radius:18px;padding:0;max-width:min(540px,92vw);max-height:85vh;box-shadow:0 12px 44px #102d5260;color:#143252}dialog::backdrop{background:#0a22366b}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid #dbe9f3}.dialog-head h2{font-size:19px;margin:0}.dialog-head button{background:transparent;color:#46637e;font-size:22px}#dialog-body{padding:18px 20px;overflow:auto;max-height:65vh}#dialog-body p{margin:0 0 12px}#dialog-body .primary{margin-top:8px}.toast{position:fixed;z-index:10;left:50%;bottom:72px;transform:translateX(-50%);background:#17395d;color:#fff;border-radius:12px;padding:12px 18px;font-size:13px;box-shadow:0 4px 16px #1236}.records-main{max-width:1100px;margin:auto;padding:18px 26px}.records-main h2{font-size:21px}.record-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.record-overview article{background:#fff;border:1px solid #dbe9f3;border-radius:13px;padding:13px}.record-overview strong{display:block;font-size:22px;color:#1388eb}.record-overview small{color:#678099}.record-row{padding:11px 2px;border-bottom:1px solid #dce9f3;display:flex;justify-content:space-between;gap:10px}.record-row small{color:#6e849a}.record-row button{background:#e5f4ff;color:#0f6db7;border-radius:8px;padding:6px 9px}.qa-rating{display:flex;gap:7px;flex-wrap:wrap}.qa-rating button{border-radius:9px;background:#eaf5ff;padding:8px 11px;color:#115f9d}
@media(max-width:700px){.home-head{height:60px;padding:8px 14px}.home-main{padding:12px 14px}.overview h2{font-size:19px}.overview strong{font-size:20px}.status-row{grid-template-columns:1fr}.shelf-title h2{font-size:17px}.book{flex-basis:200px}.reader-head{height:64px;padding:6px 9px;gap:7px}.reader-head h2{font-size:15px}.reader-head small{font-size:10px}.mode-switch button{padding:7px;font-size:11px}.reader-main{height:calc(100dvh - 131px)}.tools{width:68px;flex-basis:68px;padding:8px 5px}.tools button{min-height:47px;font-size:17px}.tools button span{display:block;font-size:9px}.reader-foot{padding:7px 9px;height:67px;gap:5px}#page-hint{display:none}.record-overview{grid-template-columns:repeat(2,1fr)}.bubble{font-size:14px;min-width:180px}.qa-pair button{width:40px;height:40px}}
#page-image{width:100%;height:100%;object-fit:contain}
.reader-main .tools{border-right:0;border-left:1px solid #dbe9f3}
.reader-main .tools{width:58px;flex:0 0 58px;gap:8px;padding:8px 6px}
.reader-main .tools button{min-height:44px;width:100%;padding:0;font-size:21px;font-weight:700;line-height:1;border-radius:11px}
.reader-main .tools #record{color:#d94343}
.reader-main .tools #play-page{margin-top:auto;background:#1388eb;border-color:#1388eb;color:#fff}
.reader-foot .foot-copy{flex:1;min-width:0}
.reader-foot #page-hint{font-size:12px;line-height:1.25}
.reader-foot .page-grammar{font-size:11px;color:#6d8297;line-height:1.2;margin-top:3px}
@media(max-width:700px){.reader-main .tools{width:54px;flex-basis:54px;padding:7px 5px}.reader-main .tools button{min-height:44px;font-size:20px}.reader-foot #page-hint{display:block;font-size:10px;max-height:34px;overflow:auto}.reader-foot .page-grammar{font-size:10px}}
/* Keep portrait covers inside their fixed-height book cards. */
.cover{overflow:hidden;min-height:0}
.cover img{display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;object-fit:contain}
.book{align-self:flex-start}
@media(min-width:701px) and (max-height:850px){
  .home-head{height:55px;padding:6px 22px}
  .home-main{padding:8px 22px}
  .levels{padding:3px 0 6px}
  .levels button{padding:4px}
  .overview{padding:7px 0 8px}
  .overview h2{font-size:19px}
  .overview strong{font-size:20px}
  .status-row{margin-bottom:8px}
  .status-card{padding:7px 11px}
  .status-card strong{font-size:16px;margin:1px 0}
  .shelf-title{margin:2px 0 5px}
  .shelf-title h2{font-size:17px}
  .cover{height:clamp(105px,18vh,145px)}
  .book-body{padding:6px 9px 8px}
  .book-body p{margin:1px 0 5px}
  .book-actions button{min-height:33px}
  .source-note{font-size:11px;margin:2px 0 0}
}
/* The library is the main surface; navigation and curriculum stay compact. */
.home-main{max-width:1720px;padding:12px 24px 18px}
.course-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid #d5e5f0;padding-bottom:8px}
.course-strip .levels{min-width:0;flex:1;gap:8px;padding:0}
.course-strip .levels button{flex:0 0 72px;min-height:47px;padding:4px 8px;border-radius:12px;font-size:19px;line-height:1.05}
.course-strip .levels button small{font-size:11px;margin-top:2px}
.course-actions{display:flex;align-items:center;gap:12px;white-space:nowrap}
.course-actions strong{font-size:19px;color:#1388eb;font-variant-numeric:tabular-nums}
.course-actions button{border-radius:11px;background:#fff3df;color:#a65d00;padding:10px 13px;font-size:13px;font-weight:700}
.topic-panel{margin:10px 0 12px;padding:10px 13px 9px;border:1px solid #d7e7f2;background:#fff;border-radius:16px;box-shadow:0 3px 13px #376e9810}
.topic-top,.topic-bottom{display:flex;align-items:center;gap:13px;min-width:0}
.topic-top>strong{font-size:15px;white-space:nowrap}
#week-focus{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0c75c9;font-size:13px;font-weight:700}
#stage-tabs{display:flex;gap:5px}
#stage-tabs button{padding:5px 10px;border-radius:8px;background:#eaf4fb;color:#416b8b;font-size:12px;white-space:nowrap}
#stage-tabs button.active{background:#1388eb;color:#fff;font-weight:750}
#phrase-open{background:transparent;color:#1276ca;font-size:12px;font-weight:700;white-space:nowrap}
.topic-nav{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin:9px 0 8px;padding-bottom:1px}
.topic-nav::-webkit-scrollbar{display:none}
.topic-nav button{flex:0 0 auto;scroll-snap-align:start;padding:7px 11px;border-radius:9px;background:#f3f8fc;border:1px solid #e0ebf3;color:#254f72;font-size:13px;white-space:nowrap}
.topic-nav button.active{background:#e2f2ff;border-color:#1388eb;color:#0874c9;font-weight:750}
.topic-bottom{justify-content:space-between;color:#6f8395;font-size:11px;line-height:1.25}
#topic-detail{display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden;white-space:nowrap}
#topic-detail strong{color:#163b60;font-size:12px;flex:0 0 auto}
#topic-detail span{overflow:hidden;text-overflow:ellipsis}
#phrase-progress{white-space:nowrap;flex:0 0 auto}
.shelf-title{margin:2px 0 9px;align-items:center}
.shelf-title h2{font-size:22px}
.shelf-title p,.shelf-title span{font-size:11px}
.day-controls{display:flex;align-items:center;gap:6px;white-space:nowrap}
.day-controls button{height:30px;border-radius:8px;background:#e2f2ff;color:#116db3;padding:3px 10px;font-size:12px;font-weight:700}
.day-controls button:first-child,.day-controls button:nth-child(3){font-size:22px;line-height:1;padding:0 10px}
.day-controls #shelf-hint{margin-left:4px}
.books{gap:16px;padding:2px 2px 12px;scroll-snap-type:x mandatory}
.empty-plan{width:100%;min-height:260px;border:1px dashed #bcd7e9;border-radius:16px;background:#fff;padding:38px 28px;color:#244d70}
.empty-plan strong{font-size:22px}
.empty-plan p{max-width:620px;color:#668198;line-height:1.6}
.empty-plan button{background:#1388eb;color:#fff;border-radius:10px;padding:9px 14px;font-size:13px}
.book{flex:0 0 clamp(260px,28vw,330px);border-radius:17px;box-shadow:0 4px 13px #24557c12}
.book.review-book{border-color:#f4d6a8;background:#fffaf2}
.book.review-book .book-meta span:first-child{background:#fff0d7;color:#a76710}
.book.review-book .book-actions button:first-child{background:#e9961c;border-color:#e9961c}
.cover{height:clamp(200px,36vh,355px);background:#e9f5fc}
.book-number{top:10px;left:10px;padding:5px 9px;font-size:12px}
.book-body{padding:11px 13px 13px}
.book-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#658198;font-size:11px;margin-bottom:7px}
.book-meta span:first-child{color:#0d79c9;background:#eaf5fe;border-radius:7px;padding:3px 6px;font-weight:700}
.book-body h3{font-size:19px;margin:0 0 12px}
.book-actions{gap:8px}
.book-actions button{min-height:42px;font-size:13px;border-radius:10px}
.source-note{font-size:11px;line-height:1.3;margin:1px 0 0}
@media(min-width:701px) and (max-height:850px){
  .home-main{padding:8px 22px 12px}
  .topic-panel{margin:7px 0 8px;padding:7px 11px 6px}
  .topic-nav{margin:6px 0 5px}
  .topic-nav button{padding:5px 9px}
  .shelf-title{margin:0 0 5px}
  .shelf-title h2{font-size:18px}
  .cover{height:clamp(170px,35vh,290px)}
  .book-body{padding:8px 11px 10px}
  .book-meta{margin-bottom:4px}
  .book-body h3{font-size:17px;margin-bottom:7px}
  .book-actions button{min-height:37px}
}
@media(max-width:700px){
  .home-main{padding:9px 13px 14px}
  .course-strip{gap:8px}
  .course-strip .levels{gap:4px}
  .course-strip .levels button{flex-basis:48px;font-size:15px;min-height:41px;padding:3px}
  .course-strip .levels button small{font-size:9px}
  .course-actions{gap:5px}
  .course-actions strong{font-size:13px}
  .course-actions button{padding:7px;font-size:11px}
  .topic-panel{margin:8px 0;padding:8px}
  .topic-top{gap:5px}
  .topic-top>strong{font-size:12px}
  #week-focus{font-size:10px}
  #stage-tabs{gap:2px}
  #stage-tabs button{padding:4px 5px;font-size:10px}
  #phrase-open{font-size:10px}
  .topic-nav button{font-size:11px;padding:6px 8px}
  .topic-bottom{font-size:10px}
  #topic-detail strong{font-size:10px}
  #topic-detail span{display:none}
  .shelf-title h2{font-size:17px}
  .shelf-title span{display:none}
  .day-controls{gap:3px}
  .day-controls button{height:27px;padding:2px 5px;font-size:10px}
  .day-controls button:first-child,.day-controls button:nth-child(3){font-size:18px;padding:0 6px}
  .book{flex-basis:min(76vw,300px)}
  .cover{height:clamp(210px,41vh,320px)}
  .book-body h3{font-size:17px}
}
/* iPad landscape: three full-size covers per horizontal screen. */
@media (min-width:701px) and (max-width:1366px) and (orientation:landscape){
  .books{gap:16px;padding-left:2px;padding-right:2px}
  .book{flex:0 0 calc((100% - 36px)/3)}
  .cover{height:clamp(240px,calc(100vh - 420px),420px);height:clamp(240px,calc(100dvh - 420px),420px)}
  .book-body{padding:11px 13px 13px}
  .book-meta{margin-bottom:7px}
  .book-body h3{font-size:19px;margin-bottom:10px}
  .book-actions button{min-height:41px}
}
.reader-main .stage{touch-action:pan-y;overscroll-behavior-x:contain}
.reader-main #page-image{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
#reader,#reader .reader-main,#reader .stage{background:#fff}
.book-meta span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.book-meta span:last-child{flex:0 0 auto}
.record-overview{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:700px){.record-overview{grid-template-columns:repeat(2,minmax(0,1fr))}}

.record-overview{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}

/* Independent scenarios keep story pages and book counts untouched. */
#life-open{padding:5px 10px;font-size:12px;white-space:nowrap;background:#e9f4ff;color:#1268a3;border-radius:10px;margin-left:8px}
.life-groups{display:flex;flex-wrap:wrap;gap:10px}.life-groups button{padding:12px;border-radius:12px;background:#eef7ff;color:#174566}.life-scene{background:#f2f8fc;border-radius:16px;text-align:center;padding:15px}.life-icon{font-size:42px}.life-scene p{font-size:20px;color:#153650}.life-scene small,.life-kind{color:#638098;font-size:12px}.life-controls,.life-ratings,.life-nav{display:flex;justify-content:center;gap:12px;margin:12px 0}.life-controls button{width:48px;height:48px;border-radius:50%;background:#148bed;color:white;font-size:22px}.life-controls .answer{background:#f39410}.life-controls #life-language{background:#edf5fa;color:#174566}.life-bubble{display:block;width:100%;padding:18px;border:2px solid #148bed;border-radius:16px;font-size:23px;text-align:left;color:#173650;background:white}.life-bubble.answer{border-color:#f39410}.life-bubble small{display:block;font-size:17px;margin-top:12px}.life-bubble.hidden{display:none}.life-ratings button,.life-nav button{padding:10px;border-radius:10px;background:#edf5fa;color:#174566}.life-nav button:disabled{opacity:.4}

#reader-life-open{font-size:11px;padding:3px 8px;color:#15679e;background:#edf6ff;border-radius:8px;margin-top:3px}#reader-life-open.hidden{display:none}