/* Five complete palettes. Premium gold is the default; explicit user choices survive. */
:root{--button11:#333943;--glow11:#e9c77966;--scroll11:var(--gold);--scroll-track11:var(--surface)}
:root[data-theme=light]{--button11:#f7fafc}
:root[data-palette=premium]{--gold:#c5a45e;--gold2:#edd69e;--bg:#181a1e;--surface:#23262b;--card:#292c31;--text:#f3eee3;--muted:#bfb6a3;--button11:#303136;--glass:rgba(35,36,40,.53);--glass-border:#c5a45e55;--glass-soft:#c5a45e12}
:root[data-theme=light][data-palette=premium]{--gold:#927037;--gold2:#d7bd82;--bg:#f3f0e9;--surface:#f8f6f1;--card:#fffdf8;--text:#302e29;--muted:#777064;--button11:#fffaf0;--glass:rgba(255,250,237,.48);--glass-border:#b69a6355}
:root[data-palette=gold]{--button11:#302c1d;--scroll11:#be9437;--glass-border:#bd943b66}
:root[data-theme=light][data-palette=gold]{--button11:#fff7df}
:root[data-palette=nord]{--gold:#88c0d0;--gold2:#81a1c1;--bg:#242b36;--surface:#2e3440;--card:#3b4252;--text:#eceff4;--muted:#b5c1d2;--button11:#3b4252;--glass:rgba(46,52,64,.52);--glass-border:#88c0d055;--glass-soft:#88c0d015}
:root[data-theme=light][data-palette=nord]{--gold:#416987;--bg:#e5e9f0;--surface:#edf1f6;--card:#f7fafc;--text:#2e3440;--muted:#526879;--button11:#f7fafc;--glass:rgba(229,237,246,.5)}
:root[data-palette=catppuccin]{--gold:#cba6f7;--gold2:#f5c2e7;--bg:#181825;--surface:#1e1e2e;--card:#313244;--text:#cdd6f4;--muted:#bac2de;--button11:#313244;--glass:rgba(30,30,46,.52);--glass-border:#cba6f755;--glass-soft:#cba6f712}
:root[data-theme=light][data-palette=catppuccin]{--gold:#8839b4;--bg:#e6e9ef;--surface:#eff1f5;--card:#fafbfe;--text:#4c4f69;--muted:#6c6f85;--button11:#fafbfe;--glass:rgba(239,241,249,.52)}
:root .btn.gold{background:linear-gradient(115deg,var(--gold2),var(--gold));color:#17191d;border-color:var(--gold)}
*{scrollbar-color:var(--scroll11) var(--scroll-track11);scrollbar-width:thin}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:var(--scroll-track11)}*::-webkit-scrollbar-thumb{background:var(--scroll11);border:2px solid var(--scroll-track11);border-radius:8px}
/* Glass belongs to the shell. Reading controls are deliberately opaque. */
.reader-window.floating{background:transparent!important;isolation:isolate;box-shadow:0 24px 65px #0004,inset 0 0 0 1px #efd6a477}
.window-head,.modal-head,.float-head,.tools-more>div,.gold-options,.quick-export>div{background:linear-gradient(125deg,#ffe4a92b 0%,transparent 28%,#fff2 48%,transparent 60%,#dfb86217),var(--glass)!important;backdrop-filter:blur(12px) saturate(145%)!important;box-shadow:inset 0 1px 0 #fff6,inset 0 -1px 0 #e2be7133,0 10px 35px #0001;border:1px solid var(--glass-border)}
.window-head .pane-nav,.window-head .page-profile-bar{background:transparent!important;backdrop-filter:none!important;border:0!important;box-shadow:none!important}
.window-head .btn,.window-head summary,.gold-trigger,.gold-option,.tools-more .btn,.quick-export>div .btn,.window-controls button,.pane-controls button{background:var(--button11)!important;color:var(--text)!important;opacity:1!important;border:1px solid var(--glass-border)!important;text-shadow:none}
.window-head .btn:hover,.gold-option:hover,.tools-more .btn:hover{box-shadow:inset 0 0 0 1px var(--gold),0 2px 8px #0002!important}
:root [data-window],:root .icon-button{inline-size:28px!important;block-size:28px!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;flex:0 0 28px!important;aspect-ratio:1;padding:0!important;display:inline-grid!important;place-items:center!important;line-height:1!important;border-radius:50%!important;font-size:17px!important}
:root [data-window] svg{width:15px;height:15px;margin:0;display:block}
/* One physical row at every pane width, including detached windows. */
#readingPanes>.reader-window>.window-head.compact-head,#readingPanes>.reader-window>.window-head{height:48px!important;min-height:48px!important;max-height:48px!important;display:flex!important;flex-wrap:nowrap!important;padding:5px!important;gap:0!important;overflow:visible!important;flex:none!important}
.bar11{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;min-width:0;width:100%;height:36px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;direction:rtl;zoom:var(--bar-scale11,1)}
.bar11::-webkit-scrollbar{display:none}.bar11>*{flex:0 0 auto!important;min-width:0!important}.bar11 h2{font-size:12px;max-width:86px;overflow:hidden;text-overflow:ellipsis;margin:0 4px}.bar11 .badge{font-size:10px;padding:2px 4px;white-space:nowrap}
.bar11 .pane-nav,.bar11 .page-profile-bar,.bar11 .actions,.bar11 .pane-controls,.bar11 #translationActions{display:flex!important;flex-wrap:nowrap!important;flex:0 0 auto!important;gap:3px!important;align-items:center!important;width:auto!important;margin:0!important;padding:0!important;overflow:visible!important;max-width:none!important;order:initial!important}
.bar11 .model-status{flex:0 0 auto!important;width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;white-space:nowrap!important;overflow:hidden!important;font-size:0!important;padding:0!important;cursor:pointer;border-radius:9px}
.bar11 .model-status:after{content:'◉';font-size:18px;color:var(--gold)}
.bar11 .btn,.bar11 summary,.bar11 .gold-trigger{min-height:30px!important;height:30px!important;padding:3px 6px!important;font-size:11px;line-height:1.2!important;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:3px;white-space:nowrap;max-width:130px}
.bar11 label{display:inline-flex;align-items:center;gap:3px;margin:0;font-size:10px}.bar11 .gold-select{flex:0 0 auto!important;width:auto!important}.bar11 .gold-trigger{width:auto!important;max-width:115px!important}.bar11 input.pane-page{width:38px!important;min-width:38px!important;height:30px!important;padding:3px!important;margin:0!important}.bar11 svg{width:16px;height:16px;flex:none}.bar11 .icon11{font-size:16px;line-height:1;display:none}.bar11 .setting-state{font-size:9px;margin:0}.bar11 #read10{display:inline-flex!important;order:initial!important}
.reader-window[data-compact11=true] .bar11 h2,.reader-window[data-compact11=true] .bar11 .badge,.reader-window[data-compact11=true] .bar11 .caption11,.reader-window[data-compact11=true] .bar11 .setting-state{display:none!important}
.reader-window[data-compact11=true] .bar11 .btn,.reader-window[data-compact11=true] .bar11 summary,.reader-window[data-compact11=true] .bar11 .gold-trigger{font-size:0!important;width:30px!important;max-width:30px!important;min-width:30px!important;padding:3px!important}
.reader-window[data-compact11=true] .bar11 .icon11{display:inline}.reader-window[data-compact11=true] .bar11 .gold-trigger:after{content:'▾';font-size:18px}.reader-window[data-compact11=true] .bar11 label{font-size:0}.bar11 [data-ghost11] .caption11{display:none!important}
#readingPanes>.reader-window.minimized{height:48px!important;min-height:48px!important;width:300px!important;max-width:calc(100vw - 16px)!important;overflow:hidden!important}
#readingPanes>.reader-window.minimized>:not(.window-head){display:none!important}.reader-window.minimized .bar11>*:not(h2):not(.pane-controls){display:none!important}.reader-window.minimized .bar11 h2{display:block!important;flex:1!important}.reader-window.minimized .bar11{zoom:1;overflow:hidden}.reader-window.minimized .window-head{height:46px!important;min-height:46px!important}
.pane-placeholder{align-self:stretch;box-sizing:border-box}.ghost-pages,.translation-ghost10{top:48px!important;bottom:0}.ghost-toggle{opacity:.5;background:var(--card);color:var(--text);padding:3px 7px;border-radius:8px;font-size:10px}.ghost-toggle:hover{opacity:1}.ghost-thumb:hover{transform:none!important}.ghost-preview11{position:fixed;z-index:99999;width:min(300px,70vw);max-height:70dvh;overflow:hidden;pointer-events:none;padding:8px;background:var(--card);border:1px solid var(--gold);border-radius:12px;box-shadow:0 15px 45px #0006}.ghost-preview11 img{width:100%;display:block}.ghost-preview11 .paper{width:820px;zoom:.34;margin:0;min-height:0!important;overflow:hidden}.ghost-preview11 .caption{font-size:12px;padding:5px;display:block}
.tools-more>div{padding:10px!important;gap:7px!important}.tools-more>div .btn{margin:2px 0!important}
.appearance11{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:22px 28px;align-items:end}.appearance11 h2,.appearance11 .palette-preview11{grid-column:1/-1}.appearance11>label{display:flex;flex-direction:column;gap:10px;margin:0}.appearance11>#saveUI10{width:max-content;margin-top:4px;grid-column:1/-1}.palette-preview11{display:flex;gap:12px;flex-wrap:wrap}.palette-chip11{height:42px;min-width:90px;border:2px solid transparent;border-radius:10px}.palette-chip11[aria-pressed=true]{outline:2px solid var(--gold);outline-offset:3px}
#resumeBudget10,#rangeForm,#localProcessing9{display:grid;gap:14px}#resumeBudget10{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end}#resumeBudget10 h3,#resumeBudget10 small{grid-column:1/-1}#extraDialog .range-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 0}.modal-body form input,.modal-body form select{max-width:100%;box-sizing:border-box}.modal-body .table-wrap{overflow:auto;max-width:100%}
.cover9,.book-cover,.cover-wrap{position:relative;overflow:hidden}.cover9:after,.book-cover:after,.cover-wrap:after{content:'';pointer-events:none;position:absolute;inset:-30% -80%;background:linear-gradient(110deg,transparent 40%,#fff9 49%,#f4d69488 51%,transparent 59%);transform:translateX(-80%);opacity:0}.book-card:hover .book-cover:after,.book-card9:hover .cover9:after,.book-card:hover .cover-wrap:after{animation:shine11 .9s ease-out 1}@keyframes shine11{0%{transform:translateX(-70%);opacity:0}30%{opacity:1}100%{transform:translateX(70%);opacity:0}}
.waiting-book{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:15px!important;box-sizing:border-box}.waiting-book:before,.waiting-book:after{display:none!important}.waiting-book i{height:2px;background:var(--gold);transform-origin:right;animation:write11 2.8s ease-in-out infinite;animation-delay:calc(var(--line11)*.24s)}@keyframes write11{0%,12%{transform:scaleX(.05);opacity:.2}55%,85%{transform:scaleX(1);opacity:1}100%{opacity:.15}}
.live-stage11{display:block;font-size:12px;color:var(--muted);min-height:22px}.prefetch-tip11{font-size:11px!important;line-height:1.8!important;margin-top:18px!important}.prefetch-tip11 .btn{font-size:11px;padding:3px 8px;min-height:28px}
.backup-job11{padding:18px;border:1px solid var(--glass-border);border-radius:14px;margin:12px 0;overflow-wrap:anywhere}.backup-job11 progress{display:block;width:100%;margin:10px 0}.backup-job11 code{display:block;direction:ltr;font-size:11px;word-break:break-all}.backup-job11 .actions{gap:12px;flex-wrap:wrap}
.rating11{padding:16px;background:var(--card);border:1px solid var(--gold);border-radius:14px;max-width:min(420px,94vw);max-height:70dvh;overflow:auto;box-shadow:0 16px 40px #0004}.rating11::backdrop{background:transparent}.rating-row11{display:flex;justify-content:space-between;gap:12px;margin:10px 0;align-items:center}.stars11{display:flex;direction:ltr;gap:4px}.stars11 button{font-size:22px;border:0;background:transparent;color:var(--muted);cursor:pointer}.stars11 button.active{color:var(--gold)}.rating11 textarea{width:100%;box-sizing:border-box}.report11{display:grid;gap:16px}.report11 .notice10{overflow-wrap:anywhere}.quality-meter11{height:7px;background:var(--surface);border-radius:8px}.quality-meter11>i{display:block;background:var(--gold);height:100%;border-radius:8px}
.saved-library11{border-top:4px solid #4fa595;background:linear-gradient(140deg,#4fa59518,transparent 60%);padding:18px;border-radius:16px}.album11{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:20px}.album-page11{background:var(--card);border:1px solid var(--glass-border);border-radius:12px;padding:8px;cursor:pointer;text-align:center;color:var(--text);overflow:hidden}.album-page11 .album-preview11{height:225px;overflow:hidden;pointer-events:none;background:var(--paper)}.album-page11 .paper{width:820px;zoom:.21;max-height:1050px;min-height:0!important;margin:0}.album-page11:hover{box-shadow:0 8px 20px #0003;transform:translateY(-2px)}.album-page11 b{display:block;padding:10px}
.font-preview11{padding:18px;background:var(--card);border:1px solid var(--glass-border);border-radius:12px;line-height:2.2;font-size:20px}
@media(max-width:700px){.appearance11{grid-template-columns:1fr}.bar11{zoom:1;gap:4px}.bar11 input.pane-page{height:34px!important}.reading #readingPanes .paper-wrap,.reading #readingPanes .source-viewport{height:calc(100dvh - 205px)!important;min-height:260px!important}.reader-window .bar11 [data-window]{display:none!important}.reader-window[data-compact11=true] .bar11 .btn,.reader-window[data-compact11=true] .bar11 summary,.reader-window[data-compact11=true] .bar11 .gold-trigger{min-width:34px!important;width:34px!important;height:34px!important}.album11{grid-template-columns:repeat(2,minmax(0,1fr))}.album-page11 .paper{zoom:.17}}
[data-glass=off] .window-head,[data-glass=off] .tools-more>div,[data-glass=off] .gold-options{backdrop-filter:none!important;background:var(--card)!important}
@media(prefers-reduced-motion:reduce){.waiting-book i,.book-cover:after,.cover9:after{animation:none!important}}[data-effects=off] .waiting-book i,[data-effects=off] .book-cover:after,[data-effects=off] .cover9:after{animation:none!important}
.book-cover-area{position:relative;overflow:hidden}.book-cover-area:after{content:'';position:absolute;inset:-30% -80%;pointer-events:none;opacity:0;background:linear-gradient(110deg,transparent 40%,#fffc 49%,#f4d69488 51%,transparent 59%);transform:translateX(-80%)}.book-card:hover .book-cover-area:after{animation:shine11 .9s ease-out 1}
#coverForm10.cover-form11{display:grid;grid-template-columns:minmax(120px,1fr) minmax(100px,1fr);gap:16px;align-items:center;padding:18px 0;max-width:100%}#coverForm10 .gold-select,#coverForm10 .gold-trigger,#coverForm10 input{width:100%;min-width:0;box-sizing:border-box}#coverForm10 #coverPreview10{grid-column:1/-1;grid-row:1;display:block;width:160px;max-width:100%;height:210px;max-height:210px!important;object-fit:contain;justify-self:center;border-radius:8px;background:var(--surface);padding:8px}#coverForm10 button[type=submit],#coverForm10>.btn{grid-column:1/-1;justify-self:start}
@media(max-width:480px){#coverForm10.cover-form11{grid-template-columns:minmax(0,1fr)}#coverForm10 .gold-trigger{max-width:100%!important}}

.window-head>.overflow11{flex:0 0 28px!important;min-width:28px!important;width:28px!important;height:30px!important;padding:0!important;margin-inline-start:4px!important;order:initial!important}.window-head>.overflow11[hidden],.minimized .overflow11{display:none!important}.overflow-panel11{display:flex;flex-direction:column;gap:8px;width:270px}.overflow-panel11:not(:popover-open){display:none}.overflow-panel11 .btn{justify-content:flex-start;background:var(--button11);color:var(--text)}

.book-cover-area:after{display:none!important}.cover-shine11{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:2}.cover-shine11:after{content:'';position:absolute;inset:-30% -80%;background:linear-gradient(110deg,transparent 40%,#fffc 49%,#f4d69488 51%,transparent 59%);transform:translateX(-80%);opacity:0}.book-card:hover .cover-shine11:after{animation:shine11 .9s ease-out 1}@media(prefers-reduced-motion:reduce){.cover-shine11:after{animation:none!important}}[data-effects=off] .cover-shine11:after{animation:none!important}

/* Top-layer export coordinates use screen pixels, independent of toolbar zoom. */
.bar11 .quick-export>div:popover-open{zoom:calc(1 / var(--bar-scale11,1))!important;min-width:150px;max-width:calc(100vw - 16px);animation:none}
:root .bar11 .quick-export>div:popover-open .btn{font-size:13px!important;width:auto!important;max-width:none!important;min-width:54px!important;height:34px!important}
:root .bar11 .quick-export>div:popover-open .caption11{display:inline!important}

:root .reader-window[data-compact11=true] .bar11 [data-window]{font-size:17px!important;width:28px!important;min-width:28px!important;max-width:28px!important;height:28px!important;padding:0!important}
:root .bar11 [data-window] .caption11{display:inline!important}

:root .bar11 [data-window]{width:28px!important;min-width:28px!important;max-width:28px!important;height:28px!important;min-height:28px!important;max-height:28px!important;font-size:17px!important;padding:0!important}

#extraDialog .range-item{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:16px;margin-bottom:14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--card)}
#extraDialog .range-item p{margin:0;overflow-wrap:anywhere}#extraDialog .range-item b{overflow-wrap:anywhere}#extraDialog .range-item progress{width:100%;height:8px;accent-color:var(--gold)}#extraDialog .range-item .btn{justify-self:start;max-width:100%;white-space:normal}#resumeBudget10[hidden]{display:none}

[data-glass=off] .window-head,[data-glass=off] .modal-head,[data-glass=off] .float-head,[data-glass=off] .gold-options,[data-glass=off] .quick-export>div,[data-glass=off] .tools-more>div{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--card)!important;box-shadow:none!important}

/* 0.11.2: palette-owned controls. Legacy graphite styles must never select other palettes. */
:root[data-palette]{--accent:var(--gold);--line:var(--glass-border);--glow11:color-mix(in srgb,var(--gold) 28%,transparent);--surface-glow:var(--glow11);--primary-text112:#17191d;--control-border112:color-mix(in srgb,var(--gold) 60%,var(--button11));--active112:color-mix(in srgb,var(--gold) 17%,var(--button11))}
:root[data-palette=graphite]{--button11:#333943;--primary-text112:#15222c}
:root[data-theme=light][data-palette=graphite]{--button11:#f7fafc}
:root[data-theme=light][data-palette=nord],:root[data-theme=light][data-palette=catppuccin]{--primary-text112:#fff}
:root[data-theme=light][data-palette=nord]{--gold2:#416987}
:root[data-theme=light][data-palette=catppuccin]{--gold2:#8839b4}
:root[data-palette] .btn:not(.gold){background:var(--button11);color:var(--text);border-color:var(--control-border112)}
:root[data-palette] .btn.gold{background:linear-gradient(115deg,var(--gold2),var(--gold));color:var(--primary-text112);border-color:var(--gold)}
:root[data-palette] .btn.gold:hover{background:linear-gradient(115deg,var(--gold),var(--gold2));color:var(--primary-text112);box-shadow:0 4px 16px var(--glow11)}
:root[data-palette] .btn:not(.gold):hover,:root[data-palette] .gold-trigger:hover{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold),0 3px 12px var(--glow11)}
:root[data-palette] .gold-trigger,:root[data-palette] .gold-option,:root[data-palette] .window-controls button,:root[data-palette] .pane-controls button{border-color:var(--control-border112)!important}
:root[data-palette] .gold-option:hover,:root[data-palette] .gold-option:focus-visible{background:var(--active112)!important;color:var(--text)!important}
:root[data-palette] .gold-option[aria-selected=true]{background:var(--button11)!important;color:var(--gold)!important;box-shadow:inset -3px 0 var(--gold);border-color:var(--gold)!important;font-weight:700}
:root[data-palette] .sidebar a.active{background:var(--active112);color:var(--text);border-color:var(--gold);box-shadow:inset -3px 0 var(--gold)}
:root[data-palette] .btn:focus-visible,:root[data-palette] .gold-trigger:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
:root[data-palette] input[type=checkbox],:root[data-palette] input[type=radio],:root[data-palette] progress{accent-color:var(--gold)}
/* Apply to the page itself and every nested reader/menu scroller, including light mode. */
:root[data-palette],:root[data-palette] *{scrollbar-color:var(--scroll11) var(--scroll-track11)}
:root[data-palette] *::-webkit-scrollbar-thumb{background-color:var(--scroll11);border-color:var(--scroll-track11)}
:root[data-palette] *::-webkit-scrollbar-track,:root[data-palette] *::-webkit-scrollbar-corner{background-color:var(--scroll-track11)}

/* Window management stays at the physical left edge, outside the scrolling tool row. */
#readingPanes>.reader-window>.window-head{direction:rtl}
#readingPanes>.reader-window>.window-head>.bar11{flex:1 1 0!important;min-width:0!important;order:0}
#readingPanes>.reader-window>.window-head>.overflow11{order:1;flex:none}
#readingPanes>.reader-window>.window-head>.pane-controls{order:2!important;display:flex!important;flex:0 0 auto!important;gap:4px!important;align-items:center;direction:ltr;zoom:1;margin:0 0 0 3px!important;padding:0 8px 0 0!important;border-right:1px solid var(--control-border112);position:relative;z-index:3}
#readingPanes>.reader-window.minimized>.window-head>.overflow11{display:none!important}
#selectionTools[popover]{inset:auto;left:50%;bottom:20px;margin:0;color:var(--text);background:var(--glass);border:1px solid var(--glass-border);z-index:2147483000}
#selectionTools[popover]::backdrop{background:transparent;pointer-events:none}
#selectionTools .btn{background:var(--button11)!important;color:var(--text)!important}
@media(max-width:700px){#selectionTools[popover]{left:8px;right:auto;bottom:8px;max-width:calc(100vw - 16px)!important}}

/* 0.11.2 revised request: exactly two compact rows, never a growing wrapped header. */
#readingPanes>.reader-window:not(.minimized)>.window-head{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;grid-template-rows:34px 34px;height:80px!important;min-height:80px!important;max-height:80px!important;gap:2px 0!important;padding:5px!important}
#readingPanes>.reader-window>.window-head>.bar11:not(.navrow112){grid-row:1;grid-column:1;width:100%;height:34px}
#readingPanes>.reader-window>.window-head>.overflow11{grid-row:1;grid-column:2}
#readingPanes>.reader-window>.window-head>.pane-controls{grid-row:1;grid-column:3}
#readingPanes>.reader-window>.window-head>.navrow112{grid-row:2;grid-column:1/-1;order:3;width:100%;height:34px;zoom:1;border-top:1px solid var(--glass-border);padding-top:3px;gap:6px}
#readingPanes>.reader-window>.window-head>.navrow112 .pane-nav{flex:0 0 auto!important}
#readingPanes>.reader-window:not(.minimized) .ghost-pages,#readingPanes>.reader-window:not(.minimized) .translation-ghost10{top:80px!important}
.reader-window[data-compact11=true] .bar11:not(.navrow112) h2{display:block!important;max-width:80px;font-size:11px}
.reader-window.minimized>.window-head>.navrow112{display:none!important}
.reader-window .navrow112 #read10{margin-inline-start:auto!important}
/* The content-control menu uses a separate class from the other tools menus. */
:root[data-palette] .quality-menu .btn,:root[data-palette] .quality-menu .btn:hover,:root[data-palette] .quality-menu .btn:focus-visible{background:var(--button11)!important;background-image:none!important;color:var(--text)!important;opacity:1!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border:1px solid var(--control-border112)}
#readingPanes>.reader-window:not(.minimized)>.window-head>.overflow11:not([hidden]){display:inline-flex!important;align-items:center;justify-content:center}

/* Scroll content in its own clipped box; the glass header never overlays its own document. */
dialog.glass-window[open]:has(>.modal-body){display:flex!important;flex-direction:column;overflow:hidden!important;padding:0;max-height:90dvh}
dialog.glass-window>.modal-head,dialog.glass-window>.modal-foot,.quick-panel>.float-head{position:relative!important;flex:0 0 auto}
dialog.glass-window>.modal-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;isolation:isolate}
.quick-panel:not(.minimized){display:flex!important;flex-direction:column;overflow:hidden!important}
.quick-panel>.window-body112{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;isolation:isolate;padding:16px}
.window-body112>textarea{width:100%;box-sizing:border-box}.window-body112>button,.window-body112>#quickAnswer{margin-top:14px}
@media(min-width:701px){
 #readingPanes>.reader-window.floating:not(.minimized){display:flex!important;flex-direction:column;overflow:hidden!important}
 #readingPanes>.reader-window.floating:not(.minimized)>.source-viewport,#readingPanes>.reader-window.floating:not(.minimized)>.paper-wrap{flex:1 1 0!important;height:0!important;min-height:0!important;overflow:auto;overscroll-behavior:contain;isolation:isolate}
}

/* Local processing is an icon-only page action; its state remains accessible. */
#local10{width:30px!important;min-width:30px!important;max-width:30px!important;height:30px!important;padding:4px!important;font-size:0!important;position:relative}
#local10 .caption11,#local10 .setting-state{display:none!important}#local10 .icon11{display:inline!important;font-size:16px}
#local10[aria-pressed=true]::after{content:'';position:absolute;bottom:3px;right:3px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
#local10:disabled{cursor:not-allowed}

/* Reveal useful captions only when their own row can accommodate them. */
.reader-window[data-compact11=true] .bar11 .caption-fit112{font-size:11px!important;width:auto!important;min-width:30px!important;max-width:150px!important;padding:3px 6px!important}
.reader-window[data-compact11=true] .bar11 .caption-fit112 .caption11{display:inline!important}

/* 0.11.3: one waiting animation, independent of paper zoom and physical page height. */
#translation:has(>.translation-wait){padding:24px!important;box-sizing:border-box;overflow:hidden}
.translation-wait{width:100%;min-height:260px;gap:14px;text-align:center;font-size:16px;line-height:1.9;box-sizing:border-box;overflow:visible}
.translation-wait>p{margin:0;max-width:38em}
.translation-wait .waiting-book{flex:none;width:64px;height:74px;box-sizing:border-box;border:2px solid var(--gold);border-radius:10px;padding:15px 10px!important;gap:8px;justify-content:center;overflow:hidden;animation:none;box-shadow:0 8px 24px color-mix(in srgb,var(--gold) 14%,transparent)}
.translation-wait .waiting-book:after,.translation-wait:after{content:none!important;animation:none!important}
.translation-wait .waiting-book i{display:block;flex:0 0 2px;height:2px;width:100%;border-radius:2px;background:var(--gold);transform-origin:right;animation:write-page113 3.2s ease-in-out infinite;animation-delay:calc(var(--line11)*.22s)}
.translation-wait .waiting-book i:last-child{width:66%;align-self:flex-end}
.translation-wait .live-stage11{display:block;min-height:3.8em;max-width:36em;font-size:12px;line-height:1.9;overflow-wrap:anywhere;color:var(--paper-note)}
.translation-wait .prefetch-tip11{font-size:12px;max-width:40em;line-height:1.9;margin:0}
.translation-wait .prefetch-tip11 .btn{font-size:12px;margin:6px 4px 0;min-height:30px}
@keyframes write-page113{0%,12%{transform:scaleX(.06);opacity:.25}45%,78%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.06);opacity:.25}}
@media(prefers-reduced-motion:reduce){.translation-wait .waiting-book i{animation:none;transform:none;opacity:1}}

/* The pane title and status must never squeeze each other into clipped fragments. */
#readingPanes .bar11:not(.navrow112) h2{display:inline-flex!important;align-items:center;gap:6px;flex:none!important;width:auto;max-width:none!important;overflow:visible!important;white-space:nowrap;line-height:1.4}
#readingPanes .bar11 #pageStatus{display:inline-flex!important;align-items:center;justify-content:center;flex:none;width:auto;min-width:0!important;max-width:none!important;overflow:visible;white-space:nowrap;line-height:1.4}
#readingPanes .reader-window[data-compact11=true] .bar11 #pageStatus{font-size:0!important;box-sizing:border-box;width:22px;min-width:22px!important;height:22px;padding:0}
#readingPanes .reader-window[data-compact11=true] #pageStatus:after{content:'—';font:13px/1 Tahoma,sans-serif}
#readingPanes .reader-window[data-compact11=true] #pageStatus[data-status113=saved]:after{content:'✓'}
#readingPanes .reader-window[data-compact11=true] #pageStatus[data-status113=running]:after{content:'◷'}
#readingPanes .reader-window[data-compact11=true] #pageStatus[data-status113=error]:after{content:'!'}

/* Overflow tools are measured against the viewport, including floating panes. */
#overflowPanel11{position:fixed;inset:auto;margin:0;box-sizing:border-box;width:270px;overflow:auto;overscroll-behavior:contain;transform:none;zoom:1}
#overflowPanel11>.btn{flex-shrink:0;white-space:normal;min-height:34px;height:auto;text-align:start;overflow-wrap:anywhere}

/* ---- 0.11.5 fixes ---------------------------------------------------- */

/* The sidebar is a sticky, viewport-tall grid item, so on a page taller than
   the viewport its column background stopped partway down and the page ground
   showed through beside the content. A filler pseudo-element on the grid
   container paints the same column for the full document height, in every
   theme and palette, without changing the sticky behaviour. */
@media(min-width:901px){
  /* position:relative only — NOT isolation:isolate. Isolation would make .layout
     a stacking context, and every position:fixed descendant would be trapped in
     it: a floating reader window (z-index 150) then loses to .topbar (z-index 20,
     a SIBLING of .layout), which paints over it. A maximized window sits at
     inset:8px, exactly under the sticky topbar, so its close/minimize/restore row
     disappeared and the window could not be restored. The filler below uses
     z-index:-1, which works without isolation; do not add isolation back here. */
  .layout{position:relative}
  /* The sidebar sits at the INLINE START of the layout (the right edge in RTL). */
  .layout:has(>.sidebar)::before{
    content:"";position:absolute;z-index:-1;top:0;bottom:0;inset-inline-start:0;
    width:var(--sidebar-width,260px);
    background:var(--glass,linear-gradient(180deg,#1b1c18,#131512));
    border-inline-end:1px solid var(--glass-border,var(--line,#75613d));pointer-events:none;
  }
  /* The filler paints the whole column, so the panel must not tint its own
     first viewport a second time - that is what produced a visible step. */
  .layout>.sidebar{background:transparent!important;border-inline-end:0!important;box-shadow:none!important}
  .sidebar-collapsed .layout::before,.focus-mode .layout::before{display:none}
  [data-glass=off] .layout::before{background:var(--card,#131512)}
}
@media(max-width:900px){.layout::before{display:none}}

/* Dashboard card reordering: both directions, and a disabled state at the ends. */
.card-order10{display:flex;gap:6px;flex:none}
.card-order10 .btn{min-height:30px;padding:2px 10px;line-height:1}
.card-order10 .btn:disabled{opacity:.35;cursor:default}

/* Horizontal scroll affordance for the reading toolbar on narrow screens. */
@media(max-width:760px){
  .reading .reading-tools{
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
            mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
  }
  .reading .reading-tools>*{scroll-snap-align:end}
}

/* Narrow phones (<=400px): the header could not shrink, so every page scrolled
   sideways. The brand text truncates, the credit badge is capped, and the
   decorative mark steps aside instead of pushing the actions off-screen. */
@media(max-width:400px){
  .topbar{padding:0 10px;gap:8px}
  .brand{min-width:0;flex:1 1 auto;gap:8px}
  .brand>div:last-child{min-width:0}
  .brand strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .brand-mark{display:none}
  .top-actions{flex:0 0 auto;gap:4px;min-width:0}
  .top-actions .badge{max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 6px}
  .top-actions .btn{padding:6px 8px}
}
/* Keep every interactive control at a usable touch size. */
@media(pointer:coarse){
  .btn,summary,.card-order10 .btn{min-height:36px}
  input[type=checkbox]{width:22px;height:22px}
}

/* The reading-toolbar dropdowns were only pinned to the viewport below 700px.
   Between 700px and desktop they stayed absolutely positioned inside a
   horizontally scrolling toolbar and opened past the screen edge. They are now
   viewport-pinned at every width and placed by release11.js, which clamps them. */
.reading .reading-tools .tools-more>div{
  position:fixed;max-width:calc(100vw - 16px);
  max-height:min(70dvh,calc(100vh - 24px));overflow:auto;z-index:240;
}
.reading .reading-tools .quality-menu[open]>.actions{
  position:fixed;max-width:calc(100vw - 16px);
  max-height:min(70dvh,calc(100vh - 24px));overflow:auto;z-index:240;
}

/* Colour pickers were stretched by the global `input{width:100%}` rule and read
   as progress bars instead of swatches. */
input[type=color]{
  width:56px;min-width:56px;height:34px;min-height:34px;padding:2px;
  border-radius:8px;cursor:pointer;background:var(--input,transparent);
}
.cover-colors10 label,.color-row11{display:flex;align-items:center;gap:10px}

/* Model roles an account cannot actually change: visible, clearly not editable. */
.models-readonly input{opacity:.72;cursor:default;background:var(--surface,var(--input))}
label:has(>input[type=color]){display:inline-flex;align-items:center;gap:10px;margin:4px 0}

/* ============================================================================
   0.11.8 — نوار عنوان پنجره‌ها با متریال شیشه‌ای iOS
   iOS materials are not a dark panel with a little blur: they are a LOW-opacity
   tint over a LARGE blur with high saturation, so whatever sits behind bleeds
   its colour through. Three layers make it read as glass rather than as a flat
   translucent box:
     1. a wide, saturated backdrop blur  -> light and colour pass through
     2. a very light tint               -> keeps text legible without hiding it
     3. a 1px specular highlight on the top edge and a hairline at the bottom
   Everything degrades to the previous solid look under [data-glass=off] and on
   browsers without backdrop-filter.
   ========================================================================== */
:root{
  --ios-tint:rgba(26,27,31,.26);
  --ios-tint-strong:rgba(26,27,31,.40);
  --ios-blur:saturate(210%) blur(34px);
  --ios-specular:rgba(255,255,255,.40);
  --ios-hairline:rgba(255,255,255,.10);
  --ios-edge:rgba(233,203,138,.26);
  --ios-sheen:rgba(255,255,255,.15);
}
/* در تم روشن، شیشه فقط با کم‌کردن کدری دیده نمی‌شود: لبهٔ نور و خط جداکننده
   باید واضح‌تر باشند، وگرنه نوار با پس‌زمینهٔ روشن یکی می‌شود. */
:root[data-theme=light]{
  --ios-tint:rgba(255,252,244,.34);
  --ios-tint-strong:rgba(255,252,244,.50);
  --ios-blur:saturate(180%) brightness(1.06) blur(28px);
  --ios-specular:rgba(255,255,255,.95);
  --ios-hairline:rgba(92,72,30,.22);
  --ios-edge:rgba(176,138,56,.34);
  --ios-sheen:rgba(255,255,255,.55);
}

/* پنجره خودش پس‌زمینهٔ مات نداشته باشد، وگرنه نوار عنوان فقط همان رنگ مات را
   محو می‌کند و هیچ نوری از پشت عبور نمی‌کند. بدنه پس‌زمینهٔ خودش را دارد. */
#readingPanes>.reader-window,
.floating,.glass-window{background:transparent!important}

.floating>.window-head,
.glass-window>.float-head,
.glass-window>.window-head,
dialog>.modal-head,
#readingPanes>.reader-window>.window-head,
.quick-panel>.float-head{
  position:relative;
  background:var(--ios-tint)!important;
  -webkit-backdrop-filter:var(--ios-blur)!important;
          backdrop-filter:var(--ios-blur)!important;
  border:0!important;
  border-bottom:1px solid var(--ios-hairline)!important;
  box-shadow:
    inset 0 1px 0 var(--ios-specular),          /* لبهٔ نور بالا */
    inset 0 -1px 0 var(--ios-edge),             /* بازتاب طلایی پایین */
    0 1px 12px rgba(0,0,0,.10)!important;
  transition:background .22s ease, box-shadow .22s ease;
}

/* حالت ژله‌ای: یک درخشش نرم که از بالای نوار پخش می‌شود و لبه‌ها را زنده می‌کند */
.floating>.window-head::before,
.glass-window>.float-head::before,
.glass-window>.window-head::before,
dialog>.modal-head::before,
#readingPanes>.reader-window>.window-head::before,
.quick-panel>.float-head::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(130% 180% at 50% -45%, var(--ios-sheen) 0%, transparent 64%),
    /* کاستیک — جایی که نور در ضخامت شیشه جمع می‌شود */
    radial-gradient(46% 150% at 19% 128%, var(--glow-caustic) 0%, transparent 70%),
    radial-gradient(36% 130% at 79% -28%, var(--glow-caustic) 0%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, transparent 46%);
  mix-blend-mode:plus-lighter;
  opacity:.9;
}
:root[data-theme=light] .floating>.window-head::before,
:root[data-theme=light] .glass-window>.float-head::before,
:root[data-theme=light] .glass-window>.window-head::before,
:root[data-theme=light] dialog>.modal-head::before,
:root[data-theme=light] #readingPanes>.reader-window>.window-head::before,
:root[data-theme=light] .quick-panel>.float-head::before{
  background:
    radial-gradient(130% 180% at 50% -45%, var(--ios-sheen) 0%, transparent 62%),
    radial-gradient(46% 150% at 19% 128%, var(--glow-caustic) 0%, transparent 70%),
    radial-gradient(36% 130% at 79% -28%, var(--glow-caustic) 0%, transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.5) 0%, transparent 38%);
  mix-blend-mode:normal;
}

/* ==========================================================================
   تابش نور داخل شیشه (۰٫۱۱٫۸)
   ::before درخشش ثابتِ لبه است؛ این لایه نورِ در حالِ تابیدن است: یک باریکهٔ
   نور که آرام از عرض نوار عبور می‌کند، به‌علاوهٔ دو لکهٔ نرمِ کاستیک که مثل
   نور شکسته‌شده در ضخامت شیشه نفس می‌کشند. چون فقط روشنایی اضافه می‌کند و
   pointer-events ندارد، نه خوانایی متن را کم می‌کند نه کلیک را می‌گیرد.
   ========================================================================== */
:root{
  --glow-beam:rgba(255,255,255,.34);
  --glow-warm:rgba(240,208,140,.30);
  --glow-cool:rgba(170,214,255,.20);
  --glow-caustic:rgba(255,255,255,.16);
  --glow-blend:plus-lighter;
  --glow-speed:11s;
}
/* روی شیشهٔ روشن، افزودن سفید به سفید هیچ دیده نمی‌شود. نور شکسته در تم روشن
   باید *رنگ* داشته باشد نه روشنایی: هستهٔ روشن با دو لبهٔ گرم و سرد، ترکیب
   عادی. همان چیزی که در شیشهٔ واقعی زیر نور روز دیده می‌شود. */
:root[data-theme=light]{
  --glow-beam:rgba(255,255,255,.62);
  --glow-warm:rgba(206,158,66,.30);
  --glow-cool:rgba(110,160,214,.22);
  --glow-caustic:rgba(200,162,92,.20);
  --glow-blend:normal;
}
.floating>.window-head::after,
.glass-window>.float-head::after,
.glass-window>.window-head::after,
dialog>.modal-head::after,
#readingPanes>.reader-window>.window-head::after,
.quick-panel>.float-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;overflow:hidden;z-index:0;
  mix-blend-mode:var(--glow-blend);
  background:
    /* باریکهٔ نور — لبهٔ گرم و سرد دو طرفش، مثل شکست نور در لبهٔ شیشه */
    linear-gradient(100deg,
      transparent 34%,
      var(--glow-warm) 42%,
      var(--glow-beam) 48%,
      var(--glow-beam) 52%,
      var(--glow-cool) 58%,
      transparent 66%),
    /* کاستیک‌ها — لکه‌های نرمی که نور در ضخامت شیشه جمع می‌کند */
    radial-gradient(42% 150% at 22% 120%, var(--glow-caustic) 0%, transparent 70%),
    radial-gradient(34% 130% at 76% -25%, var(--glow-caustic) 0%, transparent 72%);
  background-size:220% 100%, 100% 100%, 100% 100%;
  background-position:175% 0, 0 0, 0 0;
  background-repeat:no-repeat;
  background-position:46% 0, 0 0, 0 0;   /* حالت ساکنِ پیش‌فرض */
  opacity:.85;
}
/* کارایی پیش از زیبایی.
   نوار عنوان backdrop-filter دارد. هر فریمی که چیزی *روی* آن عوض شود، بلور
   پشتش دوباره حساب می‌شود. با اندازه‌گیری روی میز مطالعه: با نور در گردشِ
   دائمی، میانهٔ زمان فریم هنگام اسکرول ۳۳٫۴ میلی‌ثانیه (۳۰ فریم) بود و بدون
   آن ۱۶٫۷ (۶۰ فریم). پس باریکه دیگر بی‌وقفه نمی‌چرخد: به‌صورت ساکن روی نوار
   می‌نشیند و فقط *یک‌بار* می‌گذرد — همان لحظه‌ای که پنجره فعال می‌شود؛ یعنی
   وقتی کاربر با پنجره کار می‌کند، نه وقتی دارد متن می‌خواند. */
@keyframes glass-sweep-once{
  0%  {background-position:175% 0, 0 0, 0 0}
  100%{background-position:46% 0, 0 0, 0 0}
}
/* فقط وقتی مدیر «حرکت کامل» را انتخاب کرده باشد: یک عبور، هنگام فعال‌شدن
   پنجره. اندازه‌گیری نشان داد تا وقتی سطح‌های شیشه‌ای روی صفحه‌اند، هر
   انیمیشنِ در حال اجرا فریم را از ۱۶٫۷ به ۳۳٫۴ میلی‌ثانیه می‌برد؛ پس این
   حالت پیش‌فرض نیست و انتخابی آگاهانه است. */
:root[data-glow-motion=full] .floating.active-window114>.window-head::after,
:root[data-glow-motion=full] .glass-window.active-window114>.float-head::after,
:root[data-glow-motion=full] .glass-window.active-window114>.window-head::after{
  animation:glass-sweep-once var(--glow-speed,2s) cubic-bezier(.25,.8,.3,1) 1 both;
}
/* پنجرهٔ فعال نور بیشتری می‌گیرد و کمی سریع‌تر — تمرکز را نشان می‌دهد */
.floating.active-window114>.window-head::after,
.glass-window.active-window114>.float-head::after,
.glass-window.active-window114>.window-head::after{opacity:1}
/* پنجرهٔ جمع‌شده نور متحرک نمی‌خواهد */
.reader-window.minimized>.window-head::after{animation:none;opacity:.5}
/* بدون شیشه، بدون افکت، یا با کاهش حرکت: باریکه ثابت و ملایم می‌ماند */
:root[data-effects=off] .floating>.window-head::after,
:root[data-effects=off] .glass-window>.float-head::after,
:root[data-effects=off] .glass-window>.window-head::after,
:root[data-effects=off] dialog>.modal-head::after,
:root[data-effects=off] #readingPanes>.reader-window>.window-head::after,
:root[data-effects=off] .quick-panel>.float-head::after{animation:none;background-position:46% 0, 0 0, 0 0;opacity:.6}
:root[data-effects=off] .floating>.window-head::before,
:root[data-effects=off] .glass-window>.float-head::before,
:root[data-effects=off] .glass-window>.window-head::before,
:root[data-effects=off] dialog>.modal-head::before,
:root[data-effects=off] #readingPanes>.reader-window>.window-head::before,
:root[data-effects=off] .quick-panel>.float-head::before{animation:none;opacity:.9}
[data-glass=off] .floating>.window-head::after,
[data-glass=off] .glass-window>.float-head::after,
[data-glass=off] .glass-window>.window-head::after,
[data-glass=off] dialog>.modal-head::after,
[data-glass=off] #readingPanes>.reader-window>.window-head::after,
[data-glass=off] .quick-panel>.float-head::after{display:none}
@media(prefers-reduced-motion:reduce){
  .floating>.window-head::after,
  .glass-window>.float-head::after,
  .glass-window>.window-head::after,
  dialog>.modal-head::after,
  #readingPanes>.reader-window>.window-head::after,
  .quick-panel>.float-head::after{animation:none;background-position:46% 0, 0 0, 0 0;opacity:.6}
  .floating>.window-head::before,
  .glass-window>.float-head::before,
  .glass-window>.window-head::before,
  dialog>.modal-head::before,
  #readingPanes>.reader-window>.window-head::before,
  .quick-panel>.float-head::before{animation:none;opacity:.9}
}

/* پنجرهٔ فعال کمی مات‌تر می‌شود تا از پنجره‌های پشتی جدا دیده شود */
.floating.active-window114>.window-head,
.glass-window.active-window114>.float-head,
.glass-window.active-window114>.window-head{background:var(--ios-tint-strong)!important}

/* محتوای داخل نوار روی شیشه شناور می‌ماند، نه اینکه خودش کادر جدا بسازد */
.floating>.window-head>*,
.glass-window>.float-head>*,
.glass-window>.window-head>*,
#readingPanes>.reader-window>.window-head>*{position:relative;z-index:1}

/* دکمه‌های داخل نوار
   شیشه مالِ *نوار* است، نه کنترل‌ها. قانون بالای همین فایل («کنترل‌های مطالعه
   عمداً مات‌اند») سرجایش می‌ماند و `browser_v11` هم آن را می‌آزماید: یک دکمهٔ
   نیمه‌شفاف وقتی پنجرهٔ شناور روی برگِ سفید ترجمه کشیده شود، در تم تیره متن
   روشن روی زمینهٔ سفید می‌شود و خوانده نمی‌شود. پس پس‌زمینه مات می‌ماند
   (`var(--button11)` از قاعدهٔ بالا) و فقط لبه و بازتاب، شیشه‌ای می‌شوند تا
   دکمه روی نوار شیشه‌ای نشسته به‌نظر برسد. */
.floating>.window-head .btn,
.glass-window>.float-head .btn,
.glass-window>.window-head .btn,
#readingPanes>.reader-window>.window-head .btn,
.window-controls button,.pane-controls button{
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 1px 3px rgba(0,0,0,.22);
}
:root[data-theme=light] .floating>.window-head .btn,
:root[data-theme=light] .glass-window>.float-head .btn,
:root[data-theme=light] .glass-window>.window-head .btn,
:root[data-theme=light] #readingPanes>.reader-window>.window-head .btn,
:root[data-theme=light] .window-controls button,
:root[data-theme=light] .pane-controls button{
  border:1px solid rgba(140,112,48,.26)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(90,72,30,.14);
}

/* جلوهٔ فشردن، همان حسی که در iOS هنگام لمس دکمه هست */
.floating>.window-head .btn:active,
.glass-window>.float-head .btn:active,
.window-controls button:active,.pane-controls button:active{transform:scale(.94)}

/* خاموش‌کردن جلوه‌های شیشه‌ای: بازگشت کامل به حالت مات قبلی */
[data-glass=off] .floating>.window-head,
[data-glass=off] .glass-window>.float-head,
[data-glass=off] .glass-window>.window-head,
[data-glass=off] dialog>.modal-head,
[data-glass=off] #readingPanes>.reader-window>.window-head,
[data-glass=off] .quick-panel>.float-head{
  background:var(--card)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:none!important;border-bottom:1px solid var(--line)!important;
}
[data-glass=off] .floating>.window-head::before,
[data-glass=off] .glass-window>.float-head::before,
[data-glass=off] .glass-window>.window-head::before,
[data-glass=off] dialog>.modal-head::before,
[data-glass=off] #readingPanes>.reader-window>.window-head::before{display:none}

/* مرورگر بدون backdrop-filter: تیرهٔ مات، هرگز متن ناخوانا */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .floating>.window-head,.glass-window>.float-head,.glass-window>.window-head,
  dialog>.modal-head,#readingPanes>.reader-window>.window-head,.quick-panel>.float-head{
    background:var(--card)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .floating>.window-head,.glass-window>.float-head,.glass-window>.window-head{transition:none}
  .floating>.window-head .btn:active,.window-controls button:active,.pane-controls button:active{transform:none}
}

/* کنترل‌های خروجی که مدیر هنوز برای این حساب فعال نکرده: دیده می‌شوند، کار نمی‌کنند */
/* 0.18.13 — an account without the download grant sees no download control at all (platform.js markExportControls) */
.downloads-off [data-needs-export],.downloads-off .saved-select{display:none!important}
/* 0.18.13 — the same controls by their own selectors (platform.js EXPORT_ROUTED), so one that a dialog has just
   written is hidden from its first frame, not only once the debounced marker sweep has stamped it. */
.downloads-off .quick-export,.downloads-off [data-pro="pdf"],.downloads-off [data-pro="html"],.downloads-off [data-export10],.downloads-off [data-work10="export10"],.downloads-off [data-action="exportRange"],.downloads-off [data-action="exportDialog"],.downloads-off [data-action="doExport"],.downloads-off [data-action="exportAll"],.downloads-off [data-action="savedExport"],.downloads-off [data-action="exportJobs"],.downloads-off [data-action="exportJobOpen"],.downloads-off [data-action="exportJobDownload"],.downloads-off [data-action="exportJobResume"],.downloads-off [data-action="exportJobPause"],.downloads-off [data-action="bookExport"],.downloads-off [data-export-selected],.downloads-off #offlineGet10,.downloads-off a[href^="/api/question-export"],.downloads-off a[href^="/api/export"],.downloads-off [data-work10="offline10"],.downloads-off a[href^="/offline10.html"],.downloads-off [data-download11],.downloads-off [data-parts01810],.downloads-off a[href^="/api/v11/backups/"]{display:none!important}
/* 0.18.15 (F10) — the second tick before a restore that leaves something out */
.skip-confirm01815{display:flex;gap:.5em;align-items:flex-start;margin:.4em 0 .8em}

/* ============================================================================
   0.11.8 — پرداخت گرافیکی مدرن
   فقط جلوه: هیچ اندازه، چیدمان یا فاصله‌ای عوض نمی‌شود، پس چیزی جابه‌جا نمی‌شود.
   همه چیز به prefers-reduced-motion و [data-glass=off] احترام می‌گذارد.
   ========================================================================== */

/* ۱) نورافکن پنجرهٔ فعال: حلقهٔ طلایی نرم دور پنجره‌ای که روی آن کار می‌کنید */
.floating,.glass-window{
  transition:box-shadow .28s cubic-bezier(.22,.8,.28,1), transform .28s cubic-bezier(.22,.8,.28,1);
}
.floating.active-window114,.glass-window.active-window114{
  box-shadow:
    0 0 0 1px rgba(233,203,138,.30),
    0 28px 70px rgba(0,0,0,.42),
    0 0 42px -12px rgba(214,176,96,.35)!important;
}
.floating:not(.active-window114),.glass-window:not(.active-window114){
  box-shadow:0 16px 44px rgba(0,0,0,.30)!important;transform:scale(.997);
}

/* ۲) دکمهٔ طلایی: یک درخشش که هنگام اشاره از روی دکمه عبور می‌کند */
.btn.gold{position:relative;overflow:hidden;isolation:isolate}
.btn.gold::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);
  transform:translateX(-130%);transition:transform .62s cubic-bezier(.3,.7,.3,1);
}
.btn.gold:hover::after{transform:translateX(130%)}
.btn.gold:active{transform:translateY(1px) scale(.985)}

/* ۳) بازخورد لمسی ملایم برای همهٔ دکمه‌ها */
.btn{transition:background .2s,border-color .2s,box-shadow .2s,transform .12s ease}
.btn:active:not(:disabled){transform:scale(.97)}

/* ۴) حلقهٔ فوکوس مدرن: واضح برای صفحه‌کلید، بدون پرش چیدمان */
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold,#c6a15b);outline-offset:3px;
  border-radius:8px;box-shadow:0 0 0 5px rgba(198,161,91,.16);
}

/* ۵) نشانگر کشویی آیتم فعال نوار کناری */
.sidebar a{position:relative;transition:background .22s ease,color .22s ease,padding-inline-start .22s ease}
.sidebar a::before{
  content:"";position:absolute;inset-block:22%;inset-inline-end:0;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--gold2,#c6a15b),transparent);
  transform:scaleY(0);transform-origin:center;transition:transform .26s cubic-bezier(.22,.8,.28,1);
}
.sidebar a.active::before,.sidebar a:hover::before{transform:scaleY(1)}
.sidebar a:hover{padding-inline-start:16px}

/* ۶) کارت‌ها: بالاآمدن نرم‌تر و لبهٔ روشن‌تر هنگام اشاره */
.card{transition:transform .26s cubic-bezier(.22,.8,.28,1),box-shadow .26s ease,border-color .26s ease}
.card:hover{border-color:rgba(198,161,91,.34)}
.stat10,.stat{transition:transform .24s cubic-bezier(.22,.8,.28,1),box-shadow .24s ease}
.stat10:hover,.stat:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.16)}

/* ۷) اعلان شناور: ورود از پایین با شیشهٔ مات */
#toast{
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  animation:toast-rise .3s cubic-bezier(.22,.9,.3,1);
}
@keyframes toast-rise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

/* ۸) انتخاب متن هماهنگ با پالت */
::selection{background:rgba(198,161,91,.30);color:inherit}
/* 0.14.5 — `.paper ::selection{background:rgba(198,161,91,.34)}` stood here. A pseudo-element after a
   descendant combinator made the browser build a selection style for EVERY node of every page, and
   each restyle of the saved-translations album cost five times as much (measured with 20 cards:
   ~300 ms → ~60 ms per card drawn). Text on a page is now selected in the rule above (alpha .30
   instead of .34 — the same gold, a shade lighter). Do not put a `… ::selection` rule back. */

/* ۹) تعویض تم: یک‌باره و هماهنگ
   قبلاً فقط html، body، .card، .sidebar و .topbar در ۰٫۳ ثانیه محو می‌شدند و
   باقی سطح‌ها (دکمه، برگه، شیشه، جدول، ورودی، لینک منو) در همان لحظه می‌پریدند
   — و هرکدام با مدت خودشان (۰٫۲، ۰٫۲۸، ۰٫۳). نتیجه، تغییری بود که هم کند
   به‌نظر می‌رسید هم تکه‌تکه. حالا در لحظهٔ تعویض تم *همهٔ* گذارها خاموش
   می‌شوند تا کل صفحه در یک فریم و یک‌دست عوض شود؛ بلافاصله بعد، گذارهای
   عادی (hover و…) برمی‌گردند. Bookylens11 این پرچم را می‌گذارد و برمی‌دارد. */
:root[data-theme-swap] *,
:root[data-theme-swap] *::before,
:root[data-theme-swap] *::after{
  transition:none!important;
}

/* ۱۰) نوار پیشرفت و اسپینر با حس زنده‌تر */
.busy{animation:spin .9s cubic-bezier(.5,.1,.5,.9) infinite}
progress::-webkit-progress-value{transition:width .35s ease}

/* ۱۱) عکس جلد کتاب: بالاآمدن سه‌بعدی ملایم */
.book-card{transition:transform .28s cubic-bezier(.22,.8,.28,1),box-shadow .28s ease}
.book-card:hover{transform:translateY(-5px) rotate(-.25deg)}
.book-card:hover .cover{box-shadow:8px 12px 26px rgba(0,0,0,.34)}
.cover{transition:box-shadow .28s ease}

@media(prefers-reduced-motion:reduce){
  .floating,.glass-window,.card,.stat,.stat10,.book-card,.btn,.sidebar a,html,body{transition:none!important}
  .btn.gold::after{display:none}
  #toast{animation:none}
  .floating:not(.active-window114),.glass-window:not(.active-window114){transform:none}
  .book-card:hover{transform:none}
}

/* ==========================================================================
   کف نمای صفحه — پیرو تم و پالت (۰٫۱۱٫۸)
   .source-viewport و .paper-wrap رنگ ثابت داشتند: style.css مقدار تیرهٔ
   #10110f و #191b17، و source-theme115.css فقط برای تم تیره #191b1e. نتیجه دو
   ایراد بود: در تم روشن دو مستطیل سیاه بزرگ می‌ماند، و با عوض‌کردن پالت
   (کاپوچینو، نورد و…) میز مطالعه رنگ پالت را نمی‌گرفت چون عددها ثابت بودند.
   حالا کف از var(--bg) همان پالت و همان تم می‌آید، پس هر دو تغییر را خودکار
   دنبال می‌کند. خودِ برگ ترجمه (.paper) عمداً کاغذی می‌ماند — آن سند است،
   نه بخشی از پوسته.
   ========================================================================== */
:root .source-viewport,:root .paper-wrap{background:var(--bg)}
.source-viewport img{box-shadow:0 8px 26px rgba(0,0,0,.34)}
:root[data-theme=light] .source-viewport img{box-shadow:0 6px 22px rgba(60,48,22,.18)}
:root[data-theme=light] .paper{box-shadow:0 6px 22px rgba(60,48,22,.14)}

/* ==========================================================================
   عبور نور طلایی از روی لوگوی سایت (۰٫۱۱٫۸)
   همان باریکه‌ای که در نوار شیشه‌ای پنجره‌ها می‌گذرد، از روی نشان و نام سایت
   هم عبور می‌کند. از همان توکن‌های --glow-* استفاده می‌شود تا اگر روزی رنگ یا
   سرعت نور عوض شد، هر دو جا با هم عوض شوند.
   ========================================================================== */
.topbar .brand-mark{position:relative;overflow:hidden;isolation:isolate}
.topbar .brand-mark>*{position:relative;z-index:1}
.topbar .brand-mark::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  border-radius:inherit;mix-blend-mode:var(--glow-blend);
  background:linear-gradient(100deg,
    transparent 34%,
    var(--glow-warm) 42%,
    var(--glow-beam) 48%,
    var(--glow-beam) 52%,
    var(--glow-cool) 58%,
    transparent 66%);
  background-size:240% 100%;
  background-position:46% 0;
  background-repeat:no-repeat;
  /* یک عبور در هر بار ساخته‌شدن نوار بالا (یعنی هر جابه‌جایی بین صفحه‌ها) —
     نه یک چرخهٔ بی‌پایان. هزینهٔ حالت ساکن صفر است. */
  animation:logo-sweep var(--glow-speed,2s) cubic-bezier(.25,.8,.3,1) 1 both;
}
@keyframes logo-sweep{0%{background-position:175% 0}100%{background-position:46% 0}}
/* نام دیگر یعنی انیمیشن دوباره از اول اجرا می‌شود: با بردن نشانگر روی لوگو،
   نور دوباره می‌گذرد. */
@keyframes logo-sweep-again{0%{background-position:175% 0}100%{background-position:46% 0}}
.topbar .brand:hover .brand-mark::after{animation:logo-sweep-again var(--glow-speed,2s) cubic-bezier(.25,.8,.3,1) 1 both}
:root[data-glow-motion=off] .topbar .brand-mark::after,
:root[data-glow-motion=off] .topbar .brand:hover .brand-mark::after{animation:none}
/* نام سایت هم همان نور را می‌گیرد، ولی با درخشش روی خودِ حروف — نه یک لایهٔ
   روی متن. لایهٔ مستطیلی، هرقدر هم نرم، در لبهٔ کادرِ خودش بریده می‌شود و
   به‌جای نور، یک جعبهٔ روشن روی نوشته دیده می‌شد. text-shadow چنین لبه‌ای
   ندارد، رنگ و کنتراست متن را هم عوض نمی‌کند. */
.topbar .brand strong{
  animation:brand-glow var(--glow-speed,2s) ease-out 1 both;
  animation-delay:.22s;   /* نور اول از نشان می‌گذرد، بعد به نام می‌رسد */
}
@keyframes brand-glow{
  0%,100%{text-shadow:none}
  55%    {text-shadow:0 0 10px var(--glow-warm),0 0 22px var(--glow-cool)}
}
:root[data-glow-motion=off] .topbar .brand strong{animation:none;text-shadow:none}
/* مدیر می‌تواند نور داخل شیشه را برای کل سایت خاموش کند (data-glow=off).
   این با [data-glass=off] فرق دارد: آنجا خودِ شیشه خاموش می‌شود، اینجا فقط
   نورِ درونش. */
:root[data-glow=off] .floating>.window-head::after,
:root[data-glow=off] .glass-window>.float-head::after,
:root[data-glow=off] .glass-window>.window-head::after,
:root[data-glow=off] dialog>.modal-head::after,
:root[data-glow=off] #readingPanes>.reader-window>.window-head::after,
:root[data-glow=off] .quick-panel>.float-head::after,
:root[data-glow=off] .topbar .brand-mark::after{display:none}
:root[data-glow=off] .topbar .brand strong{animation:none;text-shadow:none}
:root[data-glow=off] .floating>.window-head::before,
:root[data-glow=off] .glass-window>.float-head::before,
:root[data-glow=off] .glass-window>.window-head::before,
:root[data-glow=off] dialog>.modal-head::before,
:root[data-glow=off] #readingPanes>.reader-window>.window-head::before,
:root[data-glow=off] .quick-panel>.float-head::before{animation:none}

[data-glass=off] .topbar .brand-mark::after,
:root[data-effects=off] .topbar .brand-mark::after{display:none}
[data-glass=off] .topbar .brand strong,
:root[data-effects=off] .topbar .brand strong{animation:none;text-shadow:none}
@media(prefers-reduced-motion:reduce){
  .topbar .brand-mark::after{display:none}
  .topbar .brand strong{animation:none;text-shadow:none}
}

/* ==========================================================================
   کارایی میز مطالعه (۰٫۱۱٫۸)
   اندازه‌گیری‌شده روی میز مطالعه هنگام اسکرول: گران‌ترین چیز، خودِ
   backdrop-filter است نه رنگ‌ها. هر سطح شیشه‌ای یک عکس از پشت خودش نگه
   می‌دارد و با هر تغییرِ روی آن، دوباره بلور می‌شود. روی موبایل و تبلت این
   هم کندی می‌آورد هم حافظه می‌گیرد. بنابراین:
     ۱) روی دستگاه لمسی یا صفحهٔ باریک، هیچ نورِ متحرکی نداریم — حتی یک‌بار.
     ۲) بلور نوارهای میز مطالعه روی همان دستگاه‌ها سبک‌تر می‌شود.
   ظاهر شیشه‌ای حفظ می‌شود؛ فقط هزینهٔ هر فریم حذف می‌شود.
   ========================================================================== */
@media (hover:none),(max-width:900px){
  .floating.active-window114>.window-head::after,
  .glass-window.active-window114>.float-head::after,
  .glass-window.active-window114>.window-head::after{animation:none}
  .topbar .brand-mark::after{animation:none;background-position:46% 0}
  .topbar .brand strong{animation:none;text-shadow:none}
  /* بلور سبک‌تر: همان حس شیشه، با عکسِ پس‌زمینهٔ کوچک‌تر برای پردازش */
  #readingPanes>.reader-window>.window-head,
  .floating>.window-head,.glass-window>.float-head,.glass-window>.window-head{
    -webkit-backdrop-filter:saturate(150%) blur(14px)!important;
            backdrop-filter:saturate(150%) blur(14px)!important;
  }
}
/* گزینه‌های موجود کاربر و سیستم، یک‌بار-گذشتن نور را هم خاموش می‌کنند */
:root[data-effects=off] .floating.active-window114>.window-head::after,
:root[data-effects=off] .glass-window.active-window114>.float-head::after,
:root[data-effects=off] .glass-window.active-window114>.window-head::after,
:root[data-glow=off] .floating.active-window114>.window-head::after,
:root[data-glow=off] .glass-window.active-window114>.float-head::after,
:root[data-glow=off] .glass-window.active-window114>.window-head::after{animation:none}
@media(prefers-reduced-motion:reduce){
  .floating.active-window114>.window-head::after,
  .glass-window.active-window114>.float-head::after,
  .glass-window.active-window114>.window-head::after{animation:none}
}

/* 0.11.10 — منوی ابزار نباید یک لحظه گوشهٔ صفحه دیده شود.
   رویداد toggle روی <details> همگام نیست: مرورگر می‌تواند پنجرهٔ بازشده را
   پیش از اجرای جای‌گذاری رسم کند و کادر fixed بدون مختصات، گوشهٔ نما می‌نشیند.
   تا وقتی جای‌گذاری انجام نشده پنهان می‌ماند. صفت data-menu-place11 را همان
   لایه‌ای می‌گذارد که جای‌گذاری می‌کند، پس اگر آن اسکریپت اجرا نشود این قاعده
   هم اصلاً فعال نمی‌شود و منو مثل قبل باز می‌شود. */
:root[data-menu-place11] details.tools-more[open]>div:not([data-placed11]),
:root[data-menu-place11] details.tools-more[open]>.actions:not([data-placed11]),
:root[data-menu-place11] details.quality-menu[open]>div:not([data-placed11]),
:root[data-menu-place11] details.quality-menu[open]>.actions:not([data-placed11]){visibility:hidden}

/* 0.11.10 — جابه‌جایی با انگشت روی نمای کتاب اصلی.
   release10.css روی .source-viewport مقدار touch-action:pan-x pan-y گذاشته
   بود و چون بعد از style.css می‌آید، همان قاعده بر .pan-enabled{touch-action:none}
   غالب می‌شد: مرورگر خودش لمس را به عنوان اسکرول برمی‌داشت، رویداد اشاره‌گر
   لغو می‌شد و کد جابه‌جایی هرگز اجرا نمی‌شد. روی نمای ترجمه چنین قاعده‌ای
   نبود و برای همین آنجا کار می‌کرد. فقط وقتی حالت جابه‌جایی روشن است. */
.source-viewport.pan-enabled,.paper-wrap.pan-enabled{touch-action:none}

/* 0.13.2 — IN HAND MODE, NOTHING IS SELECTED. Reported: «بعضی وقت ها یک متنی
   از روی لیبل ها ناخوداگاه دستم میخوره انتخاب میشه و چون روی حالت جابجایی با
   انگشت هست کل صفحه متن هاش ... انتخاب میمونن». The rule that stopped text
   being selected was on `.panning` — the class that exists only WHILE a pan
   is running — so a press that never became a pan (on a label, on a figure,
   on a word) still started a selection, and in hand mode there is then no
   plain click anywhere to clear it: the highlight stayed across the page.
   The mode is the thing that decides this, not the gesture, so the rule
   belongs on the mode's own class. Turning hand mode off restores selection
   instantly, because it is the same class the reader is toggling. */
.source-viewport.pan-enabled,.paper-wrap.pan-enabled,
.source-viewport.pan-enabled *,.paper-wrap.pan-enabled *{
  user-select:none!important;-webkit-user-select:none!important}

/* 0.11.13 — the «بازنویسی روان» switch. On a narrow pane the caption and the
   on/off badge are hidden like every other toolbar button, so the active state
   is marked the same way the local-processing button marks it. */
#rewrite113{position:relative}
#rewrite113[aria-pressed=true]::after{content:'';position:absolute;bottom:3px;inset-inline-end:3px;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.reader-window:not([data-compact11=true]) #rewrite113::after{display:none}

/* 0.11.14 — a minimised question panel whose answer has arrived. One short
   transition and then a steady colour: an animation that never stops costs a
   frame on every repaint of the reading desk (trap 2). */
.quick-panel.answer-ready114{border-color:#49b37a!important;box-shadow:0 0 0 1px #49b37a,0 0 18px #49b37a66!important;transition:box-shadow .5s ease,border-color .5s ease}
.quick-panel.answer-ready114 .float-head,.quick-panel.answer-ready114 .section-head{background:linear-gradient(90deg,#49b37a33,transparent)!important}
.quick-panel.answer-ready114 .float-head h2::after,.quick-panel.answer-ready114 .section-head h2::after{content:' • پاسخ آماده است';color:#49b37a;font-size:11px}
@media (prefers-reduced-motion:reduce){.quick-panel.answer-ready114{transition:none}}

/* 0.11.14 — an album card is a page shrunk to a fifth; hovering it grows the
   card so the content can actually be read before opening. Transform only, so
   nothing reflows and no animation keeps running (trap 2), and the same state
   is reachable from the keyboard. */
.album11{padding:6px}
.album-page11{transition:transform .18s ease,box-shadow .18s ease}
.album-page11:hover,.album-page11:focus-visible{transform:scale(1.32);position:relative;z-index:6;box-shadow:0 18px 44px #0006;border-color:var(--gold)}
.album-page11:hover .album-preview11,.album-page11:focus-visible .album-preview11{background:var(--paper)}
@media (prefers-reduced-motion:reduce){.album-page11{transition:none}}
@media (hover:none){.album-page11:hover{transform:none;box-shadow:0 8px 20px #0003}}

/* 0.11.14b — a steady halo around the button that starts a translation.
   «دورش رو یک حاله نور طلایی بذار ثابت بمونه که دیدنش بین کلید ها راحت تر باشه».

   Steady is the operative word: a pulsing ring is an animation that never stops,
   and on this desk that costs a frame every frame (trap 2). This is one static
   ring plus one static glow, and a short transition only on hover.

   Gold reads well on the dark desk; on the light one it vanishes into the paper,
   so the light theme keeps the same ring in a deep amber that holds its contrast.

   The selector is deliberately as specific as the glass-button rule above, which
   is anchored on #readingPanes and sets box-shadow on every button in this head —
   a plainer selector here looked right in the file and did nothing on screen. */
/* 0.11.17 — «نور اطرافش از سمت راست و پایین انگار فضای کافی نداره».
   Quite right, and it was the halo's own geometry against the row it sits in.
   The row is `.bar11`: a fixed 34px tall with `overflow-y:hidden`, and
   `overflow-x:auto` in RTL. A 13px blur with 3px spread reaches about 6px past
   the button on every side, and there was roughly ONE pixel of room below it and
   none at the right-hand end of a scroll box whose origin is that edge — so the
   glow was cut off square on exactly those two sides, which is what shows in the
   light theme where the ring carries the contrast.
   The fix keeps the look and removes the dependency on space that does not
   exist: the 2px ring stays (and is given its 2px, by a margin and by two pixels
   taken off the button rather than added to the row — the desk row must not grow
   back into the panes), and the soft glow moves INSIDE the button, where nothing
   can clip it. Still one static ring and one static glow: no animation. */
#readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate].translate-halo114{
  border:1px solid #e2b54b!important;
  margin-inline:3px;
  box-shadow:0 0 0 2px #e2b54b66,inset 0 0 12px 0 #e2b54b4d;
  transition:box-shadow .18s ease,border-color .18s ease}
#readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate].translate-halo114:hover:not(:disabled){
  box-shadow:0 0 0 2px #f2d89a99,inset 0 0 15px 1px #e2b54b66}
#readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate].translate-halo114:disabled{
  border-color:#8a7a5566!important;box-shadow:0 0 0 2px #8a7a5540}
:root[data-theme=light] #readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate].translate-halo114{
  border:1px solid #9a6206!important;
  box-shadow:0 0 0 2px #9a620666,inset 0 0 12px 0 #b87a1240}
:root[data-theme=light] #readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate].translate-halo114:hover:not(:disabled){
  box-shadow:0 0 0 2px #9a620699,inset 0 0 15px 1px #b87a1259}
:root[data-theme=light] #readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate].translate-halo114:disabled{
  border-color:#9a620640!important;box-shadow:0 0 0 2px #9a620630}
/* And the ring needs somewhere to be. The row is a fixed height with
   `overflow-y:hidden`, and its buttons are pinned at 30px with `!important`, so
   a ring drawn outside the button had literally half a pixel above and below it.
   The room comes from both sides: the row grows by 2 and this one button gives
   up 3, so the halo'd button's OUTER extent lands at 31px — a touch larger than
   its 30px neighbours, which is the emphasis it is there for.
   Horizontally the row also has to admit the ring exists: in RTL its scrollable
   area otherwise stops at the button's border box and the right-hand ring is
   unreachable whatever margin the button carries. */
#readingPanes>.reader-window>.window-head>.navrow112{
  height:36px;padding-top:2px;padding-bottom:2px;padding-inline:3px}
#readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate].translate-halo114{
  height:27px!important;min-height:27px!important}
/* First in the page row, not squeezed between the zoom keys — and one width in
   both of its states. The label goes «ترجمه» -> «ترجمه مجدد» when the page's
   data lands, so without a floor the button grows by ~28px right after every
   page change and everything beside it slides, which is the shift this release
   set out to remove. */
#readingPanes>.reader-window>.window-head .navrow112 .btn[data-pro=translate]{
  order:-1;flex:0 0 auto}
/* No width floor here on purpose. The obvious fix for the button changing width
   when its label goes «ترجمه» -> «ترجمه مجدد» is a min-width, and it is wrong:
   at a narrow pane width `.caption-fit112` deliberately collapses captions with
   !important, and a floor would fight that and overflow the row on a phone. The
   reported defect — the button VANISHING and the row closing over its place —
   is fixed by keeping it in the layout; its own label is allowed to be its own
   length. */
/* 0.11.17 — «همیشه هم‌عرض حالت دوم باشه». The caption stacks the real label and
   the longest possible one in the same grid cell, so the column is always as
   wide as «ترجمه مجدد» whichever word is showing. The reserve is invisible, has
   no height, and cannot be read out. */
.translate-width117{display:inline-grid;justify-items:center;align-items:center}
/* A narrow pane is where this matters most, and it is also where `.caption-fit112`
   re-opens the captions with `display:inline!important` — which would flatten the
   stack and bring the jump straight back. The reserve is kept there, and only
   there; when the pane is so narrow that the caption is hidden outright the button
   is an icon and has one width anyway. */
.reader-window[data-compact11=true] .bar11 .caption-fit112 .translate-width117{
  display:inline-grid!important}
.translate-width117>span{grid-area:1/1}
.translate-width117::after{
  content:attr(data-widest);grid-area:1/1;
  visibility:hidden;height:0;overflow:hidden;white-space:nowrap;pointer-events:none}
.btn[data-pro=translate]{justify-content:center}
.btn[data-pro=translate][aria-busy=true]{opacity:.55;cursor:progress}


/* 0.11.14b — the reading-desk row above the panes, «کمی کوچک‌تر».
   Four full-size buttons and a select for things the reader touches once a
   session, sitting directly above the page itself and competing with it. They
   keep their words — these are not self-evident from an icon — but drop to the
   size of a secondary control. The coarse-pointer floor is kept at 34px so the
   row stays comfortably tappable on a tablet. */
.layout-settings10 .actions{gap:7px}
.layout-settings10 :is(.btn,.gold-trigger,select,summary.gold-trigger){
  font-size:12.5px;min-height:33px;padding:5px 11px;border-radius:8px}
.layout-settings10 .btn .icon,.layout-settings10 .gold-trigger .icon{width:17px;height:17px}
.layout-settings10 label{font-size:12.5px}
.layout-settings10 .gold-select{max-width:190px}
@media(pointer:coarse){
  .layout-settings10 :is(.btn,.gold-trigger,select,summary.gold-trigger){min-height:34px}}

/* 0.11.14b — the book's name goes BESIDE «میز مطالعه», not under it.
   «بجای اینکه عنوان کتاب زیر میز مطالعه نوشته شود روبروش نوشته شود تا ارتفاع
   این بلاک رو بتونی کمتر کنی و به ارتفاع بخش لایوت ترجمه‌ها اضافه کنی».
   Two stacked lines and a 30px heading cost about fifty pixels above the fold
   for two short strings. On one line, at a size that matches the name beside it,
   the block is a single row — and the panes grow by exactly what it gives up,
   because their height is measured down from their own top edge rather than set
   by hand.

   flex-wrap MUST stay nowrap. With wrap, a flex container's max-content width is
   its widest ITEM, not the sum of them, so this box shrank to the width of the
   book name alone and the heading was pushed back onto its own line — the change
   read as applied and looked exactly like the bug it was meant to fix.

   Scoped by :has(.reader-title) so only the reading desk's heading changes; the
   library, dashboard and admin heads keep the layout they have. */
#main>.page-head:has(.reader-title){margin-bottom:12px}
#main>.page-head>div:has(.reader-title){
  display:flex;flex-wrap:nowrap;align-items:baseline;gap:0 12px;flex:1 1 auto;min-width:0}
#main>.page-head>div:has(.reader-title)>*{margin:0}
#main>.page-head>div:has(.reader-title)>:is(h1,.eyebrow){flex:none}
#main>.page-head>div:has(.reader-title)>h1{font-size:22px;line-height:1.6}
#main>.page-head>div:has(.reader-title)>p{
  flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 0.11.15 — one line under the stage saying why that step takes time.
   The stage line keeps the styling it already had, including the reserved
   min-height that stops the panel jumping as the wording changes. */
.live-why11,.translation-wait .live-why11{display:block;max-width:52ch;margin:2px auto 0;
  font-size:12px;line-height:1.95;color:var(--muted);text-align:center;
  text-wrap:balance;overflow-wrap:anywhere}
.translation-wait .live-why11{color:var(--paper-note)}
.live-why11[hidden]{display:none!important}

/* 0.11.16 — «در آلبوم ترجمه ها فضای خالی … روی کارت ها زیادی هستن حذف کن».
   The preview box had a FIXED height, so a page whose scaled render is shorter
   than the box left a dark band above and below it, and the card's own padding
   added more. The box now takes the height its page actually needs, up to the
   same ceiling, and the cards sit at the top of their row instead of stretching
   to the tallest one. */
.album11{align-items:start}
.album-page11{padding:6px}
.album-page11 .album-preview11{height:auto;max-height:225px;display:block}
.album-page11 .paper{display:block}
.album-page11 b{padding:6px 4px 2px;line-height:1.7}

/* 0.11.16 — the icon-only «زبان اصطلاح تخصصی» switch, and the quoted run it
   rewrites. The original, when it is the visible side, is isolated LTR so an
   English term inside a Persian sentence is not drawn backwards. */
#termSwap116 .icon11{font:12px/1 Vazirmatn,Tahoma,sans-serif;letter-spacing:-.5px}
.term-shown116{unicode-bidi:isolate}
.term-shown116 bdi{unicode-bidi:isolate;direction:ltr}

/* 0.11.36 — the pages translating on their own, at the top of the queue
   dialog. Same card as a range, deliberately: it is the same kind of
   thing and the reader should not have to learn a second shape. */
#extraDialog .page-jobs136{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:16px;margin-bottom:14px;border:1px solid var(--glass-border);border-radius:12px;background:var(--card)}
#extraDialog .page-jobs136 p{margin:0;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px}
#extraDialog .page-jobs136 .help{color:var(--muted);font-size:13px;display:block}


/* 0.11.37 — «وقتی سبز میشه درخشش نور سبز در شیشه‌ای که روش قرار داره ایجاد کنه،
   درخششی که کم و زیاد میشه مادامی که در حال ترجمس».

   The status badge sits on the pane's glass bar, so the light belongs on the
   GLASS, not on the badge: a halo in the badge's own shape that breathes while
   the page is being translated, and stops the moment it is not.

   The first attempt was a radial pool, and it was wrong twice over — «این افکتی
   که برای درخشش سبز گذاشتی طبیعی نیست و جلوی خوانایی نوشته رو میگیره». A round
   blob behind a rounded rectangle does not read as light coming off the badge,
   it reads as a smudge under it, and at that size and strength it fought the
   text. This one is an outer shadow in the badge's OWN shape, so the light
   follows the pill's edge the way light does, and it is dimmer: .12 to .5
   rather than .22 to .78.

   Only `opacity` is animated, on a layer of its own. That is the one property a
   browser can animate without repainting anything, which matters more here than
   the effect does — this bar is on screen on a phone while a page translates,
   and «سرعت و روانی مهم‌تر از زیبایی».

   `isolation:isolate` gives the badge its own stacking context, so the glow at
   z-index -1 is painted behind the badge's own background and NOT behind the
   glass: it shows only where it should, in the ring around the badge.

   The attribute is the one `release11.js` already sets from the job status, so
   the glow appears and disappears with the translation itself and there is no
   second source of truth to fall out of step. */
#pageStatus[data-status113=running]{position:relative;isolation:isolate}
#pageStatus[data-status113=running]::before{content:'';position:absolute;inset:0;z-index:-1;
 pointer-events:none;border-radius:inherit;
 box-shadow:0 0 9px 1px var(--green-glow,#3fc27d);
 animation:bookylens-translating137 2.6s ease-in-out infinite}
@keyframes bookylens-translating137{0%,100%{opacity:.12}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){#pageStatus[data-status113=running]::before{animation:none;opacity:.3}}

/* 0.11.39 — the album's three controls, and the two shapes it can take.
   «ممکنه یک نفر با مدل نمایشی کارتی احساس راحتی نکنه یا بخواد سایز کارت ها رو
   کوچک و بزرگ کنه که تعداد بیشتری کارت رو ببینه یا بخواد محتوای خاصی رو سرچ
   کنه … و لایو ببینه توی کدوم صفحه هست».

   The size steps live HERE and nowhere else: the slider writes one attribute on
   the grid, so changing it repaints and never re-renders a page (trap 2). The
   list layout is the cheap one on purpose — it draws no page at all, which is
   what makes it the right answer on a phone rather than merely the plain one. */
.album-bar139{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 6px 12px;padding:9px 11px;background:var(--card);border:1px solid var(--glass-border);border-radius:12px}
.album-find139{flex:1 1 230px;min-width:170px;display:flex;flex-direction:column;gap:3px}
.album-find139[hidden]{display:none}
.album-find139 input{width:100%;box-sizing:border-box}
.album-find139 small{color:var(--muted);font-size:11.5px;min-height:1.3em;line-height:1.7}
.album-modes139{display:flex;gap:4px}
.album-modes139 .btn[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.album-size139{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);white-space:nowrap}
.album-size139 input[type=range]{width:112px;accent-color:var(--gold)}

/* the five steps: column width, the zoom the shrunken page is drawn at, and the
   ceiling the preview box may reach. One line each, and they stay in step. */
.album11[data-size139="1"]{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:12px}
.album11[data-size139="1"] .paper{zoom:.15}
.album11[data-size139="1"] .album-preview11{max-height:160px}
.album11[data-size139="2"]{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:15px}
.album11[data-size139="2"] .paper{zoom:.18}
.album11[data-size139="2"] .album-preview11{max-height:192px}
.album11[data-size139="3"]{grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:20px}
.album11[data-size139="3"] .paper{zoom:.21}
.album11[data-size139="3"] .album-preview11{max-height:225px}
.album11[data-size139="4"]{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:22px}
.album11[data-size139="4"] .paper{zoom:.28}
.album11[data-size139="4"] .album-preview11{max-height:298px}
.album11[data-size139="5"]{grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:24px}
.album11[data-size139="5"] .paper{zoom:.36}
.album11[data-size139="5"] .album-preview11{max-height:382px}

/* the list layout: a page number, and what the page starts with. No render. */
.album11[data-layout139=list]{grid-template-columns:1fr;gap:6px}
.album11[data-layout139=list] .album-preview11{display:none}
.album11[data-layout139=list] .album-page11{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:12px;text-align:start;padding:9px 11px}
.album11[data-layout139=list] .album-page11 b{padding:0;white-space:nowrap;color:var(--gold)}
.album11[data-layout139=list] .album-page11:hover,.album11[data-layout139=list] .album-page11:focus-visible{transform:none;box-shadow:0 6px 16px #0003}
.album11[data-layout139=list] .album-hit139{-webkit-line-clamp:1;padding:0}

/* the matching run, shown under a card only when it IS a match, and always in
   the list. `plaintext` because a Persian page can quote an English term. */
.album-hit139{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
 font-size:11.5px;line-height:1.85;color:var(--muted);text-align:start;padding:3px 4px 0;
 /* 0.11.43 — `plaintext` took the row's direction from its first strong
    character, so a snippet whose match sits at position 0 of a page and happens
    to be Latin («LM358 یک تقویت‌کننده…») flushed that one row to the far left of
    a list where every other row hugs the right. The page is Persian; the row is
    Persian, and only the matched run is isolated. */
 direction:rtl;unicode-bidi:isolate}
.album-hit139 mark{unicode-bidi:isolate}
.album-hit139:empty{display:none}
.album11[data-layout139=cards] .album-hit139:not(.has-hit139){display:none}
.album-hit139 mark{background:var(--gold);color:#11141a;border-radius:3px;padding:0 2px}
@media(max-width:700px){.album-bar139{gap:8px;padding:8px}.album-size139 input[type=range]{width:92px}
 .album11[data-size139="5"]{grid-template-columns:1fr}}
.album-size139.off139{opacity:.45}

/* 0.13.1 — THE WAITING PANEL, given an order to read in.
   «حرفه ای تر روی این نمایش و این بخش هم کار کنی؟» The parts were all there
   and all the same size, centred, with a four-line paragraph as the largest
   object on the screen. Now: the step being worked on leads, the reassurance
   is secondary, what has already happened is a quiet trail underneath, the
   elapsed time is where a reader looks for it, and the explanation is behind
   the question it answers. The glyph keeps its exact 64×74 box — the page-fit
   suite measures it — and simply moves beside the words instead of above. */
.translation-wait{align-items:center}
.wait-shell153{width:100%;max-width:44em;margin:0 auto;text-align:start;
  display:flex;flex-direction:column;gap:12px}
.wait-head153{display:flex;align-items:center;gap:16px}
.wait-head153 .waiting-book{margin:0}
.wait-copy153{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.translation-wait .wait-copy153 .live-stage11{min-height:0;max-width:none;
  font-size:17px;line-height:1.7;font-weight:600;color:var(--paper-heading);
  text-align:start;overflow-wrap:anywhere}
.wait-lede153{margin:0!important;font-size:12.5px;line-height:1.8;
  color:var(--paper-note);max-width:none!important;text-align:start}
.wait-clock153{flex:none;align-self:center;font-size:13px;line-height:1;
  padding:6px 10px;border:1px solid var(--line);border-radius:8px;
  color:var(--paper-note);font-variant-numeric:tabular-nums;
  direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.wait-trail153{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:6px 10px;font-size:11.5px;line-height:1.7;color:var(--paper-note)}
.wait-trail153[hidden]{display:none}
.wait-trail153 li{display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;background:var(--paper-label);
  border:1px solid transparent}
.wait-trail153 li:before{content:'✓';font-size:10px;color:var(--gold, #c5a15b);opacity:.85}
.wait-trail153 li.wait-more153{background:none;border-style:dashed;
  border-color:var(--paper-note);opacity:.6;letter-spacing:2px}
.wait-trail153 li.wait-more153:before{content:none}
.wait-why153{border:0!important;padding:0!important;margin:0}
.wait-why153[hidden]{display:none}
.wait-why153>summary{font-size:12px;line-height:1.8;color:var(--paper-note);
  font-weight:500;cursor:pointer;padding:2px 0;min-height:26px;
  display:inline-flex;align-items:center;gap:6px;list-style:none}
.wait-why153>summary::-webkit-details-marker{display:none}
.wait-why153>summary:before{content:'؟';display:inline-flex;align-items:center;
  justify-content:center;width:17px;height:17px;flex:none;border-radius:50%;
  border:1px solid currentColor;font-size:10px;line-height:1}
.wait-why153[open]>summary:before{content:'−'}
.translation-wait .wait-why153 .live-why11{display:block;margin-top:6px;
  font-size:12px;line-height:1.95;color:var(--paper-note);text-align:start}
.translation-wait .prefetch-tip11{margin:0;font-size:11.5px;line-height:1.8;
  color:var(--paper-note);text-align:start;max-width:none}
.translation-wait .prefetch-tip11 .btn{font-size:11.5px;margin:0 4px;
  min-height:26px;padding:2px 9px}
@media(max-width:700px){
  .wait-head153{gap:12px}
  .translation-wait .wait-copy153 .live-stage11{font-size:15px}
  .wait-clock153{padding:5px 8px;font-size:12px}
}

/* 0.13.2 — «در این پنجره دکمه ها در جاهایی که فلش زدم بهم چسبیدن».
   The dialogs that put two buttons side by side without an `.actions` row
   around them had nothing separating them at all: `.btn` is an inline-flex
   box, and two of them in a row touch, edge to edge, looking like one
   two-part control. The rows the report pointed at now have their `.actions`
   wrapper — that is the real fix, and it brings the alignment with it — and
   this is the floor under every other dialog in the product, present and
   future, so a pair that was never wrapped is still readable. It is scoped
   to a parent that is NOT an `.actions` row, so it can never add to that
   row's own gap. */
dialog :not(.actions)>.btn+.btn,
dialog :not(.actions)>.btn+a.btn,
dialog :not(.actions)>a.btn+.btn{margin-inline-start:8px;margin-block-start:6px}

/* 0.13.2 — ورق خوردن. The direction is in the EDGE the sheet unfolds from:
   a Persian book is bound on the right, so the next page opens from the
   left and the previous one from the right. `scaleX` from that edge is the
   flat projection of a page swinging on its spine — it costs one composited
   layer, moves no layout, and cannot spill out of the scroller the way a
   translate or a rotate can, which on a pane that scrolls would have added
   a sideways scrollbar for a third of a second.
   Kept off for a reader who asked for a quiet screen, in the stylesheet as
   well as in `page_turn153.js`, so neither one alone can bring it back. */
.paper-wrap[data-turn153] > .paper,
.source-viewport[data-turn153] > img,
.source-viewport[data-turn153] > #source{
  animation:page-turn153 .32s cubic-bezier(.2,.7,.3,1) both;
  will-change:transform,opacity;backface-visibility:hidden}
.paper-wrap[data-turn153=next] > .paper,
.source-viewport[data-turn153=next] > img{transform-origin:left center}
.paper-wrap[data-turn153=previous] > .paper,
.source-viewport[data-turn153=previous] > img{transform-origin:right center}
@keyframes page-turn153{
  from{opacity:.25;transform:scaleX(.955)}
  to{opacity:1;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .paper-wrap[data-turn153] > .paper,
  .source-viewport[data-turn153] > img{animation:none;will-change:auto}}
:root[data-effects=off] .paper-wrap[data-turn153] > .paper,
:root[data-effects=off] .source-viewport[data-turn153] > img{animation:none;will-change:auto}

/* ============================ 0.13.5 ============================ */

/* H — THE WINDOW BUTTONS ARE BACK IN LINE, IN ALL 52 PANELS.

   «عکس ضمیمه دکمه های ضربدر و ماکزیمایز بالای پنجره جاشون رو از دست دادن و
   تراز نیستن دیگه» — and then, with a second screenshot: «عدم تراز بودن …
   مختص یک پنجره نیست».

   He was right twice over. Measured in a fixture with the real stylesheet
   chain, in both themes:

       maximize   y = 390.3   margin-top 0     margin-inline-start 0
       close      y = 396.3   margin-top 6px   margin-inline-start 8px

   The cause is the rule a few lines above this one, which is mine, from
   0.13.2. It is the floor that keeps two loose buttons in a dialog from
   touching, and a window header's controls are exactly that shape — two
   `.btn` siblings whose parent is not `.actions` — so the × was pushed 6px
   down and 8px sideways, on top of the 6px gap `.window-controls` already
   has. `grep -o "modal('[^']*'" static/*.js | sort -u` counts 52 distinct
   named windows sharing that header.

   The 0.13.2 rule stays: it answers its own report. The control strips are
   excluded from it instead. `align-items:center` is worth having on its own
   — `release10.css` gives `.window-controls` `display:flex;gap:6px` and no
   alignment at all, so the group was only ever accidentally centred. */
dialog .window-controls>.btn+.btn,
dialog .window-controls>.btn+a.btn,
dialog .window-controls>a.btn+.btn,
dialog .pane-controls>.btn+.btn,
dialog .pane-controls>.btn+a.btn,
dialog .pane-controls>a.btn+.btn{margin-inline-start:0!important;margin-block-start:0!important}
.window-controls{align-items:center}

/* S — THE GLINT TRAVELS ALONG THE ∞, AND NOT ALONG THE «b».

   «به نظر میاد روی لوگوی bookylens بالای صفحه نور روی حرف b و اولین o که به
   شکل نصف علامت بینهایت هست سر میخوره و نه روی دو حرف oo که شکل بی نهایت هستن
   باهم» — and «برق زدن … واضح تر و سریع تر بشه».

   He is right, and the mistake was mine and measurable. 0.13.2 located the ∞
   by reading the ASCENDER BAND of `wordmark.png` — the top fifth — which sees
   the «b» STEM and not the «b» BOWL, because a bowl has no ascender. Read
   over the full glyph height instead, the runs are:

       the whole «b», bowl included   0.0000 – 0.1164
       «ookylen» run together         0.1243 – 0.6173
         the «k» ascender inside it   0.3131 – 0.3810

   so the ∞ — the two o's — is 12.4% to about 29.4%, and everything below
   11.6% is the «b». The shipped sweep is 14% wide travelling 0%→19%, which
   puts its centre at 7%→23.3%: it starts inside the b's bowl and ends in the
   middle of the second o. Measured in Chromium against an unlit baseline,
   nine samples across the sweep, dark theme:

       shipped 14%, 0→19     «b» +179/15.23     «oo» +176/7.98    «k» +1
       this    10%, 13.8→21.6  «b»   0/ 0.00     «oo» +226/16.51   «k» +1

   A 10%-wide gradient at position p has its centre at 0.9p+5, so 13.8→21.6
   sweeps the centre 17.4%→24.4% and the lit extent 12.4%→29.4%: the two o's
   from end to end and nothing else. Wider was tried and is measurably worse
   — the same light spread over more area, and it reaches the «b» again.

   7s→3s is «سریع تر»; the brighter, longer-tailed gradient is «واضح تر». The
   mask, the blend mode and the reduced-motion rule are untouched. */
/* 0.13.8 — THIRD REPORT, AND THE FIRST TIME THE RIGHT THING WAS MEASURED.
   «نور سفید به صورت کامل سر نمیخوره و فقط روی نصف نماد سر میخوره».

   Twice I measured the PEAK brightness on the symbol and twice it was high,
   so twice I called it fixed. Peak is not coverage. What matters is whether
   EVERY column of the ∞ is lit at some point in the cycle, and that was never
   asked.

   Asked now, from `wordmark.png` itself rather than from the CSS comments:
   a column belongs to a round letter when all of its ink stays inside the
   x-height band, and that puts the ∞ at x = 141..337 of 1134 —
   **12.43% .. 29.72%** of the wordmark. Then the gradient was simulated over
   the whole sweep, 240 frames, alpha interpolated between its own stops, and
   every column scored by the most light it ever receives:

       shipped 10%, 13.8→21.6    ∞ lit 75.1%   dimmest column 0.00
       this    10%, 10.6→25.1    ∞ lit  100%   dimmest column 0.67

   Zero. The two ends of the symbol — the outside of each bowl — received no
   light at all, which is exactly «نصف نماد», and no peak measurement could
   ever have seen it.

   The tile keeps its 10% width, so the light is no dimmer than the one he
   called «واضح تر» in 0.13.5; only its travel changes. A 10% tile at position
   p has its centre at 0.9p+5, so 10.6→25.1 walks the centre 14.5%→27.6%,
   which is the symbol's first column plus the bright core's half-width to its
   last column minus the same. On the letters either side the peak reaches
   0.37 across less than 1% of their width — the edge of a light passing, not
   a light on the «b». */
.brand-word150-lit::after{
  background-image:radial-gradient(ellipse closest-side,
    #ffffffff 0%, #ffffffcc 55%, #ffffff44 76%, transparent 90%);
  background-size:10% 150%;
  background-position:-6% 50%;
  animation-duration:4.5s;
  /* 0.13.9 — THE LIGHT NOW SWEEPS THE WHOLE WORD, «b» TO «s».
     Mehran's own design, and the end of a problem rather than another turn of
     it: «روی کل کلمه bookylens برق در رفت‌وآمد باشه از b شروع بشه تا s پیش
     بره هم در لوگو بالای صفحه هم ورودی پورتال».
     Every version before this aimed the light at the ∞ alone, and each one
     traded one fault for the other: travel far enough to reach both ends of
     the symbol and the tail lands on the «b» 0.79% away; stop short of that
     and an end of the symbol goes dark. 0.13.8 held both at once only by
     fencing the light behind a second mask — a real fix, and a brittle one,
     since every number in it is tied to where the ∞ happens to sit.
     Lighting the whole word removes the conflict instead of balancing it:
     there is no neighbour to protect, so THE FENCE IS GONE and the wordmark's
     own mask is all that remains. A 10% tile at position p has its centre at
     0.9p+5, so -6%→106% walks the centre from -0.4% to 100.4% — past the
     first column and past the last, which is what «از b شروع بشه تا s پیش
     بره» asks for. The travel is about seven times longer than the symbol's
     was, so the duration goes 3s→4.5s: the light still crosses at a bit over
     twice the old speed rather than crawling. */
  -webkit-mask-image:var(--wordmark);mask-image:var(--wordmark);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@keyframes brand-glint150{from{background-position:-6% 50%}
                          to{background-position:106% 50%}}
/* The login lockup shares the horizontal path and always did, so it shares
   the correction; only its vertical band is its own. */
.brand-word150-lit.lockup153::after{background-size:10% 26%;
  background-position:-6% 100%}
@keyframes brand-glint153-lockup{from{background-position:-6% 100%}
                                 to{background-position:106% 100%}}

/* M2 — THE WAITING PANEL IS ONE CENTRED STACK AGAIN.

   «اون لوگو انیمیشنی و عنوان ترجمه محتوای صفحه با مدل باید وسط صفحه بمونه …
   این صفحه رو هم با دقت مجدد بازطراحی کن», and when asked which reading of
   «وسط صفحه» he meant: «مثل قبل باشه، مثل قدیم که وسط صفحه بود. در کل باید
   همه چیز قرینه و خوب به چشم بیاد».

   MEASURED, not eyeballed. The real panel markup against the real stylesheet
   chain on an 820px sheet, whose centre line is x = 530:

       #translation      820 wide   centre 530   ← the reference
       .wait-shell153    704 wide   centre 530   ← the container IS centred
       .waiting-book      64 wide   centre 850   ← 320px right of centre
       .live-stage11     624 wide   centre 490
       «چرا این مرحله…»  158 wide   centre 803   ← hard against the edge

   The container was centred and its contents were not, and one declaration
   from my own 0.13.1 change did it: `.wait-copy153{flex:1}` stretches the copy
   across the whole row, pinning the glyph to the edge and leaving the other
   half of the row empty.

   Stacked and centred, every row lands on 530 — glyph, title, lede, clock,
   trail, the «why» and its text, and the prefetch line. The clock problem
   solves itself in this arrangement: in the pair-centred version a visible
   clock pushed the glyph and title off the axis; as its own row it cannot.

   This is CSS only. `release11.js` builds the shell once and rewrites text
   inside it — a panel that rebuilds itself every two seconds flickers, and
   `browser_v113` holds it to the same DOM nodes — so nothing here reorders or
   replaces anything. The glyph keeps its exact 64 × 74 box, which the
   page-fit suite measures. */
.translation-wait .wait-shell153{max-width:40em;text-align:center;align-items:center}
.translation-wait .wait-head153{flex-direction:column;align-items:center;gap:12px}
.translation-wait .wait-head153 .waiting-book{margin:0 auto}
.translation-wait .wait-copy153{flex:0 1 auto;align-items:center;gap:6px}
.translation-wait .wait-copy153 .live-stage11{text-align:center}
.translation-wait .wait-lede153{text-align:center}
.translation-wait .wait-clock153{align-self:center;margin:0 auto}
.translation-wait .wait-trail153{justify-content:center}
.translation-wait .wait-why153{text-align:center}
.translation-wait .wait-why153>summary{justify-content:center}
/* A centred measure reads better a little narrower than the 52ch the
   left-aligned version used; the last line is less ragged. */
.translation-wait .wait-why153 .live-why11{text-align:center;margin-inline:auto;max-width:44ch}
.translation-wait .prefetch-tip11{text-align:center}
/* Two rules were arguing over this: the pre-0.13.1 `min-height:3.8em` held
   space for a stage title that is now one centred line. */
.translation-wait .live-stage11{min-height:0}

/* ═══ 0.13.6 ═══════════════════════════════════════════════════════════════
   The book's original title, under its Persian one, on the library card.

     «در کتابخانه اسم ترجمه شده باشه ولی زیرش با فونت معمولی اسم انگلیسی کتاب
      هم نوشته بشه برای هر کتاب»

   «فونت معمولی» is the instruction that matters: the heading above it is 650
   weight, so this is 400 — plainly the second line, not a second heading. It
   sits between the heading and the author and takes the margin the heading
   used to give away, so the card's height does not change; `book-details` is a
   column flex and the rows below it are already `margin-top:auto`.

   `unicode-bidi:plaintext` for the same reason the heading has it: an English
   title inside a right-to-left card must not have its punctuation pulled to
   the wrong end. One line, with an ellipsis — the full title is in the
   `title` attribute of both lines. */
.library-book .book-details h2{margin-bottom:2px}
/* MEASURED, not assumed: with the rule above alone the card carrying the
   second line came out 606px against 604px for the others. The heading holds
   `min-height:3.2em` for a two-line title and absorbs nearly all of the new
   line, but 2.8px leaked. A heading that is FOLLOWED by the second line gives
   up its own bottom margin as well, and the line's own margin was cut to 5px
   so that 20.4 + 5 fits inside the 25.6px of slack a one-line heading leaves.
   What remains is 1.1px, measured — a Latin line box in this card is ~0.95px
   taller than a Persian one, which is font metrics and not layout. Where
   `:has` is unsupported the card is 2.8px taller, which is exactly the
   behaviour this replaces. `browser_book_title162` holds it to ±2px. */
.library-book .book-details h2:has(+ .book-original162){margin-bottom:0}
.library-book .book-original162{
  margin:0 0 5px;font-size:12px;font-weight:400;line-height:1.7;
  color:var(--muted);text-align:start;unicode-bidi:plaintext;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The desk's title is the Persian one alone; it was already a single span and
   keeps its place, but a long Persian title must not push the row. */
.reader-title{unicode-bidi:plaintext}

/* 0.13.8 — the progress bar under the stage line. «یک نوار پروگرس بار نیمه
   شفاف متناسب با تم». Two states and never a third: `data-sure="true"` fills
   to the real fraction the server sent, anything else shimmers and claims no
   position. Both use the panel's own gold, at low alpha, so it reads as part
   of the paper rather than a browser widget. */
.translation-wait .wait-bar158{position:relative;height:4px;border-radius:99px;
  margin:12px auto 2px;width:min(320px,70%);overflow:hidden;
  background:color-mix(in srgb,var(--gold,#c6a15b) 16%,transparent)}
.translation-wait .wait-bar158>i{display:block;height:100%;border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--gold,#c6a15b) 55%,transparent),
                                   color-mix(in srgb,var(--gold,#c6a15b) 92%,#fff));
  transition:width .45s ease}
.translation-wait .wait-bar158[data-sure="true"]>i{width:0}
/* Unknown position: a band that crosses and comes back. `transform` only, so
   it costs the compositor and not a repaint. */
.translation-wait .wait-bar158:not([data-sure="true"])>i{width:42%;
  animation:waitBar158 1.9s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes waitBar158{
  0%{transform:translateX(-115%)}
  100%{transform:translateX(255%)}}
/* The reader's own settings win, exactly as they do for every other animation
   on this panel. Still a visible bar — just a still one. */
:root[data-effects=off] .translation-wait .wait-bar158>i,
[data-effects=off] .translation-wait .wait-bar158>i{animation:none!important;
  width:100%!important;transform:none!important;opacity:.55}
@media(prefers-reduced-motion:reduce){
  .translation-wait .wait-bar158>i{animation:none!important;transform:none!important}
  .translation-wait .wait-bar158:not([data-sure="true"])>i{width:100%;opacity:.55}}

/* ========================================================================
   0.13.27 — INTERFACE TIDYING, SIX ITEMS

   Five of the six are about POSITION and SIZE, and each was measured on a real
   page before and after rather than reasoned about from the markup — which is
   how the ghost-pages button came to be appended identically in both panes and
   to land in two different places.
   ======================================================================== */

/* ---- 1. the status badge goes UNDER the pane title ----------------------- */
/* «عبارت "نیاز به بررسی" که الان جلوی "ترجمهٔ فارسی" نوشته شده رو زیرش بنویس و
    ترجمهٔ فارسی رو کمی ببر بالاتر و اگه لازمه فونتشون رو تغییر بده تا فشرده و
    درهم‌ریخته دیده نشن»

   Side by side on one line, in a row capped at 86px, the two were not merely
   cramped — measured, the title was ellipsised to make room for the badge. They
   are stacked now: the heading on top in its own weight, its state beneath it
   smaller and lighter, and the pair centred in the row the title used to share.
   The title gains back every pixel the badge was taking.

   ONLY IN THE WIDE MODE, and this is the trap the whole item turns on. A narrow
   pane sets `data-compact11=true`, and there the badge is deliberately collapsed
   to a 22px box with `font-size:0` and the word replaced by a single glyph
   (✓ ◷ ! —). Stacked, that would be an empty square hanging under the title on
   every phone, so in compact the badge stays on the title's row exactly where it
   already fits. */
#readingPanes>.reader-window:not([data-compact11=true]) .bar11>h2{
  display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;justify-content:center!important;
  gap:0!important;height:100%;max-width:112px;overflow:hidden;
  font-size:12.5px;font-weight:600;line-height:1.15;white-space:nowrap}
#readingPanes>.reader-window:not([data-compact11=true]) .bar11>h2>.badge{
  align-self:flex-start;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:9.5px!important;font-weight:400!important;
  line-height:1.35!important;padding:0 3px!important;border-radius:4px;
  /* It is a state, not a second heading: quieter than the line above it. */
  opacity:.92}

/* ---- 2 & 3. «ذخیره صفحه» and «این صفحه را خواندم» — icon only ------------ */
/* The words are gone from both, so neither may keep a width that was measured
   for them. Both carry the full Persian sentence in `title` and `aria-label`,
   which is also what the «⋯» menu lists them by. */
#readingPanes .bar11 .quick-export>summary,
#readingPanes .bar11 #read10{
  width:auto!important;min-width:30px!important;padding:4px 7px!important;
  gap:0!important;justify-content:center}
#readingPanes .bar11 .quick-export>summary>.icon,
#readingPanes .bar11 #read10>.icon{margin:0}
/* Once the page is marked read the button says so by its colour, because it no
   longer has a word to change. */
#readingPanes .bar11 #read10[data-read10=done]{
  color:var(--gold)!important;border-color:var(--gold2)!important}

/* ---- 4. the ghost-pages button gets the same slot in both panes ---------- */
/* «این دکمه که بالای لایوت کتاب انگلیسی هست رو … در سمت چپ پنجره در همون سطر
    منتقل کن»

   Both panes build this button in one loop and append it the same way, and it
   still landed in two places: the Persian row is full, so the button was pushed
   to the far end of it, and the English row is not, so it sat wherever the
   packing left it — measured at x=209 in a row starting at x=16, with 193px of
   empty space to its left. Nothing about that is the button's own doing, which
   is why the fix is not another append: `auto` on the inline-start margin sends
   it to the end of the row whatever else is in the row.

   WHAT THAT DOES AND DOES NOT GUARANTEE, measured for the 0.13.27 audit. The
   English pane's button — the one that was reported — now sits 3px from the start
   of its row at 1000, 1200, 1400 and 1900px, instead of 9, 93, 193 and 443px.
   An `auto` margin resolves to zero once a flex row OVERFLOWS, though, so on a
   Persian pane narrow enough to run out of room (measured: 16px over at a 1200px
   window, 116px at 1000px) the button is carried past the row's own edge. That
   crowding predates this rule and is not what was reported; what matters is that
   the control is still reachable there, and it is — the row overflowing is
   exactly the condition that shows the «⋯» button, whose panel lists «پیش‌نمایش
   صفحات اطراف». `browser_chrome209.py` holds that pairing. */
/* 0.13.31 — ONE SPACER IN THIS ROW, NOT TWO. «فاصله بین دو دکمه سمت راستش و
   دکمه سمت چپش زیاده در صورتی که باید نزدیک هم باشن»: this button and `#read10`
   both carried `margin-inline-start:auto`, and two autos SPLIT the row's leftover
   space between them — so the reader got a gap before «این صفحه را خواندم» and a
   second one before the page-strip button, with the three controls that belong
   together drifting apart. `#read10` keeps its auto, because the group is meant
   to sit at the end of the row (0.13.29 moved it and that was the complaint);
   this one gets an ordinary gap, so the strip button sits beside its neighbours. */
#readingPanes .navrow112>[data-ghost11]{margin-inline-start:10px!important}
/* …and in a row that has no «این صفحه را خواندم» — the source pane's — there is
   no auto spacer at all, so the same ordinary gap would leave this button in the
   middle of the row while the translation pane's sits at the end: the two panes
   would place the same control differently, which is the asymmetry the declared
   slot exists to prevent (`browser_chrome209` measured 444px against 3px). When
   the row carries no `#read10`, this button is the one that carries the spacer. */
#readingPanes .navrow112:not(:has(#read10))>[data-ghost11]{margin-inline-start:auto!important}

/* ---- 6. the reading toolbar gets a declared order ------------------------ */
/* Everything in `.reading-tools` is appended with `beforeend` by four different
   scripts — `reading-tools.js`, `platform.js`, `pro.js`, `workspace10.js` — so
   the row's order has always been an accident of load order. «بازگشت به محل
   مطالعه» was asked to sit just before «بیشتر» («قبل دکمهٔ بیشتر قرار بگیره»),
   and moving it by reshuffling appends would hold only until the next script is
   added. So the order is declared here, once.

   The page's own tools first, then the menus, and 20 is what an undeclared
   newcomer gets: after the page tools, before the menus, rather than silently
   landing between «بازگشت» and «بیشتر» and undoing this. */
.reading-tools>*{order:20}
.reading-tools>[data-action=outlinePanel]{order:1}
.reading-tools>[data-action=focusMode]{order:2}
.reading-tools>[data-action=quickOpen]{order:3}
.reading-tools>[data-action=studyDrawer]{order:4}
.reading-tools>[data-action=bookProfile]{order:5}
.reading-tools>[data-action=panMode]{order:6}
.reading-tools>details.quality-menu{order:40}
.reading-tools>[data-tools10=study]{order:50}
.reading-tools>#workspaceMenu10{order:55}
/* 0.13.34 — «میخوام به قبل از دکمه کنترل محتوا و بعد از دکمه جابجایی منتقل بشه».
   It sat at 60, between the workspace menu and «بیشتر», which is the far end of
   the row — a button that appears only after following a cross-reference, and
   then appears where the reader is not looking. «جابجایی» is 6 and the content
   menu is 40, so 7 is exactly the place asked for. */
.reading-tools>[data-reference-back]{order:7}
.reading-tools>[data-tools10=more]{order:70}

/* ---- 0.13.29 — the pane's two rows stay on ONE line, and say that they scroll -- */
/* THE FIRST ANSWER TO THIS WAS WRONG, and Mehran saw it the day it shipped:
   «این دو کلید جاشون عوض شده … همین طور ارتفاع این بخش بیشتر شده».

   The complaint it was trying to answer is real — between 380px and 1200px the
   page row is wider than its cell (measured 116px over at 1000px) and the three
   controls at its end are drawn past the start edge, reachable only by dragging a
   30px strip that gives no sign it scrolls. The first fix let the row wrap above
   700px. Two things came with that, both measured afterwards:

     · `margin-inline-start:auto` is resolved PER FLEX LINE. This row carries two
       of them — `#read10` and `[data-ghost11]` — so the moment the row wrapped,
       «این صفحه را خواندم» and «ارزیابی اختیاری کیفیت» stopped sitting at the end
       of the row and moved to wherever their own line ended.
     · the head stopped being 80px: 136px at 1200px and 166px at 1000px, three
       lines instead of two, with the reading viewport giving the height back so
       the page below shifted too.

   Neither was asked for, and the row's own layout — the nav cluster at one end,
   the two page controls at the other — is the thing the reader navigates by. So
   the row goes back to one line at a fixed head, and the original complaint is
   answered the other way instead: the rows that really overflow are marked by
   `release11.js` and faded at BOTH edges here, at every width, so the row reads
   as scrollable rather than as a row that ends there — and «⋯» still lists every
   control on it, which is the path that needs no dragging at all. */
#readingPanes>.reader-window>.window-head>.bar11[data-spill112]{
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
          mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
}

/* ---- 0.13.31 — A BUTTON WHOSE NAME IS ALREADY A MARK KEEPS IT IN BOTH STATES ----
   «وقتی عرض پنجره رو جمع کردم آیکون روی دکمه خواندن صوتی درست نشون داده میشه …
   ولی اگه پنجره رو عریض تر بکنم … هم جای دکمه بهم میریزه و هم آیکون روش حذف
   میشه». The compact row hides every `.caption11`, and `.icon11` is the other
   half of that switch — `display:none` everywhere else. A control whose whole
   label is «🔊» or «۸۵٪» has only the one string, so it has to be exempt from
   the hiding rather than moved to the other side of the switch: moved, it
   vanished at exactly the widths where there was room for it.
   The rule is NOT scoped to `.bar11` or to the compact attribute: the same
   button is swept between the page's own action row and the pane head, and at
   narrow pane widths a second rule hides captions there too, so a scoped
   override won in one place and lost in the other — measured as a 25px button
   with nothing painted in it at a 400px pane. A control whose entire label is a
   mark shows that mark everywhere, which is one rule and no exceptions.
   The size is written too, because the row that hides these captions ALSO sets
   the button's own `font-size` to 0 — measured at a 400px pane: a 25px button
   whose caption computed to `display:none` and `font-size:0`, so restoring the
   display alone still painted nothing. `max(1em,14px)` keeps whatever size the
   row chose when it chose one and falls back to a readable mark when it chose
   zero; 14px sits between the row's 11px text and the 16px of `.icon11`, which
   is what these labels are.
   The selector is written twice on purpose. The compact row's own rule is
   `.reader-window[data-compact11=true] .bar11 .caption11` — three classes and an
   attribute, and `!important` on both sides means SPECIFICITY decides, so a
   plain `[data-ownglyph112] .caption11` loses to it inside the pane head while
   winning everywhere else. The second selector is the same rule written to
   outrank that one; the first still carries the rest of the page. */
[data-ownglyph112] .caption11,
.reader-window[data-compact11=true] .bar11 [data-ownglyph112] .caption11{
  display:inline!important;font-size:max(1em,14px)!important;line-height:1}

/* ---- 0.13.30 — THE STATE OF A TOGGLE IS A COLOUR, SO THE BUTTON CAN BE SHORTER ----
   Mehran, after a toolbar that had run out of room stripped itself to icons:
   «یک ایده هم داشتم برای اینکه دکمه کوچک تر بشه … بجای لغت فعال یا غیرفعال همان
   بازنویسی روان با رنگ سبز یا قرمز نشون داده بشه تا عرض دکمش رو بشه کمتر کرد».
   «غیرفعال» is ten pixels of type plus twelve of padding on a row that is short
   of width; a seven-pixel dot beside a caption that itself carries the colour
   says the same thing and gives the width back.
   Colour is never the ONLY signal: the accessible name and the tooltip both
   still spell out فعال / غیرفعال, and the dot is a second mark beside the
   caption's tint rather than a replacement for a word nobody else can read.
   `margin-inline-start` is reset because `.setting-state` in `release9.css`
   pushes the word to the far end of the button, which is right for a word and
   wrong for a dot that belongs beside its caption. */
.btn[data-state113] .setting-state.dot113{
  margin-inline-start:6px;padding:0;width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:0 0 auto;align-self:center;font-size:0!important}
.btn[data-state113=on] .setting-state.dot113{color:#22874a}
.btn[data-state113=off] .setting-state.dot113{color:#bc4444}
.btn[data-state113=on] .caption11{color:#1c6f3d}
.btn[data-state113=off] .caption11{color:#a23e3e}
[data-theme=dark] .btn[data-state113=on] .setting-state.dot113,
[data-theme=dark] .btn[data-state113=on] .caption11{color:#87d79d}
[data-theme=dark] .btn[data-state113=off] .setting-state.dot113,
[data-theme=dark] .btn[data-state113=off] .caption11{color:#ffa09a}
/* In the compact row every caption is hidden, so the dot is all that is left of
   the state — it stays, because an icon-only toggle with no state at all is
   worse than the word it replaced. */
.reader-window[data-compact11=true] .bar11 .btn[data-state113] .setting-state.dot113{
  display:inline-block!important;margin-inline-start:4px}
/* 0.14.4 — a full-size bar button whose caption cannot fit even when widened shows its icon; its
   name stays in the tooltip (release11.js fitCaptions112) */
.bar11 .caption-off114 .caption11{display:none!important}.bar11 .caption-off114 .icon11{display:inline!important}
/* 0.14.4 (owner: a long album made the browser slow) — a card far from the screen is not laid out or
   painted until it comes near; its last size is kept so the scroll bar does not jump */
.album11:not([data-layout139=list]) .album-page11{content-visibility:auto;contain-intrinsic-size:auto 300px}
/* 0.14.5 — album thumbnails are not fitted label by label (see `album` in release11.js: the desk's
   fit, run on every card, was what froze the browser). A label a few pixels tall only has to sit in
   its box: small type, centred, clipped to the box. */
.album-preview11 .image-label{overflow:hidden!important;display:flex!important;align-items:center;justify-content:center;text-align:center;font-size:.62em!important;line-height:1.1!important;white-space:normal}
.album11[data-layout139=list] .album-page11{min-height:0!important}
/* 0.18.13 — the administrator's user list: filters in a grid that folds to one column on a phone */
.user-filters01813{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;margin-bottom:8px}
.user-filters01813 label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.user-filters01813 input,.user-filters01813 select{min-width:0;width:100%;min-height:38px}
.user-row01813{flex-wrap:wrap}
.user-who01813{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;min-width:0;flex:1 1 260px}
.user-who01813 bdi{overflow-wrap:anywhere}
.user-tags01813{display:flex;flex-wrap:wrap;gap:6px}
.user-tags01813:empty{display:none}
#userPager01813:empty{display:none}
/* 0.18.14 — the user form's «سقف ساعتی» and «تعلیق حساب» boxes; they fold to one column on a phone */
.account-box01814{margin:0 0 14px;min-width:0}
.account-box01814 .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.account-box01814 input,.account-box01814 select{min-width:0;width:100%}
.account-box01814 .actions{flex-wrap:wrap}
.user-tags01813 .badge{white-space:normal;overflow-wrap:anywhere}