:root{--ink:#1e2436;--muted:#7c8290;--line:#e7e2d6;--accent:#d98e2b;--accent-deep:#8a5a12;--accent-soft:#faf0dc;--accent-line:#ecc584;--soft:#f8f6f1;--paper:#fff}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;background:#fff;color:var(--ink);font:13px system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Loading screen */
.loading{position:fixed;inset:0;z-index:100;background:#fff;display:grid;place-items:center;transition:opacity .35s ease}
.loading.hidden{opacity:0;pointer-events:none}
.loading-card{width:min(360px,82vw);padding:30px 30px 26px;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 45px #1a334312;background:#fff;text-align:center}
.loading-mark{width:34px;height:34px;margin-bottom:14px;stroke:var(--accent);fill:none}
.loading-mark circle{fill:var(--accent-soft);stroke:var(--accent)}
.loading-mark .rays line{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.loading-title{font-size:18px;font-weight:650;color:var(--ink)}
.loading-sub{font-size:12px;color:var(--muted);margin-top:7px}
.loading-bar{height:5px;margin-top:22px;border-radius:9px;background:var(--soft);overflow:hidden}
.loading-bar span{display:block;width:35%;height:100%;border-radius:9px;background:var(--accent);animation:loading-slide 1.1s ease-in-out infinite}
@keyframes loading-slide{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}

/* Shell */
.app{height:100%;display:grid;grid-template-rows:58px 1fr 58px}
header,footer{display:flex;align-items:center;background:#fff;border-color:var(--line)}
header{gap:14px;padding:0 22px;border-bottom:1px solid var(--line)}
footer{gap:8px;padding:8px 18px;border-top:1px solid var(--line)}
button,select{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:7px;padding:7px 10px;cursor:pointer;font:inherit}
button:hover{border-color:var(--accent);color:var(--accent-deep)}
.brand{display:flex;align-items:center;gap:7px;font-weight:750;letter-spacing:.14em;font-size:12px;color:var(--ink)}
.brand-mark{width:17px;height:17px;stroke:var(--accent);fill:none;flex:none}
.brand-mark circle{fill:var(--accent-soft);stroke:var(--accent)}
.brand-mark .rays line{stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.title{color:var(--muted);font-size:12px}
.spacer{flex:1}

/* Book selector pills */
.book-select{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;padding:2px}
.book-select::-webkit-scrollbar{display:none}
.book-pill{flex:none;display:flex;align-items:baseline;gap:5px;border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 12px;font-size:11px;color:var(--muted);cursor:pointer;white-space:nowrap}
.book-pill:hover{border-color:var(--accent-line);color:var(--accent-deep)}
.book-pill .num{font-weight:750;font-size:12px;color:var(--ink)}
.book-pill.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
.book-pill.active .num{color:var(--accent-deep)}

main{min-height:0;display:grid;grid-template-columns:255px minmax(450px,1fr) 285px;gap:14px;padding:14px 18px;background:#fff}
.media-panel{min-width:0;overflow:auto;border:1px solid var(--line);border-radius:10px;background:#fff;padding:12px;box-shadow:0 5px 20px #25384d0b}
.panel-title{font-size:11px;letter-spacing:.12em;font-weight:750;color:var(--muted);margin-bottom:4px}
.panel-caption{font-size:11px;color:var(--muted);margin-bottom:8px}

/* Reader */
.book-zone{min-width:0;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:6px 12px 26px}
.viewport{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab;touch-action:none}
.viewport.panning{cursor:grabbing}
.reader{height:min(calc(100vh - 176px),860px);width:min(100%,calc((100vh - 176px)*1.414));aspect-ratio:1.414;position:relative;perspective:2400px;filter:drop-shadow(0 17px 25px #0002);cursor:pointer;touch-action:none;user-select:none;transform-origin:center center;will-change:transform}
.spread{height:100%;width:100%;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #edf0f2;overflow:hidden;position:relative}
.sheet{min-width:0;min-height:0;overflow:hidden;background:#fff}
.sheet img{width:100%;height:100%;display:block;object-fit:contain}
.gutter{position:absolute;left:50%;top:0;bottom:0;width:25px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#0002,#fff,#0002,transparent);z-index:4;pointer-events:none}
.arrow{position:absolute;top:50%;z-index:10;transform:translateY(-50%);width:38px;height:62px;border:1px solid var(--line);background:#ffffffe8;font-size:29px;padding:0}
.arrow.left{left:-14px}
.arrow.right{right:-14px}
.hint{position:absolute;left:0;right:0;text-align:center;color:#9ba5ae;font-size:11px;bottom:4px}
.turn{position:absolute;top:0;bottom:0;width:50%;z-index:6;transform-style:preserve-3d;backface-visibility:hidden;background:#fff;overflow:hidden;box-shadow:0 0 22px #0003;transition:transform .82s cubic-bezier(.16,.78,.18,1)}
.turn.dragging{transition:none}
.turn .face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#fff}
.turn img{width:100%;height:100%;display:block;object-fit:contain}
.turn .back{transform:rotateY(180deg)}
.turn .face:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#0004,transparent 18%,transparent 78%,#fff5);mix-blend-mode:multiply}
.turn.next{left:50%;transform-origin:left center}
.turn.prev{left:0;transform-origin:right center}
.turn.done-next{transform:rotateY(-180deg)}
.turn.done-prev{transform:rotateY(180deg)}

/* Audio panel */
.audio-row{display:flex;gap:7px;align-items:flex-start;margin:11px 0}
.audio-number{width:34px;text-align:right;padding-top:9px;font-weight:750;color:#526271}
.audio-control{flex:1;min-width:0;border:1px solid #dfe0da;border-radius:8px;background:var(--soft);padding:7px}
.audio-buttons{display:flex;align-items:center;gap:4px}
.audio-buttons button{border:0;background:#fff;padding:4px 6px;font-size:11px}
.audio-buttons .main-play{color:#fff;background:var(--accent);width:27px}
.audio-time{font-size:10px;color:var(--muted);margin-left:auto;white-space:nowrap}
.audio-volume{width:54px;height:4px;accent-color:var(--accent)}
.audio-progress{display:block;width:100%;height:5px;accent-color:var(--accent);margin-top:8px}
.audio-unit{margin:6px 0 8px}
.audio-unit-head{width:100%;display:flex;align-items:center;gap:8px;text-align:left;font-size:12px;padding:8px 9px;background:#fff}
.audio-unit-head.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
.audio-unit-head .folder{width:12px;color:var(--accent)}
.audio-unit-head .track-count{margin-left:auto;min-width:22px;text-align:center;border-radius:10px;background:var(--soft);color:#637383;font-size:10px;padding:2px 6px}
.audio-unit-body{padding:2px 0 4px}
.audio-row.current{background:var(--accent-soft);border-radius:6px}

/* Video panel */
.unit-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 10px}
.unit-tab{padding:5px 7px;font-size:11px}
.unit-tab.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
.video-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:9px;padding:9px 0;border-top:1px solid var(--line);align-items:center}
.video-thumb{width:88px;height:57px;border-radius:5px;background:var(--soft);position:relative;overflow:hidden;flex:none}
.video-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:var(--soft)}
.video-thumb:after{content:"▶";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;text-shadow:0 1px 3px #0008;background:#0002}
.video-card b{display:block;font-size:11px;line-height:1.25}
.video-card small{display:block;color:var(--muted);font-size:10px;margin-top:3px}
.video-play{margin-top:6px;border:0;background:#c8461f;color:#fff;font-size:10px;padding:5px 8px}

/* Video modal */
.modal{display:none;position:fixed;inset:0;z-index:30;background:#0009;place-items:center}
.modal.open{display:grid}
.modal-box{width:min(850px,92vw);padding:12px;background:#fff;border-radius:10px}
.modal video{width:100%;max-height:74vh;background:#000;display:block;margin:8px 0}

/* Footer controls */
.progress{width:min(360px,28vw);accent-color:var(--accent)}
.counter{min-width:92px;text-align:center;color:var(--muted)}

@media(max-width:1100px){
  main{grid-template-columns:210px minmax(380px,1fr) 225px;gap:8px;padding:10px}
  .audio-volume{display:none}
}
@media(max-width:760px){
  header{gap:8px;padding:0 10px}
  .brand span{display:none}
  main{display:block;padding:5px}
  .media-panel{position:absolute;z-index:15;bottom:67px;max-height:28vh;width:45vw}
  .audio-panel{left:5px}
  .video-panel{right:5px}
  .book-zone{height:calc(100vh - 125px);padding:5px}
  .title{display:none}
  .book-select{max-width:38vw}
  .reader{width:96vw;height:auto}
  .arrow{width:32px}
  .arrow.left{left:3px}
  .arrow.right{right:3px}
  footer{padding:7px;gap:4px}
  .progress{width:22vw}
  .counter{min-width:65px;font-size:11px}
}