*{box-sizing:border-box}
:root{color-scheme:dark;--bg:#070b12;--panel:rgba(10,14,22,.86);--line:rgba(255,255,255,.12);--text:#fff;--muted:rgba(255,255,255,.72);--accent:#ffd44d;--btn:rgba(255,255,255,.10);--btn2:rgba(255,255,255,.18)}
html,body{height:100%;margin:0;background:var(--bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
button,select,input{font:inherit}
button{color:var(--text)}
.app{height:100dvh;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle at 50% 30%,#1c2738 0,#0b1019 42%,#05070b 100%)}
.topbar{height:54px;display:flex;align-items:center;justify-content:space-between;padding:8px max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));background:var(--panel);border-bottom:1px solid var(--line);z-index:10}
.brand{display:flex;align-items:center;gap:10px;min-width:0}.brand-title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-sub{font-size:12px;color:var(--muted)}
.icon-btn,.round-btn,.primary-btn{border:1px solid var(--line);background:var(--btn);border-radius:999px;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.icon-btn:active,.round-btn:active,.primary-btn:active{background:var(--btn2);transform:scale(.98)}
.viewer{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
.page-frame{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative}
#pageImage{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.42);user-select:none;-webkit-user-drag:none;touch-action:none;background:#fff}
.nav-zone{position:absolute;top:0;bottom:0;width:24%;border:0;background:transparent;z-index:4;cursor:pointer;-webkit-tap-highlight-color:transparent}.nav-zone.prev{left:0}.nav-zone.next{right:0}.nav-zone:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}
.nav-bubble{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.38);backdrop-filter:blur(8px);font-size:30px;opacity:.75;pointer-events:none}.prev .nav-bubble{left:10px}.next .nav-bubble{right:10px}
.bottombar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;min-height:72px;padding:8px max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(8px,env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);z-index:10}
.left-controls{justify-self:start;display:flex;gap:8px}.right-controls{justify-self:end;display:flex;gap:8px}.center-controls{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:170px}
.primary-btn{padding:0 18px;background:rgba(255,212,77,.18);border-color:rgba(255,212,77,.45);font-weight:800;gap:8px}.page-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(10px);display:grid;place-items:center;z-index:50;padding:24px}.overlay[hidden]{display:none}
.start-card,.settings-card{width:min(92vw,480px);border:1px solid var(--line);background:#111823;border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.5);padding:24px}.start-cover{width:150px;max-width:38vw;border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.35);display:block;margin:0 auto 18px}.start-card h1{margin:0 0 8px;text-align:center;font-size:clamp(26px,5vw,40px)}.start-card p{margin:0 0 20px;text-align:center;color:var(--muted);line-height:1.45}.start-card .primary-btn{width:100%;min-height:56px;font-size:18px}
.settings-card h2{margin:0 0 18px}.setting{display:grid;gap:7px;margin:16px 0}.setting label{font-weight:700}.setting small{color:var(--muted)}select{width:100%;min-height:46px;border-radius:12px;border:1px solid var(--line);background:#0b111a;color:#fff;padding:0 12px}input[type=range]{width:100%}.check-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.check-row input{width:22px;height:22px}.settings-actions{display:flex;justify-content:space-between;gap:10px;margin-top:22px}.settings-actions button{padding:0 16px}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);padding:10px 14px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid var(--line);color:#fff;font-size:13px;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}.toast.show{opacity:1}
@media(max-width:640px){.topbar{height:48px}.brand-sub{display:none}.viewer{padding:4px}.bottombar{min-height:66px}.center-controls{min-width:138px}.primary-btn{padding:0 13px}.nav-bubble{width:44px;height:44px;font-size:27px}.prev .nav-bubble{left:4px}.next .nav-bubble{right:4px}}
@media(orientation:landscape) and (max-height:520px){.topbar{height:44px}.bottombar{min-height:58px;padding-top:5px;padding-bottom:max(5px,env(safe-area-inset-bottom))}.round-btn,.icon-btn,.primary-btn{min-height:40px;min-width:40px}.page-count{display:none}}