:root{--bg:#050b16;--panel:#0b1627;--line:#263853;--text:#f2f5fb;--muted:#93a2b8;--gold:#f5c84b;--cyan:#10aeea;--green:#35d39a;--violet:#8b5cf6;--danger:#ef607d}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#030812;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow:hidden}
body{display:grid;grid-template-rows:auto 3px minmax(0,1fr) auto;min-height:100dvh}
.reader-header{height:72px;display:grid;grid-template-columns:minmax(230px,1fr) auto minmax(140px,1fr);align-items:center;padding:0 clamp(14px,2vw,34px);background:linear-gradient(90deg,#081324 0%,#07101e 55%,#0c1630 100%);border-bottom:1px solid #24344c;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:36px;height:36px;border-radius:50%;background:conic-gradient(from 210deg,#075df5,#9b4df0,#e54bc3,#075df5);position:relative;box-shadow:0 0 24px rgba(91,88,255,.35)}.brand-mark:after{content:"";position:absolute;inset:9px;border-radius:50%;background:#07101e}.brand-name{font-weight:900;font-size:clamp(20px,2vw,30px);letter-spacing:-.6px;white-space:nowrap}.brand-name span{color:#8d64f6}.brand-tag{font-size:9px;color:#b4bfd0;letter-spacing:1.1px;font-weight:700;white-space:nowrap}
.title{text-align:center;line-height:1.15}.title strong{font-size:13px;letter-spacing:1.8px}.title span{display:block;color:var(--gold);font-size:12px;font-weight:800;margin-top:3px}.counter{text-align:right}.counter strong{display:block;font-size:20px}.counter span{font-size:11px;color:#aab6c8}
.progress-track{height:3px;background:#17253b}.progress-bar{height:100%;width:0;background:linear-gradient(90deg,#7a5cff,#dc55c6,#f4cb4f);transition:width .25s ease}
.reader-main{min-height:0;padding:10px clamp(8px,1.2vw,18px);background:radial-gradient(circle at 0% 20%,rgba(116,69,150,.22),transparent 31%),radial-gradient(circle at 100% 15%,rgba(31,86,183,.18),transparent 34%),#07101e}
.viewer{height:100%;width:100%;position:relative;border:1px solid rgba(116,91,183,.35);border-radius:22px;background:rgba(7,13,28,.72);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 64px;touch-action:pan-y}
.page-image{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;box-shadow:0 14px 42px rgba(0,0,0,.28)}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:82px;border-radius:22px;border:1px solid #2a3a54;background:rgba(3,10,22,.86);color:white;font-size:30px;cursor:pointer;display:grid;place-items:center;z-index:3;transition:.2s}.nav:hover{background:#112038}.nav:disabled{opacity:.28;cursor:not-allowed}.prev{left:14px}.next{right:14px}
.reader-footer{min-height:56px;padding:9px clamp(14px,2vw,34px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;background:#050c18;border-top:1px solid #202f46;color:#9ba8ba;font-size:12px}.reader-footer b{color:white}.footer-center{color:var(--gold);font-weight:900;letter-spacing:.8px;text-align:center}.footer-right{text-align:right}.dots{display:flex;gap:7px;justify-content:flex-end;margin-top:4px}.dot{width:9px;height:9px;border-radius:50%;border:0;background:#445064;padding:0;cursor:pointer}.dot.active{background:var(--gold);box-shadow:0 0 12px rgba(245,200,75,.5)}
.lock-overlay{position:fixed;inset:0;background:rgba(2,7,15,.84);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;z-index:30;padding:20px}.lock-overlay.active{display:flex}.lock-card{width:min(470px,100%);border:1px solid #334968;border-radius:22px;background:linear-gradient(145deg,#0b1729,#091220);padding:30px;box-shadow:0 28px 80px rgba(0,0,0,.55)}.lock-kicker{color:var(--cyan);font-weight:900;font-size:12px;letter-spacing:1.2px}.lock-card h2{margin:10px 0 8px;font-size:28px}.lock-card p{color:#b5c0d0;line-height:1.6}.lock-row{display:flex;gap:10px;margin-top:18px}.lock-row input{flex:1;min-width:0;border:1px solid #354969;background:#06101f;color:white;border-radius:12px;padding:13px 14px;font-size:15px;outline:none}.lock-row input:focus{border-color:var(--cyan)}.unlock{border:0;border-radius:12px;padding:0 18px;font-weight:900;background:linear-gradient(135deg,#08b1ef,#7766f5);color:white;cursor:pointer}.lock-error{min-height:20px;margin-top:10px;color:#ff7f98;font-size:13px}.lock-note{font-size:11px;color:#76869d;margin-top:16px}
@media(max-width:820px){.reader-header{height:62px;grid-template-columns:1fr auto}.title{display:none}.brand-mark{width:31px;height:31px}.brand-name{font-size:21px}.brand-tag{display:none}.counter strong{font-size:17px}.reader-main{padding:6px}.viewer{border-radius:14px;padding:0 42px}.nav{width:36px;height:66px;border-radius:16px;font-size:25px}.prev{left:4px}.next{right:4px}.reader-footer{grid-template-columns:1fr auto;min-height:48px;font-size:10px;padding:7px 12px}.footer-center{display:none}.footer-right{font-size:10px}.dots{gap:5px}.dot{width:7px;height:7px}}
@media(max-width:480px){.viewer{padding:0 34px}.brand-name{font-size:19px}.reader-footer{gap:8px}.footer-left span{display:none}.lock-row{flex-direction:column}.unlock{height:46px}}