:root{--bg:#f2f4f6;--panel:#fff;--text:#17212b;--muted:#687480;--line:#dfe4e8;--accent:#166957;--accent-soft:#e5f1ee;--warning:#9a5b00;--shadow:0 8px 24px rgba(28,38,48,.08);font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{overflow:hidden}button,input{font:inherit}button{color:inherit}.app{height:100%;display:grid;grid-template-columns:286px minmax(0,1fr)}
.sidebar{min-height:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:20}.brand-row{height:76px;padding:14px 14px 12px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line)}.brand-mark{width:38px;height:38px;border-radius:8px;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:800;font-size:20px}.brand-row h1{font-size:16px;margin:0 0 2px}.brand-row p{font-size:11px;color:var(--muted);margin:0}.close-sidebar{display:none!important;margin-left:auto}
.search-wrap{padding:12px 12px 8px}.search-wrap input{width:100%;height:38px;border:1px solid var(--line);border-radius:7px;padding:0 11px;outline:none;background:#fafbfc}.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.lesson-summary{display:flex;justify-content:space-between;padding:0 14px 8px;color:var(--muted);font-size:11px}.lesson-list{overflow:auto;padding:0 8px 12px}.lesson-item{width:100%;border:0;border-radius:7px;background:transparent;display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:7px;padding:8px;text-align:left;cursor:pointer}.lesson-item:hover{background:#f3f5f6}.lesson-item.active{background:var(--accent-soft);color:#105849}.lesson-item .code{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.lesson-item.active .code{color:inherit}.lesson-item .name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px}.offline-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);justify-self:center}
.main{min-width:0;min-height:0;display:flex;flex-direction:column}.topbar{min-height:76px;background:var(--panel);border-bottom:1px solid var(--line);padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.lesson-heading{display:flex;align-items:center;gap:11px;min-width:0}.lesson-code{background:#edf0f2;border-radius:6px;padding:5px 8px;font-weight:700;font-size:13px}.title-wrap{min-width:0}.title-wrap h2{font-size:18px;line-height:1.35;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-line{min-height:18px;margin-top:2px;color:var(--muted);font-size:11px}.status-line.warning{color:var(--warning)}.header-actions{display:flex;gap:8px;flex:none}.secondary-button{height:34px;border:1px solid var(--line);border-radius:6px;padding:0 11px;background:#fff;cursor:pointer}.secondary-button:hover{border-color:#abb4bc}.secondary-button.saved{color:var(--accent);border-color:#9fc7bd;background:var(--accent-soft)}
.icon-button{width:34px;height:34px;border:1px solid var(--line);border-radius:6px;background:#fff;display:grid;place-items:center;cursor:pointer;font-size:20px}.menu-button{display:none!important;font-size:16px}.playerbar{min-height:58px;padding:9px 16px;display:grid;grid-template-columns:38px minmax(220px,680px) 38px;gap:10px;align-items:center;justify-content:center;background:#fafbfc;border-bottom:1px solid var(--line)}audio{width:100%;height:38px}.nav-button{border:0;background:transparent;font-size:28px}.nav-button:disabled,.page-arrow:disabled{opacity:.25;cursor:default}
.view-tabs{display:none;background:var(--panel);border-bottom:1px solid var(--line);padding:7px 10px;gap:6px}.view-tabs button{flex:1;border:0;border-radius:6px;background:transparent;padding:7px;cursor:pointer}.view-tabs button.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.readers{flex:1;min-height:0;padding:10px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:10px}.readers.missing-book.split{grid-template-columns:1fr}.readers.missing-book.split .book-panel{display:none}.reader-panel{min-width:0;min-height:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);display:flex;flex-direction:column;overflow:hidden}.panel-heading{height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid var(--line)}.panel-heading strong{font-size:13px}.panel-heading span{font-size:11px;color:var(--muted)}.page-stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px;background:#e9edef}.page-stage>img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 3px 14px #27313a24;background:#fff}.page-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:56px;border:1px solid #cdd4da;border-radius:7px;background:#fffffff0;box-shadow:0 3px 12px #0001;font-size:28px;cursor:pointer}.page-arrow.left{left:10px}.page-arrow.right{right:10px}.page-slider{margin:9px 14px 10px;accent-color:var(--accent)}.translation-scroll{flex:1;min-height:0;overflow:auto;background:#e9edef;padding:12px}.translation-scroll img{display:block;width:100%;height:auto;background:#fff;box-shadow:0 3px 14px #27313a24}.empty-state{max-width:320px;text-align:center;color:var(--muted);display:flex;flex-direction:column;gap:5px}.empty-state strong{color:var(--text)}
.sidebar-backdrop{display:none}.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,20px);background:#16221f;color:#fff;padding:9px 13px;border-radius:7px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.2s;z-index:50}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(430px,calc(100% - 28px));border:0;border-radius:9px;padding:0;box-shadow:0 24px 70px #0004}dialog::backdrop{background:#1a242c66}.dialog-head{padding:13px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}dialog ol{margin:0;padding:18px 26px 20px 40px}dialog li+li{margin-top:8px}
.exit-focus{position:fixed;z-index:60;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));height:34px;border:1px solid #9aa5ad;border-radius:7px;padding:0 12px;background:#17212bdf;color:#fff;box-shadow:0 4px 16px #0002;cursor:pointer}.app.focus-mode{grid-template-columns:1fr}.app.focus-mode .sidebar,.app.focus-mode .topbar,.app.focus-mode .view-tabs,.app.focus-mode .playerbar,.app.focus-mode .translation-panel,.app.focus-mode .panel-heading,.app.focus-mode .page-slider{display:none!important}.app.focus-mode .readers{padding:0;gap:0;grid-template-columns:1fr!important}.app.focus-mode .book-panel{display:flex!important;border:0;border-radius:0}.app.focus-mode .page-stage{padding:0}.app.focus-mode .page-arrow{top:50%}
@media(max-width:980px){.app{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:min(330px,86vw);transform:translateX(-103%);transition:transform .2s;box-shadow:12px 0 30px #0002}.sidebar.open{transform:translateX(0)}.close-sidebar,.menu-button{display:grid!important}.sidebar-backdrop{position:fixed;inset:0;background:#1a242c55;z-index:15}.sidebar-backdrop.show{display:block}.view-tabs{display:flex}.readers{grid-template-columns:1fr}.readers.book .translation-panel,.readers.translation .book-panel{display:none}.readers.split{grid-template-columns:1fr 1fr}.topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}
@media(max-width:700px),(orientation:portrait) and (max-width:980px){body{overflow:auto}.app{height:auto;min-height:100%}.main{min-height:100vh}.topbar{align-items:flex-start;flex-wrap:wrap}.header-actions{width:100%;justify-content:flex-end}.playerbar{position:sticky;top:0;z-index:10;padding-left:8px;padding-right:8px}.readers{height:auto;min-height:calc(100vh - 220px);display:block}.readers.split .reader-panel{min-height:68vh}.readers.split .reader-panel+.reader-panel{margin-top:10px}.readers.book .book-panel,.readers.translation .translation-panel{min-height:calc(100vh - 230px)}.readers.book .translation-panel,.readers.translation .book-panel{display:none}.page-stage{min-height:58vh}.title-wrap h2{font-size:16px}.lesson-code{display:none}.header-actions .secondary-button{flex:1}.translation-scroll{overflow:visible}.translation-scroll img{width:100%}body.focus-mode{overflow:auto}.app.focus-mode{height:auto;min-height:100vh}.app.focus-mode .main{min-height:100vh}.app.focus-mode .playerbar{top:0}.app.focus-mode .readers{min-height:calc(100vh - 50px)}.app.focus-mode .readers.split .reader-panel{min-height:calc(100vh - 50px)}.app.focus-mode .readers.split .reader-panel+.reader-panel{margin-top:0}.app.focus-mode .readers.book .book-panel,.app.focus-mode .readers.translation .translation-panel{min-height:calc(100vh - 50px)}}
body.focus-mode{overflow:hidden!important}.app.focus-mode{height:100dvh!important;min-height:0!important}.app.focus-mode .main{height:100%;min-height:0!important}.app.focus-mode .readers{height:auto!important;min-height:0!important;flex:1;display:grid!important}.app.focus-mode .reader-panel,.app.focus-mode .page-stage{min-height:0!important}