:root { --red: #e3141b; --forest: #1f6b3a; --sea: #0e5a8a; --yellow: #ffc400; --bg: #2a2a2e; --bar: #fbfaf6; --ink: #121214; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: 'Anek Kannada', sans-serif; display: flex; flex-direction: column; overflow: hidden; }
.bar { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--bar); border-bottom: 4px solid var(--red); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.brand span { font: 400 26px/1.1 'Akaya Kanadaka', sans-serif; color: var(--red); }
.brand small { font: 400 15px 'Akaya Kanadaka', sans-serif; color: var(--forest); }
select, button, .btn { font: 600 14px 'Anek Kannada', sans-serif; border: 1px solid #cfc6b4; background: #fff; color: var(--ink); border-radius: 8px; padding: 6px 12px; cursor: pointer; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
button:hover, .btn:hover { border-color: var(--red); }
button.on { background: var(--red); color: #fff; border-color: var(--red); }
#wa { background: #1fa855; color: #fff; border-color: #1fa855; }
.tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.note { background: #222; color: #ffd36b; font-size: 13px; text-align: center; padding: 4px 16px; }
main { flex: 1; position: relative; min-height: 0; display: flex; align-items: center; }
#viewport { flex: 1; height: 100%; overflow: auto; position: relative; touch-action: pan-x pan-y pinch-zoom; }
#spread { display: flex; justify-content: center; align-items: flex-start; gap: 2px; padding: 16px; margin: 0 auto; width: max-content; min-width: 100%; transition: opacity .18s; }
#spread.fade { opacity: 0; }
#spread img { display: block; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.45); user-select: none; -webkit-user-drag: none; }
.nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; font-size: 34px; width: 44px; height: 64px; justify-content: center; background: rgba(255,253,248,.9); }
.prev { left: 8px; } .next { right: 8px; }
#thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; background: #1d1c1b; }
#thumbs button { padding: 0; border: 2px solid transparent; background: none; flex: 0 0 auto; flex-direction: column; color: #ddd; font-size: 12px; min-height: 0; }
#thumbs img { width: 56px; display: block; border-radius: 2px; }
#thumbs button.cur { border-color: var(--yellow); }
.clipping #viewport { cursor: crosshair; }
#clipBox { position: absolute; border: 2px dashed #ffd36b; background: rgba(255,211,107,.18); pointer-events: none; z-index: 2; }
#modal { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
#modal[hidden] { display: none; }
#modal .card { background: #fff; border-radius: 12px; padding: 12px; max-width: 720px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; gap: 10px; }
#clipImg { max-width: 100%; max-height: 70vh; object-fit: contain; border: 1px solid #ddd; }
#modal .row { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .bar { padding: 6px 12px; gap: 8px; } .tools { margin-left: 0; width: 100%; }
  .nav { width: 34px; height: 52px; font-size: 26px; }
  #spread { padding: 8px; }
}