@font-face{font-family:Vazirmatn;src:url('vendor/Vazirmatn.woff2') format('woff2');font-display:swap}
:root{color-scheme:dark;--bg:#121311;--card:#22231f;--surface:#2b2c25;--input:#181a17;--line:#665a40;--text:#f2eee5;--muted:#c8bfad;--gold:#e4c785;--gold2:#c5a15b;--green:#82dba8;--green-glow:#7ff0b2;--red:#ffaaa3;--shadow:0 12px 28px #00000024}
:root[data-theme=light]{color-scheme:light;--bg:#f8f5ee;--card:#fffefb;--surface:#f7efd9;--input:#fffefa;--line:#dfd3b9;--text:#26251f;--muted:#746952;--gold:#85601c;--gold2:#bd9140;--green:#1d7545;--green-glow:#3fc27d;--red:#b0392d;--shadow:0 8px 25px #a47b1910}
/* 0.11.20 — how tall the top bar is, stated ONCE. Reported: «وقتی سایت رو در حالت تم روشن اسکرول میکنم این قسمت خاکستری میاد». Three files each had their own answer — 72px here, 58px in the wide-screen rule, 48px for the reading route in upgrade.css — but only the BAR ever shrank; the room reserved for it by .layout and the offset the sidebar sticks at stayed at the larger figure. On the reader that left a 10px band the bar does not reach, which the page can scroll into, and the bar is glass (backdrop-filter) so the content passing behind that band is smeared into a grey seam along the top edge. Deriving both from one variable makes the reserve equal the bar by construction. */
:root{--topbar-h:48px}   /* 0.13.2 — ONE bar, every route. See the note below. */
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 95% 0,#b5903d0d,transparent 48%),var(--bg);color:var(--text);font:16px/1.8 Vazirmatn,Tahoma,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}a{color:var(--gold);text-decoration:none}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1{font-size:30px;line-height:1.5;margin-bottom:6px}h2{font-size:20px;margin-bottom:18px}h3{font-size:17px}p{margin-bottom:16px}.muted,.help{color:var(--muted)}.help{font-size:14px;line-height:1.9}.eyebrow{font-size:13px;color:var(--gold);margin-bottom:6px}.icon{width:21px;height:21px;display:inline-block;flex:none;vertical-align:middle}/* 0.11.20 — the header is sticky, so everything that scrolls has to pass
   UNDER it. It did not: «این نوار میره توی هدر … روی دکمه خروج رو تا نیمه
   میگیره». The reading tools row carries `z-index:25` (it needs a stacking
   context of its own, so its menus open above the panes) and the header only
   carried 20 — so as the row scrolled up it was PAINTED OVER the header, half
   covering «خروج», and the two different backgrounds met in a grey seam. It is
   not that the header stopped sticking; it is that it stopped being on top.
   32 is above the tools row (25) and its open menus (30), and below the
   repositioned pop-ups (240) and the toast (100), which are meant to float
   over everything. */
.topbar{height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:#1d1f1b;border-bottom:1px solid #75613d;position:sticky;top:0;z-index:32;gap:16px}.brand{display:flex;gap:12px;align-items:center}.brand-mark{height:38px;width:38px;border:1px solid #b58d3d;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#29271f,#6a5225);color:#f4d995}.brand strong{font-size:18px;color:#f2eee5}/* kept: other places still use it */.brand small{display:block;color:#c8bfad;font-size:12px;line-height:1.3}.top-actions{display:flex;align-items:center;gap:10px}.layout{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100vh - var(--topbar-h))}.sidebar{padding:25px 14px;background:linear-gradient(180deg,#1b1c18,#131512);border-inline-end:1px solid #75613d;display:flex;flex-direction:column;position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h))}.nav-label{font-size:12px;color:#a79a7b;padding:0 12px;margin:6px 0 12px}.sidebar nav{display:grid;gap:8px}.sidebar a{display:flex;align-items:center;gap:11px;border-radius:9px;padding:11px 12px;color:#c6c1b5;font-size:14px;transition:.2s}.sidebar a.active{background:linear-gradient(110deg,#cba4532c,#cba4530c);box-shadow:inset -3px 0 #c6a15b;color:#f0d79d}.sidebar a:hover{background:#bda05e16;color:#f0d79d}.sidebar-foot{margin-top:auto;padding:18px 12px 0;border-top:1px solid #514731;color:#b0a17e;font-size:13px}.sidebar-foot b{display:block;color:#e4c785;font-weight:500}.content{padding:30px;max-width:1500px;width:100%;min-width:0}.page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.page-head p{margin:0;color:var(--muted);font-size:15px}.card,.stat{background:linear-gradient(150deg,#bfa3610b,transparent 45%),var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.card{padding:24px;margin-bottom:22px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:24px}.stat{border-top:2px solid var(--gold2);padding:18px 20px}.stat span{font-size:14px;color:var(--muted)}.stat strong{display:block;font-size:30px;line-height:1.6}.stat .icon{float:left;color:var(--gold);width:23px;height:23px}.grid2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);gap:22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #948362;border-radius:9px;min-height:42px;padding:9px 15px;background:var(--surface);color:var(--text);font-size:14px;font-weight:500;transition:background .2s,border-color .2s,box-shadow .2s;white-space:nowrap}.btn:hover{border-color:var(--gold2);box-shadow:0 5px 18px #c29b462a;color:var(--gold)}.btn.gold{background:linear-gradient(125deg,#e7ca83,#b98e3d);color:#201b0e;border-color:#d0ad5e}.btn.gold:hover{background:linear-gradient(125deg,#f2d89a,#cda54d)}.btn:disabled{opacity:.5;cursor:wait}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.badge{display:inline-block;padding:3px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;color:var(--muted);background:var(--surface)}.badge.success{color:var(--green);border-color:#42865e}.success{color:var(--green)}.danger{color:var(--red)}.drop{border:1px dashed var(--gold2);border-radius:12px;background:#b58d3d08;padding:30px 20px;text-align:center}.drop.over{background:#b58d3d30}.drop .upload-symbol{color:var(--gold);margin-bottom:14px}.drop .upload-symbol .icon{width:34px;height:34px}.drop h3{margin-bottom:8px}.drop p{font-size:14px;color:var(--muted);margin-bottom:18px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.section-head h2{margin:0}.empty{text-align:center;color:var(--muted);padding:32px 16px}.empty .icon{width:36px;height:36px;color:var(--gold);margin-bottom:12px}.empty p{margin-bottom:15px}.step{display:flex;gap:13px;margin:18px 0}.step-number{flex:none;width:29px;height:29px;border:1px solid var(--gold2);border-radius:7px;color:var(--gold);display:grid;place-items:center;font-size:14px}.step p{margin:2px 0;color:var(--muted);font-size:14px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;text-align:right;white-space:nowrap}th{background:var(--surface);color:var(--muted);font-weight:500}th,td{padding:14px 16px;font-size:14px;border-bottom:1px solid var(--line)}tr:last-child td{border-bottom:0}td.name{white-space:normal;min-width:190px;max-width:360px;overflow-wrap:anywhere}tr:hover td{background:#b58d3d06}progress{width:90px;height:6px;accent-color:var(--gold2);vertical-align:middle}.field{display:block;margin-bottom:20px}.field>span{display:block;color:var(--muted);font-size:14px;margin-bottom:7px}input:not([type=checkbox]),select,textarea{width:100%;border:1px solid #948362;border-radius:9px;background:var(--input);color:var(--text);padding:10px 12px;min-height:44px;font-size:15px}input[type=checkbox]{accent-color:var(--gold2);width:18px;height:18px}textarea{resize:vertical;min-height:120px}.ltr{direction:ltr;unicode-bidi:isolate;text-align:left}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.form-grid .full{grid-column:1/-1}.check{display:flex;gap:10px;align-items:center;margin:15px 0}.notice{border:1px solid #b58d3d70;border-radius:10px;background:#a67c2012;color:var(--gold);padding:13px 16px;font-size:14px;margin-bottom:20px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.page-picker{display:flex;gap:8px;align-items:center}.page-picker input{width:70px;text-align:center}.reader-window{border:1px solid var(--line);border-radius:14px;margin-bottom:24px;overflow:hidden;background:var(--card)}.window-head{padding:14px 20px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.window-head h2{margin:0;font-size:16px}.source-viewport{overflow:auto;max-height:650px;background:#10110f;padding:24px;direction:ltr;text-align:center}.source-viewport img{display:block;margin:auto;width:100%;max-width:820px;background:#fff;box-shadow:0 8px 30px #0005}.paper-wrap{padding:30px 20px;background:#191b17;max-height:850px;overflow:auto}.paper{max-width:820px;min-height:230px;margin:auto;background:#fffefa;color:#24231f;border-radius:3px;padding:clamp(20px,4vw,55px);font-size:18px;line-height:2.2;direction:rtl;text-align:right}.paper p{white-space:pre-wrap;margin-bottom:20px;overflow-wrap:anywhere}.paper h2{font-size:1.3em;line-height:1.9;margin-top:24px;color:#3d321b}.paper figure{margin:24px 0}.paper figure img{display:block;max-width:100%;height:auto;margin:auto}.paper .formula{direction:ltr;unicode-bidi:isolate;text-align:center}.paper .formula img{max-height:180px;object-fit:contain}.paper figcaption{font-size:.88em;color:#65583c;direction:rtl;text-align:right;margin-top:10px}.paper .katex{display:inline-block;direction:ltr;unicode-bidi:isolate;text-align:left}.paper .katex-display{direction:ltr;unicode-bidi:isolate;overflow-x:auto;overflow-y:hidden}.paper .caption,.paper .footnote{font-size:.9em;color:#64583f}.paper .labels{font-size:.85em;line-height:1.9;direction:rtl;text-align:right;background:#f7f2e6;padding:12px 30px;border-radius:6px}.paper .warning{font-size:14px;background:#fff2d4;color:#78561a;padding:12px}.paper .empty{color:#6b6251}.paper .empty p{white-space:normal}.paper .btn{color:#302719;background:#f2e7c9;border-color:#bba26c}.paper .btn.gold{background:linear-gradient(125deg,#e7ca83,#b98e3d)}.reader-title{overflow-wrap:anywhere}.busy{display:inline-block;width:17px;height:17px;border:2px solid currentColor;border-left-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toast{position:fixed;bottom:24px;left:24px;max-width:min(460px,calc(100vw - 48px));z-index:100;background:var(--card);border:1px solid var(--gold2);border-radius:12px;box-shadow:0 15px 45px #0004;padding:14px 20px;display:none}.auth-shell{max-width:960px;margin:8vh auto;padding:24px}.auth-card{display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow)}.auth-brand{padding:50px 38px;background:radial-gradient(ellipse at top right,#a67c2033,transparent 65%),#12120f;display:flex;flex-direction:column;justify-content:center;color:#f5efdf}.auth-brand .brand-mark{width:62px;height:62px;margin-bottom:30px}.auth-brand h1{font-size:38px}.auth-brand p{color:#beb59f}.auth-form{padding:48px 36px;align-self:center}.auth-form .btn{width:100%}.auth-form h2{font-size:26px}.mobile-toggle{display:none}details{border-top:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-weight:500;color:var(--gold)}details p{margin:15px 0 0;color:var(--muted)}dialog{max-width:480px;width:calc(100% - 32px);padding:28px;border:1px solid var(--gold2);background:var(--card);color:var(--text);border-radius:16px}dialog::backdrop{background:#0009}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.initial{text-align:center;padding:20vh 20px}.search{max-width:320px}.note{font-size:14px;color:var(--muted)}.connection{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.connection:last-child{border:0}.connection small{display:block;color:var(--muted)}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.content{padding:24px}.layout{grid-template-columns:210px minmax(0,1fr)}}
@media(max-width:760px){.layout{display:block}.sidebar{display:none;position:fixed;right:0;top:var(--topbar-h);width:235px;height:calc(100vh - var(--topbar-h));z-index:30;box-shadow:-30px 0 80px #0009}.sidebar.open{display:flex}.mobile-toggle{display:inline-flex}.topbar{padding:0 14px}.top-actions .logout-label{display:none}.brand small{display:none}.content{padding:18px 14px}.page-head{align-items:flex-start;flex-wrap:wrap;gap:12px}h1{font-size:26px}.card{padding:20px}.stats{gap:10px}.stat{padding:15px}.stat strong{font-size:26px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.source-viewport{padding:12px;max-height:460px}.paper-wrap{padding:14px 8px}.auth-card{grid-template-columns:1fr}.auth-brand{padding:24px}.auth-brand .brand-mark{margin-bottom:14px;width:44px;height:44px}.auth-brand h1{font-size:28px}.auth-brand p{display:none}.auth-form{padding:28px}.auth-shell{margin:20px auto;padding:14px}.toolbar .actions{gap:6px}.window-head{padding:12px}.window-head .btn{padding:7px 10px}.page-picker{flex-wrap:wrap}.top-actions{gap:6px}.top-actions .btn{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.busy{animation:none}}

/* v0.2 shared math and inserted note pages */
.math-inline{display:inline-block;direction:ltr;unicode-bidi:isolate;text-align:left}.math-block{display:block;direction:ltr;unicode-bidi:isolate;text-align:left;overflow-x:auto;padding:14px 0;max-width:100%}.math-block .katex-display{text-align:left;margin:0}.math-fallback{white-space:pre-wrap;overflow-wrap:anywhere;font-family:monospace}.math-warning{font-size:14px!important;color:#805712;background:#fff1ce;border:1px solid #bd9140;padding:12px}.question-text{white-space:pre-wrap;overflow-wrap:anywhere;margin-bottom:14px}.paper pre{overflow:auto;direction:ltr;text-align:left;unicode-bidi:isolate;font:15px/1.8 monospace;background:#f3efe4;padding:18px}.sidebar{overflow-y:auto}.sidebar-foot{padding-top:12px;margin-top:20px}.sidebar a{padding:9px 12px}.paper .math-block .katex{white-space:nowrap}
/* v0.3 library and adjustable reading desk */
@font-face{font-family:NotoNaskhArabic;src:url('vendor/NotoNaskhArabic.ttf') format('truetype');font-display:swap}
.mobile-toggle{display:inline-flex}.sidebar-collapsed .layout{grid-template-columns:minmax(0,1fr)}.sidebar-collapsed .sidebar{display:none}.content{max-width:none}.bookshelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:28px}.book-card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 16px 24px #0003;border-bottom:5px solid var(--gold2)}.cover{border:0;border-left:7px solid #8e743f;border-right:3px solid #dac795;padding:0;display:block;width:calc(100% - 40px);margin:20px auto 0;aspect-ratio:2/3;background:#fff;box-shadow:5px 8px 16px #0005;overflow:hidden;border-radius:2px 7px 7px 2px}.cover img{width:100%;height:100%;object-fit:cover;object-position:top}.book-details{padding:18px}.book-details h2{font-size:17px;line-height:1.7;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.book-details p{font-size:14px;color:var(--muted);margin-bottom:8px}.book-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:48px}.book-details small{display:block;color:var(--muted);font-size:13px}.book-details progress{width:100%}.book-details .actions{margin-top:15px;justify-content:space-between}.library-filters{display:flex;gap:14px}.library-filters input{flex:2}.library-filters select{flex:1}#readingPanes.side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;direction:ltr}#readingPanes.side>.reader-window{direction:rtl;min-width:0}#readingPanes.side .source-viewport,#readingPanes.side .paper-wrap{height:calc(100vh - 290px);min-height:400px;max-height:none}.pane-nav,.zoom-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface)}.pane-nav input{width:75px!important}.zoom-bar .btn,.pane-nav .btn{padding:6px 9px;min-height:35px}.zoom-percent{min-width:48px;text-align:center;font-size:13px}.source-viewport,.paper-wrap{height:680px;max-height:none;overflow:auto;direction:ltr;padding:20px}.paper{direction:rtl}.range-item{padding:18px 0;border-bottom:1px solid var(--line)}.range-item progress{width:100%}#extraDialog{max-width:700px;max-height:90vh;overflow:auto}#readingLayout{width:auto;margin-inline-start:8px}.paper .empty,.paper .empty p{color:var(--paper-text)}
@media(max-width:850px){#readingPanes.side{grid-template-columns:1fr}.library-filters{flex-wrap:wrap}.bookshelf{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.sidebar-collapsed .sidebar.open{display:flex}}
/* v4: compact, aligned controls and a larger reading surface. */
*{scrollbar-width:thin;scrollbar-color:#b89549 #22241f}*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-thumb{background:#b89549;border-radius:5px}*::-webkit-scrollbar-track{background:#22241f}[data-theme=light] *{scrollbar-color:#a47a2c #eee8dc}.btn{min-height:36px;padding:6px 12px;font-size:14px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.actions{align-items:center;gap:8px}.field input,.field select{min-height:38px;padding:7px 10px}.card{padding:20px}.page-head{margin-bottom:16px}.page-head .eyebrow{display:none}:root{--topbar-h:48px}.topbar{min-height:var(--topbar-h);height:var(--topbar-h);padding-block:0}.sidebar nav details{margin-top:12px}.sidebar nav summary{padding:10px;cursor:pointer;color:var(--gold)}.sidebar nav details a{padding-inline-start:28px}.cover{padding:10px 10px 10px 20px!important}.cover img{object-fit:contain!important;max-height:100%;width:100%;background:#fff}.book-card{animation:card-enter .25s ease-out;transition:transform .2s ease,box-shadow .2s ease}.book-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px #0002}.reading .content{padding:10px 14px}.reading .page-head{margin:0 0 6px}.reading .page-head h1{font-size:18px}.reading .page-head p{margin:0;font-size:14px}.reading .card:has(#readingLayout){padding:7px 10px;margin-bottom:6px}.reading-tools{margin:5px 0}.compact-head{padding:6px 10px!important;min-height:40px}.compact-head h2{font-size:15px}.pane-nav{display:flex;align-items:center;flex-wrap:nowrap;gap:5px;padding:5px 8px!important;overflow-x:auto}.pane-nav input{width:54px!important;min-height:34px;height:34px;padding:4px;text-align:center}.pane-nav .btn{padding:4px 8px;min-height:32px}.zoom-percent{min-width:40px;font-size:13px}.reading #readingPanes.side{display:grid!important;direction:ltr;grid-template-columns:minmax(0,var(--source-ratio,50%)) 8px minmax(0,1fr);gap:0;align-items:stretch}.reading #readingPanes .reader-window{min-width:0;margin:0}.reading #readingPanes.side .source-viewport,.reading #readingPanes.side .paper-wrap{height:calc(100dvh - 245px);min-height:280px;padding:8px}.reading #readingPanes.stacked .source-viewport,.reading #readingPanes.stacked .paper-wrap{height:65vh;min-height:280px;padding:8px}.paper-wrap{direction:ltr}.paper-wrap>.paper{direction:rtl;flex-shrink:0;padding:24px;box-sizing:border-box}.source-viewport{direction:ltr}#splitter{cursor:col-resize;touch-action:none;background:linear-gradient(90deg,transparent,#b8954955,transparent);outline-offset:-2px}#readingPanes.stacked #splitter{display:none}.pan-enabled{cursor:grab;touch-action:none}.pan-enabled.panning{cursor:grabbing;user-select:none}.collapsed-notes{margin-top:8px;padding:10px!important}.collapsed-notes h2{font-size:15px}.focus-mode .topbar,.focus-mode .sidebar,.focus-mode .page-head,.focus-mode #main>.card:has(#readingLayout){display:none}.focus-mode .layout{display:block}.focus-mode .content{margin:0!important;max-width:none}.focus-mode #readingPanes.side .source-viewport,.focus-mode #readingPanes.side .paper-wrap{height:calc(100dvh - 135px)}.quick-panel{position:fixed;right:18px;bottom:18px;width:min(540px,94vw);max-height:85vh;overflow:auto;background:var(--panel,#24251f);border:1px solid var(--gold,#b89549);padding:18px;border-radius:12px;box-shadow:0 16px 60px #0008;z-index:100;direction:rtl}.quick-panel textarea{width:100%;min-height:90px}.quick-panel .paper{padding:15px;font-size:17px}.selection-tools{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel,#24251f);border:1px solid var(--gold);padding:8px;border-radius:10px;z-index:90;max-width:95vw;flex-wrap:wrap}dialog{max-height:90vh;overflow:auto;width:min(800px,94vw)}details>summary{padding:8px 0;cursor:pointer}#savedList .connection{padding:8px}.reading-tools .btn{font-size:13px}.form-grid{align-items:start}@keyframes card-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:900px){.reading #readingPanes.side{grid-template-columns:minmax(0,1fr)!important;gap:10px}.reading #readingPanes.side #splitter{display:none}.reading-tools{flex-wrap:wrap}.quick-panel{right:3vw}.form-grid{grid-template-columns:1fr}.top-actions .badge{font-size:12px}}
.reading .content{max-width:none}:root{--topbar-h:48px}.sidebar{overflow:auto}.tools-more{position:relative}.tools-more summary{border:1px solid var(--line);border-radius:8px;padding:5px 12px;font-size:14px}.tools-more>div{position:absolute;top:100%;inset-inline-end:0;min-width:220px;padding:10px;display:grid;gap:6px;background:var(--card);border:1px solid var(--gold);z-index:30;box-shadow:0 8px 24px #0005}.reference-crop{display:block;margin:10px auto;max-width:100%;height:auto}.study-highlight{background:#d7af4930;border-inline-start:3px solid #c59b3d;padding-inline-start:6px}
#readingPanes.translation>.reader-window:has(#source),#readingPanes.translation>#splitter{display:none}#readingPanes.translation .paper-wrap{height:calc(100dvh - 235px);min-height:300px;padding:8px}#readingPanes.translation .reader-window{max-width:100%;margin:auto}
/* Consistent compact spacing: controls remain distinct at every screen width. */
:root{--control-gap:8px;--field-gap:14px}
.actions,.top-actions,.toolbar,.library-filters{gap:var(--control-gap);align-items:center}
.actions{display:flex;flex-wrap:wrap;row-gap:8px}
.actions>.btn,.actions>button{margin:0;flex-shrink:0}
.form-grid{column-gap:16px;row-gap:var(--field-gap);align-items:start}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0}
.field>input,.field>select,.field>textarea{width:100%;min-width:0;box-sizing:border-box}
form>.field+ .field{margin-top:var(--field-gap)}
form>.actions,form>.btn,form>button{margin-top:12px}
form>label.check,form>label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px;margin-block:10px}
input[type=checkbox]{flex:none;margin:0 4px 0 0}
.connection{gap:12px;align-items:center;flex-wrap:wrap}
.connection>.actions{margin-inline-start:auto}
.library-filters{display:flex;flex-wrap:wrap;row-gap:10px}
.library-filters>input,.library-filters>select{min-width:130px;flex:1 1 160px}
.library-filters>.btn{flex:0 0 auto}
.pane-nav{gap:6px!important;align-items:center!important;padding-block:6px!important}
.pane-nav>*{flex-shrink:0}.pane-nav .btn{margin:0!important}
.quick-panel textarea,dialog textarea{box-sizing:border-box;max-width:100%;margin-block:8px}
.quick-panel textarea+button,dialog textarea+button{margin-top:4px}
.export-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-block:14px}
.export-choices>section{padding:14px;border:1px solid var(--line);border-radius:10px;min-width:0;display:flex;flex-direction:column;gap:8px}
.export-choices h3,.export-choices p{margin:0}.export-choices .btn{margin-top:auto;white-space:normal}
#exportProgress progress{width:100%;height:10px;margin-block:10px}
@media(max-width:650px){.form-grid,.export-choices{grid-template-columns:minmax(0,1fr)}.connection>.actions{margin-inline-start:0}.field>input,.field>select{min-height:36px}.actions .btn{white-space:normal}}

.inline-reference{display:inline;padding:0 2px;margin:0;border:0;border-bottom:1px dotted currentColor;background:none;color:var(--gold,#a77b24);font:inherit;cursor:pointer;line-height:inherit}.highlight-entry{gap:12px}.highlight-entry>span{min-width:0;overflow-wrap:anywhere}.highlight-entry>button{flex-shrink:0}

.quality-menu{position:relative;font-size:13px}.quality-menu summary{cursor:pointer;padding:6px 10px;border:1px solid var(--line);border-radius:8px}.quality-menu[open]>.actions{position:absolute;z-index:20;inset-inline-end:0;top:100%;min-width:240px;padding:10px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 25px #0003;border-radius:10px;align-items:stretch}

[hidden]{display:none!important}
.reading-tools{margin:4px 0!important}.reading .card:has(#readingLayout){margin:4px 0!important}
.quick-panel,.selection-tools{background:var(--card)}
@media(max-width:900px){.layout,.sidebar-collapsed .layout{display:block}.sidebar{display:none;position:fixed;right:0;width:220px;z-index:60}.sidebar.open,.sidebar-collapsed .sidebar.open{display:flex}.content{width:100%}.pane-nav{flex-wrap:wrap!important;overflow:visible}.pane-nav input{width:50px!important}.reading-tools{gap:6px}.reading #readingPanes .reader-window{border-radius:10px}}

.attached-note-heading{border-bottom:1px solid var(--line);margin-bottom:1em;padding-bottom:.6em}.attached-note-heading p{font-size:.8em;opacity:.8}

/* Library cards: complete cover, separate spine and compact reading metadata. */
.bookshelf{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:22px;align-items:stretch}
.book-card.library-book{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:15px;background:var(--card);box-shadow:0 3px 14px #0000000c;overflow:hidden;animation-delay:var(--card-delay,0ms);animation-fill-mode:backwards;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.library-book:hover,.library-book:focus-within{transform:translateY(-4px);border-color:var(--gold2);box-shadow:0 14px 28px #0000001c}
.book-cover-area{position:relative;padding:13px 16px 22px;background:radial-gradient(ellipse at 50% 70%,#c6a15b20,transparent 72%),linear-gradient(145deg,#c6a15b08,#c6a15b03);border-bottom:1px solid var(--line);perspective:850px}
.book-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px;min-height:23px;font-size:11px;line-height:1.6;color:var(--muted)}
.book-category{max-width:75%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line);padding:2px 8px;border-radius:5px;background:var(--card)}
.book-format{font:10px/1.5 sans-serif;letter-spacing:1px;opacity:.85}
.library-book .cover{display:block;width:fit-content;max-width:calc(100% - 24px);height:190px;aspect-ratio:auto;margin:0 auto;padding:0!important;border:0;border-radius:2px 5px 5px 2px;background:transparent;box-shadow:none;overflow:visible;position:relative;transform:rotateY(-7deg);transition:transform .26s ease;isolation:isolate}
.library-book .cover::before{content:"";position:absolute;left:-5px;top:0;bottom:0;width:5px;border-radius:2px 0 0 2px;background:linear-gradient(90deg,#66502d,#c4a365);box-shadow:-3px 4px 6px #0002;z-index:-1}
.library-book .cover::after{content:"";position:absolute;top:3px;bottom:2px;right:-3px;width:3px;background:repeating-linear-gradient(0deg,#ece7dd 0 1px,#c9c3b6 1px 2px);border-radius:0 2px 2px 0;z-index:-1}
.library-book .cover img{display:block;max-width:100%;width:auto!important;height:190px;max-height:190px;object-fit:contain!important;object-position:center;background:transparent;border-radius:1px 4px 4px 1px;box-shadow:7px 10px 13px #0003}
.library-book:hover .cover,.library-book:focus-within .cover{transform:rotateY(-2deg) translateY(-2px)}
.library-book .book-details{display:flex;flex:1;flex-direction:column;padding:17px 17px 15px;gap:0}
.library-book .book-details h2{font-size:16px;font-weight:650;line-height:1.6;min-height:3.2em;margin:0 0 4px;text-align:start;unicode-bidi:plaintext;-webkit-line-clamp:2}
.library-book .book-author{font-size:12px;line-height:1.7;margin:0 0 10px;text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-book .book-description{font-size:12px;line-height:1.9;min-height:3.8em;margin:0 0 12px;color:var(--muted);-webkit-line-clamp:2}
.book-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-bottom:10px;font-size:10.5px;color:var(--muted)}
.book-meta>span:last-child{text-align:end}
.book-progress{display:grid;gap:7px;padding:11px 0;border-top:1px solid var(--line)}
.book-progress-row{display:grid;grid-template-columns:36px minmax(0,1fr) 62px;gap:8px;align-items:center;color:var(--muted);font-size:10.5px;line-height:1.4}
.library-book .book-progress-row progress{width:100%;height:4px;display:block;border:0;border-radius:8px;overflow:hidden;appearance:none;accent-color:var(--gold2);background:var(--line)}
.book-progress-row progress::-webkit-progress-bar{background:var(--line);border-radius:8px}
.book-progress-row progress::-webkit-progress-value{background:var(--gold2);border-radius:8px}
.book-progress-row progress::-moz-progress-bar{background:var(--gold2);border-radius:8px}
.reading-progress progress::-webkit-progress-value{background:var(--green)}
.reading-progress progress::-moz-progress-bar{background:var(--green)}
.book-progress-row .progress-value{color:var(--text);text-align:end;font-variant-numeric:tabular-nums;white-space:nowrap}
.progress-value>span{color:var(--muted);font-size:9px}
.library-book .book-actions{display:grid;grid-template-columns:minmax(0,1fr) 35px;gap:9px;margin-top:10px;padding-top:3px}
.library-book .book-actions .btn{width:100%;height:35px;min-height:35px;padding:5px 9px;font-size:12px;border-radius:7px}
.library-book .book-actions .btn:last-child{font-size:23px;line-height:1;padding:0;background:transparent;border-color:var(--line)}
.library-book .book-actions .icon{width:17px;height:17px}
:root[data-theme=dark] .library-book{box-shadow:0 4px 18px #0003}
:root[data-theme=dark] .library-book:hover{box-shadow:0 15px 30px #0005}
@media(prefers-reduced-motion:reduce){.library-book,.library-book .cover,.library-book:hover,.library-book:focus-within,.library-book:hover .cover,.library-book:focus-within .cover{animation:none!important;transition:none!important;transform:none!important}}

.book-analysis>p{line-height:1.9}.book-analysis .actions{margin:16px 0;gap:10px}.suggested-models{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px;margin:12px 0}.suggested-models>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;font-size:12px}.suggested-models bdi{overflow-wrap:anywhere}.book-analysis details{margin-top:14px}.book-analysis small{color:var(--muted)}

@media(min-width:901px){.layout{grid-template-columns:var(--sidebar-width,260px) minmax(0,1fr)}.sidebar-collapsed .layout{grid-template-columns:minmax(0,1fr)}.sidebar-resizer{position:fixed;top:var(--topbar-h);bottom:0;right:calc(var(--sidebar-width,260px) - 4px);width:8px;z-index:65;cursor:col-resize;touch-action:none;outline-offset:-2px}
/* 0.13.0 — and a belt to the braces: with no sidebar on the page there is
   nothing to resize, so the grip is not shown whatever left it behind. The
   login screen has no sidebar, which is where it was appearing. */
body:not(:has(.sidebar)) .sidebar-resizer{display:none!important;pointer-events:none}.sidebar-resizer::after{content:"";position:absolute;top:40%;height:44px;left:3px;width:2px;border-radius:3px;background:var(--gold2);opacity:.45}.sidebar-resizer:hover::after,.sidebar-resizer:focus::after{opacity:1}.sidebar-resizing,.sidebar-resizing *{cursor:col-resize!important;user-select:none!important}}
@media(max-width:900px){.sidebar-resizer{display:none}.sidebar{width:min(var(--sidebar-width,260px),85vw)}}

/* 0.6.0 economical mode: compact but separated controls. */
.economy-preview{margin-block:12px 18px}.economy-preview .suggested-models{margin-block:12px}.configured-models{margin-block:12px}.economy-preview[hidden],.configured-models[hidden]{display:none}

/* 0.6.2 book profile picker */
.profile-switcher{border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:22px;background:var(--surface)}
.profile-switcher h3{margin-bottom:8px}.profile-choice-row{display:flex;align-items:flex-end;gap:12px;margin-block:12px}.profile-choice-row .field{flex:1;min-width:0;margin:0}.profile-choice-row .btn{flex:none;min-height:42px}
#profileSaveFeedback:empty{display:none}#profileSaveFeedback{margin-block:12px}.profile-model-preview{margin-block:12px}.profile-switcher>.help:last-child{margin-bottom:0}.profile-editor{margin-top:18px}.profile-editor>.actions{margin-block:12px}
@media(max-width:600px){.profile-choice-row{flex-direction:column;align-items:stretch}.profile-choice-row .btn{align-self:flex-end}.profile-switcher{padding:12px}}
/* 0.7 compact study interface */
.btn{gap:6px;align-items:center;justify-content:center;vertical-align:middle;min-height:34px;line-height:1.4}
.actions{gap:8px;align-items:center;flex-wrap:wrap}
#bookOptions{display:flex;flex-direction:column;gap:12px}#bookOptions>.btn{align-self:flex-start;margin:0}.test-api-hint{font-size:11px;color:var(--muted);margin:0 0 8px}
.page-profile-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;border-bottom:1px solid var(--border);font-size:12px;background:var(--surface)}
.page-profile-bar .btn{font-size:11px;min-height:30px;padding:5px 8px}.page-choice-label{display:flex;gap:5px;align-items:center}.page-choice-label select{width:auto;max-width:170px;padding:4px 8px;font:inherit;min-height:30px}.model-status{max-width:280px}.page-profile-bar .help{margin:0}
.tools-more summary svg,.quick-export summary svg{width:15px;height:15px;vertical-align:middle}.quick-export{position:relative;font-size:12px}.quick-export>div{position:absolute;top:100%;left:0;z-index:20;display:flex;gap:6px;background:var(--card);padding:8px;border:1px solid var(--border);border-radius:8px}.quick-export summary{cursor:pointer;list-style:none;border:1px solid var(--border);padding:8px;border-radius:7px}
.paper-wrap.retranslating{position:relative}.paper-wrap.retranslating::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 15%,#e7c46a16 35%,#fff4 48%,#e7c46a20 58%,transparent 75%);background-size:250% 100%;animation:retranslation-shine 3.2s linear infinite;z-index:5}
@keyframes retranslation-shine{from{background-position:150% 0}to{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.paper-wrap.retranslating::after{animation:none;background:#caa75309;border-top:2px solid #caa753}}
.source-excerpt{white-space:pre-wrap;text-align:left}.source-preview{max-width:100%;display:block;margin:10px auto}.version-diff{max-height:250px;overflow:auto;padding:10px;border:1px solid var(--border)}.version-diff del{color:#a43232}.version-diff ins{color:#287344;text-decoration:none}.version-diff p{white-space:pre-wrap}
#extraDialog .paper{max-width:100%;box-sizing:border-box}.smart-color-setting{display:flex;gap:8px;align-items:center}.smart-color-setting input{width:auto}.smart-color-setting svg{width:18px}.search-hit{padding:10px;border-bottom:1px solid var(--border)}.search-hit p{max-height:150px;overflow:auto}.learning-card{margin-block:10px}
/* 0.13.25 — reported: «دکمه ویرایش مسیر چسبیده به اولین فهرستی که زیرش نشون
   داده میشه». A saved path rendered as a bare <article> with no rule of its
   own, so the edit button sat flush against the first step and one path ran
   into the next.
   `.learning-card` above is NOT this screen — it belongs to the flashcards in
   pro.js, which `browser_pro.py` waits on. The study path gets its own name. */
.learning-path10{margin-block:14px;border:1px solid var(--border);border-radius:12px;padding:12px}
.learning-head10{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-block-end:12px}
.learning-head10 h3{margin:0}
.learning-head10 .actions{display:flex;gap:8px;margin:0}
.learning-step10{display:grid;gap:2px;margin-block:10px}
.learning-step10 label{display:flex;align-items:center;gap:8px;margin:0}
.learning-step10 .btn{text-align:start}
.learning-source10,.learning-why10{opacity:.75;padding-inline-start:26px;text-align:start}
.learning-source10 bdi{unicode-bidi:isolate}#modelPrices{min-height:180px;text-align:left;font:13px/1.6 monospace}#proTermForm{display:grid;gap:10px}.term-page{width:auto!important}
@media(max-width:600px){.page-profile-bar{gap:5px}.page-profile-bar .model-status{max-width:100%;width:100%}#bookOptions>.btn{width:100%}.quick-export>div{left:0;right:auto}.reading-tools .btn{font-size:11px;padding:5px 7px}}
#pageProfileBar{border:1px solid var(--border);border-radius:9px;margin:0 0 6px;background:var(--card);min-height:34px;padding:4px 8px}
.pane-nav{gap:5px!important;padding:6px!important;flex-wrap:wrap!important}.pane-nav .btn{font-size:11px!important;min-height:29px!important;padding:4px 6px!important}.pane-nav .icon{width:14px;height:14px}.pane-nav input{width:48px!important;height:29px!important;padding:3px!important}.pane-nav .zoom-percent{font-size:10px}.pane-nav [data-action=zoomWidth],.pane-nav [data-action=zoomPage]{gap:3px}
/* Equal header baselines and compact dropdowns in the reader. */
.reading-tools>.tools-more,.reading-tools>.quality-menu,.quick-export{margin:0;padding:0;border:0}
.quick-export>summary{display:flex;align-items:center;gap:5px;min-height:34px;padding:5px 8px;border:1px solid var(--line)}
.reader-window>.compact-head{min-height:46px!important}
.quick-export>div{border-color:var(--line)}
:root[data-theme=dark] .btn:not(.gold){background:#2b2c25;color:#f2eee5}
@media(min-width:901px){.reading #readingPanes.side .source-viewport,.reading #readingPanes.side .paper-wrap{height:calc(100dvh - 330px);min-height:280px}.focus-mode #readingPanes.side .source-viewport,.focus-mode #readingPanes.side .paper-wrap{height:calc(100dvh - 190px)}}

/* 0.12.0 — the Bookylens mark, at the two places the app names itself.
   The top bar keeps its framed tile and the mark sits inside it; the sign-in
   page shows the full lockup, which already carries the word, so the heading
   beside it is left for a screen reader rather than printed twice. The art is
   gold on transparent and reads on both themes, so there is no second file. */
.brand-mark img{width:auto;height:74%;max-width:78%;object-fit:contain;display:block}
.auth-lockup150{width:150px;max-width:56%;height:auto;margin:0 auto 18px;display:block}
.sr-name150{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:640px){.auth-lockup150{width:118px;margin-bottom:12px}}

/* 0.12.0 — THE NAME IS THE ONE THAT WAS DRAWN, not a font imitating it.
   «اسم Bookylens که کنار لوگو نوشتی ترجیحا از همون فونت و شکل نمایشی لوگو با
   علامت بی نهایت برای دو تا oo نوشته بودی باشه … و در فاصله عمودی هم وسط
   قرارش بده وقتی هم دارک مود و حالت روشن میذاریم باید قابل تطبیق باشه».
   `wordmark.png` is that lettering, cut from the supplied artwork by
   `tools/make_brand150.py` and already trimmed to its ink, so centring it is
   exact rather than approximate. Its gold is the mark's own gold, which is
   why one file serves both themes; no filter is applied to it in either. */
.brand-name150{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.brand-text150{font-size:18px;color:#f2eee5;line-height:1.25}
.brand-text150[hidden],.brand-word150[hidden],.brand-word150-lit[hidden]{display:none}
/* 0.13.2 — «نوشته bookylens کاملا بزرگ بشه در کنار لوگو قرار بگیره و نوشته
   زیرش … حذف بشه که فضا بیشتر به نوشته لوگو اختصاص پیدا کنه». With the tagline
   out of the header the column holds one thing, so the name can have the room:
   19px → 27px, and ONE size in every header, which was the other half of the
   report — «فونت bookylens در همه بخش ها باید در هدر یکسان باشد». */
.brand-word150{height:27px;width:auto;display:block;object-fit:contain}
/* 0.13.0 — «اون نور سفید که روی علامت بی نهایت هست … به آرامی درحال حرکت
   باشه همیشه». The highlight is painted into the wordmark artwork, so it
   cannot move on its own. This lays a soft white glow OVER the image and
   walks it slowly back and forth across the «oo» — and masks it with the
   wordmark itself, so the glow only ever lands on the letterforms and never
   on the bar behind them. `screen` keeps it a highlight rather than a patch:
   it can only lighten, never cover.
   The image and this glow share one box, so nothing about the bar's layout
   changes; with the image missing the glow has nothing to mask and shows
   nothing at all. */
/* 0.13.2 — THE GLOW BLENDS WITH THE LETTERS, NOT WITH THE BAR.

   «وقتی تم روشن هست دیده نمیشه و فقط در حالت دارک مود دیده میشه».

   `mix-blend-mode:screen` blends with the backdrop of the nearest stacking
   context, which is `.topbar` — and the bar is `var(--glass)`, near-white in
   every light palette (`rgba(246,250,253,.62)` and friends). Screen towards
   white saturates, so the highlight washed out completely in the light theme
   while looking right in the dark one.

   `isolation:isolate` makes this element its own stacking context, so the
   glow's backdrop is ALWAYS the wordmark's own gold, whatever the bar is
   doing. One behaviour in both themes, and nothing about the bar can change
   it again. */
.brand-word150-lit{position:relative;display:block;line-height:0;isolation:isolate}
/* 0.13.1 — THE GLOW SLIDES WITH `background-position`, and there is only one
   implementation of it.
   It used to walk a registered custom property, `--glint`, with a fallback for
   browsers that cannot interpolate one. Both halves were wrong. The probe was
   a supports-test for the CSS Paint API, which is a different feature entirely
   — Firefox and Safari support `@property` and not `paint()`, so both took the
   fallback although neither needed it. And the
   fallback moved the layer with `translateX`, which moves the MASK with it:
   the mask is the wordmark, aligned to the box, so shifting it let the glow
   slide off the letters and onto the bar — the one thing the mask is there to
   prevent.
   `background-position` is animatable everywhere, needs no registration, and
   moves the gradient INSIDE a box that never moves, so the mask stays exactly
   over the lettering. One rule, no probe, no second effect to keep in step.
   (The gradient is 26% wide, so a position of p% puts its centre at
   13% + .74p; 0→28% is the same 13%→34% sweep across the «oo» as before.) */
.brand-word150-lit::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(ellipse closest-side,
    #ffffffcc 0%, #ffffff55 38%, transparent 72%);
  background-repeat:no-repeat;
  background-size:14% 150%;
  background-position:0% 50%;
  mix-blend-mode:screen;
  -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;
  animation:brand-glint150 7s ease-in-out infinite alternate}
/* 0.13.2 — AND IT TRAVELS ALONG THE ∞, which is where it was asked to be:
   «نور سفید که روی سمبل بی نهایت میوفته اشتباهه و روی خود سمبل بی
   نهایت نمیوفته».

   MEASURED, not guessed. Reading `brand150/wordmark.png` (1134×271) for the
   columns that carry ink in the top fifth — the ascenders — gives the «b»
   stem at 0–2.9% and the «k» at 29.8–37.8%, so the ∞ spans about 3%–30%.

   A gradient of width W at `background-position: p%` has its centre at
   p·(100−W)/100 + W/2. The old 26% wide, 0%→28% therefore swept the centre
   from 13% to 33.7% — and `ease-in-out alternate` DWELLS at both ends, so the
   light sat on the «b» at one end and on the «k» at the other, almost never
   on the ∞ itself. At 14% wide, 0%→19% puts the centre at 7%→23.3%: inside the ∞
   from end to end, measured — +132 to +172 of brightening on the ∞ and 0.0
   on the «b», in BOTH themes. */
@keyframes brand-glint150{from{background-position:0% 50%}to{background-position:19% 50%}}
@media(prefers-reduced-motion:reduce){.brand-word150-lit::after{animation:none}}
/* 0.13.3 — AND THE ∞ ON THE LOGIN SCREEN FLASHES TOO.
   «علامت بی نهایت در نوشته لوگو در صفحه ورود پورتال هم برق بزنه».

   The login screen shows `lockup.png`, which is the mark and the word
   stacked, not `wordmark.png`. So the sweep needs the same horizontal path
   and a DIFFERENT vertical one, and both were measured rather than guessed.

   Correlating `wordmark.png` (1134×271) against `lockup.png` (1134×1048)
   places the word at rows 777–1048 — the bottom 74.14%–100% — at the same
   horizontal scale. Reading the ascender columns inside that band gives the
   «b» stem at 0–2.82% and the «k» at 31.3–38.1%, so the ∞ spans about
   2.8%–29.4%: the same span as on the wordmark, which is why the horizontal
   half of the animation is shared unchanged.

   Vertically: a background 26% tall at `background-position-y:100%` sits
   exactly on rows 74%–100% — the word band and nothing above it. The light
   therefore never touches the mark, which is what «در نوشته لوگو» asks for.
   The wrapper carries the image's own size so the mask box and the picture
   are the same box; `mask-size:100% 100%` has no other way to line up. */
.brand-word150-lit.lockup153{width:150px;max-width:56%;margin:0 auto 18px}
.brand-word150-lit.lockup153>.auth-lockup150{width:100%;max-width:none;margin:0}
.brand-word150-lit.lockup153::after{background-size:14% 26%;
  background-position:0% 100%;animation-name:brand-glint153-lockup}
@keyframes brand-glint153-lockup{from{background-position:0% 100%}to{background-position:19% 100%}}
@media(max-width:640px){.brand-word150-lit.lockup153{width:118px;margin-bottom:12px}}

.sidebar-collapsed .brand-word150{display:none}
/* 0.13.2 — the narrow screen shrinks it a little, but it is still one step,
   not a second size that makes the bar feel different from page to page. */
@media(max-width:820px){.brand-word150{height:23px}}

/* 0.13.27 — پلیر خواندن صوتی: کوچک، ثابت، و هرگز روی متنی که می‌خواند نمی‌افتد.
   «با یک پلیر صوتی خیلی شیک و ظریف». پایین پنجره می‌نشیند، به اندازهٔ یک سطر
   بلند است، و بندی که در حال خواندن است فقط با یک نوار کنار متن مشخص می‌شود —
   نه با پس‌زمینهٔ رنگی که خواندن را سخت می‌کند. */
/* 0.13.30 — THE PLAYER'S SIX TOKENS, STATED ONCE.
   «حالت تیره را با متغیرهای CSS … نه رنگ‌های پراکنده». The player used to paint
   itself out of `--paper-bg`/`--paper-heading`, which are the SHEET's colours —
   so it was literally the same surface as the page it floats over, and in the
   dark theme the only thing separating the two was a 1px #a4854255 line. These
   six are the player's own, one set per theme, and every rule below reads them
   rather than naming a colour. `:root` is the dark theme because that is what
   this project boots into (`app.js`: `data-theme` defaults to «dark»), and
   `[data-theme=light]` is the override — the same shape `document.css` uses for
   the sheet, so there is one mechanism for both. */
:root{--player-bg:#23251f;--player-border:#6d5c3c;--player-text:#f2eee5;
  --player-muted:#c4b998;--player-accent:#e4c785;--player-shadow:0 10px 30px #00000059}
:root[data-theme=light]{--player-bg:#fffdf5;--player-border:#ddcda6;--player-text:#262419;
  --player-muted:#6b5c3d;--player-accent:#8a6318;--player-shadow:0 8px 26px #a47b1926}
.speech207{position:fixed;inset-inline:auto 18px;bottom:18px;z-index:60;display:flex;
  align-items:center;flex-wrap:nowrap;gap:8px;direction:ltr;
  max-width:min(560px,calc(100vw - 24px));padding:8px 10px;border-radius:14px;
  background:var(--player-bg);color:var(--player-text);
  border:1px solid var(--player-border);box-shadow:var(--player-shadow);font-size:13px;
  /* The container is drag surface, so panning has to be off on it — and ONLY
     on it: every control inside is a button, a select or an input, which
     `style.css` already gives `touch-action:manipulation`, so a tap on ▶ or on
     a dropdown keeps its own behaviour. Nothing in the player scrolls. */
  touch-action:none;cursor:grab;
  /* A drop can ease into the edge it snapped to; the MOVE never eases, which
     is the whole of «position transitions disabled while dragging». */
  transition:border-color .16s ease,box-shadow .16s ease}
.speech207.speech207-snap241{transition:transform .18s ease,border-color .16s ease,box-shadow .16s ease}
.speech207.speech207-drag241{transition:none;cursor:grabbing;user-select:none;-webkit-user-select:none;
  box-shadow:0 16px 38px #00000055;border-color:var(--player-accent)}
.speech207.speech207-drag241 *{cursor:grabbing!important}
/* The grip: the one piece of the player that is only ever a drag handle. */
.speech207-grip241{flex:none;align-self:stretch;display:grid;place-items:center;width:16px;
  font-size:13px;line-height:1;letter-spacing:-3px;text-indent:-3px;color:var(--player-muted);
  border-radius:8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  transition:color .15s ease,background .15s ease}
.speech207-grip241:hover{color:var(--player-accent);background:#a4854222}
/* ONE design language: the play button, the three dropdowns and ✕ are the same
   height and the same radius, so the row reads as one control strip. 40px is
   also the smallest comfortable touch target, which is why it is the floor. */
.speech207 .btn{flex:none;min-height:40px;min-width:40px;padding:6px 10px;border-radius:10px;
  font-size:14px;transition:background .15s ease,border-color .15s ease,color .15s ease}
/* THE `:root` IS LOAD-BEARING, and it is measured rather than decorative:
   `:root[data-theme=dark] .btn:not(.gold)` earlier in this file is four class
   selectors' worth of specificity, so a plain `.speech207 .btn` lost to it and
   ✕ and − came out as flat grey #2b2c25 tiles on a warm strip. This matches it
   and wins on order. */
/* And the second selector is `[data-palette]` because `release11.css` re-skins
   every button in the app per palette at exactly this weight — measured: with a
   palette on, ✕ and − came back as #303136 tiles. The player is ONE warm
   surface, in both themes and under every palette, which is what «لهجهٔ طلایی
   گرم … یک زبان طراحی» asks for; see the note in the report about what a
   palette-aware version of these tokens would look like. */
:root .speech207 .btn:not(.gold),
:root[data-palette] .speech207 .btn:not(.gold){background:transparent;border-color:transparent;
  color:var(--player-text)}
:root .speech207 .btn:not(.gold):hover,
:root[data-palette] .speech207 .btn:not(.gold):hover{background:#a4854224;
  border-color:var(--player-border);color:var(--player-accent);box-shadow:none}
.speech207 .btn:focus-visible{outline:2px solid var(--player-accent);outline-offset:2px}
/* ▶ IS THE MOST PROMINENT THING ON THE PLAYER — 42px and the one filled
   control. The fill itself comes from `.btn.gold`, which is this project's own
   primary button, so it follows the palette instead of carrying a private copy
   of the gradient. */
.speech207 .speech207-play{min-width:42px;min-height:42px;font-size:15px;position:relative}
:root .speech207 .speech207-play[data-state241=empty]{opacity:.45;background:none;
  color:var(--player-muted);border-color:var(--player-border)}
/* Waiting is a ring round the glyph, not a replacement for it: the glyph is
   what says whether a press starts or stops. */
.speech207 .speech207-play[data-state241=loading]::after{content:'';position:absolute;inset:-4px;
  border-radius:12px;border:2px solid #201b0e55;border-top-color:#201b0e;animation:spin 1s linear infinite;
  pointer-events:none}
.speech207-body{flex:1;min-width:0}
.speech207-line{height:3px;border-radius:2px;background:#a4854233;overflow:hidden}
.speech207-line>i{display:block;height:100%;width:0;background:var(--player-accent);transition:width .2s linear}
/* 0.18.13 — «seek»: the line IS the slider. A transparent range input lies over the
   3px line with a 20px tall hit area, so the strip looks as it did and the line can be
   pressed, dragged (mouse and touch) and moved with the arrow keys; the time sits at its
   end. Left to right in every language (the strip's own `direction:ltr`). */
.speech207-seekrow{display:flex;align-items:center;gap:8px;min-width:0}
.speech207-seekrow .speech207-line{position:relative;flex:1;min-width:40px;overflow:visible}
.speech207-seekrow .speech207-line>i{border-radius:2px}
.speech207-seek{position:absolute;inset-inline:0;top:50%;transform:translateY(-50%);width:100%;
  height:20px;margin:0;padding:0;opacity:0;cursor:pointer;touch-action:none}
.speech207-seek:disabled{cursor:default;pointer-events:none}
.speech207-line:focus-within{outline:2px solid var(--player-accent);outline-offset:5px}
.speech207-time{flex:none;font-size:11px;line-height:1;color:var(--player-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.speech207-time:empty{display:none}
.speech207 .speech207-redo{font-size:15px;opacity:.8}
.speech207 .speech207-redo:hover{opacity:1}
.speech207 .speech207-redo[hidden]{display:none}
.speech207.speech207-fold241 .speech207-redo{display:none}
/* The one line that shortens. `flex:1;min-width:0` is on the body above, so
   this is what gives way when the window narrows — before any control does —
   and `plaintext` lets a Persian sentence read right-to-left inside a strip
   whose own direction is pinned left-to-right. */
.speech207-text{margin:4px 0 0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;unicode-bidi:plaintext;text-align:start;color:var(--player-muted)}
/* ONE STRIP, ONE LANGUAGE — and the three `!important`s are the price of it,
   not a shortcut. `release11.css` loads after this file and forces
   `.gold-trigger{background:var(--button11)!important;color:var(--text)!important;
   border:1px solid var(--glass-border)!important}` on EVERY combobox in the
   app, `--button11` being the cool slate #333943. Measured on this player that
   put three blue-grey pills on a warm #23251f strip beside a gold ▶, which is
   the opposite of «یک زبان طراحی». Nothing but `!important` can answer
   `!important` from a later sheet, and the three properties named here are
   exactly the three that rule sets. */
.speech207 select,.speech207 .gold-trigger{flex:none;font:inherit;font-size:13px;width:auto;
  min-height:40px;height:40px;max-width:124px;padding:0 10px;gap:6px;border-radius:10px;
  background:var(--player-bg)!important;color:var(--player-text)!important;
  border:1px solid var(--player-border)!important;
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:isolate;
  transition:border-color .15s ease,color .15s ease}
/* `release11.css` also forces the combobox border per palette, one selector
   heavier than the rule above, so the border is stated again at that weight —
   otherwise the strip came out with the player's own warm fill inside a
   palette's tan outline. */
:root[data-palette] .speech207 select,
:root[data-palette] .speech207 .gold-trigger{border-color:var(--player-border)!important}
.speech207 select:hover,.speech207 .gold-trigger:hover,
:root[data-palette] .speech207 .gold-trigger:hover{border-color:var(--player-accent)!important;
  color:var(--player-accent)!important;box-shadow:none}
.speech207 .gold-trigger::after{color:var(--player-accent)}
.speech207 .gold-select{flex:none;display:inline-flex;min-width:0}
.speech207-close,.speech207-fold241{opacity:.75}
.speech207-close:hover,.speech207-fold241:hover{opacity:1}
/* COLLAPSED: «[⋮⋮] [▶]», plus the two buttons that get it back and put it away
   — ✕ stays reachable on purpose, because a collapsed player with no way out
   but a click on its own surface is one misread pill away from being stuck. */
.speech207.speech207-fold241{max-width:none}
.speech207.speech207-fold241 .speech207-body,
.speech207.speech207-fold241 .gold-select,
.speech207.speech207-fold241>select{display:none}
@media(pointer:coarse){.speech207 .btn{min-height:44px;min-width:44px}
  .speech207 .speech207-play{min-height:44px;min-width:44px}
  .speech207 select,.speech207 .gold-trigger{min-height:44px;height:44px}}
/* NARROW: the line shortens first, then the dropdowns tighten, and the strip
   never wraps onto a second row (`flex-wrap:nowrap` above). */
@media(max-width:620px){.speech207{gap:6px;padding:6px 8px;inset-inline:auto 8px;bottom:8px;
    max-width:calc(100vw - 16px)}
  .speech207 select,.speech207 .gold-trigger{max-width:88px;padding:0 6px;font-size:12px}}
@media(max-width:430px){.speech207 select,.speech207 .gold-trigger{max-width:62px;font-size:11px}
  .speech207 .btn{min-width:36px;padding:6px}}
@media(prefers-reduced-motion:reduce){.speech207,.speech207.speech207-snap241{transition:none}
  .speech207 .speech207-play[data-state241=loading]::after{animation:none}}
.paper [data-block].speech-now207{border-inline-start:3px solid var(--paper-heading,#a48542);
  padding-inline-start:9px;transition:border-color .2s}
@media print{.speech207{display:none!important}.speech-now207{border:0!important;padding-inline-start:0!important}}

/* 0.18.14 — the capacity card's small tables (capacity01814.js): scroll sideways on a narrow screen */
.capacity01814-table{overflow-x:auto;margin:.25rem 0 .75rem}
.capacity01814-table table{width:100%;border-collapse:collapse}
.capacity01814-table th,.capacity01814-table td{padding:.3rem .6rem;text-align:start;border-bottom:1px solid var(--line);white-space:nowrap}
.capacity01814-table thead th{color:var(--muted);font-weight:600}
.capacity01814-table tbody th{white-space:normal;font-weight:500}