:root{font-family:"Segoe UI",Arial,sans-serif;color:#fff;background:#1d1b1a;--accent:#ef8b2c;--panel:#2a2725}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{display:grid;grid-template-rows:62px 1fr 62px;background:linear-gradient(180deg,#3e3936,#181716)}button,input{font:inherit}button{border:0;border-radius:8px;padding:9px 12px;background:#fff;color:#332b27;font-weight:650;cursor:pointer}button:hover{background:var(--accent);color:#fff}header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:#493932;box-shadow:0 2px 14px #0008;z-index:20}.brand{display:flex;align-items:center;gap:10px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--accent);font-weight:900}.brand-copy{display:flex;flex-direction:column}.brand-copy span{font-size:12px;color:#eadfd9}.language-badge{padding:3px 8px;border-radius:999px;background:#ffffff18;font-weight:800}header nav{display:flex;gap:6px}header nav button{display:flex;gap:5px;align-items:center}main{min-height:0;display:flex;position:relative}#sidePanel{position:absolute;left:0;top:0;bottom:0;width:min(380px,92vw);background:#262321;z-index:30;transform:translateX(-102%);transition:transform .2s ease;box-shadow:8px 0 24px #0009;display:flex;flex-direction:column}#sidePanel.open{transform:translateX(0)}.panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px;border-bottom:1px solid #ffffff20}.panel-head button{background:transparent;color:#fff;font-size:24px}.panel-content{display:none;overflow:auto;padding:12px;flex:1}.panel-content.active{display:block}.thumb-card{display:grid;grid-template-columns:72px 1fr;gap:10px;align-items:center;padding:7px;margin-bottom:7px;border-radius:8px;background:#ffffff0b;border:2px solid transparent;cursor:pointer}.thumb-card.active{border-color:var(--accent)}.thumb-card img{width:72px;height:96px;object-fit:contain;background:#fff}.toc-item,.result-item{width:100%;text-align:left;margin-bottom:7px;background:#ffffff10;color:#fff;border:1px solid #ffffff18}.search-box{display:flex;gap:6px;margin-bottom:10px}.search-box input{flex:1;min-width:0;padding:10px;border-radius:7px;border:0}.result-snippet{display:block;font-size:12px;font-weight:400;opacity:.8;margin-top:4px}.search-status{font-size:12px;margin-bottom:9px;padding:8px;background:#ffffff0b;border-radius:7px}.search-status.warning{color:#ffd09a}#viewer{position:relative;flex:1;min-width:0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:18px 64px}.book{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;transform-origin:center center;transition:opacity .13s ease,transform .13s ease}.page-shell{display:none}.right-shell{display:flex;width:100%;height:100%;align-items:center;justify-content:center;background:transparent}.book-page{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff;box-shadow:0 14px 34px #000b}.spine,.page-shadow{display:none}.book.transition-out{opacity:.25;transform:translateX(-16px) scale(.995)}.book.transition-in{animation:slideIn .16s ease-out}@keyframes slideIn{from{opacity:.25;transform:translateX(16px) scale(.995)}to{opacity:1;transform:translateX(0) scale(1)}}.nav{position:absolute;top:50%;transform:translateY(-50%);z-index:8;width:46px;height:64px;font-size:34px;background:#ffffffdd}.prev{left:10px}.next{right:10px}.loading{position:absolute;bottom:18px;padding:8px 12px;border-radius:8px;background:#111d;opacity:0;pointer-events:none}.loading.visible{opacity:1}.share-menu{position:fixed;right:14px;top:66px;z-index:40;width:280px;padding:10px;background:#272320;border-radius:10px;box-shadow:0 12px 30px #000b;display:none}.share-menu.open{display:block}.share-menu button{width:100%;display:flex;justify-content:space-between;margin-bottom:5px}.share-menu span{font-size:11px;opacity:.7}.share-title{font-weight:800;padding:6px}.splash{position:fixed;inset:0;z-index:100;background:#1d1b1af7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:opacity .18s}.splash.hidden{opacity:0;pointer-events:none}.cover-intro{height:min(62vh,660px)}.cover-intro img{height:100%;max-width:90vw;object-fit:contain;box-shadow:0 18px 45px #000c}.shine,.ambient{display:none}.splash-title{font-size:22px;font-weight:800}footer{position:relative;background:#272320;box-shadow:0 -2px 12px #0008;padding:12px}.toolbar{display:flex;justify-content:center;align-items:center;gap:7px}.toolbar input{width:62px;padding:7px;border-radius:7px;border:0}.separator{width:1px;height:28px;background:#ffffff25}.progress-wrap{position:absolute;left:0;right:0;top:0;height:4px;background:#ffffff12}.progress-wrap div{height:100%;background:var(--accent)}@media(max-width:820px){body{grid-template-rows:56px 1fr 58px}header{padding:6px 8px}.brand-mark{display:none}.brand strong{font-size:14px}header nav button span{display:none}header nav button{padding:8px}#viewer{padding:10px 42px}.nav{width:36px;height:54px;font-size:28px}.prev{left:3px}.next{right:3px}.toolbar{gap:4px}.toolbar button{padding:7px 9px}.separator,#soundToggle{display:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.feature-tour{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:18px;background:#171514d9;backdrop-filter:blur(5px)}.feature-tour.open{display:flex}.tour-card{position:relative;width:min(620px,96vw);padding:24px;border-radius:18px;background:#fff;color:#332b27;box-shadow:0 24px 70px #0009}.tour-card h2{margin:0 36px 18px 0}.tour-close{position:absolute;right:12px;top:10px;background:transparent;font-size:26px}.tour-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tour-grid div{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:#f6f3f1}.tour-grid strong{font-size:25px;color:var(--accent)}.tour-grid span{font-weight:650}.tour-primary{display:block;margin:18px auto 0;background:var(--accent);color:#fff}.mobile-label{display:none}@media(max-width:820px){header nav button span{display:inline;font-size:11px}.tour-grid{grid-template-columns:1fr}.feature-tour{align-items:flex-end}.tour-card{border-radius:18px 18px 0 0;padding-bottom:28px}}