:root{--pan-x:0px;--pan-y:0px;--swipe-x:0px;--amber:#d4af37;--amber2:#f0cf63;--bg:#07090d;--panel:rgba(14,17,23,.88);--line:rgba(255,255,255,.11);--text:#f5f6f8;--muted:#a6acb7;--brightness:1;--zoom:1;--page-transition:300ms}
/* FIX: touch-action lives on the ID selector so it can never be lost when the
   class list on #reader-container is rewritten by applySettingsToDOM(). */
#reader-container{touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--text);overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;user-select:none;-webkit-user-select:none}button,input{font:inherit}button{border:0;cursor:pointer}svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.reader-ui{position:fixed;left:0;right:0;z-index:60;transition:opacity .28s ease,transform .28s ease}.reader-header{top:0;padding:14px 18px;background:linear-gradient(180deg,rgba(3,5,8,.94),rgba(3,5,8,.55),transparent);pointer-events:none}.reader-header-inner{max-width:1500px;margin:auto;display:flex;align-items:center;gap:12px;pointer-events:auto}.reader-heading{min-width:0;display:flex;align-items:center;gap:11px;flex:1}.reader-cover{width:42px;height:54px;object-fit:cover;border-radius:6px;background:#171a20;box-shadow:0 8px 25px #0008}.reader-heading-copy{min-width:0}.reader-kicker{font-size:9px;letter-spacing:.18em;color:var(--amber);font-weight:800;display:flex;gap:6px;align-items:center}.reader-kicker span{width:5px;height:5px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}.reader-heading h1{font-size:15px;line-height:1.2;margin:3px 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(38vw,520px)}.reader-meta{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px}.meta-dot{opacity:.45}.rating-stars{letter-spacing:1px;color:#50545c;cursor:pointer}.rating-stars .star.active{color:var(--amber)}
.reader-action{width:42px;height:42px;border-radius:13px;background:rgba(16,19,25,.72);border:1px solid var(--line);color:#dfe3e8;display:grid;place-items:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.2s ease}.reader-action:hover,.reader-action:focus-visible{color:var(--amber2);border-color:#d4af3755;background:#191b20}.reader-action.icon-only{flex:none}.reader-action svg{width:19px;height:19px}.reader-header-actions{display:flex;gap:7px;align-items:center}.reader-user{height:42px;padding:0 8px 0 5px;border:1px solid var(--line);border-radius:13px;background:rgba(16,19,25,.72);backdrop-filter:blur(14px);display:flex;align-items:center;gap:7px;color:#dfe3e8;font-size:11px;max-width:180px}.user-avatar{width:31px;height:31px;border-radius:9px;background:#252830;display:grid;place-items:center;color:var(--amber)}.user-avatar svg,.user-logout svg{width:16px;height:16px}.user-logout{background:transparent;color:#9298a2;padding:5px}.user-logout:hover{color:#fff}.hidden{display:none!important}
.reader-canvas{position:fixed;inset:0;background:var(--bg);overflow:hidden;filter:brightness(var(--brightness));z-index:1}.reader-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 48%,rgba(0,0,0,.32) 100%);z-index:2}.book-wrapper{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:translate3d(calc(var(--pan-x) + var(--swipe-x,0px)),var(--pan-y),0) scale(var(--zoom));transform-origin:center;transition:transform .22s ease;perspective:1800px;will-change:transform}.reader-canvas{touch-action:none;cursor:default}.reader-canvas.is-panning .book-wrapper{transition:none}.reader-canvas.is-panning{cursor:grabbing}.page{position:absolute;display:flex;align-items:center;justify-content:center;background:transparent!important;box-shadow:0 16px 45px rgba(0,0,0,.55);overflow:hidden;border-radius:2px;backface-visibility:hidden}.page-img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;max-width:100%;max-height:100%;background:#111;image-rendering:auto}.page-center{left:50%;top:50%;transform:translate(-50%,-50%)}.page-left{right:50%;top:50%;transform:translateY(-50%);transform-origin:right center}.page-right{left:50%;top:50%;transform:translateY(-50%);transform-origin:left center}.flip-layer{z-index:20}.flip-layer-front,.flip-layer-back{position:absolute;inset:0;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#111;backface-visibility:hidden}.flip-layer-back{transform:rotateY(180deg)}.page-shadow{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),transparent 20%,transparent 80%,rgba(0,0,0,.28));pointer-events:none}
.canvas-nav{position:absolute;z-index:12;top:50%;transform:translateY(-50%);width:54px;height:92px;background:rgba(10,12,16,.16);border:1px solid transparent;color:#b8bdc7;display:grid;place-items:center;border-radius:16px;opacity:.12;transition:.25s ease}.canvas-nav svg{width:28px;height:28px;stroke-width:2}.canvas-nav:hover{opacity:1;background:rgba(18,21,27,.78);border-color:var(--line);color:var(--amber2);backdrop-filter:blur(12px)}.canvas-nav-left{left:15px}.canvas-nav-right{right:15px}.canvas-center-toggle{position:absolute;z-index:14;left:50%;bottom:96px;transform:translateX(-50%);width:38px;height:26px;border-radius:13px;background:rgba(10,12,16,.5);color:#777d87;border:1px solid rgba(255,255,255,.06);opacity:0;transition:.2s;touch-action:none}.reader-canvas:hover .canvas-center-toggle{opacity:.7}.canvas-center-toggle svg{width:18px;height:18px;margin:auto;fill:currentColor;stroke:none}
.reader-bottom{bottom:0;padding:12px 18px 16px;background:linear-gradient(0deg,rgba(3,5,8,.96),rgba(3,5,8,.72),transparent);pointer-events:none}.reader-bottom-inner{max-width:1100px;margin:auto;display:flex;align-items:center;gap:15px;padding:11px 13px;border:1px solid var(--line);background:rgba(12,15,20,.84);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:18px;box-shadow:0 15px 50px #0008;pointer-events:auto}.page-info{min-width:76px;display:flex;align-items:baseline;gap:4px}.page-label{font-size:8px;letter-spacing:.16em;color:var(--amber);font-weight:800;margin-right:4px}.page-info strong{font-size:15px}.page-divider{color:#656b75}.page-info span:last-child{color:#9aa0aa;font-size:12px}.reader-progress{flex:1;position:relative;padding:0 2px}.reader-progress input{position:absolute;inset:0;width:100%;height:22px;opacity:0;cursor:pointer;z-index:2}.progress-line{height:4px;border-radius:10px;background:#30343b;overflow:hidden}.progress-line span{display:block;height:100%;width:1%;background:linear-gradient(90deg,var(--amber),var(--amber2));border-radius:inherit;transition:width .2s}.reader-percent{min-width:35px;text-align:right;color:#9da3ad;font-size:11px}.reader-bottom-actions{display:flex;align-items:center;gap:4px;padding-left:8px;border-left:1px solid var(--line)}.hud-btn,.zoom-pill{height:32px;background:transparent;color:#aeb4bd;border-radius:9px}.hud-btn{width:32px;display:grid;place-items:center}.hud-btn:hover{color:var(--amber2);background:#ffffff08}.hud-btn svg{width:18px;height:18px}.zoom-pill{min-width:49px;font-size:11px;color:#d9dde2}.zoom-pill:hover{background:#ffffff08;color:#fff}
.reader-settings{position:fixed;z-index:100;right:0;top:0;bottom:0;width:min(380px,92vw);background:rgba(12,15,20,.97);border-left:1px solid var(--line);box-shadow:-25px 0 80px #000b;backdrop-filter:blur(22px);transition:transform .3s cubic-bezier(.2,.8,.2,1);color:var(--text)}.settings-top{height:82px;padding:18px 18px 14px 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.settings-kicker{font-size:9px;letter-spacing:.2em;color:var(--amber);font-weight:800}.settings-top h2{font-size:21px;margin:2px 0 0}.settings-scroll{height:calc(100% - 82px);overflow:auto;padding:20px 22px 30px}.setting-group{padding:0 0 21px;margin-bottom:19px;border-bottom:1px solid rgba(255,255,255,.07)}.setting-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12px;font-weight:700}.setting-title small,.setting-title output{font-size:10px;color:#858c97;letter-spacing:.08em}.setting-segment{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:#ffffff06;border:1px solid #ffffff0b;border-radius:11px}.setting-segment.three{grid-template-columns:repeat(3,1fr)}.settings-btn{min-height:39px;border-radius:8px;background:transparent;color:#9299a4;font-size:11px;display:flex;align-items:center;justify-content:center;gap:7px;transition:.2s}.settings-btn svg{width:16px;height:16px}.settings-btn:hover{background:#ffffff08;color:#fff}.settings-btn.bg-amber-500{background:var(--amber)!important;color:#0a0b0d!important}.setting-group input[type=range]{width:100%;accent-color:var(--amber);height:5px}.color-options{display:flex;gap:10px}.color-btn{width:38px;height:38px;border-radius:50%;background:var(--swatch);border:2px solid #ffffff22;box-shadow:0 0 0 3px transparent;transition:.2s}.color-btn.border-amber-500{box-shadow:0 0 0 3px #d4af3760;border-color:var(--amber)}.setting-toggle{display:flex;justify-content:space-between;align-items:center;padding:2px 0 23px;margin-bottom:20px;border-bottom:1px solid #ffffff0b}.setting-toggle strong{display:block;font-size:12px}.setting-toggle span{display:block;color:#777f8a;font-size:10px;margin-top:4px}.toggle-track{width:42px;height:24px;border-radius:20px;background:#3a3f47;position:relative}.toggle-thumb{position:absolute;top:4px;left:4px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}.toggle-track.bg-amber-500{background:var(--amber)!important}.toggle-thumb.right-1{left:22px}.toggle-thumb.left-1{left:4px}.shortcut-card{display:flex;gap:11px;padding:13px;border:1px solid #ffffff0b;border-radius:13px;background:#ffffff04}.shortcut-icon{width:34px;height:34px;border-radius:9px;background:#d4af3714;color:var(--amber);display:grid;place-items:center;flex:none}.shortcut-icon svg{width:18px}.shortcut-card strong{font-size:11px}.shortcut-card p{font-size:10px;color:#747b86;margin:4px 0 0}.shortcut-card kbd{padding:2px 5px;border:1px solid #ffffff16;border-radius:4px;color:#b5bac2;background:#ffffff06}
.reader-loader{position:absolute;z-index:30;inset:0;display:grid;place-items:center;align-content:center;gap:12px;background:rgba(4,6,9,.45);backdrop-filter:blur(3px)}.reader-loader.hidden{display:none}.loader-orbit{width:45px;height:45px;border:2px solid #ffffff12;border-top-color:var(--amber);border-right-color:#ffffff66;border-radius:50%;animation:spin .8s linear infinite}.loader-orbit span{display:none}.reader-loader p{font-size:11px;color:#9da3ad}.page-loading{position:absolute;z-index:5;left:50%;top:50%;width:40px;height:40px;transform:translate(-50%,-50%);pointer-events:none;display:none}.page-loading span{display:block;width:100%;height:100%;border:2px solid #ffffff14;border-top-color:var(--amber);border-radius:50%;animation:spin .8s linear infinite}.page-image-error{background:#17191e!important;min-width:180px;min-height:250px}@keyframes spin{to{transform:rotate(360deg)}}
.toast-message,#toast{z-index:200!important}.ui-hidden .reader-header{transform:translateY(-110%);opacity:0}.ui-hidden .reader-bottom{transform:translateY(110%);opacity:0}.ui-hidden .canvas-nav{opacity:0!important}.ui-hidden .canvas-center-toggle{opacity:0!important}.ui-hidden{cursor:default}.modal-overlay{z-index:200}
@media (max-width:800px){.reader-header{padding:10px 10px 24px}.reader-cover{display:none}.reader-heading h1{font-size:13px;max-width:43vw}.reader-meta{font-size:10px}.reader-action{width:38px;height:38px;border-radius:11px}.reader-header-actions{gap:5px}.reader-user{display:none!important}.desktop-only{display:none}.canvas-nav{width:42px;height:70px;opacity:.08}.canvas-nav-left{left:4px}.canvas-nav-right{right:4px}.reader-bottom{padding:8px 8px 10px}.reader-bottom-inner{gap:8px;padding:9px;border-radius:15px}.page-info{min-width:62px}.page-label{display:none}.reader-percent{display:none}.reader-bottom-actions{padding-left:4px}.hud-btn{width:29px}.zoom-pill{min-width:42px}.reader-progress{min-width:0}.book-wrapper{transform:translate3d(calc(var(--pan-x) + var(--swipe-x,0px)),var(--pan-y),0) scale(var(--zoom))}.page-img{max-width:100vw}.reader-settings{width:100%;max-width:390px}.reader-canvas{touch-action:none}.canvas-center-toggle{bottom:86px}}
@media (max-width:430px){.reader-header-actions .reader-action:nth-child(1){display:none}.reader-heading h1{max-width:48vw}.reader-meta #rating-stars{display:none}.reader-bottom-actions{display:none}.reader-bottom-inner{padding:10px 11px}.page-info{min-width:57px}.page-info strong{font-size:14px}.reader-progress{height:20px;display:flex;align-items:center}.progress-line{height:5px}.reader-heading{gap:7px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
/* Icon fallback for authentication dialogs */
.inline-icon{width:17px;height:17px;display:inline-block;vertical-align:-4px;margin-right:5px;stroke:currentColor;fill:none;stroke-width:1.8}.google-mark{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#fff;color:#4285f4;font-size:12px;font-weight:800;font-family:Arial,sans-serif}


/* ================================================================
   STORYVERSE READER — UI REFRESH
   UI-only overrides. Reader logic/behavior selectors are untouched.
   ================================================================ */
:root{
    --amber:#e7bd4a;
    --amber2:#ffe08a;
    --gold-soft:rgba(231,189,74,.14);
    --bg:#05070b;
    --panel:rgba(12,15,21,.78);
    --panel-strong:rgba(13,16,23,.94);
    --line:rgba(255,255,255,.10);
    --line-soft:rgba(255,255,255,.065);
    --text:#f7f8fa;
    --muted:#9da5b2;
    --muted-2:#707887;
    --shadow:0 22px 70px rgba(0,0,0,.52);
}

/* ---------- Global polish ---------- */
html,body{
    background:
      radial-gradient(circle at 50% -15%,rgba(231,189,74,.075),transparent 34%),
      #05070b;
}
body{
    letter-spacing:.005em;
}
button{
    -webkit-tap-highlight-color:transparent;
}
button:focus-visible,input:focus-visible{
    outline:2px solid rgba(231,189,74,.8);
    outline-offset:3px;
}

/* ---------- Top reader bar ---------- */
.reader-header{
    padding:18px 22px 44px;
    background:
      linear-gradient(180deg,rgba(3,5,9,.97) 0%,rgba(3,5,9,.82) 42%,rgba(3,5,9,0) 100%);
}
.reader-header-inner{
    max-width:1540px;
    min-height:58px;
    gap:14px;
}
.reader-heading{
    gap:13px;
}
.reader-cover{
    width:44px;
    height:58px;
    border-radius:9px;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 12px 34px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.02);
}
.reader-kicker{
    font-size:9px;
    letter-spacing:.22em;
    color:#f0ca62;
}
.reader-kicker span{
    width:6px;
    height:6px;
    box-shadow:0 0 16px rgba(231,189,74,.9);
}
.reader-heading h1{
    font-size:16px;
    font-weight:700;
    letter-spacing:-.01em;
    margin:4px 0 5px;
}
.reader-meta{
    font-size:11px;
    color:#aeb5c0;
}
.rating-stars{
    color:#444b56;
    letter-spacing:2px;
    transition:color .18s ease;
}
.rating-stars .star{
    transition:transform .16s ease,color .16s ease;
}
.rating-stars .star:hover{
    transform:translateY(-1px) scale(1.08);
}
.rating-stars .star.active{
    color:#e7bd4a;
    text-shadow:0 0 12px rgba(231,189,74,.25);
}

/* ---------- Glass action buttons ---------- */
.reader-action{
    width:44px;
    height:44px;
    border-radius:14px;
    background:linear-gradient(180deg,rgba(28,32,41,.78),rgba(13,16,22,.72));
    border:1px solid rgba(255,255,255,.11);
    color:#cdd3dc;
    box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(18px) saturate(125%);
    -webkit-backdrop-filter:blur(18px) saturate(125%);
}
.reader-action:hover,
.reader-action:focus-visible{
    color:#ffe08a;
    border-color:rgba(231,189,74,.42);
    background:linear-gradient(180deg,rgba(45,39,27,.88),rgba(20,20,23,.82));
    box-shadow:0 10px 28px rgba(0,0,0,.3),0 0 0 1px rgba(231,189,74,.05) inset;
    transform:translateY(-1px);
}
.reader-action:active{
    transform:translateY(0) scale(.97);
}
.reader-header-actions{
    gap:8px;
}
.reader-user{
    height:44px;
    border-radius:14px;
    background:linear-gradient(180deg,rgba(28,32,41,.78),rgba(13,16,22,.72));
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.045);
}
.user-avatar{
    width:32px;
    height:32px;
    border-radius:10px;
    background:rgba(231,189,74,.11);
    border:1px solid rgba(231,189,74,.18);
}

/* ---------- Reading canvas ---------- */
.reader-canvas{
    background:
      radial-gradient(circle at center,rgba(255,255,255,.018),transparent 48%),
      radial-gradient(circle at 50% 110%,rgba(231,189,74,.035),transparent 42%),
      #05070b;
}
.reader-vignette{
    background:
      radial-gradient(circle at center,transparent 43%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.55) 100%),
      linear-gradient(90deg,rgba(0,0,0,.12),transparent 12%,transparent 88%,rgba(0,0,0,.12));
}
.page{
    box-shadow:0 24px 70px rgba(0,0,0,.58),0 2px 10px rgba(0,0,0,.32);
}
.page-img{
    background:#101217;
}
.canvas-nav{
    width:58px;
    height:104px;
    border-radius:18px;
    color:#aab2bf;
    background:rgba(10,13,18,.20);
    border:1px solid rgba(255,255,255,0);
    box-shadow:0 15px 40px rgba(0,0,0,.25);
}
.canvas-nav:hover{
    background:rgba(18,22,29,.82);
    border-color:rgba(255,255,255,.11);
    color:#ffe08a;
    box-shadow:0 18px 45px rgba(0,0,0,.42),0 0 0 1px rgba(231,189,74,.04) inset;
}
.canvas-nav svg{
    width:25px;
    height:25px;
}

/* ---------- Bottom control dock ---------- */
.reader-bottom{
    padding:16px 22px 22px;
    background:linear-gradient(0deg,rgba(2,4,7,.98) 0%,rgba(2,4,7,.88) 42%,rgba(2,4,7,0) 100%);
}
.reader-bottom-inner{
    max-width:1120px;
    min-height:58px;
    padding:10px 12px 10px 15px;
    gap:14px;
    border-radius:17px;
    background:
      linear-gradient(180deg,rgba(25,29,37,.82),rgba(11,14,19,.86));
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 22px 65px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.045);
    backdrop-filter:blur(24px) saturate(130%);
    -webkit-backdrop-filter:blur(24px) saturate(130%);
}
.page-info{
    min-width:82px;
}
.page-label{
    font-size:8px;
    letter-spacing:.18em;
    color:#e7bd4a;
}
.page-info strong{
    font-size:16px;
    letter-spacing:-.02em;
}
.reader-progress{
    padding:0 5px;
}
.progress-line{
    height:5px;
    background:rgba(255,255,255,.11);
    box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.progress-line span{
    background:linear-gradient(90deg,#c99627,#ffe08a);
    box-shadow:0 0 12px rgba(231,189,74,.25);
}
.reader-percent{
    color:#b1b8c3;
    font-variant-numeric:tabular-nums;
}
.reader-bottom-actions{
    gap:3px;
    padding-left:9px;
    border-left-color:rgba(255,255,255,.09);
}
.hud-btn,.zoom-pill{
    height:34px;
    border-radius:10px;
}
.hud-btn{
    width:34px;
}
.hud-btn:hover,.zoom-pill:hover{
    color:#ffe08a;
    background:rgba(231,189,74,.09);
}
.zoom-pill{
    color:#dce1e8;
    font-variant-numeric:tabular-nums;
}

/* ---------- Settings drawer ---------- */
.reader-settings{
    width:min(410px,94vw);
    background:
      radial-gradient(circle at 80% 0%,rgba(231,189,74,.055),transparent 30%),
      rgba(10,13,18,.96);
    border-left:1px solid rgba(255,255,255,.11);
    box-shadow:-30px 0 100px rgba(0,0,0,.65);
    backdrop-filter:blur(28px) saturate(130%);
    -webkit-backdrop-filter:blur(28px) saturate(130%);
}
.settings-top{
    height:88px;
    padding:19px 20px 15px 24px;
    background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.settings-kicker{
    color:#e7bd4a;
    letter-spacing:.24em;
}
.settings-top h2{
    font-size:22px;
    letter-spacing:-.025em;
}
.settings-scroll{
    padding:22px 24px 34px;
}
.setting-group{
    padding-bottom:22px;
    margin-bottom:20px;
    border-bottom:1px solid rgba(255,255,255,.065);
}
.setting-title{
    margin-bottom:11px;
    color:#e9ecf0;
}
.setting-title small,.setting-title output{
    color:#7f8793;
    font-variant-numeric:tabular-nums;
}
.setting-segment{
    padding:4px;
    gap:5px;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.075);
    border-radius:13px;
}
.settings-btn{
    min-height:40px;
    border-radius:9px;
    color:#9ca4af;
}
.settings-btn:hover{
    background:rgba(255,255,255,.06);
    color:#f4f6f8;
}
.settings-btn.bg-amber-500{
    background:linear-gradient(135deg,#d6a83a,#f0cc69)!important;
    box-shadow:0 7px 18px rgba(231,189,74,.13),inset 0 1px 0 rgba(255,255,255,.25);
}
.setting-group input[type=range]{
    accent-color:#e7bd4a;
}
.color-options{
    gap:11px;
}
.color-btn{
    width:40px;
    height:40px;
    border-color:rgba(255,255,255,.18);
    box-shadow:0 5px 16px rgba(0,0,0,.24),0 0 0 3px transparent;
}
.color-btn:hover{
    transform:translateY(-1px);
}
.color-btn.border-amber-500{
    box-shadow:0 5px 16px rgba(0,0,0,.24),0 0 0 3px rgba(231,189,74,.25);
    border-color:#e7bd4a;
}
.setting-toggle{
    padding-bottom:24px;
}
.toggle-track{
    width:46px;
    height:26px;
    background:#343a44;
    box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.toggle-thumb{
    width:18px;
    height:18px;
    top:4px;
    left:4px;
    box-shadow:0 2px 7px rgba(0,0,0,.35);
}
.toggle-track.bg-amber-500{
    background:linear-gradient(90deg,#bd8d20,#e7bd4a)!important;
}
.toggle-thumb.right-1{
    left:24px;
}
.shortcut-card{
    padding:14px;
    border-radius:14px;
    background:rgba(255,255,255,.028);
    border-color:rgba(255,255,255,.075);
}
.shortcut-icon{
    background:rgba(231,189,74,.10);
    border:1px solid rgba(231,189,74,.10);
}

/* ---------- Loading states ---------- */
.reader-loader{
    background:rgba(2,4,7,.55);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.loader-orbit{
    width:48px;
    height:48px;
    border-width:2px;
    box-shadow:0 0 35px rgba(231,189,74,.08);
}
.reader-loader p{
    color:#b0b7c2;
}

/* ---------- Generic modal polish (no behavior changes) ---------- */
.modal-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:rgba(2,4,7,.72)!important;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    overflow-y:auto;
}
.modal-overlay.active{
    display:flex;
}
.modal-overlay .modal-content{
    width:min(440px,100%);
    max-height:min(90vh,640px);
    overflow-y:auto;
    margin:auto;
}
#forgotPasswordModal .modal-content{
    width:min(430px,100%);
    padding:28px;
    border-radius:20px;
}
.modal-content{
    background:
      radial-gradient(circle at 85% 0%,rgba(231,189,74,.07),transparent 35%),
      rgba(13,17,23,.97)!important;
    border:1px solid rgba(255,255,255,.11)!important;
    box-shadow:0 30px 100px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.045);
}
.modal-overlay input,
#loginModal input,
#signupModal input{
    background:rgba(255,255,255,.045)!important;
    border-color:rgba(255,255,255,.10)!important;
    border-radius:11px!important;
}
.modal-overlay input:focus,
#loginModal input:focus,
#signupModal input:focus{
    border-color:rgba(231,189,74,.65)!important;
    box-shadow:0 0 0 3px rgba(231,189,74,.09);
}
#loginModal>div,
#signupModal>div,
#continue-modal>div{
    background:
      radial-gradient(circle at 90% 0%,rgba(231,189,74,.06),transparent 34%),
      rgba(13,17,23,.97)!important;
    border-color:rgba(255,255,255,.11)!important;
    box-shadow:0 30px 100px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.045);
}

/* ---------- Responsive refinement ---------- */
@media (max-width:800px){
    .reader-header{
        padding:12px 12px 30px;
    }
    .reader-header-inner{
        gap:9px;
    }
    .reader-action{
        width:40px;
        height:40px;
        border-radius:12px;
    }
    .reader-bottom{
        padding:9px 9px 12px;
    }
    .reader-bottom-inner{
        min-height:54px;
        padding:9px 10px;
        border-radius:15px;
    }
    .canvas-nav{
        width:46px;
        height:76px;
        border-radius:14px;
    }
    .settings-scroll{
        padding-left:20px;
        padding-right:20px;
    }
}
@media (max-width:430px){
    .reader-header{
        padding:10px 10px 25px;
    }
    .reader-header-actions{
        gap:4px;
    }
    .reader-action{
        width:38px;
        height:38px;
        border-radius:11px;
    }
    .reader-bottom-inner{
        min-height:50px;
        border-radius:14px;
    }
}

/* Keep reduced-motion preference respected by the refresh. */
@media (prefers-reduced-motion:reduce){
    .reader-action:hover,.color-btn:hover{
        transform:none;
    }
}

/* Reader progress control: visible thumb and a compact, touch-friendly mobile dock. */
.reader-bottom-inner{
    display:grid;
    grid-template-columns:minmax(82px,auto) minmax(120px,1fr) 40px auto;
    align-items:center;
    gap:14px;
}
.reader-progress{
    position:relative;
    min-width:0;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
    padding:0;
}
.progress-step{
    position:relative;
    z-index:4;
    display:grid;
    flex:0 0 34px;
    width:34px;
    height:34px;
    place-items:center;
    border:1px solid rgba(255,255,255,.09);
    border-radius:10px;
    background:rgba(255,255,255,.035);
    color:#cbd1da;
    transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.progress-step svg{
    width:18px;
    height:18px;
}
.progress-step:hover:not(:disabled){
    color:#ffe08a;
    border-color:rgba(231,189,74,.4);
    background:rgba(231,189,74,.1);
}
.progress-step:disabled{
    opacity:.35;
    cursor:not-allowed;
}
.reader-progress input{
    position:absolute;
    top:0;
    left:42px;
    right:42px;
    z-index:3;
    width:calc(100% - 84px);
    height:34px;
    margin:0;
    opacity:1;
    appearance:none;
    -webkit-appearance:none;
    background:transparent;
    cursor:pointer;
    touch-action:pan-x;
}
.reader-progress input::-webkit-slider-runnable-track{
    height:34px;
    background:transparent;
}
.reader-progress input::-moz-range-track{
    height:34px;
    background:transparent;
}
.reader-progress input::-webkit-slider-thumb{
    width:16px;
    height:16px;
    margin-top:9px;
    appearance:none;
    -webkit-appearance:none;
    border:3px solid #15171c;
    border-radius:50%;
    background:#ffe08a;
    box-shadow:0 0 0 2px rgba(231,189,74,.62),0 2px 8px #0009;
}
.reader-progress input::-moz-range-thumb{
    width:11px;
    height:11px;
    border:3px solid #15171c;
    border-radius:50%;
    background:#ffe08a;
    box-shadow:0 0 0 2px rgba(231,189,74,.62),0 2px 8px #0009;
}
.reader-progress input:focus-visible{
    outline:2px solid #ffe08a;
    outline-offset:3px;
    border-radius:12px;
}
.reader-progress .progress-line{
    position:absolute;
    z-index:1;
    left:42px;
    right:42px;
    top:50%;
    transform:translateY(-50%);
    pointer-events:none;
}
@media (max-width:800px){
    .reader-bottom{
        padding:8px 10px calc(10px + env(safe-area-inset-bottom));
    }
    .reader-bottom-inner{
        grid-template-columns:minmax(62px,auto) minmax(0,1fr) 38px;
        grid-template-areas:"page progress percent" "actions actions actions";
        gap:4px 10px;
        min-height:0;
        padding:9px 11px 8px;
    }
    .page-info{grid-area:page;min-width:0;gap:4px}
    .page-label{display:none}
    .reader-progress{grid-area:progress;height:40px;gap:4px}
    .progress-step{flex-basis:38px;width:38px;height:38px;border-radius:11px}
    .reader-progress input{left:44px;right:44px;width:calc(100% - 88px);height:38px}
    .reader-progress .progress-line{left:44px;right:44px;height:6px}
    .reader-percent{grid-area:percent;display:block;min-width:0;text-align:right}
    .reader-bottom-actions{
        grid-area:actions;
        display:flex;
        justify-content:center;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.09);
        padding:6px 0 0;
        margin-top:1px;
    }
    .hud-btn,.zoom-pill{height:40px}
    .hud-btn{width:44px}
    .zoom-pill{min-width:58px}
}