:root {
  --bg: #09090b;
  --panel: rgba(17, 17, 20, .94);
  --panel-2: rgba(28, 28, 32, .96);
  --text: #f7f3ef;
  --muted: #c7c0b9;
  --red: #a70e19;
  --red-bright: #d41c2a;
  --gold: #c99a55;
  --toolbar-h: 68px;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 10%, rgba(160, 0, 18, .26), transparent 32%),
    radial-gradient(circle at 8% 88%, rgba(104, 0, 12, .2), transparent 32%),
    linear-gradient(145deg, #050506 0%, #111115 50%, #070708 100%);
}
button, a { -webkit-tap-highlight-color: transparent; }
.toolbar {
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(11,11,13,.98), rgba(11,11,13,.9));
  border-bottom: 1px solid rgba(201,154,85,.35);
  box-shadow: 0 8px 26px rgba(0,0,0,.3);
  position: relative;
  z-index: 30;
}
.brand { display: flex; align-items: center; min-width: 230px; gap: 11px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #19191c, #050506);
  border: 1px solid rgba(201,154,85,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 6px 18px rgba(0,0,0,.35);
  font-family: Georgia, serif; font-weight: 700; letter-spacing: -2px;
}
.brand-mark .k { color: var(--red-bright); }
.brand-copy strong { display:block; font-family: Georgia, serif; font-size: 18px; letter-spacing: .05em; }
.brand-copy span { color: var(--muted); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.toolbar-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.toolbar-right { display: flex; align-items: center; gap: 6px; }
.icon-btn, .text-btn {
  appearance: none; border: 1px solid rgba(255,255,255,.12); color: var(--text);
  background: linear-gradient(180deg, rgba(45,45,50,.86), rgba(24,24,28,.9));
  height: 42px; min-width: 42px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: .18s ease; text-decoration: none; font-weight: 650;
}
.icon-btn:hover, .text-btn:hover { border-color: rgba(201,154,85,.7); transform: translateY(-1px); background: #27272c; }
.icon-btn:active, .text-btn:active { transform: translateY(0) scale(.97); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.text-btn { padding: 0 13px; font-size: 13px; }
.text-btn.primary { background: linear-gradient(180deg, #c71928, #8e0b15); border-color: #da3441; }
.page-counter {
  min-width: 126px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums;
  font-size: 13px; padding: 0 8px;
}
.stage {
  height: calc(100% - var(--toolbar-h));
  position: relative; display: grid; place-items: center;
  padding: 22px 28px 34px;
  perspective: 2600px;
  user-select: none;
  touch-action: pan-y;
}
.stage::before {
  content:""; position:absolute; inset: 0; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.018) 49.8%, rgba(0,0,0,.12) 50.2%, transparent);
}
.book {
  height: min(calc(100vh - var(--toolbar-h) - 58px), 66vw);
  max-height: 100%;
  display: flex; align-items: stretch; justify-content: center;
  transform-style: preserve-3d;
  filter: drop-shadow(0 28px 28px rgba(0,0,0,.55));
  transition: transform .25s ease, opacity .25s ease;
  position: relative;
  width: fit-content;
}
.book.single, .book.spread { width: fit-content; }
.book.turn-next { animation: turnNext .26s ease-in forwards; }
.book.turn-prev { animation: turnPrev .26s ease-in forwards; }
@keyframes turnNext { to { transform: translateX(-2.2%) rotateY(-6deg) scale(.985); opacity: .3; } }
@keyframes turnPrev { to { transform: translateX(2.2%) rotateY(6deg) scale(.985); opacity: .3; } }
.page-slot {
  height: 100%; aspect-ratio: 595 / 842; position: relative; overflow: hidden;
  background: #eee; transform-style: preserve-3d;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.14);
}
.book.single .page-slot { border-radius: 4px 10px 10px 4px; }
.page-slot.left { border-radius: 8px 2px 2px 8px; transform-origin: right center; }
.page-slot.right { border-radius: 2px 8px 8px 2px; transform-origin: left center; }
.page-slot.left::after, .page-slot.right::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:7;
}
.page-slot.left::after { background: linear-gradient(90deg, transparent 83%, rgba(0,0,0,.14) 100%); }
.page-slot.right::after { background: linear-gradient(90deg, rgba(0,0,0,.13), transparent 17%); }
.page-image { width: 100%; height: 100%; display: block; object-fit: contain; background:#fff; }
.page-links { position:absolute; inset:0; z-index:10; }
.page-link { position:absolute; display:block; border-radius: 4px; cursor:pointer; outline:none; }
.page-link:hover, .page-link:focus-visible {
  border: 2px solid rgba(212,28,42,.95);
  background: rgba(212,28,42,.12);
  box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 0 16px rgba(212,28,42,.35);
}
.page-number-badge {
  position:absolute; z-index:12; bottom:8px; right:10px; min-width:28px; height:24px; padding:0 7px;
  border-radius:12px; display:grid; place-items:center; background:rgba(0,0,0,.65); color:#fff;
  font-size:11px; opacity:0; transition:.2s; pointer-events:none;
}
.page-slot:hover .page-number-badge { opacity:1; }
.book-shadow {
  position:absolute; width:min(72vw, 920px); height:34px; bottom:12px; left:50%; transform:translateX(-50%);
  background:radial-gradient(ellipse, rgba(0,0,0,.62), transparent 70%); filter:blur(9px); pointer-events:none;
}
.hint {
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%); color:rgba(255,255,255,.62);
  font-size:11px; letter-spacing:.05em; white-space:nowrap; pointer-events:none;
}
.drawer {
  position: fixed; top: var(--toolbar-h); bottom: 0; left: 0; width: min(390px, 88vw);
  background: var(--panel); backdrop-filter: blur(18px); border-right:1px solid rgba(201,154,85,.35);
  transform: translateX(-102%); transition:.28s ease; z-index:40; box-shadow:22px 0 46px rgba(0,0,0,.4);
  display:flex; flex-direction:column;
}
.drawer.open { transform:translateX(0); }
.drawer-head { height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; border-bottom:1px solid rgba(255,255,255,.1); }
.drawer-head strong { font-family:Georgia,serif; letter-spacing:.04em; }
.thumb-grid { padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; overflow:auto; }
.thumb {
  border:1px solid rgba(255,255,255,.1); background:#151518; border-radius:7px; padding:5px; cursor:pointer;
  color:var(--muted); font-size:10px; text-align:center; transition:.18s; position:relative;
}
.thumb:hover, .thumb.active { border-color:var(--gold); transform:translateY(-2px); color:#fff; }
.thumb.active::after { content:""; position:absolute; inset:-3px; border:1px solid var(--red-bright); border-radius:9px; pointer-events:none; }
.thumb img { width:100%; aspect-ratio:595/842; object-fit:cover; display:block; border-radius:4px; margin-bottom:5px; }
.overlay { position:fixed; inset:var(--toolbar-h) 0 0; background:rgba(0,0,0,.58); z-index:35; opacity:0; pointer-events:none; transition:.25s; }
.overlay.show { opacity:1; pointer-events:auto; }
.loading {
  position:fixed; inset:0; z-index:100; display:grid; place-items:center;
  background:radial-gradient(circle at center, #1b1b1e, #070708);
  transition:opacity .5s ease, visibility .5s;
}
.loading.hidden { opacity:0; visibility:hidden; }
.loader-card { text-align:center; }
.loader-logo { font:700 64px Georgia,serif; letter-spacing:-6px; }
.loader-logo .k { color:var(--red-bright); }
.loader-line { width:210px; height:3px; background:#2a2a2e; border-radius:3px; overflow:hidden; margin:18px auto 10px; }
.loader-line i { display:block; height:100%; width:35%; background:linear-gradient(90deg,var(--red),var(--gold)); animation:load 1s infinite ease-in-out; }
@keyframes load { 0%{transform:translateX(-100%)} 100%{transform:translateX(380%)} }
.loader-card small { color:var(--muted); letter-spacing:.16em; text-transform:uppercase; }
.toast {
  position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); z-index:70;
  background:rgba(15,15,18,.95); border:1px solid rgba(201,154,85,.45); padding:11px 15px; border-radius:10px;
  opacity:0; pointer-events:none; transition:.25s; font-size:13px; box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width: 900px) {
  :root { --toolbar-h: 62px; }
  .toolbar { padding:8px; gap:5px; }
  .brand { min-width:auto; margin-right:auto; }
  .brand-copy { display:none; }
  .brand-mark { width:40px; height:40px; }
  .toolbar-center { flex:0 0 auto; }
  .toolbar-right { gap:4px; }
  .hide-mobile { display:none !important; }
  .page-counter { min-width:78px; font-size:12px; padding:0 2px; }
  .icon-btn, .text-btn { min-width:40px; height:40px; border-radius:9px; }
  .stage { padding:14px 8px 28px; }
  .book, .book.single, .book.spread {
    width:fit-content;
    height:min(calc(100vh - var(--toolbar-h) - 46px), 135.8vw);
  }
  .page-slot { border-radius:7px !important; }
  .page-slot::after { background:linear-gradient(90deg, rgba(0,0,0,.04), transparent 18%, transparent 82%, rgba(0,0,0,.04)) !important; }
  .hint { bottom:5px; font-size:10px; }
}
@media (max-width: 430px) {
  .toolbar { gap:3px; }
  .icon-btn { min-width:38px; width:38px; }
  .page-counter { min-width:68px; font-size:11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}