:root{--bg:#071018;--panel:#0d1721;--panel2:#111d28;--line:#243241;--text:#edf4ff;--muted:#8ea0b6;--blue:#2f81ff;--green:#4ad66d;--mag:#d852ff;--gold:#ffd23f;--danger:#ff5874;--left:280px;--right:360px}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#142332,#071018 55%);color:var(--text);font:14px/1.4 Inter,Segoe UI,system-ui,sans-serif}.shell{height:100vh;display:grid;grid-template-columns:var(--left) minmax(720px,1fr) var(--right);overflow:hidden;transition:grid-template-columns .22s ease}body.left-collapsed{--left:76px}body.right-collapsed{--right:46px}.sidebar,.details{background:linear-gradient(180deg,rgba(13,23,33,.98),rgba(8,16,24,.98));border-right:1px solid var(--line);overflow:auto}.details{border-left:1px solid var(--line);border-right:0;padding:0;position:relative;overflow:hidden}.details-inner{padding:22px;min-width:320px;opacity:1;transition:opacity .18s ease}.details-toggle{position:absolute;left:8px;top:10px;z-index:6;width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#101b26;color:var(--text);cursor:pointer}body.right-collapsed .details-inner{opacity:0;pointer-events:none}body.right-collapsed .details-toggle{left:7px}body.right-collapsed .details-toggle{transform:rotate(180deg)}.brand{display:flex;gap:12px;align-items:center;padding:18px 14px;border-bottom:1px solid var(--line);min-height:76px}.brand strong{font-size:23px}.brand span{display:block;color:var(--muted);font-size:12px}.brand-text{white-space:nowrap;overflow:hidden}.logo{width:38px;height:38px;border:2px solid var(--blue);display:grid;place-items:center;border-radius:10px;color:#7ab4ff;font-weight:800;box-shadow:0 0 22px rgba(47,129,255,.25);flex:0 0 auto}.icon-button{width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:#101b26;color:var(--text);cursor:pointer;font-size:18px;flex:0 0 auto}.menu-button:hover,.icon-button:hover{border-color:#3488ff}body.left-collapsed .brand{padding:18px 10px;justify-content:center;flex-wrap:wrap;gap:8px}body.left-collapsed .brand-text,body.left-collapsed .logo{display:none}nav{padding:16px}.nav{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;background:transparent;color:var(--text);border:0;padding:10px 12px;border-radius:7px;text-align:left;cursor:pointer}.nav:hover,.nav.active{background:#1d63d8}.nav-icon{width:20px;text-align:center;font-size:17px;flex:0 0 auto}.nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav em{font-style:normal;color:#bcd2ff}body.left-collapsed nav{padding:10px}body.left-collapsed .nav{justify-content:center;padding:12px 0}body.left-collapsed .nav-label,body.left-collapsed .nav em,body.left-collapsed .side-section h3,body.left-collapsed .system-btn span,body.left-collapsed .system-btn em{display:none}.side-section{border-top:1px solid var(--line);padding:16px}.side-section h3{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b6c3d2}.system-btn{display:flex;justify-content:space-between;width:100%;background:transparent;border:0;color:#dbe7f7;padding:7px 2px;cursor:pointer}.system-btn:hover{color:#7ab4ff}body.left-collapsed .side-section{padding:10px 0}.main{overflow:auto}.topbar{position:sticky;top:0;z-index:5;height:66px;display:flex;align-items:center;gap:14px;padding:0 24px;background:rgba(8,15,22,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.search{height:38px;flex:1;max-width:720px;background:rgba(255,255,255,.055);border:1px solid #243241;border-radius:8px;display:flex;align-items:center;padding:0 13px;color:var(--muted)}.search input{width:100%;background:transparent;border:0;color:var(--text);outline:0;margin-left:8px}.status{margin-left:auto;color:#dff7e8}.status small{display:block;color:var(--green);font-size:11px}.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);margin-right:8px}.library-view{padding:22px 24px 70px}.heading-row{display:flex;align-items:center;justify-content:space-between}.heading-row h1{display:inline;margin-right:10px}.root-banner{margin:12px 0 2px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.04);color:#b9c8da}.pill,.tag,.format{display:inline-block;padding:4px 8px;border-radius:6px;background:#1b2836;color:#bdcce0;font-size:12px}.filter-row{display:flex;gap:10px;margin:16px 0 20px}.chip,.ghost,.primary,select{border:1px solid var(--line);background:#101b26;color:var(--text);border-radius:7px;padding:9px 12px;cursor:pointer}.chip.active{border-color:#2f81ff;background:#143867}.primary{background:linear-gradient(180deg,#3387ff,#1d62d6);border-color:#3d8fff}.full{width:100%;margin-top:8px}.card-row{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:16px;margin-bottom:26px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.card{background:linear-gradient(180deg,#162231,#101923);border:1px solid #263646;border-radius:8px;overflow:hidden;cursor:pointer;transition:.18s transform,.18s border,.18s box-shadow;position:relative}.card:hover,.card.selected{transform:translateY(-2px);border-color:#3488ff;box-shadow:0 0 0 1px rgba(52,136,255,.25),0 18px 40px rgba(0,0,0,.25)}.cover-wrap{aspect-ratio:3/4;background:#0a0f15;display:flex;align-items:center;justify-content:center;overflow:hidden}.cover-wrap img{width:100%;height:100%;object-fit:cover}.card-body{padding:10px}.card-title{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card small{display:block;color:var(--muted)}.badge-line{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}.format.mag{color:#f2b7ff;border:1px solid rgba(216,82,255,.3)}.format.guide{color:#b9ffd0;border:1px solid rgba(74,214,109,.25)}.format.manual{color:#acd2ff;border:1px solid rgba(47,129,255,.3)}.favorite{position:absolute;right:8px;top:8px;color:var(--gold);text-shadow:0 2px 6px #000}.collection-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:26px}.collection{min-height:128px;border:1px solid var(--line);border-radius:12px;color:var(--text);text-align:left;padding:22px;background:#111d28;cursor:pointer}.collection b{display:block;font-size:19px;margin-bottom:8px}.collection span{display:block;color:#aab8c8;max-width:330px}.collection em{display:block;margin-top:14px;color:#cbd8e8;font-style:normal}.collection.blue{background:linear-gradient(135deg,rgba(47,129,255,.22),rgba(17,29,40,.9))}.collection.green{background:linear-gradient(135deg,rgba(74,214,109,.18),rgba(17,29,40,.9))}.collection.magenta{background:linear-gradient(135deg,rgba(216,82,255,.2),rgba(17,29,40,.9))}.detail-cover{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:9px;border:1px solid var(--line);background:#0a0f15}.details h2{font-size:23px;margin:16px 0 2px}.sub{color:var(--muted);margin-bottom:14px}.tabs{display:flex;border-bottom:1px solid var(--line);margin:18px 0 12px}.tab{background:transparent;border:0;color:#9fb1c6;padding:10px 13px}.tab.active{color:#58a2ff;border-bottom:2px solid #58a2ff}dl{display:grid;grid-template-columns:96px 1fr;gap:9px;margin:0}dt{color:#8fa0b4}dd{margin:0;overflow-wrap:anywhere}.tags{display:flex;gap:7px;flex-wrap:wrap}.details-empty,.empty-message{height:100%;display:grid;place-items:center;color:var(--muted);text-align:center}.empty-message{min-height:180px;border:1px dashed var(--line);border-radius:12px}.hidden{display:none!important}.reader-view{height:calc(100vh - 66px);display:flex;flex-direction:column;background:#05090d}.reader-toolbar{height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);background:#0b141e}.reader-toolbar strong{flex:1}.reader-stage{position:relative;flex:1;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle,#182637,#05090d)}.book{width:min(90vh,760px);height:min(84vh,980px);perspective:2200px;position:relative}.page-shell,.turning-page{position:absolute;inset:0;border-radius:12px;overflow:hidden;background:#111;box-shadow:0 28px 80px rgba(0,0,0,.58)}.page-shell img,.turning-page img{width:100%;height:100%;object-fit:contain;background:#111}.turning-page{z-index:5;transform-style:preserve-3d;backface-visibility:hidden;will-change:transform,clip-path,filter}.turning-page::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(0,0,0,.42) 62%,rgba(0,0,0,.72));mix-blend-mode:multiply;opacity:.8}.curl-next{transform-origin:right center;animation:curlNext .62s cubic-bezier(.2,.72,.25,1)}.curl-prev{transform-origin:left center;animation:curlPrev .62s cubic-bezier(.2,.72,.25,1)}@keyframes curlNext{0%{transform:rotateY(0deg) skewY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1)}35%{transform:rotateY(-32deg) skewY(-1.6deg);clip-path:polygon(0 0,97% 3%,91% 100%,0 100%);filter:brightness(.9)}100%{transform:rotateY(-168deg) skewY(-3deg);clip-path:polygon(0 0,70% 7%,58% 95%,0 100%);filter:brightness(.55)}}@keyframes curlPrev{0%{transform:rotateY(0deg) skewY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1)}35%{transform:rotateY(32deg) skewY(1.6deg);clip-path:polygon(3% 3%,100% 0,100% 100%,9% 100%);filter:brightness(.9)}100%{transform:rotateY(168deg) skewY(3deg);clip-path:polygon(30% 7%,100% 0,100% 100%,42% 95%);filter:brightness(.55)}}.fullscreen-reader{height:100vh!important}.fullscreen-reader .reader-stage{background:#000}.fullscreen-reader .book{width:min(96vw,calc(96vh * .75));height:96vh}.fullscreen-reader .reader-toolbar{background:rgba(5,9,13,.86);backdrop-filter:blur(12px)}.page-hit{position:absolute;top:0;bottom:0;width:33%;z-index:8;border:0;background:transparent;cursor:pointer}.page-hit.left{left:0}.page-hit.right{right:0}dialog{border:1px solid var(--line);border-radius:14px;background:#101923;color:var(--text);box-shadow:0 30px 100px #000}label{display:block;margin:12px 0 6px;color:#b8c7d9}.dialog-card{width:440px;padding:22px}.dialog-card.wide{width:720px}.dialog-card input,.dialog-card select{width:100%;padding:12px;background:#071018;color:var(--text);border:1px solid var(--line);border-radius:8px}.dialog-card menu{display:flex;justify-content:flex-end;gap:10px;padding:0;margin-top:18px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.settings-grid section{background:#0a121b;border:1px solid var(--line);border-radius:10px;padding:14px}code{color:#8cc7ff}@media(max-width:1200px){:root{--left:230px;--right:0px}.details{display:none}.card-row{grid-template-columns:repeat(4,1fr)}}@media(max-width:900px){.shell{grid-template-columns:76px 1fr}.topbar{gap:8px;padding:0 12px}.status{display:none}.card-row{grid-template-columns:repeat(2,1fr)}.collection-row{grid-template-columns:1fr}.details{display:none}}

/* v0.3 panel/category refinements */
.details{position:relative;overflow:hidden;min-width:0}.details-inner{height:100vh;overflow-y:auto;overflow-x:hidden;padding:22px 22px 28px 26px;scrollbar-width:thin;scrollbar-color:#38516b #0b1520}.details-inner::-webkit-scrollbar{width:10px}.details-inner::-webkit-scrollbar-track{background:#0b1520}.details-inner::-webkit-scrollbar-thumb{background:#38516b;border-radius:999px;border:2px solid #0b1520}.resize-handle{position:absolute;left:0;top:0;bottom:0;width:8px;z-index:8;cursor:col-resize;background:transparent}.resize-handle:hover,.resizing-details .resize-handle{background:linear-gradient(180deg,rgba(47,129,255,.15),rgba(216,82,255,.15))}.resizing-details{cursor:col-resize;user-select:none}.resizing-details *{cursor:col-resize!important;user-select:none!important}body.right-collapsed .resize-handle{display:none}.details-empty{min-height:calc(100vh - 44px)}.detail-cover{max-height:44vh;object-fit:cover}.category-group{margin:10px 0 16px}.category-group h4{margin:0 12px 8px;color:#8ea0b6;font-size:11px;text-transform:uppercase;letter-spacing:.11em}.system-btn.active{border-color:rgba(47,129,255,.75);background:rgba(47,129,255,.14);color:#d8eaff}.small-pad{padding:0 14px}.card-body small:first-of-type{color:#dce8f8}body.left-collapsed .category-group h4,body.left-collapsed .system-btn em{display:none}body.left-collapsed .system-btn{justify-content:center;padding:10px 0}body.left-collapsed .system-btn span{max-width:34px;overflow:hidden;text-overflow:clip;white-space:nowrap;text-align:center}.details dl dd{word-break:break-word}.details-toggle{box-shadow:0 8px 22px rgba(0,0,0,.26)}

/* v0.4 visual/category refinements */
.main{scrollbar-width:none;-ms-overflow-style:none}.main::-webkit-scrollbar{width:0;height:0}.details{border-left:0;box-shadow:-18px 0 42px rgba(0,0,0,.22)}.details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(87,145,255,.18),transparent);pointer-events:none}.details-inner{scrollbar-width:none}.details-inner::-webkit-scrollbar{width:0;height:0}.resize-handle{width:14px;opacity:0}.resize-handle:hover,.resizing-details .resize-handle{opacity:1;background:linear-gradient(180deg,rgba(47,129,255,.12),rgba(216,82,255,.1))}.category-mode .filter-row,.category-mode .section-recent-title,.category-mode #recentGrid,.category-mode .section-browse-title,.category-mode .collection-row{display:none!important}.category-mode #grid{margin-top:14px}.category-mode .grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}.category-mode.magazine-mode .grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}.category-mode.magazine-mode .cover-wrap{aspect-ratio:3/4.15}.category-mode .card-body{padding:12px}.category-mode .card-title{font-size:15px}.details #description{white-space:pre-wrap;color:#cbd8e8;line-height:1.55}

/* v0.5 reader/details/editor refinements */
.root-banner{display:none!important}.danger{border:1px solid rgba(255,100,100,.35);background:rgba(160,36,42,.18);color:#ffd1d1;border-radius:7px;padding:9px 12px;cursor:pointer}.tab{cursor:pointer}.tab-panel label{display:block;color:#b8c7d9;margin:10px 0 6px}.edit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.details input,.details select,.details textarea{width:100%;box-sizing:border-box;background:#071018;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px;margin-top:5px}.details textarea{resize:vertical;line-height:1.45}.settings-grid input{width:100%;box-sizing:border-box;background:#071018;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:11px}.settings-grid .full{margin-top:10px}.book{width:min(94vw,1120px);height:min(82vh,760px);perspective:2600px}.page-shell{display:grid;grid-template-columns:1fr 1fr;background:#07090d;border-radius:8px;padding:10px;gap:0;box-shadow:0 30px 90px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.05)}.book.cover-mode{width:min(76vh,620px);height:min(84vh,900px)}.book.cover-mode .page-shell{display:block;padding:10px}.page-side{position:relative;height:100%;overflow:hidden;background:#111;box-shadow:inset 0 0 20px rgba(0,0,0,.26)}.page-side img{width:100%;height:100%;object-fit:contain;background:#111}.left-page{border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.55);box-shadow:inset -24px 0 30px rgba(0,0,0,.32)}.right-page{border-radius:0 6px 6px 0;border-left:1px solid rgba(255,255,255,.05);box-shadow:inset 24px 0 30px rgba(0,0,0,.25)}.book.cover-mode .right-page{height:100%;border-radius:6px;box-shadow:none}.book.cover-mode .right-page img{object-fit:contain}.blank-page::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f0eadf,#d4cab8)}.turning-page{top:10px;bottom:10px;width:calc(50% - 10px);height:auto;inset-inline:auto;border-radius:0 6px 6px 0;box-shadow:-18px 0 42px rgba(0,0,0,.35);overflow:hidden}.turning-page img{width:100%;height:100%;object-fit:contain;background:#111}.curl-next{right:10px;left:auto;transform-origin:left center;animation:bookCurlNext .68s cubic-bezier(.18,.78,.24,1)}.curl-prev{left:10px;right:auto;transform-origin:right center;animation:bookCurlPrev .68s cubic-bezier(.18,.78,.24,1)}.curl-next::after,.curl-prev::after{content:"";position:absolute;inset:0;opacity:.9;mix-blend-mode:multiply}.curl-next::after{background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.08) 25%,rgba(0,0,0,.65) 100%)}.curl-prev::after{background:linear-gradient(270deg,rgba(0,0,0,.45),rgba(255,255,255,.08) 25%,rgba(0,0,0,.65) 100%)}@keyframes bookCurlNext{0%{transform:rotateY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1)}45%{transform:rotateY(-78deg) skewY(-1deg);clip-path:polygon(0 0,96% 2%,91% 98%,0 100%);filter:brightness(.86)}100%{transform:rotateY(-178deg) skewY(-2deg);clip-path:polygon(0 0,70% 7%,60% 94%,0 100%);filter:brightness(.55)}}@keyframes bookCurlPrev{0%{transform:rotateY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1)}45%{transform:rotateY(78deg) skewY(1deg);clip-path:polygon(4% 2%,100% 0,100% 100%,9% 98%);filter:brightness(.86)}100%{transform:rotateY(178deg) skewY(2deg);clip-path:polygon(30% 7%,100% 0,100% 100%,40% 94%);filter:brightness(.55)}}.fullscreen-reader .book{width:min(98vw,1400px);height:calc(100vh - 86px)}.fullscreen-reader .book.cover-mode{width:min(74vh,680px);height:calc(100vh - 86px)}.card small{min-height:16px}.category-mode.magazine-mode .card-title{font-size:16px}@media(max-width:900px){.book,.fullscreen-reader .book{width:96vw;height:70vh}.page-shell{padding:6px}.edit-grid{grid-template-columns:1fr}}


/* v0.6 landing pages and grouping */
.group-mode #grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}.category-card{position:relative;display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;min-height:146px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:linear-gradient(135deg,rgba(17,29,44,.96),rgba(9,15,24,.98));box-shadow:0 18px 50px rgba(0,0,0,.22);padding:16px;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.category-card:hover{transform:translateY(-2px);border-color:rgba(88,151,255,.46);box-shadow:0 24px 70px rgba(0,0,0,.34)}.category-cover-stack{width:86px;height:112px;border-radius:12px;background:linear-gradient(160deg,#1d2f46,#0a111a);box-shadow:12px 12px 0 rgba(255,255,255,.035),22px 22px 0 rgba(255,255,255,.022);overflow:hidden}.category-cover-stack img{width:100%;height:100%;object-fit:cover}.category-card-body h3{margin:0 0 8px;font-size:18px}.category-card-body p{margin:0 0 8px;color:#d7e7fb}.category-card-body small{color:#8ea0b6;text-transform:uppercase;letter-spacing:.09em}.group-mode.magazine-mode #grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}.group-mode.magazine-mode .category-cover-stack{width:104px;height:136px}.group-mode.magazine-mode .category-card{grid-template-columns:116px 1fr;min-height:168px}.nav:not(.active):hover{background:rgba(255,255,255,.05)}.edit-grid label.hidden{display:none!important}

/* v0.7 reader book-spine/shader refinement */
.reader-stage{
  background:
    radial-gradient(circle at 50% 42%,rgba(63,86,111,.38),rgba(5,9,13,.96) 60%),
    linear-gradient(180deg,#071018,#020406);
}
.book:not(.cover-mode){
  width:min(96vw,1280px);
  height:min(84vh,800px);
  perspective:3200px;
}
.fullscreen-reader .book:not(.cover-mode){
  width:min(98vw,1540px);
  height:calc(100vh - 76px);
}
.book:not(.cover-mode) .page-shell{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  padding:14px;
  border-radius:16px;
  background:
    radial-gradient(ellipse at center,rgba(255,255,255,.08),transparent 42%),
    linear-gradient(90deg,#05070a 0%,#11161d 48%,#080a0e 50%,#11161d 52%,#05070a 100%);
  box-shadow:
    0 38px 110px rgba(0,0,0,.76),
    0 0 0 1px rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(255,255,255,.045);
  overflow:hidden;
}
.book:not(.cover-mode) .page-shell::before{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  left:50%;
  width:58px;
  transform:translateX(-50%);
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.20) 20%,
      rgba(0,0,0,.70) 44%,
      rgba(255,255,255,.10) 50%,
      rgba(0,0,0,.72) 56%,
      rgba(0,0,0,.22) 80%,
      rgba(0,0,0,0) 100%);
  filter:blur(.2px);
  opacity:.98;
}
.book:not(.cover-mode) .page-shell::after{
  content:"";
  position:absolute;
  top:14px;
  bottom:14px;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  z-index:5;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.75) 18%,rgba(0,0,0,.88) 82%,rgba(255,255,255,.16));
  box-shadow:0 0 26px 8px rgba(0,0,0,.72);
  opacity:.9;
}
.page-side{
  position:relative;
  height:100%;
  overflow:hidden;
  background:#101010;
  box-shadow:none;
}
.page-side img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#101010;
}
.left-page{
  border-radius:10px 2px 2px 10px;
  border-right:0;
  transform-origin:right center;
  transform:rotateY(1.2deg);
  box-shadow:
    inset -48px 0 58px rgba(0,0,0,.42),
    inset 10px 0 18px rgba(255,255,255,.045);
}
.right-page{
  border-radius:2px 10px 10px 2px;
  border-left:0;
  transform-origin:left center;
  transform:rotateY(-1.2deg);
  box-shadow:
    inset 48px 0 58px rgba(0,0,0,.38),
    inset -10px 0 18px rgba(255,255,255,.04);
}
.left-page::after,.right-page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  mix-blend-mode:multiply;
}
.left-page::after{
  background:linear-gradient(90deg,rgba(0,0,0,.02),rgba(0,0,0,.06) 78%,rgba(0,0,0,.54) 100%);
}
.right-page::after{
  background:linear-gradient(270deg,rgba(0,0,0,.02),rgba(0,0,0,.06) 78%,rgba(0,0,0,.50) 100%);
}
.book.cover-mode .page-shell{
  border-radius:16px;
  padding:14px;
  background:linear-gradient(180deg,#111922,#060a0f);
  box-shadow:0 34px 100px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.06);
}
.book.cover-mode .right-page{
  transform:none;
  border-radius:10px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.book.cover-mode .right-page::after{display:none;}
.turning-page{
  top:14px;
  bottom:14px;
  height:auto;
  width:calc(50% - 14px);
  border-radius:2px 10px 10px 2px;
  overflow:hidden;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  z-index:9;
  background:#111;
  box-shadow:0 20px 70px rgba(0,0,0,.52);
}
.turning-page img{object-fit:contain;background:#101010;}
.curl-next{
  right:14px;
  left:auto;
  transform-origin:left center;
  animation:paperCurlNext .74s cubic-bezier(.2,.76,.18,1) both;
}
.curl-prev{
  left:14px;
  right:auto;
  border-radius:10px 2px 2px 10px;
  transform-origin:right center;
  animation:paperCurlPrev .74s cubic-bezier(.2,.76,.18,1) both;
}
.curl-next::before,.curl-prev::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.95;
}
.curl-next::before{
  background:
    radial-gradient(ellipse at left center,rgba(255,255,255,.16),transparent 30%),
    linear-gradient(90deg,rgba(0,0,0,.64),rgba(255,255,255,.10) 22%,rgba(0,0,0,.30) 56%,rgba(0,0,0,.72));
}
.curl-prev::before{
  background:
    radial-gradient(ellipse at right center,rgba(255,255,255,.16),transparent 30%),
    linear-gradient(270deg,rgba(0,0,0,.64),rgba(255,255,255,.10) 22%,rgba(0,0,0,.30) 56%,rgba(0,0,0,.72));
}
@keyframes paperCurlNext{
  0%{transform:translateX(0) rotateY(0deg) skewY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1;}
  42%{transform:translateX(-10%) rotateY(-58deg) skewY(-1.4deg);clip-path:polygon(0 0,98% 3%,92% 97%,0 100%);filter:brightness(.92);opacity:1;}
  78%{transform:translateX(-38%) rotateY(-118deg) skewY(-2.2deg);clip-path:polygon(0 0,82% 8%,72% 92%,0 100%);filter:brightness(.72);opacity:.95;}
  100%{transform:translateX(-50%) rotateY(-142deg) skewY(-2.4deg);clip-path:polygon(0 0,68% 12%,58% 88%,0 100%);filter:brightness(.55);opacity:0;}
}
@keyframes paperCurlPrev{
  0%{transform:translateX(0) rotateY(0deg) skewY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1;}
  42%{transform:translateX(10%) rotateY(58deg) skewY(1.4deg);clip-path:polygon(2% 3%,100% 0,100% 100%,8% 97%);filter:brightness(.92);opacity:1;}
  78%{transform:translateX(38%) rotateY(118deg) skewY(2.2deg);clip-path:polygon(18% 8%,100% 0,100% 100%,28% 92%);filter:brightness(.72);opacity:.95;}
  100%{transform:translateX(50%) rotateY(142deg) skewY(2.4deg);clip-path:polygon(32% 12%,100% 0,100% 100%,42% 88%);filter:brightness(.55);opacity:0;}
}
@media(max-width:900px){
  .book:not(.cover-mode),.fullscreen-reader .book:not(.cover-mode){width:98vw;height:72vh;}
  .book:not(.cover-mode) .page-shell{padding:8px;border-radius:12px;}
  .book:not(.cover-mode) .page-shell::before{top:8px;bottom:8px;width:42px;}
  .book:not(.cover-mode) .page-shell::after{top:8px;bottom:8px;}
  .turning-page{top:8px;bottom:8px;width:calc(50% - 8px);}
  .curl-next{right:8px}.curl-prev{left:8px}
}

/* v0.7.3: keep right details drawer fully closed by default until Details is clicked */
body.right-collapsed{--right:0px}
body.right-collapsed .details{border-left:0;box-shadow:none;pointer-events:none;overflow:hidden}
body.right-collapsed .details::before,body.right-collapsed .details-toggle{display:none}
body.right-collapsed .details-inner{opacity:0;pointer-events:none}
.details-top-button{white-space:nowrap;min-width:96px;border-color:rgba(47,129,255,.45)!important;color:#dbeaff!important;background:rgba(47,129,255,.12)!important}
.category-group{margin-top:8px}


/* v0.7.5: details toggle/icon cleanup, category headings, softer book shader */
.details-toggle{display:none!important}
.details-top-button{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  padding:0!important;
  display:inline-grid!important;
  place-items:center!important;
  font-size:22px!important;
  line-height:1!important;
  border-radius:10px!important;
  border-color:rgba(47,129,255,.5)!important;
  color:#dbeaff!important;
  background:rgba(47,129,255,.12)!important;
}
.category-group h4{
  margin:14px 2px 8px;
  color:#b6c3d2;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.11em;
}
body.left-collapsed .category-group h4{display:none}
.book:not(.cover-mode) .page-shell{
  padding:8px!important;
  background:
    radial-gradient(ellipse at 50% 48%,rgba(255,255,255,.06),transparent 44%),
    linear-gradient(90deg,rgba(5,7,10,.92) 0%,rgba(14,18,24,.94) 48.7%,rgba(18,20,24,.82) 50%,rgba(14,18,24,.94) 51.3%,rgba(5,7,10,.92) 100%)!important;
}
.book:not(.cover-mode) .page-shell::before{
  top:8px!important;
  bottom:8px!important;
  width:38px!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.10) 18%,
    rgba(0,0,0,.26) 42%,
    rgba(255,255,255,.09) 50%,
    rgba(0,0,0,.26) 58%,
    rgba(0,0,0,.10) 82%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.82!important;
  filter:blur(.65px)!important;
}
.book:not(.cover-mode) .page-shell::after{
  top:8px!important;
  bottom:8px!important;
  width:1px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.34) 20%,rgba(0,0,0,.42) 80%,rgba(255,255,255,.12))!important;
  box-shadow:0 0 18px 5px rgba(0,0,0,.22)!important;
  opacity:.72!important;
}
.left-page{
  transform:rotateY(.7deg)!important;
  box-shadow:inset -26px 0 38px rgba(0,0,0,.22), inset 8px 0 14px rgba(255,255,255,.035)!important;
}
.right-page{
  transform:rotateY(-.7deg)!important;
  box-shadow:inset 26px 0 38px rgba(0,0,0,.20), inset -8px 0 14px rgba(255,255,255,.03)!important;
}
.left-page::after,.right-page::after{mix-blend-mode:normal!important;opacity:.78!important}
.left-page::after{background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.03) 78%,rgba(0,0,0,.20) 100%)!important}
.right-page::after{background:linear-gradient(270deg,rgba(0,0,0,0),rgba(0,0,0,.03) 78%,rgba(0,0,0,.18) 100%)!important}
.turning-page{
  top:8px!important;
  bottom:8px!important;
  width:calc(50% - 8px)!important;
  box-shadow:0 18px 56px rgba(0,0,0,.38)!important;
}
.curl-next{right:8px!important;animation:paperCurlNextSoft .82s cubic-bezier(.18,.72,.16,1) both!important}
.curl-prev{left:8px!important;animation:paperCurlPrevSoft .82s cubic-bezier(.18,.72,.16,1) both!important}
.curl-next::before,.curl-prev::before{opacity:.72!important;mix-blend-mode:normal!important}
.curl-next::before{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.10) 22%,rgba(0,0,0,.12) 58%,rgba(0,0,0,.42))!important}
.curl-prev::before{background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(255,255,255,.10) 22%,rgba(0,0,0,.12) 58%,rgba(0,0,0,.42))!important}
@keyframes paperCurlNextSoft{
  0%{transform:translateX(0) rotateY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1}
  35%{transform:translateX(-7%) rotateY(-48deg) skewY(-1deg);clip-path:polygon(0 0,99% 2%,94% 98%,0 100%);filter:brightness(.96);opacity:1}
  72%{transform:translateX(-31%) rotateY(-104deg) skewY(-1.8deg);clip-path:polygon(0 0,86% 6%,76% 94%,0 100%);filter:brightness(.80);opacity:.98}
  100%{transform:translateX(-48%) rotateY(-154deg) skewY(-2.2deg);clip-path:polygon(0 0,66% 10%,54% 90%,0 100%);filter:brightness(.62);opacity:0}
}
@keyframes paperCurlPrevSoft{
  0%{transform:translateX(0) rotateY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1}
  35%{transform:translateX(7%) rotateY(48deg) skewY(1deg);clip-path:polygon(1% 2%,100% 0,100% 100%,6% 98%);filter:brightness(.96);opacity:1}
  72%{transform:translateX(31%) rotateY(104deg) skewY(1.8deg);clip-path:polygon(14% 6%,100% 0,100% 100%,24% 94%);filter:brightness(.80);opacity:.98}
  100%{transform:translateX(48%) rotateY(154deg) skewY(2.2deg);clip-path:polygon(34% 10%,100% 0,100% 100%,46% 90%);filter:brightness(.62);opacity:0}
}


/* v0.7.6: packaged nostalgic platform icons + cleaner book gutter */
.platform-icon{width:22px;height:22px;object-fit:contain;flex:0 0 auto;vertical-align:middle;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}
.platform-icon.tiny{width:16px;height:16px;margin-right:5px}
.platform-icon.large{width:34px;height:34px;margin-right:10px}
.system-label,.card-category,.category-title{display:flex;align-items:center;gap:8px;min-width:0}
.system-label>span,.card-category>span,.category-title>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-title{justify-content:center;font-size:18px;margin:0 0 6px}
.card-category{gap:4px;color:var(--muted)}
body.left-collapsed .platform-icon{margin:0}
body.left-collapsed .system-label>span{display:none}
body.left-collapsed .system-label{justify-content:center}

/* The spread should look like one open book, not two pages separated by a black bar. */
.book:not(.cover-mode) .page-shell{
  gap:0!important;
  padding:12px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.10))!important;
  box-shadow:0 38px 110px rgba(0,0,0,.72),0 0 0 1px rgba(255,255,255,.07)!important;
}
.book:not(.cover-mode) .page-shell::before{
  top:12px!important;
  bottom:12px!important;
  width:76px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:4!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.05) 22%,
    rgba(0,0,0,.16) 43%,
    rgba(255,255,255,.10) 49%,
    rgba(0,0,0,.14) 57%,
    rgba(0,0,0,.05) 78%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.62!important;
  filter:blur(5px)!important;
  mix-blend-mode:multiply!important;
  pointer-events:none!important;
}
.book:not(.cover-mode) .page-shell::after{
  top:12px!important;
  bottom:12px!important;
  width:0!important;
  left:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:0!important;
}
.left-page{border-right:0!important;box-shadow:inset -18px 0 28px rgba(0,0,0,.13), inset 6px 0 14px rgba(255,255,255,.035)!important;transform:rotateY(.35deg)!important}
.right-page{border-left:0!important;box-shadow:inset 18px 0 28px rgba(0,0,0,.12), inset -6px 0 14px rgba(255,255,255,.03)!important;transform:rotateY(-.35deg)!important}
.left-page::after{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.015) 80%,rgba(0,0,0,.10) 100%)!important;opacity:.55!important;mix-blend-mode:multiply!important}
.right-page::after{background:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.015) 80%,rgba(0,0,0,.09) 100%)!important;opacity:.55!important;mix-blend-mode:multiply!important}
.turning-page{z-index:12!important;transform-style:preserve-3d!important;backface-visibility:hidden!important;background:transparent!important;box-shadow:0 18px 50px rgba(0,0,0,.30)!important}
.turning-page::after{display:none!important}
.curl-next::before,.curl-prev::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.55!important;mix-blend-mode:multiply!important}
.curl-next::before{background:linear-gradient(90deg,rgba(0,0,0,.20),rgba(255,255,255,.07) 24%,rgba(0,0,0,.08) 64%,rgba(0,0,0,.30))!important}
.curl-prev::before{background:linear-gradient(270deg,rgba(0,0,0,.20),rgba(255,255,255,.07) 24%,rgba(0,0,0,.08) 64%,rgba(0,0,0,.30))!important}
.curl-next{animation:pageQuestCurlNext .86s cubic-bezier(.16,.74,.17,1) both!important;transform-origin:left center!important}
.curl-prev{animation:pageQuestCurlPrev .86s cubic-bezier(.16,.74,.17,1) both!important;transform-origin:right center!important}
@keyframes pageQuestCurlNext{
  0%{transform:translateX(0) rotateY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1}
  38%{transform:translateX(-12%) rotateY(-58deg) skewY(-.8deg);clip-path:polygon(0 0,98% 2%,94% 98%,0 100%);filter:brightness(.98);opacity:1}
  76%{transform:translateX(-44%) rotateY(-128deg) skewY(-1.4deg);clip-path:polygon(0 0,82% 6%,72% 94%,0 100%);filter:brightness(.82);opacity:.95}
  100%{transform:translateX(-52%) rotateY(-176deg) skewY(-1.8deg);clip-path:polygon(0 0,64% 10%,52% 90%,0 100%);filter:brightness(.66);opacity:0}
}
@keyframes pageQuestCurlPrev{
  0%{transform:translateX(0) rotateY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1}
  38%{transform:translateX(12%) rotateY(58deg) skewY(.8deg);clip-path:polygon(2% 2%,100% 0,100% 100%,6% 98%);filter:brightness(.98);opacity:1}
  76%{transform:translateX(44%) rotateY(128deg) skewY(1.4deg);clip-path:polygon(18% 6%,100% 0,100% 100%,28% 94%);filter:brightness(.82);opacity:.95}
  100%{transform:translateX(52%) rotateY(176deg) skewY(1.8deg);clip-path:polygon(36% 10%,100% 0,100% 100%,48% 90%);filter:brightness(.66);opacity:0}
}

/* v0.7.7: category card sizing/wrapping, open-details-on-select, reader spread/spine pass */
.group-mode #grid{
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr))!important;
  gap:26px!important;
}
.category-card{
  grid-template-columns:132px minmax(0,1fr)!important;
  min-height:190px!important;
  padding:20px!important;
  overflow:hidden!important;
}
.category-cover-stack{
  width:118px!important;
  height:150px!important;
  border-radius:14px!important;
}
.group-mode.magazine-mode #grid{
  grid-template-columns:repeat(auto-fill,minmax(390px,1fr))!important;
}
.group-mode.magazine-mode .category-card{
  grid-template-columns:146px minmax(0,1fr)!important;
  min-height:212px!important;
}
.group-mode.magazine-mode .category-cover-stack{
  width:132px!important;
  height:174px!important;
}
.category-card-body{
  min-width:0!important;
  overflow:visible!important;
}
.category-title,
.category-card-body h3{
  justify-content:flex-start!important;
  align-items:flex-start!important;
  gap:10px!important;
  line-height:1.22!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
  max-width:100%!important;
}
.category-title>span,
.category-card-body h3>span{
  display:block!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  min-width:0!important;
}
.platform-icon.large{
  width:42px!important;
  height:42px!important;
  margin-right:2px!important;
  flex:0 0 42px!important;
}

/* Keep the right drawer truly hidden at startup, but animate it in when JS removes right-collapsed. */
.details{
  transition:width .22s ease, border-color .22s ease, box-shadow .22s ease!important;
}
body.right-collapsed .details{
  width:0!important;
  min-width:0!important;
  max-width:0!important;
}

/* Reader: remove the black center strip and make the pages read as a single open spread. */
.book:not(.cover-mode){
  perspective:3200px!important;
  transform-style:preserve-3d!important;
}
.book:not(.cover-mode) .page-shell{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:0!important;
  padding:10px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.05))!important;
  border-radius:18px!important;
  box-shadow:0 32px 96px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.06)!important;
}
.book:not(.cover-mode) .page-shell::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:10px!important;
  bottom:10px!important;
  width:34px!important;
  transform:translateX(-50%)!important;
  z-index:6!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.025) 22%,
    rgba(0,0,0,.075) 42%,
    rgba(255,255,255,.13) 50%,
    rgba(0,0,0,.065) 58%,
    rgba(0,0,0,.022) 78%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.78!important;
  filter:blur(2px)!important;
  mix-blend-mode:normal!important;
  box-shadow:none!important;
}
.book:not(.cover-mode) .page-shell::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:12px!important;
  bottom:12px!important;
  width:1px!important;
  transform:translateX(-50%)!important;
  z-index:7!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.04) 50%,rgba(0,0,0,.08))!important;
  opacity:.24!important;
  box-shadow:none!important;
}
.page-side{
  background:transparent!important;
  z-index:1!important;
  transform-style:preserve-3d!important;
}
.page-side img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  background:transparent!important;
}
.left-page{
  border-right:0!important;
  border-radius:10px 0 0 10px!important;
  transform-origin:right center!important;
  transform:rotateY(.28deg)!important;
  box-shadow:inset -18px 0 24px rgba(0,0,0,.10), inset 8px 0 12px rgba(255,255,255,.03)!important;
}
.right-page{
  border-left:0!important;
  border-radius:0 10px 10px 0!important;
  transform-origin:left center!important;
  transform:rotateY(-.28deg)!important;
  box-shadow:inset 18px 0 24px rgba(0,0,0,.09), inset -8px 0 12px rgba(255,255,255,.03)!important;
}
.left-page::after,
.right-page::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.36!important;
  mix-blend-mode:normal!important;
  z-index:2!important;
}
.left-page::after{background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.012) 82%,rgba(0,0,0,.075) 100%)!important;}
.right-page::after{background:linear-gradient(270deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.012) 82%,rgba(0,0,0,.065) 100%)!important;}

/* Reader animation: a visible paper curl that starts from the spine and sweeps across the spread. */
.turning-page{
  position:absolute!important;
  top:10px!important;
  bottom:10px!important;
  width:calc(50% - 10px)!important;
  height:auto!important;
  overflow:hidden!important;
  z-index:20!important;
  background:transparent!important;
  border-radius:0 10px 10px 0!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  box-shadow:0 18px 46px rgba(0,0,0,.26)!important;
  will-change:transform,clip-path,opacity!important;
}
.turning-page img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  background:transparent!important;
}
.turning-page::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  opacity:.52!important;
  mix-blend-mode:normal!important;
}
.turning-page::after{display:none!important;}
.curl-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
  animation:pageQuestTurnNextV077 .78s cubic-bezier(.18,.72,.18,1) both!important;
}
.curl-prev{
  right:50%!important;
  left:auto!important;
  transform-origin:right center!important;
  border-radius:10px 0 0 10px!important;
  animation:pageQuestTurnPrevV077 .78s cubic-bezier(.18,.72,.18,1) both!important;
}
.curl-next::before{background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.13) 22%,rgba(0,0,0,.04) 56%,rgba(0,0,0,.26) 100%)!important;}
.curl-prev::before{background:linear-gradient(270deg,rgba(0,0,0,.18),rgba(255,255,255,.13) 22%,rgba(0,0,0,.04) 56%,rgba(0,0,0,.26) 100%)!important;}
.book.flipping-next .right-page{animation:pageQuestRightSettleV077 .78s ease both!important;}
.book.flipping-prev .left-page{animation:pageQuestLeftSettleV077 .78s ease both!important;}
@keyframes pageQuestTurnNextV077{
  0%{transform:translateX(0) rotateY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;filter:brightness(1)}
  36%{transform:translateX(-28%) rotateY(-62deg) skewY(-.8deg);clip-path:polygon(0 0,98% 2%,93% 98%,0 100%);opacity:1;filter:brightness(.98)}
  72%{transform:translateX(-78%) rotateY(-132deg) skewY(-1.5deg);clip-path:polygon(0 0,82% 6%,72% 94%,0 100%);opacity:.96;filter:brightness(.84)}
  100%{transform:translateX(-100%) rotateY(-176deg) skewY(-2deg);clip-path:polygon(0 0,66% 10%,52% 90%,0 100%);opacity:0;filter:brightness(.68)}
}
@keyframes pageQuestTurnPrevV077{
  0%{transform:translateX(0) rotateY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;filter:brightness(1)}
  36%{transform:translateX(28%) rotateY(62deg) skewY(.8deg);clip-path:polygon(2% 2%,100% 0,100% 100%,7% 98%);opacity:1;filter:brightness(.98)}
  72%{transform:translateX(78%) rotateY(132deg) skewY(1.5deg);clip-path:polygon(18% 6%,100% 0,100% 100%,28% 94%);opacity:.96;filter:brightness(.84)}
  100%{transform:translateX(100%) rotateY(176deg) skewY(2deg);clip-path:polygon(34% 10%,100% 0,100% 100%,48% 90%);opacity:0;filter:brightness(.68)}
}
@keyframes pageQuestRightSettleV077{0%,45%{filter:brightness(.92)}100%{filter:brightness(1)}}
@keyframes pageQuestLeftSettleV077{0%,45%{filter:brightness(.92)}100%{filter:brightness(1)}}
.fullscreen-reader .book:not(.cover-mode){
  width:min(98vw,1500px)!important;
  height:calc(100vh - 90px)!important;
}
@media(max-width:900px){
  .group-mode #grid{grid-template-columns:1fr!important;}
  .category-card,.group-mode.magazine-mode .category-card{grid-template-columns:112px minmax(0,1fr)!important;min-height:166px!important;}
  .category-cover-stack,.group-mode.magazine-mode .category-cover-stack{width:98px!important;height:128px!important;}
}

/* v0.7.8: more visible open-book spine and cleaner page-turn reveal.
   The spine is intentionally visible now: a soft center crease, paper lift, and page-shadow layers. */
.book:not(.cover-mode) .page-shell{
  padding:12px!important;
  border-radius:20px!important;
  overflow:hidden!important;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.035) 22%,rgba(0,0,0,.08) 62%,rgba(0,0,0,.20) 100%),
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.06))!important;
  box-shadow:
    0 36px 105px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.075),
    inset 0 0 0 1px rgba(255,255,255,.035)!important;
}
.book:not(.cover-mode) .page-shell::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:12px!important;
  bottom:12px!important;
  width:96px!important;
  transform:translateX(-50%)!important;
  z-index:8!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.18) 0%,rgba(255,255,255,.075) 10%,rgba(0,0,0,.08) 30%,rgba(0,0,0,0) 68%),
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.035) 18%,
      rgba(0,0,0,.105) 35%,
      rgba(0,0,0,.18) 46%,
      rgba(255,255,255,.22) 50%,
      rgba(0,0,0,.16) 54%,
      rgba(0,0,0,.095) 65%,
      rgba(0,0,0,.032) 82%,
      rgba(0,0,0,0) 100%)!important;
  opacity:1!important;
  filter:blur(2.2px)!important;
  mix-blend-mode:normal!important;
  box-shadow:none!important;
}
.book:not(.cover-mode) .page-shell::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:14px!important;
  bottom:14px!important;
  width:2px!important;
  transform:translateX(-50%)!important;
  z-index:9!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,
    rgba(255,255,255,.34),
    rgba(0,0,0,.16) 16%,
    rgba(255,255,255,.16) 50%,
    rgba(0,0,0,.20) 84%,
    rgba(255,255,255,.26))!important;
  opacity:.52!important;
  box-shadow:
    -8px 0 22px rgba(0,0,0,.16),
    8px 0 22px rgba(0,0,0,.13)!important;
}
.left-page,
.right-page{
  overflow:hidden!important;
  background:#111!important;
}
.left-page{
  transform-origin:right center!important;
  transform:perspective(2600px) rotateY(.62deg)!important;
  box-shadow:
    inset -34px 0 46px rgba(0,0,0,.20),
    inset -8px 0 18px rgba(255,255,255,.045),
    inset 8px 0 14px rgba(255,255,255,.025)!important;
}
.right-page{
  transform-origin:left center!important;
  transform:perspective(2600px) rotateY(-.62deg)!important;
  box-shadow:
    inset 34px 0 46px rgba(0,0,0,.18),
    inset 8px 0 18px rgba(255,255,255,.040),
    inset -8px 0 14px rgba(255,255,255,.025)!important;
}
.left-page::after,
.right-page::after{
  opacity:.86!important;
  z-index:5!important;
  mix-blend-mode:normal!important;
}
.left-page::after{
  background:linear-gradient(90deg,
    rgba(255,255,255,.035) 0%,
    rgba(0,0,0,0) 52%,
    rgba(0,0,0,.05) 82%,
    rgba(0,0,0,.18) 100%)!important;
}
.right-page::after{
  background:linear-gradient(270deg,
    rgba(255,255,255,.03) 0%,
    rgba(0,0,0,0) 52%,
    rgba(0,0,0,.045) 82%,
    rgba(0,0,0,.16) 100%)!important;
}
.turning-page{
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  z-index:30!important;
  background:#111!important;
  box-shadow:0 26px 68px rgba(0,0,0,.34)!important;
  will-change:transform,clip-path,filter,opacity!important;
}
.turning-page img{
  object-fit:fill!important;
  background:#111!important;
}
.turning-page::before{
  opacity:.76!important;
  mix-blend-mode:normal!important;
}
.curl-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
  animation:pageQuestCurlNextV078 .94s cubic-bezier(.17,.75,.16,1) both!important;
}
.curl-prev{
  right:50%!important;
  left:auto!important;
  transform-origin:right center!important;
  animation:pageQuestCurlPrevV078 .94s cubic-bezier(.17,.75,.16,1) both!important;
}
.curl-next::before{
  background:
    radial-gradient(ellipse at 0% 50%,rgba(255,255,255,.24),rgba(255,255,255,.08) 18%,rgba(0,0,0,0) 42%),
    linear-gradient(90deg,rgba(0,0,0,.34),rgba(255,255,255,.18) 18%,rgba(0,0,0,.05) 54%,rgba(0,0,0,.40) 100%)!important;
}
.curl-prev::before{
  background:
    radial-gradient(ellipse at 100% 50%,rgba(255,255,255,.24),rgba(255,255,255,.08) 18%,rgba(0,0,0,0) 42%),
    linear-gradient(270deg,rgba(0,0,0,.34),rgba(255,255,255,.18) 18%,rgba(0,0,0,.05) 54%,rgba(0,0,0,.40) 100%)!important;
}
.book.flipping-next .page-shell::before,
.book.flipping-prev .page-shell::before{
  animation:pageQuestSpinePulseV078 .94s ease both!important;
}
.book.flipping-next .right-page,
.book.flipping-prev .left-page{
  animation:pageQuestRevealBrightnessV078 .94s ease both!important;
}
@keyframes pageQuestCurlNextV078{
  0%{transform:translateX(0) rotateY(0deg) skewY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1}
  24%{transform:translateX(-14%) rotateY(-32deg) skewY(-.45deg);clip-path:polygon(0 0,100% 1%,97% 99%,0 100%);filter:brightness(1.02);opacity:1}
  52%{transform:translateX(-55%) rotateY(-92deg) skewY(-1.0deg);clip-path:polygon(0 0,91% 4%,84% 96%,0 100%);filter:brightness(.92);opacity:1}
  82%{transform:translateX(-92%) rotateY(-152deg) skewY(-1.7deg);clip-path:polygon(0 0,74% 9%,64% 91%,0 100%);filter:brightness(.74);opacity:.88}
  100%{transform:translateX(-103%) rotateY(-179deg) skewY(-2deg);clip-path:polygon(0 0,58% 14%,47% 86%,0 100%);filter:brightness(.62);opacity:0}
}
@keyframes pageQuestCurlPrevV078{
  0%{transform:translateX(0) rotateY(0deg) skewY(0deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1}
  24%{transform:translateX(14%) rotateY(32deg) skewY(.45deg);clip-path:polygon(0 1%,100% 0,100% 100%,3% 99%);filter:brightness(1.02);opacity:1}
  52%{transform:translateX(55%) rotateY(92deg) skewY(1.0deg);clip-path:polygon(9% 4%,100% 0,100% 100%,16% 96%);filter:brightness(.92);opacity:1}
  82%{transform:translateX(92%) rotateY(152deg) skewY(1.7deg);clip-path:polygon(26% 9%,100% 0,100% 100%,36% 91%);filter:brightness(.74);opacity:.88}
  100%{transform:translateX(103%) rotateY(179deg) skewY(2deg);clip-path:polygon(42% 14%,100% 0,100% 100%,53% 86%);filter:brightness(.62);opacity:0}
}
@keyframes pageQuestSpinePulseV078{
  0%{opacity:1;filter:blur(2.2px)}
  45%{opacity:.72;filter:blur(4px)}
  100%{opacity:1;filter:blur(2.2px)}
}
@keyframes pageQuestRevealBrightnessV078{
  0%{filter:brightness(.86)}
  45%{filter:brightness(.94)}
  100%{filter:brightness(1)}
}
.fullscreen-reader .book:not(.cover-mode) .page-shell::before{
  width:112px!important;
  opacity:1!important;
}
.fullscreen-reader .book:not(.cover-mode) .page-shell::after{
  opacity:.58!important;
}

/* v0.7.9: single-sheet page turn and darker spine.
   Important behavior change: only the turning sheet moves; the visible spread stays put until the animation finishes. */
.book:not(.cover-mode) .page-shell::before{
  width:118px!important;
  background:
    radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.11) 0%,rgba(255,255,255,.045) 11%,rgba(0,0,0,.18) 31%,rgba(0,0,0,0) 70%),
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.07) 16%,
      rgba(0,0,0,.22) 34%,
      rgba(0,0,0,.34) 45%,
      rgba(255,255,255,.13) 50%,
      rgba(0,0,0,.32) 55%,
      rgba(0,0,0,.20) 66%,
      rgba(0,0,0,.065) 84%,
      rgba(0,0,0,0) 100%)!important;
  opacity:.96!important;
  filter:blur(2.8px)!important;
}
.book:not(.cover-mode) .page-shell::after{
  width:3px!important;
  opacity:.70!important;
  background:linear-gradient(180deg,
    rgba(255,255,255,.22),
    rgba(0,0,0,.34) 18%,
    rgba(255,255,255,.10) 50%,
    rgba(0,0,0,.38) 84%,
    rgba(255,255,255,.18))!important;
  box-shadow:-13px 0 30px rgba(0,0,0,.24),13px 0 30px rgba(0,0,0,.22)!important;
}
.left-page{box-shadow:inset -46px 0 58px rgba(0,0,0,.27),inset -10px 0 18px rgba(255,255,255,.035)!important;}
.right-page{box-shadow:inset 46px 0 58px rgba(0,0,0,.25),inset 10px 0 18px rgba(255,255,255,.032)!important;}

.under-page{
  position:absolute!important;
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  z-index:11!important;
  overflow:hidden!important;
  background:#111!important;
  pointer-events:none!important;
  opacity:1!important;
}
.under-page img{width:100%;height:100%;object-fit:fill;background:#111;}
.under-next{right:12px!important;left:auto!important;border-radius:0 8px 8px 0!important;box-shadow:inset 42px 0 56px rgba(0,0,0,.25)!important;}
.under-prev{left:12px!important;right:auto!important;border-radius:8px 0 0 8px!important;box-shadow:inset -42px 0 56px rgba(0,0,0,.27)!important;}
.under-next::after,.under-prev::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
}
.under-next::after{background:linear-gradient(90deg,rgba(0,0,0,.26),rgba(0,0,0,0) 28%,rgba(255,255,255,.02) 100%);}
.under-prev::after{background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,0) 28%,rgba(255,255,255,.02) 100%);}

.turning-page{
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  height:auto!important;
  z-index:40!important;
  overflow:hidden!important;
  background:#f5f1e9!important;
  will-change:transform,clip-path,filter,opacity!important;
  transform-style:preserve-3d!important;
  box-shadow:0 34px 80px rgba(0,0,0,.46)!important;
}
.turning-page img{width:100%;height:100%;object-fit:fill!important;background:#111!important;}
.turning-page::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:3!important;
  opacity:1!important;
  mix-blend-mode:multiply!important;
}
.turning-page::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:4!important;
  opacity:.72!important;
}
.curl-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
  border-radius:0 8px 8px 0!important;
  animation:pageQuestSheetTurnNextV079 1.08s cubic-bezier(.16,.72,.12,1) both!important;
}
.curl-prev{
  right:50%!important;
  left:auto!important;
  transform-origin:right center!important;
  border-radius:8px 0 0 8px!important;
  animation:pageQuestSheetTurnPrevV079 1.08s cubic-bezier(.16,.72,.12,1) both!important;
}
.curl-next::before{
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.05) 17%,rgba(0,0,0,.08) 46%,rgba(0,0,0,.50) 77%,rgba(0,0,0,.78) 100%)!important;
}
.curl-prev::before{
  background:linear-gradient(270deg,rgba(0,0,0,.30),rgba(255,255,255,.05) 17%,rgba(0,0,0,.08) 46%,rgba(0,0,0,.50) 77%,rgba(0,0,0,.78) 100%)!important;
}
.curl-next::after{
  background:radial-gradient(ellipse at 0% 50%,rgba(255,255,255,.38),rgba(255,255,255,.16) 19%,rgba(0,0,0,0) 46%),linear-gradient(90deg,rgba(255,255,255,.11),rgba(0,0,0,0) 40%)!important;
}
.curl-prev::after{
  background:radial-gradient(ellipse at 100% 50%,rgba(255,255,255,.38),rgba(255,255,255,.16) 19%,rgba(0,0,0,0) 46%),linear-gradient(270deg,rgba(255,255,255,.11),rgba(0,0,0,0) 40%)!important;
}

@keyframes pageQuestSheetTurnNextV079{
  0%{transform:translateX(0) perspective(2400px) rotateY(0deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1;box-shadow:-6px 0 24px rgba(0,0,0,.22)}
  18%{transform:translateX(-4%) perspective(2400px) rotateY(-24deg) skewY(-.7deg) scaleX(.985);clip-path:polygon(0 0,100% 1%,99% 99%,0 100%);filter:brightness(1.02);opacity:1;box-shadow:-18px 0 44px rgba(0,0,0,.30)}
  42%{transform:translateX(-33%) perspective(2400px) rotateY(-76deg) skewY(-1.8deg) scaleX(.90);clip-path:polygon(0 0,96% 3%,88% 97%,0 100%);filter:brightness(.95);opacity:1;box-shadow:-34px 0 70px rgba(0,0,0,.42)}
  63%{transform:translateX(-70%) perspective(2400px) rotateY(-126deg) skewY(-2.8deg) scaleX(.78);clip-path:polygon(0 0,86% 8%,70% 92%,0 100%);filter:brightness(.82);opacity:.98;box-shadow:-48px 0 86px rgba(0,0,0,.48)}
  84%{transform:translateX(-94%) perspective(2400px) rotateY(-164deg) skewY(-3.5deg) scaleX(.68);clip-path:polygon(0 0,68% 13%,48% 87%,0 100%);filter:brightness(.67);opacity:.82;box-shadow:-26px 0 70px rgba(0,0,0,.40)}
  100%{transform:translateX(-106%) perspective(2400px) rotateY(-181deg) skewY(-4deg) scaleX(.60);clip-path:polygon(0 0,47% 18%,28% 82%,0 100%);filter:brightness(.56);opacity:0;box-shadow:-12px 0 30px rgba(0,0,0,.25)}
}
@keyframes pageQuestSheetTurnPrevV079{
  0%{transform:translateX(0) perspective(2400px) rotateY(0deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);opacity:1;box-shadow:6px 0 24px rgba(0,0,0,.22)}
  18%{transform:translateX(4%) perspective(2400px) rotateY(24deg) skewY(.7deg) scaleX(.985);clip-path:polygon(1% 1%,100% 0,100% 100%,0 99%);filter:brightness(1.02);opacity:1;box-shadow:18px 0 44px rgba(0,0,0,.30)}
  42%{transform:translateX(33%) perspective(2400px) rotateY(76deg) skewY(1.8deg) scaleX(.90);clip-path:polygon(4% 3%,100% 0,100% 100%,12% 97%);filter:brightness(.95);opacity:1;box-shadow:34px 0 70px rgba(0,0,0,.42)}
  63%{transform:translateX(70%) perspective(2400px) rotateY(126deg) skewY(2.8deg) scaleX(.78);clip-path:polygon(14% 8%,100% 0,100% 100%,30% 92%);filter:brightness(.82);opacity:.98;box-shadow:48px 0 86px rgba(0,0,0,.48)}
  84%{transform:translateX(94%) perspective(2400px) rotateY(164deg) skewY(3.5deg) scaleX(.68);clip-path:polygon(32% 13%,100% 0,100% 100%,52% 87%);filter:brightness(.67);opacity:.82;box-shadow:26px 0 70px rgba(0,0,0,.40)}
  100%{transform:translateX(106%) perspective(2400px) rotateY(181deg) skewY(4deg) scaleX(.60);clip-path:polygon(53% 18%,100% 0,100% 100%,72% 82%);filter:brightness(.56);opacity:0;box-shadow:12px 0 30px rgba(0,0,0,.25)}
}
.book.flipping-next .page-shell::before,
.book.flipping-prev .page-shell::before{animation:pageQuestSpinePulseV079 1.08s ease both!important;}
@keyframes pageQuestSpinePulseV079{0%{opacity:.96;filter:blur(2.8px)}45%{opacity:1;filter:blur(3.4px)}100%{opacity:.96;filter:blur(2.8px)}}
.fullscreen-reader .book:not(.cover-mode) .page-shell::before{width:134px!important;opacity:1!important;}
.fullscreen-reader .book:not(.cover-mode) .page-shell::after{opacity:.76!important;}

/* v0.8.0: attached two-sided page curl.
   Keep the v0.7.9 spine/gutter, but make the turning page behave like a hinged sheet:
   front = current page, back = destination opposite page, under = destination page behind it. */
.book:not(.cover-mode){perspective:3200px!important;}
.book:not(.cover-mode) .page-shell{transform-style:preserve-3d!important;}

.turning-page{
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  height:auto!important;
  z-index:40!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  will-change:transform,filter!important;
}
.turn-face{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:#f7f2e8!important;
  border-radius:inherit!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  box-shadow:0 26px 64px rgba(0,0,0,.30)!important;
}
.turn-face img{width:100%!important;height:100%!important;object-fit:fill!important;background:#111!important;display:block!important;}
.turn-front{transform:rotateY(0deg)!important;}
.turn-back{transform:rotateY(180deg)!important;}
.turn-front::after,.turn-back::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.92!important;
}
.curl-next .turn-front::after{background:linear-gradient(90deg,rgba(0,0,0,.18),rgba(255,255,255,.10) 24%,rgba(0,0,0,.05) 56%,rgba(0,0,0,.42) 100%)!important;}
.curl-next .turn-back::after{background:linear-gradient(90deg,rgba(0,0,0,.48),rgba(0,0,0,.11) 31%,rgba(255,255,255,.10) 70%,rgba(0,0,0,.10) 100%)!important;}
.curl-prev .turn-front::after{background:linear-gradient(270deg,rgba(0,0,0,.18),rgba(255,255,255,.10) 24%,rgba(0,0,0,.05) 56%,rgba(0,0,0,.42) 100%)!important;}
.curl-prev .turn-back::after{background:linear-gradient(270deg,rgba(0,0,0,.48),rgba(0,0,0,.11) 31%,rgba(255,255,255,.10) 70%,rgba(0,0,0,.10) 100%)!important;}
.turning-page::before,
.turning-page::after{display:none!important;content:none!important;}

.curl-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
  border-radius:0 8px 8px 0!important;
  animation:pageQuestAttachedCurlNextV080 1.18s cubic-bezier(.22,.72,.12,1) both!important;
}
.curl-prev{
  right:50%!important;
  left:auto!important;
  transform-origin:right center!important;
  border-radius:8px 0 0 8px!important;
  animation:pageQuestAttachedCurlPrevV080 1.18s cubic-bezier(.22,.72,.12,1) both!important;
}

/* Under-page stays exactly in the destination half, so the reveal aligns with the curl. */
.under-page{
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  z-index:10!important;
  opacity:1!important;
  overflow:hidden!important;
  background:#111!important;
  pointer-events:none!important;
}
.under-page img{width:100%!important;height:100%!important;object-fit:fill!important;background:#111!important;display:block!important;}
.under-next{left:50%!important;right:auto!important;border-radius:0 8px 8px 0!important;}
.under-prev{right:50%!important;left:auto!important;border-radius:8px 0 0 8px!important;}
.under-next::after{background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 26%)!important;}
.under-prev::after{background:linear-gradient(270deg,rgba(0,0,0,.24),rgba(0,0,0,0) 26%)!important;}

@keyframes pageQuestAttachedCurlNextV080{
  0%{transform:rotateY(0deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
  12%{transform:rotateY(-16deg) skewY(-.4deg) scaleX(.998);clip-path:polygon(0 0,100% .5%,100% 99.5%,0 100%);filter:brightness(1.03);}
  28%{transform:rotateY(-42deg) skewY(-1.2deg) scaleX(.985);clip-path:polygon(0 0,99% 1.6%,97% 98.4%,0 100%);filter:brightness(1.02);}
  48%{transform:rotateY(-84deg) skewY(-2.4deg) scaleX(.955);clip-path:polygon(0 0,94% 4.2%,88% 95.8%,0 100%);filter:brightness(.93);}
  68%{transform:rotateY(-126deg) skewY(-2.0deg) scaleX(.975);clip-path:polygon(0 0,92% 3.8%,86% 96.2%,0 100%);filter:brightness(.88);}
  86%{transform:rotateY(-164deg) skewY(-.8deg) scaleX(.995);clip-path:polygon(0 0,98% 1.2%,96% 98.8%,0 100%);filter:brightness(.94);}
  100%{transform:rotateY(-180deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
}
@keyframes pageQuestAttachedCurlPrevV080{
  0%{transform:rotateY(0deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
  12%{transform:rotateY(16deg) skewY(.4deg) scaleX(.998);clip-path:polygon(0 .5%,100% 0,100% 100%,0 99.5%);filter:brightness(1.03);}
  28%{transform:rotateY(42deg) skewY(1.2deg) scaleX(.985);clip-path:polygon(1% 1.6%,100% 0,100% 100%,3% 98.4%);filter:brightness(1.02);}
  48%{transform:rotateY(84deg) skewY(2.4deg) scaleX(.955);clip-path:polygon(6% 4.2%,100% 0,100% 100%,12% 95.8%);filter:brightness(.93);}
  68%{transform:rotateY(126deg) skewY(2.0deg) scaleX(.975);clip-path:polygon(8% 3.8%,100% 0,100% 100%,14% 96.2%);filter:brightness(.88);}
  86%{transform:rotateY(164deg) skewY(.8deg) scaleX(.995);clip-path:polygon(2% 1.2%,100% 0,100% 100%,4% 98.8%);filter:brightness(.94);}
  100%{transform:rotateY(180deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
}
.book.flipping-next .page-shell::before,
.book.flipping-prev .page-shell::before{animation:pageQuestSpinePulseV080 1.18s ease both!important;}
@keyframes pageQuestSpinePulseV080{0%{opacity:.96;filter:blur(2.8px)}50%{opacity:1;filter:blur(3px)}100%{opacity:.96;filter:blur(2.8px)}}

/* v0.8.1: smoother hinged-sheet page turn.
   Keep the v0.8 spine/gutter appearance. The spread is locked in place by JS while only
   the hinged sheet rotates, so the book should not jolt down/up during the turn. */
.book.page-turning{
  transform:translateZ(0)!important;
  contain:paint!important;
}
.book.page-turning .page-shell{
  transform:none!important;
  animation:none!important;
}
.book.page-turning .left-page,
.book.page-turning .right-page{
  animation:none!important;
}
.turning-page{
  top:12px!important;
  bottom:12px!important;
  height:auto!important;
  width:calc(50% - 12px)!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  will-change:transform!important;
  z-index:45!important;
}
.turn-face{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:#f7f2e8!important;
  border-radius:inherit!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  box-shadow:0 28px 70px rgba(0,0,0,.34)!important;
}
.turn-face img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  background:#111!important;
}
.turn-front{
  transform:translateZ(1px) rotateY(0deg)!important;
  opacity:1;
}
.turn-back{
  transform:translateZ(-1px) rotateY(180deg)!important;
  opacity:0;
}
.curl-next .turn-front{animation:pageQuestFrontFaceNextV081 1.32s linear both!important;}
.curl-next .turn-back{animation:pageQuestBackFaceNextV081 1.32s linear both!important;}
.curl-prev .turn-front{animation:pageQuestFrontFacePrevV081 1.32s linear both!important;}
.curl-prev .turn-back{animation:pageQuestBackFacePrevV081 1.32s linear both!important;}
.turn-front::after,.turn-back::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  mix-blend-mode:multiply!important;
}
.curl-next .turn-front::after{background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(255,255,255,.08) 23%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.46) 100%)!important;opacity:.82!important;}
.curl-next .turn-back::after{background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.09) 28%,rgba(255,255,255,.09) 68%,rgba(0,0,0,.12) 100%)!important;opacity:.78!important;}
.curl-prev .turn-front::after{background:linear-gradient(270deg,rgba(0,0,0,.16),rgba(255,255,255,.08) 23%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.46) 100%)!important;opacity:.82!important;}
.curl-prev .turn-back::after{background:linear-gradient(270deg,rgba(0,0,0,.34),rgba(0,0,0,.09) 28%,rgba(255,255,255,.09) 68%,rgba(0,0,0,.12) 100%)!important;opacity:.78!important;}
.turning-page::before,.turning-page::after{display:none!important;content:none!important;}

/* Under page remains exactly in its book half; it no longer slides or resizes mid-turn. */
.under-page{
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  height:auto!important;
  z-index:12!important;
  opacity:1!important;
  overflow:hidden!important;
  background:#111!important;
  pointer-events:none!important;
  transform:none!important;
}
.under-page img{width:100%!important;height:100%!important;object-fit:fill!important;display:block!important;background:#111!important;}
.under-next{left:50%!important;right:auto!important;border-radius:0 8px 8px 0!important;}
.under-prev{right:50%!important;left:auto!important;border-radius:8px 0 0 8px!important;}
.under-next::after,.under-prev::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;}
.under-next::after{background:linear-gradient(90deg,rgba(0,0,0,.24),rgba(0,0,0,0) 30%)!important;}
.under-prev::after{background:linear-gradient(270deg,rgba(0,0,0,.26),rgba(0,0,0,0) 30%)!important;}

.curl-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
  border-radius:0 8px 8px 0!important;
  animation:pageQuestAttachedCurlNextV081 1.32s cubic-bezier(.18,.62,.12,1) both!important;
}
.curl-prev{
  right:50%!important;
  left:auto!important;
  transform-origin:right center!important;
  border-radius:8px 0 0 8px!important;
  animation:pageQuestAttachedCurlPrevV081 1.32s cubic-bezier(.18,.62,.12,1) both!important;
}

@keyframes pageQuestAttachedCurlNextV081{
  0%{transform:rotateY(0deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
  10%{transform:rotateY(-10deg) skewY(-.15deg) scaleX(1);clip-path:polygon(0 0,100% .2%,100% 99.8%,0 100%);filter:brightness(1.02);}
  24%{transform:rotateY(-34deg) skewY(-.75deg) scaleX(.996);clip-path:polygon(0 0,99.5% 1.1%,98.5% 98.9%,0 100%);filter:brightness(1.01);}
  40%{transform:rotateY(-68deg) skewY(-1.55deg) scaleX(.982);clip-path:polygon(0 0,98% 2.6%,94% 97.4%,0 100%);filter:brightness(.96);}
  52%{transform:rotateY(-92deg) skewY(-2.05deg) scaleX(.966);clip-path:polygon(0 0,94% 4.5%,88% 95.5%,0 100%);filter:brightness(.90);}
  66%{transform:rotateY(-120deg) skewY(-1.75deg) scaleX(.976);clip-path:polygon(0 0,93% 4.0%,88% 96%,0 100%);filter:brightness(.88);}
  82%{transform:rotateY(-154deg) skewY(-.8deg) scaleX(.994);clip-path:polygon(0 0,98% 1.5%,96% 98.5%,0 100%);filter:brightness(.94);}
  100%{transform:rotateY(-180deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
}
@keyframes pageQuestAttachedCurlPrevV081{
  0%{transform:rotateY(0deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
  10%{transform:rotateY(10deg) skewY(.15deg) scaleX(1);clip-path:polygon(0 .2%,100% 0,100% 100%,0 99.8%);filter:brightness(1.02);}
  24%{transform:rotateY(34deg) skewY(.75deg) scaleX(.996);clip-path:polygon(.5% 1.1%,100% 0,100% 100%,1.5% 98.9%);filter:brightness(1.01);}
  40%{transform:rotateY(68deg) skewY(1.55deg) scaleX(.982);clip-path:polygon(2% 2.6%,100% 0,100% 100%,6% 97.4%);filter:brightness(.96);}
  52%{transform:rotateY(92deg) skewY(2.05deg) scaleX(.966);clip-path:polygon(6% 4.5%,100% 0,100% 100%,12% 95.5%);filter:brightness(.90);}
  66%{transform:rotateY(120deg) skewY(1.75deg) scaleX(.976);clip-path:polygon(7% 4.0%,100% 0,100% 100%,12% 96%);filter:brightness(.88);}
  82%{transform:rotateY(154deg) skewY(.8deg) scaleX(.994);clip-path:polygon(2% 1.5%,100% 0,100% 100%,4% 98.5%);filter:brightness(.94);}
  100%{transform:rotateY(180deg) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
}
@keyframes pageQuestFrontFaceNextV081{0%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes pageQuestBackFaceNextV081{0%,48%{opacity:0}52%,100%{opacity:1}}
@keyframes pageQuestFrontFacePrevV081{0%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes pageQuestBackFacePrevV081{0%,48%{opacity:0}52%,100%{opacity:1}}
.book.flipping-next .page-shell::before,
.book.flipping-prev .page-shell::before{animation:pageQuestSpinePulseV081 1.32s ease both!important;}
@keyframes pageQuestSpinePulseV081{0%{opacity:.96;filter:blur(2.8px)}50%{opacity:1;filter:blur(3px)}100%{opacity:.96;filter:blur(2.8px)}}
.scan-status {
  color: rgba(226, 232, 240, 0.72);
  font-size: 0.78rem;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v0.8.4: top-bar cleanup and full settings screen */
.top-icon-button{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  font-size:18px;
  margin-left:auto;
}
.topbar .details-top-button{
  min-width:38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  font-size:22px;
}
.settings-view{
  padding:22px 24px 70px;
  min-height:calc(100vh - 66px);
}
.settings-page{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:22px;
  min-height:calc(100vh - 120px);
}
.settings-sidebar{
  background:linear-gradient(180deg,rgba(13,23,33,.98),rgba(8,16,24,.98));
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  align-self:start;
  position:sticky;
  top:88px;
}
.settings-sidebar h2{
  margin:0 0 18px;
  font-size:24px;
}
.settings-group-title{
  margin:10px 0 8px;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#b6c3d2;
}
.settings-nav{
  width:100%;
  display:block;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--text);
  border-radius:8px;
  padding:11px 12px;
  cursor:pointer;
  margin-bottom:4px;
}
.settings-nav:hover,
.settings-nav.active{
  background:#1d63d8;
}
.settings-content-panel{
  min-width:0;
}
.settings-section-panel h1{
  margin:0 0 8px;
  font-size:32px;
}
.settings-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
  margin-top:18px;
}
.settings-card,
.settings-library-card{
  background:linear-gradient(180deg,#162231,#101923);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.20);
}
.settings-card h3,
.settings-library-card h3{
  margin-top:0;
}
.settings-library-card{
  max-width:820px;
  margin-top:18px;
}
.settings-library-card input{
  width:100%;
  box-sizing:border-box;
  background:#071018;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  margin-top:6px;
}
.settings-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
@media(max-width:900px){
  .settings-page{grid-template-columns:1fr;}
  .settings-sidebar{position:relative;top:auto;}
}
.settings-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.inline-actions{margin-top:0; white-space:nowrap;}
.libraries-table-wrap{
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#0c131c;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.libraries-table{
  width:100%;
  border-collapse:collapse;
}
.libraries-table th,
.libraries-table td{
  padding:14px 16px;
  text-align:left;
  border-bottom:1px solid rgba(139,156,180,.22);
  vertical-align:top;
}
.libraries-table th{
  color:#cbd6e2;
  font-size:13px;
  font-weight:700;
  background:#101923;
}
.libraries-table tr:last-child td{border-bottom:0;}
.library-folder-path{
  color:#d8e4ef;
  font-size:13px;
  line-height:1.35;
  word-break:break-word;
  margin-bottom:4px;
}
.library-actions{display:flex; gap:8px;}
.small-icon{
  display:inline-grid;
  place-items:center;
  border:1px solid var(--line);
  background:#223143;
  color:#fff;
  border-radius:8px;
  min-width:34px;
  min-height:32px;
  cursor:pointer;
}
.small-icon:hover{background:#2f4661;}
.small-icon.danger{background:#9c1f34; border-color:#d04d63;}
.empty-row{color:#9fb0c2; text-align:center; padding:22px!important;}
.settings-library-card.compact select,
.settings-library-card.compact textarea,
.settings-library-card.compact input{
  width:100%;
  box-sizing:border-box;
  background:#071018;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px;
  margin:6px 0 12px;
  font-family:inherit;
}
.settings-library-card.compact textarea{resize:vertical; min-height:96px;}
@media(max-width:900px){
  .settings-title-row{flex-direction:column;}
  .libraries-table-wrap{overflow-x:auto;}
}

/* v0.8.6: panel animation performance pass
   Avoid animating the CSS grid columns while many cards are visible. Grid-column
   animation forces the browser to recompute the entire card grid every frame.
   The panel state now snaps the layout width, while the panel contents fade/slide
   using compositor-friendly transforms. */
.shell{
  transition:none!important;
  contain:layout style paint;
}
.sidebar,.details{
  contain:layout style paint;
  transform:translateZ(0);
  will-change:transform,opacity;
}
.main{
  contain:layout paint;
  transform:translateZ(0);
  backface-visibility:hidden;
}
.grid,.card-row,#grid,#recentGrid{
  contain:layout paint;
  content-visibility:auto;
  contain-intrinsic-size:900px 1200px;
}
.card,.category-card,.collection{
  backface-visibility:hidden;
  transform:translateZ(0);
}
body.panel-animating .card,
body.panel-animating .category-card,
body.panel-animating .collection,
body.panel-animating .cover-wrap img,
body.panel-animating .platform-icon{
  transition:none!important;
  animation:none!important;
}
body.panel-animating .card:hover,
body.panel-animating .card.selected,
body.panel-animating .category-card:hover{
  transform:translateZ(0)!important;
  box-shadow:none!important;
}
body.panel-animating .main{
  pointer-events:none;
}
body.left-collapsed .brand-text,
body.left-collapsed .nav-label,
body.left-collapsed .nav em,
body.left-collapsed .side-section h3,
body.left-collapsed .category-group h4,
body.left-collapsed .system-btn span,
body.left-collapsed .system-btn em{
  transition:none!important;
}
.details-inner{
  transition:opacity .12s ease, transform .12s ease!important;
}
body.right-collapsed .details-inner{
  transform:translateX(10px);
}
@media (prefers-reduced-motion: reduce){
  .sidebar,.details,.details-inner,.card,.category-card,.collection{transition:none!important;animation:none!important;}
}


.folder-input-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.folder-input-row input{
  min-width:0;
}


/* v0.8.9.1 — safe NES manual cover ratio.
   This does not change grid routing, card width, click behavior, or navigation state.
   It only changes the cover window for NES manual cards so wide booklet scans are not cropped. */
.card.nes-manual-card .cover-wrap{
  aspect-ratio:1.48 / 1;
  background:linear-gradient(180deg,#05080d,#0b1018);
}
.card.nes-manual-card .cover-wrap img{
  object-fit:contain;
  background:#05080d;
}
.card.nes-manual-card .card-title{
  white-space:normal;
  line-height:1.18;
}

/* v0.9.0 — drill-in detail page and sidebar removal */
:root{--right:0px;}
.shell{
  grid-template-columns:var(--left) minmax(0,1fr)!important;
}
.main{
  min-width:0;
}
.details,
.details-top-button{
  display:none!important;
}
.detail-view{
  padding:22px 24px 70px;
  min-height:calc(100vh - 66px);
}
.detail-page-shell{
  max-width:1280px;
  margin:0 auto;
}
.detail-page-top{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}
.detail-page-top h1{
  margin:0 0 4px;
  font-size:34px;
  line-height:1.1;
}
.detail-page-grid{
  display:grid;
  grid-template-columns:minmax(240px,330px) minmax(0,1fr);
  gap:22px;
  align-items:start;
}
.detail-cover-column,
.detail-main-column{
  background:linear-gradient(180deg,#162231,#101923);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
}
.detail-cover-column{
  position:sticky;
  top:88px;
}
.detail-action-stack{
  margin-top:12px;
}
.detail-main-column .tabs{
  margin-top:0;
}
.detail-main-column textarea,
.detail-main-column input,
.detail-main-column select{
  width:100%;
  box-sizing:border-box;
  background:#071018;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 12px;
  font-family:inherit;
}
.edit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px 14px;
}
.detail-cover.nes-detail-cover{
  aspect-ratio:1.48 / 1!important;
  object-fit:contain!important;
  background:#05080d!important;
}
.book.wide-manual{
  width:min(92vw,980px)!important;
  height:min(68vh,620px)!important;
}
.book.wide-manual.cover-mode{
  width:min(90vw,900px)!important;
  height:min(62vh,560px)!important;
}
.book.wide-manual .page-side img,
.book.wide-manual .page-shell img,
.book.wide-manual .turning-page img{
  object-fit:contain!important;
  background:#111!important;
}
@media(max-width:900px){
  .detail-page-grid{grid-template-columns:1fr;}
  .detail-cover-column{position:relative;top:auto;max-width:420px;}
  .detail-page-top{flex-direction:column;}
}

/* NES system/category card uses the same wide-booklet treatment as NES manual items. */
.category-card.nes-manual-category .category-cover-stack{
  aspect-ratio:1.48 / 1!important;
  width:180px!important;
  height:auto!important;
  min-height:112px!important;
  background:#05080d!important;
}
.category-card.nes-manual-category .category-cover-stack img{
  object-fit:contain!important;
  background:#05080d!important;
}

/* v0.9.1 — Guidevault brand mark, cleaner details overview, flexible cover sizing */
.logo.gv-cartridge{
  position:relative;
  width:48px;
  height:38px;
  border-radius:8px 8px 11px 11px;
  border:1px solid rgba(255,210,63,.68);
  background:
    radial-gradient(circle at 50% 48%,rgba(255,210,63,.20),transparent 28%),
    linear-gradient(180deg,#26394c,#0b131c 72%,#070b11);
  color:#ffe9a6;
  box-shadow:0 0 22px rgba(255,210,63,.18), inset 0 0 0 1px rgba(255,255,255,.055);
  overflow:hidden;
}
.logo.gv-cartridge::before{
  content:"";
  position:absolute;
  top:4px;
  left:10px;
  right:10px;
  height:5px;
  border-radius:0 0 5px 5px;
  background:rgba(0,0,0,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.logo.gv-cartridge::after{
  content:"";
  position:absolute;
  left:50%;
  top:18px;
  width:21px;
  height:21px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid rgba(255,210,63,.72);
  box-shadow:0 0 0 5px rgba(47,129,255,.08), inset 0 0 0 2px rgba(0,0,0,.34);
  opacity:.86;
}
.logo.gv-cartridge span{
  position:relative;
  z-index:2;
  margin-top:4px;
  font-size:11px;
  line-height:1;
  letter-spacing:.05em;
  text-shadow:0 2px 5px rgba(0,0,0,.7);
}
.detail-cover{
  display:block;
  width:100%;
  height:auto;
  max-height:560px;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  background:#05080d!important;
}
.detail-cover-column{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.detail-main-column #description{
  white-space:pre-wrap;
  color:#cbd8e8;
  line-height:1.55;
}
.meta-link{
  color:#8ebdff;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.meta-link:hover{text-decoration:underline;}
@media(max-width:900px){
  .detail-cover{max-height:420px;}
}

/* v0.9.2 — Guidevault GV mark and non-cropping covers */
.logo.gv-cartridge span{
  font-size:12px!important;
  letter-spacing:.08em!important;
}
.card .cover-wrap img,
.category-cover-stack img{
  object-fit:contain!important;
  background:#05080d!important;
}
.detail-page-grid{
  grid-template-columns:minmax(280px,440px) minmax(0,1fr)!important;
}
.detail-cover{
  width:100%!important;
  max-height:640px!important;
  object-fit:contain!important;
}
@media(max-width:900px){
  .detail-page-grid{grid-template-columns:1fr!important;}
  .detail-cover-column{max-width:560px!important;}
}

/* v0.9.3 — cleaner Guidevault left navigation */
.sidebar{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sidebar::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
.nav{
  font-size:15.5px;
  line-height:1.28;
  padding:11px 12px;
}
.nav-icon{
  width:24px;
  font-size:20px;
}
.nav-label{
  font-size:15.5px;
}
.nav em{
  font-size:13px;
}
body.left-collapsed .nav-icon{
  font-size:21px;
}

/* v0.9.4 — wordmark-only sidebar branding */
.brand.wordmark-brand{
  gap:10px;
  padding:14px 12px;
  min-height:82px;
  align-items:center;
}
.brand-wordmark{
  display:block;
  width:min(192px,calc(var(--left) - 78px));
  max-width:192px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(47,129,255,.20));
}
body.left-collapsed .brand.wordmark-brand{
  padding:18px 10px;
  justify-content:center;
}
body.left-collapsed .brand-wordmark{
  display:none;
}
#lookupPlatformsBtn.lookup-busy{
  opacity:.72;
  pointer-events:none;
}
.platform-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.platform-list .tag{
  margin:0;
}
@media(max-width:900px){
  .brand-wordmark{max-width:166px;}
}

/* v0.9.5 — themed main scrollbar and A-Z/# jump rail */
.main{
  overflow-y:auto!important;
  overflow-x:hidden;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(86,153,255,.72) rgba(7,16,24,.84)!important;
}
.main::-webkit-scrollbar{
  width:12px!important;
  height:12px!important;
}
.main::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(7,16,24,.94),rgba(13,23,33,.94));
  border-left:1px solid rgba(86,153,255,.16);
}
.main::-webkit-scrollbar-thumb{
  min-height:48px;
  border:3px solid rgba(7,16,24,.96);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 24%),
    linear-gradient(180deg,#67aeff,#2468d7 58%,#103d84);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 14px rgba(47,129,255,.28);
}
.main::-webkit-scrollbar-thumb:hover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.24),transparent 24%),
    linear-gradient(180deg,#8dc4ff,#3488ff 58%,#174ea6);
}
.main::-webkit-scrollbar-corner{background:#071018;}
.library-view{padding-right:68px;}
.alpha-rail{
  position:fixed;
  top:112px;
  right:18px;
  z-index:6;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:7px 5px;
  max-height:calc(100vh - 138px);
  border:1px solid rgba(86,153,255,.24);
  border-radius:999px;
  background:linear-gradient(180deg,rgba(13,23,33,.92),rgba(5,10,16,.88));
  box-shadow:0 18px 48px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(12px);
}
.alpha-jump{
  width:24px;
  height:20px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#cfe1ff;
  font-size:10.5px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:background .12s ease,color .12s ease,transform .12s ease;
}
.alpha-jump:not(:disabled):hover{
  background:linear-gradient(180deg,#3f96ff,#1c62d5);
  color:white;
  transform:scale(1.08);
  box-shadow:0 0 18px rgba(47,129,255,.42);
}
.alpha-jump:disabled,
.alpha-jump.disabled{
  color:rgba(142,160,182,.28);
  cursor:default;
}
@media(max-width:900px){
  .library-view{padding-right:46px;}
  .alpha-rail{right:7px;top:98px;padding:5px 3px;gap:1px;}
  .alpha-jump{width:20px;height:17px;font-size:9.5px;}
}

/* v0.9.6 — thicker main scrollbar and taller A-Z/# jump rail */
.main{
  scrollbar-width:auto!important;
  scrollbar-color:rgba(86,153,255,.82) rgba(7,16,24,.86)!important;
}
.main::-webkit-scrollbar{
  width:17px!important;
  height:17px!important;
}
.main::-webkit-scrollbar-thumb{
  min-height:64px;
  border:4px solid rgba(7,16,24,.96);
}
.library-view{padding-right:88px;}
.alpha-rail{
  position:fixed;
  top:88px;
  bottom:22px;
  right:calc(var(--right) + 18px);
  max-height:none;
  min-height:420px;
  display:flex;
  justify-content:space-between;
  gap:0;
  padding:10px 6px;
  width:42px;
}
.alpha-jump{
  width:29px;
  height:23px;
  font-size:12.25px;
  letter-spacing:.02em;
}
body.right-collapsed .alpha-rail{right:64px;}
@media(max-height:740px){
  .alpha-rail{top:82px;bottom:14px;min-height:0;padding:7px 5px;}
  .alpha-jump{height:20px;font-size:11px;}
}
@media(max-width:900px){
  .library-view{padding-right:58px;}
  .alpha-rail{right:calc(var(--right) + 8px);top:82px;bottom:12px;width:34px;padding:6px 4px;}
  body.right-collapsed .alpha-rail{right:52px;}
  .alpha-jump{width:23px;height:19px;font-size:10.5px;}
}

/* v0.9.7 — dock the A-Z/# jump rail closer to the main content edge */
.alpha-rail{
  right:calc(var(--right) + 4px)!important;
}
body.right-collapsed .alpha-rail{
  right:24px!important;
}
@media(max-width:900px){
  .alpha-rail{right:4px!important;}
  body.right-collapsed .alpha-rail{right:18px!important;}
}

/* v0.9.8 — collapsible category groups and pinned unsorted/multi-platform ordering */
.category-group{
  margin:10px 0 16px;
}
.category-group-toggle{
  width:100%;
  min-height:34px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 6px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#b6c3d2;
  cursor:pointer;
  text-align:left;
  text-transform:uppercase;
  letter-spacing:.105em;
  font-size:11px;
  font-weight:800;
}
.category-group-toggle:hover{
  background:rgba(255,255,255,.045);
  color:#e4eeff;
}
.category-group-toggle .collapse-mark{
  width:16px;
  color:#71adff;
  font-size:13px;
  line-height:1;
  text-align:center;
  flex:0 0 auto;
}
.category-group-toggle .category-group-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  flex:1;
}
.category-group-toggle em{
  font-style:normal;
  color:#8ea0b6;
  letter-spacing:0;
  font-size:11px;
  font-weight:700;
}
.category-body{
  display:block;
}
.category-group.collapsed .category-body{
  display:none;
}
.category-group.collapsed{
  margin-bottom:8px;
}
body.left-collapsed .category-group-toggle{
  justify-content:center;
  padding:10px 0;
}
body.left-collapsed .category-group-toggle .category-group-label,
body.left-collapsed .category-group-toggle em{
  display:none;
}
body.left-collapsed .category-group-toggle .collapse-mark{
  width:auto;
  font-size:15px;
}
body.left-collapsed .category-body{
  display:none!important;
}


/* v0.8.6: fluid reader page turn pass.
   This intentionally overrides the older stacked v0.7/v0.8 page-turn attempts with one smoother,
   ComicRack/Moon+ inspired hinged-sheet motion. The page faces are allowed to flip naturally through
   backface-visibility instead of snapping opacity halfway through the turn. */
.reader-stage{
  perspective:3600px!important;
}
.book:not(.cover-mode){
  perspective:3600px!important;
  transform-style:preserve-3d!important;
}
.book.page-turning{
  transform:translate3d(0,0,0)!important;
  contain:paint!important;
  overflow:visible!important;
}
.book.page-turning .page-shell{
  transform:none!important;
  animation:none!important;
}
.book.page-turning .left-page,
.book.page-turning .right-page{
  animation:none!important;
}
.turning-page{
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  height:auto!important;
  z-index:60!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  will-change:transform,filter!important;
  clip-path:none!important;
}
.turn-face{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:#f6f0e6!important;
  border-radius:inherit!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  opacity:1!important;
  box-shadow:0 22px 58px rgba(0,0,0,.30)!important;
  animation:none!important;
}
.turn-face img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  background:#111!important;
}
.turn-front{transform:translateZ(.9px) rotateY(0deg)!important;}
.turn-back{transform:translateZ(-.9px) rotateY(180deg)!important;}
.turn-front::after,
.turn-back::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  mix-blend-mode:multiply!important;
  animation:none!important;
}
.turn-front::before,
.turn-back::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:16px!important;
  pointer-events:none!important;
  z-index:3!important;
  opacity:.65!important;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,0))!important;
}
.curl-next .turn-front::before,
.curl-next .turn-back::before{right:0!important;left:auto!important;}
.curl-prev .turn-front::before,
.curl-prev .turn-back::before{left:0!important;right:auto!important;transform:scaleX(-1)!important;}
.curl-next .turn-front::after{background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(255,255,255,.045) 25%,rgba(0,0,0,.10) 68%,rgba(0,0,0,.34) 100%)!important;opacity:.70!important;}
.curl-next .turn-back::after{background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.09) 32%,rgba(255,255,255,.07) 68%,rgba(0,0,0,.08) 100%)!important;opacity:.62!important;}
.curl-prev .turn-front::after{background:linear-gradient(270deg,rgba(0,0,0,.08),rgba(255,255,255,.045) 25%,rgba(0,0,0,.10) 68%,rgba(0,0,0,.34) 100%)!important;opacity:.70!important;}
.curl-prev .turn-back::after{background:linear-gradient(270deg,rgba(0,0,0,.30),rgba(0,0,0,.09) 32%,rgba(255,255,255,.07) 68%,rgba(0,0,0,.08) 100%)!important;opacity:.62!important;}
.turning-page::before{
  content:""!important;
  position:absolute!important;
  top:1.5%!important;
  bottom:1.5%!important;
  width:34px!important;
  pointer-events:none!important;
  z-index:65!important;
  filter:blur(11px)!important;
  opacity:0!important;
  background:rgba(0,0,0,.48)!important;
  display:block!important;
}
.turning-page::after{display:none!important;content:none!important;}
.curl-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
  border-radius:0 8px 8px 0!important;
  animation:guidevaultFluidTurnNext .96s cubic-bezier(.18,.68,.14,1) both!important;
}
.curl-prev{
  right:50%!important;
  left:auto!important;
  transform-origin:right center!important;
  border-radius:8px 0 0 8px!important;
  animation:guidevaultFluidTurnPrev .96s cubic-bezier(.18,.68,.14,1) both!important;
}
.curl-next::before{
  left:calc(100% - 22px)!important;
  transform-origin:left center!important;
  animation:guidevaultTurnShadowNext .96s cubic-bezier(.18,.68,.14,1) both!important;
}
.curl-prev::before{
  right:calc(100% - 22px)!important;
  transform-origin:right center!important;
  animation:guidevaultTurnShadowPrev .96s cubic-bezier(.18,.68,.14,1) both!important;
}
.under-page{
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  height:auto!important;
  z-index:18!important;
  opacity:1!important;
  overflow:hidden!important;
  background:#111!important;
  pointer-events:none!important;
  transform:none!important;
  filter:none!important;
  animation:guidevaultUnderReveal .96s ease both!important;
}
.under-page img{width:100%!important;height:100%!important;object-fit:fill!important;display:block!important;background:#111!important;}
.under-next{left:50%!important;right:auto!important;border-radius:0 8px 8px 0!important;}
.under-prev{right:50%!important;left:auto!important;border-radius:8px 0 0 8px!important;}
.under-next::after,
.under-prev::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:2!important;
  opacity:.82!important;
}
.under-next::after{background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.04) 30%,rgba(255,255,255,.025) 100%)!important;}
.under-prev::after{background:linear-gradient(270deg,rgba(0,0,0,.30),rgba(0,0,0,.04) 30%,rgba(255,255,255,.025) 100%)!important;}
.book.flipping-next .page-shell::before,
.book.flipping-prev .page-shell::before{animation:guidevaultSpinePulse .96s ease both!important;}
@keyframes guidevaultFluidTurnNext{
  0%{transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scaleX(1);filter:brightness(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
  12%{transform:translate3d(0,0,1px) rotateY(-13deg) skewY(-.10deg) scaleX(1.002);filter:brightness(1.025);clip-path:polygon(0 0,100% .15%,100% 99.85%,0 100%);}
  27%{transform:translate3d(-1px,0,3px) rotateY(-38deg) skewY(-.34deg) scaleX(.998);filter:brightness(1.015);clip-path:polygon(0 0,99.8% .7%,99.2% 99.3%,0 100%);}
  43%{transform:translate3d(-3px,0,7px) rotateY(-73deg) skewY(-.72deg) scaleX(.988);filter:brightness(.975);clip-path:polygon(0 0,99% 1.6%,97% 98.4%,0 100%);}
  56%{transform:translate3d(-4px,0,9px) rotateY(-103deg) skewY(-.95deg) scaleX(.982);filter:brightness(.915);clip-path:polygon(0 0,97.6% 2.3%,94.5% 97.7%,0 100%);}
  72%{transform:translate3d(-2px,0,6px) rotateY(-139deg) skewY(-.58deg) scaleX(.991);filter:brightness(.90);clip-path:polygon(0 0,98.5% 1.4%,96% 98.6%,0 100%);}
  88%{transform:translate3d(0,0,2px) rotateY(-169deg) skewY(-.18deg) scaleX(.999);filter:brightness(.965);clip-path:polygon(0 0,99.7% .45%,98.8% 99.55%,0 100%);}
  100%{transform:translate3d(0,0,0) rotateY(-180deg) skewY(0deg) scaleX(1);filter:brightness(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
}
@keyframes guidevaultFluidTurnPrev{
  0%{transform:translate3d(0,0,0) rotateY(0deg) skewY(0deg) scaleX(1);filter:brightness(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
  12%{transform:translate3d(0,0,1px) rotateY(13deg) skewY(.10deg) scaleX(1.002);filter:brightness(1.025);clip-path:polygon(0 .15%,100% 0,100% 100%,0 99.85%);}
  27%{transform:translate3d(1px,0,3px) rotateY(38deg) skewY(.34deg) scaleX(.998);filter:brightness(1.015);clip-path:polygon(.2% .7%,100% 0,100% 100%,.8% 99.3%);}
  43%{transform:translate3d(3px,0,7px) rotateY(73deg) skewY(.72deg) scaleX(.988);filter:brightness(.975);clip-path:polygon(1% 1.6%,100% 0,100% 100%,3% 98.4%);}
  56%{transform:translate3d(4px,0,9px) rotateY(103deg) skewY(.95deg) scaleX(.982);filter:brightness(.915);clip-path:polygon(2.4% 2.3%,100% 0,100% 100%,5.5% 97.7%);}
  72%{transform:translate3d(2px,0,6px) rotateY(139deg) skewY(.58deg) scaleX(.991);filter:brightness(.90);clip-path:polygon(1.5% 1.4%,100% 0,100% 100%,4% 98.6%);}
  88%{transform:translate3d(0,0,2px) rotateY(169deg) skewY(.18deg) scaleX(.999);filter:brightness(.965);clip-path:polygon(.3% .45%,100% 0,100% 100%,1.2% 99.55%);}
  100%{transform:translate3d(0,0,0) rotateY(180deg) skewY(0deg) scaleX(1);filter:brightness(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
}
@keyframes guidevaultTurnShadowNext{
  0%,8%{opacity:0;transform:translateX(0) scaleX(.65);}
  34%{opacity:.34;transform:translateX(-14px) scaleX(1.0);}
  57%{opacity:.58;transform:translateX(-42px) scaleX(1.25);}
  78%{opacity:.30;transform:translateX(-78px) scaleX(1.65);}
  100%{opacity:0;transform:translateX(-96px) scaleX(1.8);}
}
@keyframes guidevaultTurnShadowPrev{
  0%,8%{opacity:0;transform:translateX(0) scaleX(.65);}
  34%{opacity:.34;transform:translateX(14px) scaleX(1.0);}
  57%{opacity:.58;transform:translateX(42px) scaleX(1.25);}
  78%{opacity:.30;transform:translateX(78px) scaleX(1.65);}
  100%{opacity:0;transform:translateX(96px) scaleX(1.8);}
}
@keyframes guidevaultUnderReveal{0%{filter:brightness(.84)}55%{filter:brightness(.91)}100%{filter:brightness(1)}}
@keyframes guidevaultSpinePulse{0%{opacity:.96;filter:blur(2.8px)}50%{opacity:1;filter:blur(3.15px)}100%{opacity:.96;filter:blur(2.8px)}}
@media (prefers-reduced-motion:reduce){
  .curl-next,.curl-prev,.turn-face,.under-page{animation-duration:.01ms!important;transition:none!important;}
}

/* v0.8.7: stable comic-reader page transition.
   This replaces the literal two-sided 3D curl for now. The prior effect could show mirrored/backwards
   page art and then snap the spread. This model preloads the destination spread underneath, keeps a
   snapshot of the current spread on top, and peels only the current page sheet away. */
.previous-spread{
  position:absolute!important;
  inset:0!important;
  z-index:48!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  padding:10px!important;
  border-radius:8px!important;
  overflow:hidden!important;
  background:#07090d!important;
  pointer-events:none!important;
  box-shadow:0 30px 90px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.05)!important;
  transform:translate3d(0,0,0)!important;
  will-change:clip-path,opacity,filter!important;
}
.previous-spread.hidden{display:none!important;}
.previous-spread .page-side{height:100%!important;background:#111!important;overflow:hidden!important;}
.previous-spread img{width:100%!important;height:100%!important;object-fit:contain!important;background:#111!important;display:block!important;}
.previous-spread .prev-left{border-radius:6px 0 0 6px!important;box-shadow:inset -46px 0 58px rgba(0,0,0,.27),inset -10px 0 18px rgba(255,255,255,.035)!important;}
.previous-spread .prev-right{border-radius:0 6px 6px 0!important;box-shadow:inset 46px 0 58px rgba(0,0,0,.25),inset 10px 0 18px rgba(255,255,255,.032)!important;}
.previous-spread.cover-snapshot{display:block!important;}
.previous-spread.cover-snapshot .prev-left{display:none!important;}
.previous-spread.cover-snapshot .prev-right{height:100%!important;border-radius:6px!important;box-shadow:none!important;}
.previous-spread.cover-snapshot .prev-right img{object-fit:contain!important;}

.book.page-turning{
  overflow:visible!important;
  contain:paint!important;
  transform:translateZ(0)!important;
}
.book.page-turning .page-shell{
  transform:none!important;
  animation:none!important;
}
.book.page-turning .left-page,
.book.page-turning .right-page{
  animation:none!important;
}

.turning-page.guide-peel-next,
.turning-page.guide-peel-prev{
  top:10px!important;
  bottom:10px!important;
  width:calc(50% - 10px)!important;
  height:auto!important;
  z-index:72!important;
  display:block!important;
  overflow:hidden!important;
  background:#111!important;
  box-shadow:none!important;
  transform-style:flat!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  will-change:transform,clip-path,opacity,filter!important;
  filter:none!important;
}
.turning-page.guide-peel-next{left:50%!important;right:auto!important;transform-origin:left center!important;border-radius:0 6px 6px 0!important;animation:guidevaultPeelSheetNextV087 .74s cubic-bezier(.22,.74,.18,1) both!important;}
.turning-page.guide-peel-prev{right:50%!important;left:auto!important;transform-origin:right center!important;border-radius:6px 0 0 6px!important;animation:guidevaultPeelSheetPrevV087 .74s cubic-bezier(.22,.74,.18,1) both!important;}
.turning-page.guide-peel-next .turn-back,
.turning-page.guide-peel-prev .turn-back{display:none!important;}
.turning-page.guide-peel-next .turn-front,
.turning-page.guide-peel-prev .turn-front{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:#111!important;
  transform:none!important;
  border-radius:inherit!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  box-shadow:0 20px 52px rgba(0,0,0,.34)!important;
}
.turning-page.guide-peel-next .turn-front img,
.turning-page.guide-peel-prev .turn-front img{width:100%!important;height:100%!important;object-fit:contain!important;background:#111!important;display:block!important;}
.turning-page.guide-peel-next .turn-front::after,
.turning-page.guide-peel-prev .turn-front::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.74!important;
  mix-blend-mode:multiply!important;
}
.turning-page.guide-peel-next .turn-front::after{background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(0,0,0,.08) 42%,rgba(0,0,0,.44) 100%)!important;}
.turning-page.guide-peel-prev .turn-front::after{background:linear-gradient(270deg,rgba(255,255,255,.05),rgba(0,0,0,.08) 42%,rgba(0,0,0,.44) 100%)!important;}
.turning-page.guide-peel-next::before,
.turning-page.guide-peel-prev::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:22px!important;
  z-index:76!important;
  pointer-events:none!important;
  opacity:.72!important;
  background:linear-gradient(90deg,rgba(255,255,255,.22),rgba(255,255,255,0))!important;
}
.turning-page.guide-peel-next::before{left:0!important;right:auto!important;}
.turning-page.guide-peel-prev::before{right:0!important;left:auto!important;transform:scaleX(-1)!important;}
.turning-page.guide-peel-next::after,
.turning-page.guide-peel-prev::after{display:none!important;content:none!important;}

.previous-spread.guide-snapshot-next{animation:guidevaultSnapshotNextV087 .74s cubic-bezier(.22,.74,.18,1) both!important;}
.previous-spread.guide-snapshot-prev{animation:guidevaultSnapshotPrevV087 .74s cubic-bezier(.22,.74,.18,1) both!important;}
.previous-spread.guide-snapshot-next.cover-snapshot,
.previous-spread.guide-snapshot-prev.cover-snapshot{animation:guidevaultSnapshotCoverV087 .74s cubic-bezier(.22,.74,.18,1) both!important;}

.book.snapshot-turn-next .page-shell::before,
.book.snapshot-turn-prev .page-shell::before{animation:guidevaultSpinePulseV087 .74s ease both!important;}

@keyframes guidevaultSnapshotNextV087{
  0%,18%{opacity:1;filter:brightness(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
  44%{opacity:1;filter:brightness(.98);clip-path:polygon(0 0,78% 0,72% 100%,0 100%);}
  68%{opacity:.96;filter:brightness(.96);clip-path:polygon(0 0,52% 0,50% 100%,0 100%);}
  84%{opacity:.62;filter:brightness(.98);clip-path:polygon(0 0,50% 0,50% 100%,0 100%);}
  100%{opacity:0;filter:brightness(1);clip-path:polygon(0 0,50% 0,50% 100%,0 100%);}
}
@keyframes guidevaultSnapshotPrevV087{
  0%,18%{opacity:1;filter:brightness(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
  44%{opacity:1;filter:brightness(.98);clip-path:polygon(22% 0,100% 0,100% 100%,28% 100%);}
  68%{opacity:.96;filter:brightness(.96);clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);}
  84%{opacity:.62;filter:brightness(.98);clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);}
  100%{opacity:0;filter:brightness(1);clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%);}
}
@keyframes guidevaultSnapshotCoverV087{
  0%,20%{opacity:1;filter:brightness(1);transform:scale(1);}
  58%{opacity:.86;filter:brightness(.96);transform:scale(.992);}
  100%{opacity:0;filter:brightness(1);transform:scale(.985);}
}
@keyframes guidevaultPeelSheetNextV087{
  0%{opacity:1;transform:translate3d(0,0,0) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
  20%{opacity:1;transform:translate3d(-3%,0,1px) skewY(-.18deg) scaleX(.95);clip-path:polygon(0 0,99% .8%,98% 99.2%,0 100%);filter:brightness(1.02);}
  42%{opacity:.98;transform:translate3d(-18%,0,2px) skewY(-.48deg) scaleX(.76);clip-path:polygon(0 0,95% 2.4%,89% 97.6%,0 100%);filter:brightness(.97);}
  66%{opacity:.75;transform:translate3d(-38%,0,2px) skewY(-.72deg) scaleX(.46);clip-path:polygon(0 0,86% 5%,72% 95%,0 100%);filter:brightness(.90);}
  86%{opacity:.32;transform:translate3d(-50%,0,1px) skewY(-.38deg) scaleX(.18);clip-path:polygon(0 0,72% 9%,54% 91%,0 100%);filter:brightness(.92);}
  100%{opacity:0;transform:translate3d(-54%,0,0) skewY(0deg) scaleX(.06);clip-path:polygon(0 0,58% 12%,40% 88%,0 100%);filter:brightness(1);}
}
@keyframes guidevaultPeelSheetPrevV087{
  0%{opacity:1;transform:translate3d(0,0,0) skewY(0deg) scaleX(1);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1);}
  20%{opacity:1;transform:translate3d(3%,0,1px) skewY(.18deg) scaleX(.95);clip-path:polygon(1% .8%,100% 0,100% 100%,2% 99.2%);filter:brightness(1.02);}
  42%{opacity:.98;transform:translate3d(18%,0,2px) skewY(.48deg) scaleX(.76);clip-path:polygon(5% 2.4%,100% 0,100% 100%,11% 97.6%);filter:brightness(.97);}
  66%{opacity:.75;transform:translate3d(38%,0,2px) skewY(.72deg) scaleX(.46);clip-path:polygon(14% 5%,100% 0,100% 100%,28% 95%);filter:brightness(.90);}
  86%{opacity:.32;transform:translate3d(50%,0,1px) skewY(.38deg) scaleX(.18);clip-path:polygon(28% 9%,100% 0,100% 100%,46% 91%);filter:brightness(.92);}
  100%{opacity:0;transform:translate3d(54%,0,0) skewY(0deg) scaleX(.06);clip-path:polygon(42% 12%,100% 0,100% 100%,60% 88%);filter:brightness(1);}
}
@keyframes guidevaultSpinePulseV087{0%{opacity:.96;filter:blur(2.8px)}55%{opacity:1;filter:blur(3.05px)}100%{opacity:.96;filter:blur(2.8px)}}
@media (prefers-reduced-motion:reduce){
  .turning-page.guide-peel-next,
  .turning-page.guide-peel-prev,
  .previous-spread.guide-snapshot-next,
  .previous-spread.guide-snapshot-prev{animation-duration:.01ms!important;transition:none!important;}
}

/* v0.8.8: spine-anchored reader turn stability pass.
   This pass is deliberately less theatrical and more stable: the reader frame is measured and
   locked before the destination spread is rendered, page surfaces stay opaque, and the turning
   sheet pivots from the binding without drifting away from the book. */
.book.reader-frame-locked{
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  flex:0 0 auto!important;
  transform:translate3d(0,0,0)!important;
}
.book.reader-frame-locked .page-shell,
.book.page-turning .page-shell{
  width:100%!important;
  height:100%!important;
  transform:none!important;
  animation:none!important;
  opacity:1!important;
}
.book.page-turning{
  overflow:hidden!important;
  contain:layout paint size!important;
  perspective:2800px!important;
  transform-style:preserve-3d!important;
  background:#07090d!important;
}
.book.page-turning .left-page,
.book.page-turning .right-page,
.book.page-turning .prev-left,
.book.page-turning .prev-right{
  background:#111!important;
  opacity:1!important;
  animation:none!important;
}
.book.page-turning img{
  opacity:1!important;
  background:#111!important;
}
.previous-spread.guide-snapshot-next,
.previous-spread.guide-snapshot-prev{
  inset:0!important;
  padding:10px!important;
  background:#07090d!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
  animation-duration:.86s!important;
  animation-timing-function:cubic-bezier(.22,.7,.16,1)!important;
  animation-fill-mode:both!important;
  will-change:clip-path!important;
}
.previous-spread.guide-snapshot-next{animation-name:guidevaultSnapshotRevealNextV088!important;}
.previous-spread.guide-snapshot-prev{animation-name:guidevaultSnapshotRevealPrevV088!important;}
.previous-spread.guide-snapshot-next.cover-snapshot,
.previous-spread.guide-snapshot-prev.cover-snapshot{animation-name:guidevaultSnapshotCoverRevealV088!important;}
.previous-spread.guide-snapshot-next img,
.previous-spread.guide-snapshot-prev img{
  object-fit:contain!important;
  background:#111!important;
  opacity:1!important;
}
.turning-page.guide-hinge-next,
.turning-page.guide-hinge-prev{
  top:10px!important;
  bottom:10px!important;
  width:calc(50% - 10px)!important;
  height:auto!important;
  z-index:80!important;
  display:block!important;
  overflow:hidden!important;
  background:#111!important;
  opacity:1!important;
  filter:none!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  box-shadow:none!important;
  will-change:transform!important;
  clip-path:none!important;
}
.turning-page.guide-hinge-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
  border-radius:0 6px 6px 0!important;
  animation:guidevaultHingeNextV088 .86s cubic-bezier(.22,.7,.16,1) both!important;
}
.turning-page.guide-hinge-prev{
  right:50%!important;
  left:auto!important;
  transform-origin:right center!important;
  border-radius:6px 0 0 6px!important;
  animation:guidevaultHingePrevV088 .86s cubic-bezier(.22,.7,.16,1) both!important;
}
.turning-page.guide-hinge-next .turn-back,
.turning-page.guide-hinge-prev .turn-back{
  display:none!important;
}
.turning-page.guide-hinge-next .turn-front,
.turning-page.guide-hinge-prev .turn-front{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:#111!important;
  border-radius:inherit!important;
  transform:none!important;
  opacity:1!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  box-shadow:0 18px 45px rgba(0,0,0,.34)!important;
}
.turning-page.guide-hinge-next .turn-front img,
.turning-page.guide-hinge-prev .turn-front img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#111!important;
  display:block!important;
  opacity:1!important;
}
.turning-page.guide-hinge-next .turn-front::after,
.turning-page.guide-hinge-prev .turn-front::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.72!important;
  mix-blend-mode:multiply!important;
}
.turning-page.guide-hinge-next .turn-front::after{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(0,0,0,.10) 40%,rgba(0,0,0,.42) 100%)!important;}
.turning-page.guide-hinge-prev .turn-front::after{background:linear-gradient(270deg,rgba(255,255,255,.04),rgba(0,0,0,.10) 40%,rgba(0,0,0,.42) 100%)!important;}
.turning-page.guide-hinge-next::before,
.turning-page.guide-hinge-prev::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:22px!important;
  z-index:84!important;
  pointer-events:none!important;
  opacity:.68!important;
  background:linear-gradient(90deg,rgba(255,255,255,.20),rgba(255,255,255,0))!important;
}
.turning-page.guide-hinge-next::before{left:0!important;right:auto!important;}
.turning-page.guide-hinge-prev::before{right:0!important;left:auto!important;transform:scaleX(-1)!important;}
.turning-page.guide-hinge-next::after,
.turning-page.guide-hinge-prev::after{display:none!important;content:none!important;}
.book.snapshot-turn-next .page-shell::before,
.book.snapshot-turn-prev .page-shell::before{animation:guidevaultSpineHoldV088 .86s ease both!important;}
@keyframes guidevaultHingeNextV088{
  0%{transform:rotateY(0deg) translateZ(0);filter:brightness(1);}
  18%{transform:rotateY(-15deg) translateZ(1px);filter:brightness(1.02);}
  42%{transform:rotateY(-43deg) translateZ(2px);filter:brightness(.98);}
  70%{transform:rotateY(-73deg) translateZ(1px);filter:brightness(.90);}
  100%{transform:rotateY(-91deg) translateZ(0);filter:brightness(.84);}
}
@keyframes guidevaultHingePrevV088{
  0%{transform:rotateY(0deg) translateZ(0);filter:brightness(1);}
  18%{transform:rotateY(15deg) translateZ(1px);filter:brightness(1.02);}
  42%{transform:rotateY(43deg) translateZ(2px);filter:brightness(.98);}
  70%{transform:rotateY(73deg) translateZ(1px);filter:brightness(.90);}
  100%{transform:rotateY(91deg) translateZ(0);filter:brightness(.84);}
}
@keyframes guidevaultSnapshotRevealNextV088{
  0%,16%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
  44%{clip-path:polygon(0 0,78% 0,76% 100%,0 100%);}
  72%{clip-path:polygon(0 0,38% 0,36% 100%,0 100%);}
  100%{clip-path:polygon(0 0,0 0,0 100%,0 100%);}
}
@keyframes guidevaultSnapshotRevealPrevV088{
  0%,16%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
  44%{clip-path:polygon(22% 0,100% 0,100% 100%,24% 100%);}
  72%{clip-path:polygon(62% 0,100% 0,100% 100%,64% 100%);}
  100%{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);}
}
@keyframes guidevaultSnapshotCoverRevealV088{
  0%,18%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);}
  60%{clip-path:polygon(0 0,55% 0,55% 100%,0 100%);}
  100%{clip-path:polygon(0 0,0 0,0 100%,0 100%);}
}
@keyframes guidevaultSpineHoldV088{0%{opacity:1;filter:blur(2.8px)}55%{opacity:1;filter:blur(3.1px)}100%{opacity:1;filter:blur(2.8px)}}
@media (prefers-reduced-motion:reduce){
  .turning-page.guide-hinge-next,
  .turning-page.guide-hinge-prev,
  .previous-spread.guide-snapshot-next,
  .previous-spread.guide-snapshot-prev{animation-duration:.01ms!important;transition:none!important;}
}

/* v0.8.9: deterministic reader sizing + single-sheet spine turn.
   The book now uses a JS-measured spread footprint through CSS variables.  The cover is
   displayed inside that same footprint, so the reader no longer re-measures between cover,
   spread, and animation states.  The older full-spread snapshot wipe is disabled; only the
   bound page sheet animates. */
.reader-stage{
  padding:16px!important;
  align-items:center!important;
  justify-items:center!important;
}
.reader-stage:fullscreen{
  width:100vw!important;
  height:100vh!important;
  padding:18px!important;
  background:#000!important;
}
.book.reader-sized,
.book.reader-sized.cover-mode,
.fullscreen-reader .book.reader-sized,
.fullscreen-reader .book.reader-sized.cover-mode,
.reader-stage:fullscreen .book.reader-sized,
.reader-stage:fullscreen .book.reader-sized.cover-mode{
  width:var(--guidevault-reader-width)!important;
  height:var(--guidevault-reader-height)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  flex:0 0 auto!important;
  position:relative!important;
  transform:none!important;
  contain:layout paint size!important;
  overflow:visible!important;
  perspective:3000px!important;
}
.book.reader-frame-locked{
  width:var(--guidevault-reader-width)!important;
  height:var(--guidevault-reader-height)!important;
}
.book.reader-sized .page-shell,
.book.reader-sized.page-turning .page-shell{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  padding:12px!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:#111319!important;
  box-shadow:0 34px 95px rgba(0,0,0,.68), inset 0 0 0 1px rgba(255,255,255,.06)!important;
  transform:none!important;
  animation:none!important;
  opacity:1!important;
}
.book.reader-sized.cover-mode .page-shell{
  width:50%!important;
  left:25%!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  height:100%!important;
  display:block!important;
  padding:12px!important;
  border-radius:14px!important;
}
.book.reader-sized.cover-mode .right-page{
  width:100%!important;
  height:100%!important;
  border-radius:9px!important;
  border:0!important;
  box-shadow:0 22px 56px rgba(0,0,0,.36)!important;
}
.book.reader-sized .page-side,
.book.reader-sized .left-page,
.book.reader-sized .right-page,
.book.reader-sized .prev-left,
.book.reader-sized .prev-right{
  height:100%!important;
  min-width:0!important;
  background:#141414!important;
  opacity:1!important;
  overflow:hidden!important;
  animation:none!important;
}
.book.reader-sized .page-side img,
.book.reader-sized .page-shell img,
.book.reader-sized .turning-page img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  background:#141414!important;
  opacity:1!important;
}
.book.reader-sized:not(.cover-mode) .left-page{
  border-radius:9px 0 0 9px!important;
  border-right:0!important;
  box-shadow:inset -34px 0 44px rgba(0,0,0,.30), inset -2px 0 0 rgba(0,0,0,.52)!important;
}
.book.reader-sized:not(.cover-mode) .right-page{
  border-radius:0 9px 9px 0!important;
  border-left:0!important;
  box-shadow:inset 34px 0 44px rgba(0,0,0,.28), inset 2px 0 0 rgba(255,255,255,.035)!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::before{
  content:""!important;
  position:absolute!important;
  top:12px!important;
  bottom:12px!important;
  left:50%!important;
  width:70px!important;
  transform:translateX(-50%)!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:.78!important;
  filter:none!important;
  animation:none!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(0,0,0,.22) 28%,
    rgba(0,0,0,.42) 48%,
    rgba(255,255,255,.08) 52%,
    rgba(0,0,0,.20) 72%,
    rgba(255,255,255,0))!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after{
  content:""!important;
  position:absolute!important;
  inset:12px!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:.25!important;
  background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,0) 25%,rgba(0,0,0,.08) 50%,rgba(255,255,255,0) 75%,rgba(255,255,255,.04))!important;
  animation:none!important;
}
.book.reader-sized.page-turning{
  background:transparent!important;
  overflow:visible!important;
  transform:none!important;
  perspective:3000px!important;
}
.book.reader-sized.page-turning .previous-spread,
.previous-spread.guide-snapshot-next,
.previous-spread.guide-snapshot-prev,
.previous-spread.guide-snapshot-next.cover-snapshot,
.previous-spread.guide-snapshot-prev.cover-snapshot{
  display:none!important;
  opacity:0!important;
  animation:none!important;
  clip-path:none!important;
}
.book.reader-sized .turning-page.guide-hinge-next,
.book.reader-sized .turning-page.guide-hinge-prev{
  top:12px!important;
  bottom:12px!important;
  width:calc(50% - 12px)!important;
  height:auto!important;
  z-index:60!important;
  display:block!important;
  overflow:hidden!important;
  background:#141414!important;
  opacity:1!important;
  filter:none!important;
  clip-path:none!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  will-change:transform,filter!important;
  box-shadow:0 20px 52px rgba(0,0,0,.42)!important;
}
.book.reader-sized .turning-page.guide-hinge-next{
  left:50%!important;
  right:auto!important;
  transform-origin:left center!important;
  border-radius:0 9px 9px 0!important;
  animation:guidevaultBoundTurnNextV089 .82s cubic-bezier(.2,.72,.16,1) both!important;
}
.book.reader-sized .turning-page.guide-hinge-prev{
  right:50%!important;
  left:auto!important;
  transform-origin:right center!important;
  border-radius:9px 0 0 9px!important;
  animation:guidevaultBoundTurnPrevV089 .82s cubic-bezier(.2,.72,.16,1) both!important;
}
.book.reader-sized .turning-page.cover-turn.guide-hinge-next,
.book.reader-sized .turning-page.cover-turn.guide-hinge-prev{
  left:25%!important;
  right:auto!important;
  width:calc(50% - 24px)!important;
  transform-origin:right center!important;
  border-radius:9px!important;
}
.book.reader-sized .turning-page.guide-hinge-next .turn-back,
.book.reader-sized .turning-page.guide-hinge-prev .turn-back{display:none!important;}
.book.reader-sized .turning-page.guide-hinge-next .turn-front,
.book.reader-sized .turning-page.guide-hinge-prev .turn-front{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  overflow:hidden!important;
  background:#141414!important;
  border-radius:inherit!important;
  opacity:1!important;
  transform:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.book.reader-sized .turning-page.guide-hinge-next .turn-front::after,
.book.reader-sized .turning-page.guide-hinge-prev .turn-front::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.65!important;
  mix-blend-mode:multiply!important;
}
.book.reader-sized .turning-page.guide-hinge-next .turn-front::after{
  background:linear-gradient(90deg,rgba(255,255,255,.10),rgba(0,0,0,.08) 38%,rgba(0,0,0,.46) 100%)!important;
}
.book.reader-sized .turning-page.guide-hinge-prev .turn-front::after{
  background:linear-gradient(270deg,rgba(255,255,255,.10),rgba(0,0,0,.08) 38%,rgba(0,0,0,.46) 100%)!important;
}
.book.reader-sized .turning-page.guide-hinge-next::before,
.book.reader-sized .turning-page.guide-hinge-prev::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:28px!important;
  z-index:64!important;
  pointer-events:none!important;
  opacity:.72!important;
  background:linear-gradient(90deg,rgba(255,255,255,.24),rgba(255,255,255,0))!important;
}
.book.reader-sized .turning-page.guide-hinge-next::before{left:0!important;right:auto!important;}
.book.reader-sized .turning-page.guide-hinge-prev::before{right:0!important;left:auto!important;transform:scaleX(-1)!important;}
.book.reader-sized .turning-page.guide-hinge-next::after,
.book.reader-sized .turning-page.guide-hinge-prev::after{display:none!important;content:none!important;}
@keyframes guidevaultBoundTurnNextV089{
  0%{transform:rotateY(0deg) scaleX(1) translateZ(0);filter:brightness(1);}
  18%{transform:rotateY(-13deg) scaleX(.985) translateZ(1px);filter:brightness(1.03);}
  42%{transform:rotateY(-42deg) scaleX(.84) translateZ(2px);filter:brightness(.99);}
  66%{transform:rotateY(-68deg) scaleX(.54) translateZ(1px);filter:brightness(.92);}
  100%{transform:rotateY(-88deg) scaleX(.10) translateZ(0);filter:brightness(.86);}
}
@keyframes guidevaultBoundTurnPrevV089{
  0%{transform:rotateY(0deg) scaleX(1) translateZ(0);filter:brightness(1);}
  18%{transform:rotateY(13deg) scaleX(.985) translateZ(1px);filter:brightness(1.03);}
  42%{transform:rotateY(42deg) scaleX(.84) translateZ(2px);filter:brightness(.99);}
  66%{transform:rotateY(68deg) scaleX(.54) translateZ(1px);filter:brightness(.92);}
  100%{transform:rotateY(88deg) scaleX(.10) translateZ(0);filter:brightness(.86);}
}
@media(max-width:900px){
  .reader-stage{padding:10px!important;}
  .book.reader-sized,
  .book.reader-sized.cover-mode{width:var(--guidevault-reader-width)!important;height:var(--guidevault-reader-height)!important;}
  .book.reader-sized .page-shell{padding:8px!important;}
  .book.reader-sized .turning-page.guide-hinge-next,
  .book.reader-sized .turning-page.guide-hinge-prev{top:8px!important;bottom:8px!important;width:calc(50% - 8px)!important;}
}
@media (prefers-reduced-motion:reduce){
  .book.reader-sized .turning-page.guide-hinge-next,
  .book.reader-sized .turning-page.guide-hinge-prev{animation-duration:.01ms!important;}
}

/* v0.9.0: fallback to a stable reader transition instead of the failed fake page curl.
   The current book sizing is preserved, the hard black binding is replaced with a softer crease,
   and no page rotates to the center, so the turn should not disappear/flicker mid-animation. */
.book.reader-sized:not(.cover-mode) .page-shell{
  background:#13161b!important;
}
.book.reader-sized:not(.cover-mode) .left-page{
  box-shadow:
    inset -20px 0 34px rgba(0,0,0,.18),
    inset -1px 0 0 rgba(0,0,0,.26)!important;
}
.book.reader-sized:not(.cover-mode) .right-page{
  box-shadow:
    inset 20px 0 34px rgba(0,0,0,.16),
    inset 1px 0 0 rgba(255,255,255,.055)!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::before{
  width:96px!important;
  opacity:.58!important;
  filter:blur(.2px)!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(0,0,0,.10) 26%,
    rgba(0,0,0,.20) 45%,
    rgba(255,255,255,.075) 50%,
    rgba(0,0,0,.15) 56%,
    rgba(0,0,0,.07) 74%,
    rgba(255,255,255,0) 100%)!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after{
  opacity:.18!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,.04),
    rgba(255,255,255,0) 28%,
    rgba(0,0,0,.035) 50%,
    rgba(255,255,255,0) 72%,
    rgba(255,255,255,.035))!important;
}

.book.reader-sized.page-turning{
  perspective:none!important;
  overflow:visible!important;
  background:transparent!important;
}
.book.reader-sized.page-turning .previous-spread.guide-soft-next,
.book.reader-sized.page-turning .previous-spread.guide-soft-prev,
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  display:grid!important;
  position:absolute!important;
  inset:0!important;
  z-index:90!important;
  padding:12px!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  border-radius:14px!important;
  overflow:hidden!important;
  background:#13161b!important;
  opacity:1!important;
  clip-path:none!important;
  filter:none!important;
  pointer-events:none!important;
  transform-origin:center center!important;
  will-change:transform,opacity!important;
  box-shadow:0 34px 95px rgba(0,0,0,.66), inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
.previous-spread.guide-soft-next.cover-snapshot,
.previous-spread.guide-soft-prev.cover-snapshot{
  display:block!important;
  left:25%!important;
  right:auto!important;
  width:50%!important;
  height:100%!important;
}
.previous-spread.guide-soft-next .page-side,
.previous-spread.guide-soft-prev .page-side{
  height:100%!important;
  opacity:1!important;
  background:#141414!important;
  animation:none!important;
}
.previous-spread.guide-soft-next img,
.previous-spread.guide-soft-prev img{
  opacity:1!important;
  background:#141414!important;
  object-fit:contain!important;
}
.previous-spread.guide-soft-next .prev-left,
.previous-spread.guide-soft-prev .prev-left{
  border-radius:9px 0 0 9px!important;
  box-shadow:inset -20px 0 34px rgba(0,0,0,.18), inset -1px 0 0 rgba(0,0,0,.24)!important;
}
.previous-spread.guide-soft-next .prev-right,
.previous-spread.guide-soft-prev .prev-right{
  border-radius:0 9px 9px 0!important;
  box-shadow:inset 20px 0 34px rgba(0,0,0,.16), inset 1px 0 0 rgba(255,255,255,.05)!important;
}
.previous-spread.guide-soft-next::before,
.previous-spread.guide-soft-prev::before{
  content:""!important;
  position:absolute!important;
  top:12px!important;
  bottom:12px!important;
  left:50%!important;
  width:96px!important;
  transform:translateX(-50%)!important;
  z-index:95!important;
  pointer-events:none!important;
  opacity:.54!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(0,0,0,.09) 27%,
    rgba(0,0,0,.18) 45%,
    rgba(255,255,255,.07) 50%,
    rgba(0,0,0,.13) 56%,
    rgba(0,0,0,.06) 74%,
    rgba(255,255,255,0) 100%)!important;
}
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::after{
  content:""!important;
  position:absolute!important;
  inset:12px!important;
  z-index:94!important;
  pointer-events:none!important;
  opacity:.12!important;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,0) 30%,rgba(0,0,0,.03) 50%,rgba(255,255,255,0) 70%,rgba(255,255,255,.035))!important;
}
.previous-spread.guide-soft-next{
  animation:guidevaultSoftReaderNextV090 .62s cubic-bezier(.2,.68,.2,1) both!important;
}
.previous-spread.guide-soft-prev{
  animation:guidevaultSoftReaderPrevV090 .62s cubic-bezier(.2,.68,.2,1) both!important;
}
.book.reader-sized .turning-page.guide-hinge-next,
.book.reader-sized .turning-page.guide-hinge-prev,
.book.reader-sized .turning-page.guide-peel-next,
.book.reader-sized .turning-page.guide-peel-prev{
  display:none!important;
  animation:none!important;
}
@keyframes guidevaultSoftReaderNextV090{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);}
  48%{opacity:1;transform:translate3d(-1.4%,0,0) scale(.999);}
  78%{opacity:.48;transform:translate3d(-3.6%,0,0) scale(.998);}
  100%{opacity:0;transform:translate3d(-5.2%,0,0) scale(.997);}
}
@keyframes guidevaultSoftReaderPrevV090{
  0%{opacity:1;transform:translate3d(0,0,0) scale(1);}
  48%{opacity:1;transform:translate3d(1.4%,0,0) scale(.999);}
  78%{opacity:.48;transform:translate3d(3.6%,0,0) scale(.998);}
  100%{opacity:0;transform:translate3d(5.2%,0,0) scale(.997);}
}
@media(max-width:900px){
  .previous-spread.guide-soft-next,
  .previous-spread.guide-soft-prev{padding:8px!important;}
  .previous-spread.guide-soft-next::before,
  .previous-spread.guide-soft-prev::before{top:8px!important;bottom:8px!important;}
  .previous-spread.guide-soft-next::after,
  .previous-spread.guide-soft-prev::after{inset:8px!important;}
}
@media (prefers-reduced-motion:reduce){
  .previous-spread.guide-soft-next,
  .previous-spread.guide-soft-prev{animation-duration:.01ms!important;}
}

/* v0.9.1: reader jitter/spine refinement.
   The reader now holds the old spread visibly before page art swaps underneath, then uses a
   pure opacity dissolve instead of moving/scaling the book. This prevents the visible first-frame
   jitter and avoids the fake curl/peel artifacts until a real canvas-based curl is added later. */
.book.reader-sized:not(.cover-mode) .page-shell,
.previous-spread.guide-soft-hold,
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  background:#17191d!important;
}
.book.reader-sized .page-side,
.book.reader-sized .left-page,
.book.reader-sized .right-page,
.book.reader-sized .prev-left,
.book.reader-sized .prev-right{
  background:#d7d3ca!important;
}
.book.reader-sized .page-side img,
.book.reader-sized .page-shell img,
.previous-spread.guide-soft-hold img,
.previous-spread.guide-soft-next img,
.previous-spread.guide-soft-prev img{
  background:#d7d3ca!important;
}
.book.reader-sized:not(.cover-mode) .left-page,
.previous-spread.guide-soft-hold .prev-left,
.previous-spread.guide-soft-next .prev-left,
.previous-spread.guide-soft-prev .prev-left{
  box-shadow:
    inset -10px 0 18px rgba(0,0,0,.08),
    inset -1px 0 0 rgba(0,0,0,.10)!important;
}
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread.guide-soft-hold .prev-right,
.previous-spread.guide-soft-next .prev-right,
.previous-spread.guide-soft-prev .prev-right{
  box-shadow:
    inset 10px 0 18px rgba(0,0,0,.075),
    inset 1px 0 0 rgba(255,255,255,.10)!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::before,
.previous-spread.guide-soft-hold::before,
.previous-spread.guide-soft-next::before,
.previous-spread.guide-soft-prev::before{
  width:68px!important;
  opacity:.34!important;
  filter:blur(.6px)!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(0,0,0,.035) 24%,
    rgba(0,0,0,.09) 42%,
    rgba(255,255,255,.11) 50%,
    rgba(0,0,0,.075) 58%,
    rgba(0,0,0,.025) 76%,
    rgba(255,255,255,0) 100%)!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after,
.previous-spread.guide-soft-hold::after,
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::after{
  opacity:.08!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,.028),
    rgba(255,255,255,0) 32%,
    rgba(0,0,0,.012) 50%,
    rgba(255,255,255,0) 68%,
    rgba(255,255,255,.026))!important;
}
.previous-spread.guide-soft-hold,
.book.reader-sized.page-turning .previous-spread.guide-soft-hold{
  display:grid!important;
  position:absolute!important;
  inset:0!important;
  z-index:90!important;
  padding:12px!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  border-radius:14px!important;
  overflow:hidden!important;
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  clip-path:none!important;
  pointer-events:none!important;
  box-shadow:0 34px 95px rgba(0,0,0,.66), inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
.previous-spread.guide-soft-hold.cover-snapshot{
  display:block!important;
  left:25%!important;
  right:auto!important;
  width:50%!important;
  height:100%!important;
}
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  transform:none!important;
  animation:guidevaultSoftDissolveV091 .28s ease-out both!important;
  will-change:opacity!important;
}
@keyframes guidevaultSoftDissolveV091{
  0%{opacity:1;transform:none;filter:none;}
  35%{opacity:.96;transform:none;filter:none;}
  100%{opacity:0;transform:none;filter:none;}
}
.book.reader-sized .turning-page,
.book.reader-sized .under-page{
  display:none!important;
  animation:none!important;
  opacity:0!important;
}
@media(max-width:900px){
  .previous-spread.guide-soft-hold,
  .previous-spread.guide-soft-next,
  .previous-spread.guide-soft-prev{padding:8px!important;}
}
@media (prefers-reduced-motion:reduce){
  .previous-spread.guide-soft-next,
  .previous-spread.guide-soft-prev{animation-duration:.01ms!important;}
}

/* v0.9.2: transparent reader surface + tighter page pairing.
   Keep the improved book sizing, but stop drawing a cream/page-frame backing behind
   scanned pages.  Page images are anchored toward the binding so the center no longer
   reads like a wide gap between two separate sheets. */
.book.reader-sized:not(.cover-mode) .page-shell,
.book.reader-sized.page-turning .page-shell,
.previous-spread.guide-soft-hold,
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  padding:2px!important;
  gap:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:8px!important;
  overflow:visible!important;
}
.book.reader-sized:not(.cover-mode) .page-side,
.book.reader-sized:not(.cover-mode) .left-page,
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread.guide-soft-hold .page-side,
.previous-spread.guide-soft-next .page-side,
.previous-spread.guide-soft-prev .page-side,
.previous-spread.guide-soft-hold .prev-left,
.previous-spread.guide-soft-hold .prev-right,
.previous-spread.guide-soft-next .prev-left,
.previous-spread.guide-soft-next .prev-right,
.previous-spread.guide-soft-prev .prev-left,
.previous-spread.guide-soft-prev .prev-right{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  overflow:visible!important;
}
.book.reader-sized:not(.cover-mode) .page-side img,
.book.reader-sized:not(.cover-mode) .page-shell img,
.previous-spread.guide-soft-hold img,
.previous-spread.guide-soft-next img,
.previous-spread.guide-soft-prev img{
  background:transparent!important;
  object-fit:contain!important;
  display:block!important;
}
.book.reader-sized:not(.cover-mode) .left-page img,
.previous-spread.guide-soft-hold .prev-left img,
.previous-spread.guide-soft-next .prev-left img,
.previous-spread.guide-soft-prev .prev-left img{
  object-position:right center!important;
}
.book.reader-sized:not(.cover-mode) .right-page img,
.previous-spread.guide-soft-hold .prev-right img,
.previous-spread.guide-soft-next .prev-right img,
.previous-spread.guide-soft-prev .prev-right img{
  object-position:left center!important;
}
.book.reader-sized:not(.cover-mode) .left-page{
  padding-right:0!important;
  margin-right:-1px!important;
}
.book.reader-sized:not(.cover-mode) .right-page{
  padding-left:0!important;
  margin-left:-1px!important;
}
.previous-spread.guide-soft-hold .prev-left,
.previous-spread.guide-soft-next .prev-left,
.previous-spread.guide-soft-prev .prev-left{
  margin-right:-1px!important;
}
.previous-spread.guide-soft-hold .prev-right,
.previous-spread.guide-soft-next .prev-right,
.previous-spread.guide-soft-prev .prev-right{
  margin-left:-1px!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::before,
.book.reader-sized:not(.cover-mode) .page-shell::after,
.previous-spread.guide-soft-hold::before,
.previous-spread.guide-soft-hold::after,
.previous-spread.guide-soft-next::before,
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::before,
.previous-spread.guide-soft-prev::after{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
}
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  animation:guidevaultTransparentDissolveV092 .22s ease-out both!important;
}
@keyframes guidevaultTransparentDissolveV092{
  0%{opacity:1;transform:none;filter:none;}
  100%{opacity:0;transform:none;filter:none;}
}
@media(max-width:900px){
  .book.reader-sized:not(.cover-mode) .page-shell,
  .previous-spread.guide-soft-hold,
  .previous-spread.guide-soft-next,
  .previous-spread.guide-soft-prev{padding:1px!important;}
}

/* v0.9.3: quicker page swap, transparent surface, and soft center binding.
   The previous transparent-reader pass fixed the page alignment but removed too much of
   the book crease and left the short dissolve feeling delayed.  This pass keeps the
   pages tight, restores only a soft transparent binding shadow, and forces full-page
   contain sizing so page bottoms are not clipped by inherited fill/3D rules. */
.book.reader-sized:not(.cover-mode),
.book.reader-sized.page-turning{
  overflow:visible!important;
}
.book.reader-sized:not(.cover-mode) .page-shell,
.book.reader-sized.page-turning .page-shell,
.previous-spread.guide-soft-hold,
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  padding:4px 3px 8px!important;
  gap:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  align-items:stretch!important;
}
.book.reader-sized:not(.cover-mode) .left-page,
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread .prev-left,
.previous-spread .prev-right{
  transform:none!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  min-height:0!important;
  min-width:0!important;
}
.book.reader-sized:not(.cover-mode) .left-page,
.previous-spread .prev-left{
  margin-right:-2px!important;
}
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread .prev-right{
  margin-left:-2px!important;
}
.book.reader-sized:not(.cover-mode) .page-side img,
.book.reader-sized:not(.cover-mode) .page-shell img,
.previous-spread.guide-soft-hold img,
.previous-spread.guide-soft-next img,
.previous-spread.guide-soft-prev img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  background:transparent!important;
  display:block!important;
  transform:none!important;
  filter:none!important;
}
.book.reader-sized:not(.cover-mode) .left-page img,
.previous-spread .prev-left img{
  object-position:right center!important;
}
.book.reader-sized:not(.cover-mode) .right-page img,
.previous-spread .prev-right img{
  object-position:left center!important;
}
.book.reader-sized:not(.cover-mode) .left-page::after,
.book.reader-sized:not(.cover-mode) .right-page::after,
.previous-spread .prev-left::after,
.previous-spread .prev-right::after{
  display:none!important;
  content:none!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::before,
.book.reader-sized.page-turning .page-shell::before,
.previous-spread.guide-soft-hold::before,
.previous-spread.guide-soft-next::before,
.previous-spread.guide-soft-prev::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:4px!important;
  bottom:8px!important;
  width:24px!important;
  transform:translateX(-50%)!important;
  z-index:7!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.055) 24%,
    rgba(0,0,0,.15) 47%,
    rgba(255,255,255,.055) 50%,
    rgba(0,0,0,.13) 53%,
    rgba(0,0,0,.045) 76%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.72!important;
  filter:blur(3px)!important;
  mix-blend-mode:multiply!important;
  box-shadow:none!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after,
.book.reader-sized.page-turning .page-shell::after,
.previous-spread.guide-soft-hold::after,
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:5px!important;
  bottom:9px!important;
  width:1px!important;
  transform:translateX(-50%)!important;
  z-index:8!important;
  pointer-events:none!important;
  background:rgba(255,255,255,.13)!important;
  opacity:.18!important;
  filter:blur(.45px)!important;
  box-shadow:none!important;
}
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  animation:guidevaultFastDissolveV093 .105s linear both!important;
  will-change:opacity!important;
}
@keyframes guidevaultFastDissolveV093{
  0%{opacity:1;transform:none;filter:none;}
  100%{opacity:0;transform:none;filter:none;}
}
@media(max-width:900px){
  .book.reader-sized:not(.cover-mode) .page-shell,
  .book.reader-sized.page-turning .page-shell,
  .previous-spread.guide-soft-hold,
  .previous-spread.guide-soft-next,
  .previous-spread.guide-soft-prev{
    padding:3px 2px 7px!important;
  }
}

/* v0.9.4: no-bounce page advance + darker transparent binding.
   Keep the good reader sizing and page alignment from v0.9.3, but make the transition
   a pure fixed-footprint opacity swap.  Nothing in the book/frame is allowed to scale,
   translate, draw an outer frame, or re-measure during page advance. */
.book.reader-sized,
.book.reader-sized.reader-frame-locked,
.book.reader-sized.page-turning,
.fullscreen-reader .book.reader-sized,
.reader-stage:fullscreen .book.reader-sized{
  width:var(--guidevault-reader-width)!important;
  height:var(--guidevault-reader-height)!important;
  min-width:var(--guidevault-reader-width)!important;
  min-height:var(--guidevault-reader-height)!important;
  max-width:var(--guidevault-reader-width)!important;
  max-height:var(--guidevault-reader-height)!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  outline:0!important;
  overflow:visible!important;
  contain:size layout paint!important;
}
.book.reader-sized .page-shell,
.book.reader-sized.page-turning .page-shell,
.previous-spread.guide-soft-hold,
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  padding:4px 3px 8px!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
  filter:none!important;
  clip-path:none!important;
}
.book.reader-sized.page-turning .page-shell,
.book.reader-sized.page-turning .left-page,
.book.reader-sized.page-turning .right-page{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.book.reader-sized:not(.cover-mode) .left-page,
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread.guide-soft-hold .prev-left,
.previous-spread.guide-soft-hold .prev-right,
.previous-spread.guide-soft-next .prev-left,
.previous-spread.guide-soft-next .prev-right,
.previous-spread.guide-soft-prev .prev-left,
.previous-spread.guide-soft-prev .prev-right{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.book.reader-sized:not(.cover-mode) .left-page,
.previous-spread.guide-soft-hold .prev-left,
.previous-spread.guide-soft-next .prev-left,
.previous-spread.guide-soft-prev .prev-left{
  margin-right:-2px!important;
  padding-right:0!important;
}
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread.guide-soft-hold .prev-right,
.previous-spread.guide-soft-next .prev-right,
.previous-spread.guide-soft-prev .prev-right{
  margin-left:-2px!important;
  padding-left:0!important;
}
.book.reader-sized:not(.cover-mode) .page-side img,
.book.reader-sized:not(.cover-mode) .page-shell img,
.previous-spread.guide-soft-hold img,
.previous-spread.guide-soft-next img,
.previous-spread.guide-soft-prev img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  display:block!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  filter:none!important;
}
.book.reader-sized:not(.cover-mode) .left-page img,
.previous-spread .prev-left img{object-position:right center!important;}
.book.reader-sized:not(.cover-mode) .right-page img,
.previous-spread .prev-right img{object-position:left center!important;}
.book.reader-sized:not(.cover-mode) .page-shell::before,
.book.reader-sized.page-turning .page-shell::before,
.previous-spread.guide-soft-hold::before,
.previous-spread.guide-soft-next::before,
.previous-spread.guide-soft-prev::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:4px!important;
  bottom:8px!important;
  width:36px!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.09) 20%,
    rgba(0,0,0,.23) 42%,
    rgba(0,0,0,.34) 49%,
    rgba(255,255,255,.035) 50%,
    rgba(0,0,0,.30) 51%,
    rgba(0,0,0,.20) 58%,
    rgba(0,0,0,.075) 80%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.86!important;
  filter:blur(2.2px)!important;
  mix-blend-mode:multiply!important;
  box-shadow:none!important;
  animation:none!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after,
.book.reader-sized.page-turning .page-shell::after,
.previous-spread.guide-soft-hold::after,
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:5px!important;
  bottom:9px!important;
  width:1px!important;
  transform:translateX(-50%)!important;
  z-index:13!important;
  pointer-events:none!important;
  background:rgba(255,255,255,.11)!important;
  opacity:.16!important;
  filter:blur(.5px)!important;
  box-shadow:none!important;
  animation:none!important;
}
.previous-spread.guide-soft-hold{
  opacity:1!important;
  visibility:visible!important;
  will-change:auto!important;
}
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  opacity:1!important;
  visibility:visible!important;
  will-change:opacity!important;
  animation:guidevaultNoBounceDissolveV094 .085s linear both!important;
}
@keyframes guidevaultNoBounceDissolveV094{
  0%{opacity:1;transform:none;filter:none;}
  100%{opacity:0;transform:none;filter:none;}
}
.book.reader-sized .turning-page,
.book.reader-sized .under-page{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
  transition:none!important;
}
.book.reader-sized.cover-mode .page-shell,
.book.reader-sized.cover-mode.page-turning .page-shell,
.previous-spread.cover-snapshot.guide-soft-hold,
.previous-spread.cover-snapshot.guide-soft-next,
.previous-spread.cover-snapshot.guide-soft-prev{
  left:25%!important;
  right:auto!important;
  width:50%!important;
  min-width:50%!important;
  max-width:50%!important;
  display:block!important;
  padding:4px 3px 8px!important;
}
@media(max-width:900px){
  .book.reader-sized .page-shell,
  .book.reader-sized.page-turning .page-shell,
  .previous-spread.guide-soft-hold,
  .previous-spread.guide-soft-next,
  .previous-spread.guide-soft-prev{padding:3px 2px 7px!important;}
}


/* v0.9.5: remove the transient outer reader frame and last 1px bounce.
   The page images already align correctly now; this keeps that alignment but makes the
   live spread and the transition snapshot use the exact same transparent footprint.
   No padding, border, panel background, radius, shadow, transform, or re-measure frame is
   allowed to appear during the page swap. */
.book.reader-sized,
.book.reader-sized.reader-frame-locked,
.book.reader-sized.page-turning{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  overflow:visible!important;
}
.book.reader-sized .page-shell,
.book.reader-sized.page-turning .page-shell,
.book.reader-sized.reader-frame-locked .page-shell,
.previous-spread.guide-soft-hold,
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  clip-path:none!important;
  transform:none!important;
  transition:none!important;
  filter:none!important;
}
.book.reader-sized:not(.cover-mode) .left-page,
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread.guide-soft-hold .prev-left,
.previous-spread.guide-soft-hold .prev-right,
.previous-spread.guide-soft-next .prev-left,
.previous-spread.guide-soft-next .prev-right,
.previous-spread.guide-soft-prev .prev-left,
.previous-spread.guide-soft-prev .prev-right{
  min-width:0!important;
  width:100%!important;
  height:100%!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  filter:none!important;
}
.book.reader-sized:not(.cover-mode) .left-page,
.previous-spread.guide-soft-hold .prev-left,
.previous-spread.guide-soft-next .prev-left,
.previous-spread.guide-soft-prev .prev-left{
  margin-right:-1px!important;
  padding-right:0!important;
}
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread.guide-soft-hold .prev-right,
.previous-spread.guide-soft-next .prev-right,
.previous-spread.guide-soft-prev .prev-right{
  margin-left:-1px!important;
  padding-left:0!important;
}
.book.reader-sized:not(.cover-mode) .page-side img,
.book.reader-sized:not(.cover-mode) .page-shell img,
.previous-spread.guide-soft-hold img,
.previous-spread.guide-soft-next img,
.previous-spread.guide-soft-prev img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  display:block!important;
  border:0!important;
  outline:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:1!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  filter:none!important;
}
.book.reader-sized:not(.cover-mode) .left-page img,
.previous-spread .prev-left img{object-position:right center!important;}
.book.reader-sized:not(.cover-mode) .right-page img,
.previous-spread .prev-right img{object-position:left center!important;}
/* Keep a soft binding, but make it part of the spread itself instead of a surrounding panel. */
.book.reader-sized:not(.cover-mode) .page-shell::before,
.book.reader-sized.page-turning .page-shell::before,
.previous-spread.guide-soft-hold::before,
.previous-spread.guide-soft-next::before,
.previous-spread.guide-soft-prev::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:0!important;
  bottom:0!important;
  width:34px!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.055) 18%,
    rgba(0,0,0,.19) 43%,
    rgba(0,0,0,.32) 49%,
    rgba(255,255,255,.035) 50%,
    rgba(0,0,0,.29) 51%,
    rgba(0,0,0,.16) 58%,
    rgba(0,0,0,.045) 82%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.9!important;
  filter:blur(2px)!important;
  mix-blend-mode:multiply!important;
  box-shadow:none!important;
  animation:none!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after,
.book.reader-sized.page-turning .page-shell::after,
.previous-spread.guide-soft-hold::after,
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::after{
  display:none!important;
  content:none!important;
}
.previous-spread.guide-soft-hold{
  opacity:1!important;
  visibility:visible!important;
  will-change:auto!important;
}
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  opacity:1!important;
  visibility:visible!important;
  will-change:opacity!important;
  animation:guidevaultFrameFreeFadeV095 .07s linear both!important;
}
@keyframes guidevaultFrameFreeFadeV095{
  0%{opacity:1;transform:none;filter:none;}
  100%{opacity:0;transform:none;filter:none;}
}
.book.reader-sized.cover-mode .page-shell,
.book.reader-sized.cover-mode.page-turning .page-shell,
.previous-spread.cover-snapshot.guide-soft-hold,
.previous-spread.cover-snapshot.guide-soft-next,
.previous-spread.cover-snapshot.guide-soft-prev{
  left:25%!important;
  right:auto!important;
  width:50%!important;
  min-width:50%!important;
  max-width:50%!important;
  display:block!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
}

/* v0.9.6: stable in-place reader swap.
   The old transition used a separate snapshot/turning wrapper that briefly exposed a
   framed panel and made the pages shrink before advancing.  Keep the book footprint
   fixed and hide every helper layer unless a future page-turn system deliberately
   owns it again. */
.book.reader-sized,
.book.reader-sized.reader-frame-locked,
.book.reader-sized.page-turning,
.book.reader-sized .page-shell,
.book.reader-sized.reader-frame-locked .page-shell,
.book.reader-sized.page-turning .page-shell{
  transform:none!important;
  transition:none!important;
  animation:none!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.previous-spread,
.previous-spread.guide-soft-hold,
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev,
.previous-spread.guide-snapshot-next,
.previous-spread.guide-snapshot-prev,
.book.reader-sized .turning-page,
.book.reader-sized .under-page,
.book.reader-sized.page-turning .turning-page,
.book.reader-sized.page-turning .under-page{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  animation:none!important;
  transition:none!important;
  transform:none!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.book.reader-sized:not(.cover-mode) .page-shell{
  padding:0!important;
  gap:0!important;
  overflow:visible!important;
}
.book.reader-sized:not(.cover-mode) .page-side,
.book.reader-sized:not(.cover-mode) .left-page,
.book.reader-sized:not(.cover-mode) .right-page{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.book.reader-sized:not(.cover-mode) .page-side img,
.book.reader-sized:not(.cover-mode) .page-shell img{
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
  filter:none!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:0!important;
  bottom:0!important;
  width:34px!important;
  transform:translateX(-50%)!important;
  z-index:12!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.055) 18%,
    rgba(0,0,0,.19) 43%,
    rgba(0,0,0,.32) 49%,
    rgba(255,255,255,.035) 50%,
    rgba(0,0,0,.29) 51%,
    rgba(0,0,0,.16) 58%,
    rgba(0,0,0,.045) 82%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.9!important;
  filter:blur(2px)!important;
  mix-blend-mode:multiply!important;
  box-shadow:none!important;
  animation:none!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after{
  display:none!important;
  content:none!important;
}

/* v0.9.7: reader center overlay + 1/2 page display modes.
   The stable in-place swap remains the default page advance.  The center click zone
   now opens a small HUD for page position and display mode, while covers/single-page
   mode use a transparent single-page surface with no sepia/cream backing panel. */
.page-hit.center{
  left:33%!important;
  width:34%!important;
  z-index:9!important;
  cursor:default!important;
}
.reader-hud{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:30!important;
  min-width:280px!important;
  max-width:min(420px,calc(100vw - 48px))!important;
  padding:16px!important;
  border:1px solid rgba(105,164,255,.36)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(9,18,29,.94),rgba(5,10,17,.92))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.56),0 0 0 1px rgba(255,255,255,.04) inset!important;
  backdrop-filter:blur(14px)!important;
  color:var(--text)!important;
  pointer-events:auto!important;
}
.reader-hud-row{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:14px!important;
}
.reader-hud-kicker{
  display:block!important;
  margin-bottom:4px!important;
  color:#8fb4df!important;
  font-size:11px!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
#readerPagePosition{
  display:block!important;
  font-size:24px!important;
  line-height:1.1!important;
  letter-spacing:.01em!important;
  color:#f4f8ff!important;
}
.reader-hud-close{
  width:30px!important;
  height:30px!important;
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.06)!important;
  color:#dceaff!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.reader-hud-close:hover{border-color:rgba(105,164,255,.58)!important;background:rgba(47,129,255,.18)!important;}
.reader-mode-switch{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
.reader-mode-button{
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:11px!important;
  padding:11px 14px!important;
  background:rgba(255,255,255,.055)!important;
  color:#dbe9fb!important;
  font-weight:700!important;
  cursor:pointer!important;
}
.reader-mode-button:hover{border-color:rgba(105,164,255,.55)!important;background:rgba(47,129,255,.14)!important;}
.reader-mode-button.active{
  border-color:#3d8fff!important;
  background:linear-gradient(180deg,#3387ff,#1d62d6)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(47,129,255,.24)!important;
}
.book.reader-sized.single-page-mode,
.book.reader-sized.cover-mode,
.fullscreen-reader .book.reader-sized.single-page-mode,
.fullscreen-reader .book.reader-sized.cover-mode,
.reader-stage:fullscreen .book.reader-sized.single-page-mode,
.reader-stage:fullscreen .book.reader-sized.cover-mode{
  width:var(--guidevault-reader-width)!important;
  height:var(--guidevault-reader-height)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  overflow:visible!important;
}
.book.reader-sized.single-page-mode .page-shell,
.book.reader-sized.cover-mode .page-shell,
.book.reader-sized.single-page-mode.reader-frame-locked .page-shell,
.book.reader-sized.cover-mode.reader-frame-locked .page-shell{
  position:absolute!important;
  inset:0!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.book.reader-sized.single-page-mode .page-shell::before,
.book.reader-sized.single-page-mode .page-shell::after,
.book.reader-sized.cover-mode .page-shell::before,
.book.reader-sized.cover-mode .page-shell::after{
  display:none!important;
  content:none!important;
}
.book.reader-sized.single-page-mode .left-page,
.book.reader-sized.cover-mode .left-page{
  display:none!important;
}
.book.reader-sized.single-page-mode .right-page,
.book.reader-sized.cover-mode .right-page{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.book.reader-sized.single-page-mode .right-page img,
.book.reader-sized.cover-mode .right-page img,
.book.reader-sized.single-page-mode .page-shell img,
.book.reader-sized.cover-mode .page-shell img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  transition:none!important;
  animation:none!important;
}
.book.reader-sized.single-page-mode .blank-page::after,
.book.reader-sized.cover-mode .blank-page::after{display:none!important;content:none!important;}


/* v0.9.8: bottom reader control tray, page scrubber, and safe optional transitions.
   This keeps the stable fixed-footprint reader as the default while allowing Quick Fade
   and Slide from a dropdown. The tray is transparent/glass and slides up from the bottom. */
.reader-hud{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:22px!important;
  transform:translateX(-50%) translateY(18px)!important;
  z-index:34!important;
  width:min(720px,calc(100vw - 56px))!important;
  max-width:min(720px,calc(100vw - 56px))!important;
  min-width:min(360px,calc(100vw - 56px))!important;
  padding:14px 16px 16px!important;
  border:1px solid rgba(115,170,255,.32)!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,rgba(8,17,28,.72),rgba(4,9,15,.66))!important;
  box-shadow:0 20px 64px rgba(0,0,0,.44),0 0 0 1px rgba(255,255,255,.035) inset!important;
  backdrop-filter:blur(18px)!important;
  color:var(--text)!important;
  pointer-events:auto!important;
  opacity:0!important;
  visibility:hidden!important;
  transition:opacity .14s ease,transform .18s cubic-bezier(.2,.75,.25,1),visibility .18s ease!important;
}
.reader-hud:not(.hidden),
.reader-hud.open{
  opacity:1!important;
  visibility:visible!important;
  transform:translateX(-50%) translateY(0)!important;
}
.reader-hud.hidden{
  display:block!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.reader-hud-grabber{
  width:46px!important;
  height:4px!important;
  border-radius:999px!important;
  margin:0 auto 12px!important;
  background:rgba(185,213,255,.46)!important;
  box-shadow:0 0 12px rgba(47,129,255,.25)!important;
}
.reader-hud-row{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:12px!important;
}
.reader-hud-kicker{
  display:block!important;
  margin-bottom:4px!important;
  color:#95bce8!important;
  font-size:11px!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
}
#readerPagePosition{
  display:block!important;
  font-size:18px!important;
  line-height:1.15!important;
  letter-spacing:.01em!important;
  color:#f4f8ff!important;
}
.reader-scrubber-wrap{margin:2px 0 14px!important;}
.reader-scrubber-labels{
  display:flex!important;
  justify-content:space-between!important;
  margin-bottom:7px!important;
  color:#9fb5cf!important;
  font-size:12px!important;
}
.reader-page-slider{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:100%!important;
  height:18px!important;
  margin:0!important;
  background:transparent!important;
  cursor:pointer!important;
}
.reader-page-slider::-webkit-slider-runnable-track{
  height:8px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:linear-gradient(90deg,rgba(48,132,255,.9) 0 var(--reader-scrub-pct,0%),rgba(255,255,255,.14) var(--reader-scrub-pct,0%) 100%)!important;
  box-shadow:0 0 18px rgba(47,129,255,.18) inset!important;
}
.reader-page-slider::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  appearance:none!important;
  width:20px!important;
  height:20px!important;
  margin-top:-7px!important;
  border-radius:50%!important;
  border:2px solid #eef6ff!important;
  background:#2f81ff!important;
  box-shadow:0 0 0 4px rgba(47,129,255,.18),0 5px 16px rgba(0,0,0,.45)!important;
}
.reader-page-slider::-moz-range-track{
  height:8px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.14)!important;
}
.reader-page-slider::-moz-range-progress{
  height:8px!important;
  border-radius:999px!important;
  background:rgba(48,132,255,.9)!important;
}
.reader-page-slider::-moz-range-thumb{
  width:18px!important;
  height:18px!important;
  border-radius:50%!important;
  border:2px solid #eef6ff!important;
  background:#2f81ff!important;
  box-shadow:0 0 0 4px rgba(47,129,255,.18),0 5px 16px rgba(0,0,0,.45)!important;
}
.reader-hud-controls{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
}
.reader-hud-controls label{
  margin:0!important;
  color:#9fb5cf!important;
  font-size:11px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.reader-hud-controls select{
  display:block!important;
  width:100%!important;
  margin-top:6px!important;
  padding:10px 12px!important;
  border-radius:11px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:rgba(4,10,17,.72)!important;
  color:#f2f7ff!important;
  font-size:13px!important;
  text-transform:none!important;
  letter-spacing:normal!important;
}
.reader-hud-close{
  width:30px!important;
  height:30px!important;
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.12)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.06)!important;
  color:#dceaff!important;
  font-size:20px!important;
  line-height:1!important;
  cursor:pointer!important;
}
.reader-hud-close:hover{border-color:rgba(105,164,255,.58)!important;background:rgba(47,129,255,.18)!important;}
.reader-mode-switch,.reader-mode-button{display:none!important;}
#pageShell.reader-fade-out{animation:gvReaderQuickFadeOut .07s ease-in forwards!important;}
#pageShell.reader-fade-in{animation:gvReaderQuickFadeIn .105s ease-out forwards!important;}
#pageShell.reader-slide-out-left{animation:gvReaderSlideOutLeft .095s ease-in forwards!important;}
#pageShell.reader-slide-out-right{animation:gvReaderSlideOutRight .095s ease-in forwards!important;}
#pageShell.reader-slide-in-left{animation:gvReaderSlideInLeft .125s ease-out forwards!important;}
#pageShell.reader-slide-in-right{animation:gvReaderSlideInRight .125s ease-out forwards!important;}
@keyframes gvReaderQuickFadeOut{from{opacity:1;}to{opacity:.12;}}
@keyframes gvReaderQuickFadeIn{from{opacity:.12;}to{opacity:1;}}
@keyframes gvReaderSlideOutLeft{from{opacity:1;transform:translateX(0);}to{opacity:.08;transform:translateX(-5%);}}
@keyframes gvReaderSlideOutRight{from{opacity:1;transform:translateX(0);}to{opacity:.08;transform:translateX(5%);}}
@keyframes gvReaderSlideInLeft{from{opacity:.1;transform:translateX(-5%);}to{opacity:1;transform:translateX(0);}}
@keyframes gvReaderSlideInRight{from{opacity:.1;transform:translateX(5%);}to{opacity:1;transform:translateX(0);}}
#pageShell.reader-fade-out,#pageShell.reader-fade-in,#pageShell.reader-slide-out-left,#pageShell.reader-slide-out-right,#pageShell.reader-slide-in-left,#pageShell.reader-slide-in-right{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
  will-change:opacity,transform!important;
}
@media(max-width:720px){
  .reader-hud{width:calc(100vw - 28px)!important;bottom:12px!important;padding:12px!important;}
  .reader-hud-controls{grid-template-columns:1fr!important;}
}
@media(prefers-reduced-motion:reduce){
  .reader-hud,#pageShell.reader-fade-out,#pageShell.reader-fade-in,#pageShell.reader-slide-out-left,#pageShell.reader-slide-out-right,#pageShell.reader-slide-in-left,#pageShell.reader-slide-in-right{animation:none!important;transition:none!important;transform:none!important;}
}

/* v0.9.9: full-width bottom reader tray + reliable simple transitions.
   The reader tray is now docked to the bottom edge of the reader window/fullscreen
   surface, has no close X, and uses a thinner media-control-bar layout.  The Quick
   Fade and Slide transitions are now driven by inline JS transitions on the existing
   page shell so they are not blocked by earlier safety rules that disabled animation
   on the book frame. */
.reader-stage{isolation:isolate!important;}
.reader-hud{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  padding:8px 18px 10px!important;
  border-left:0!important;
  border-right:0!important;
  border-bottom:0!important;
  border-top:1px solid rgba(115,170,255,.30)!important;
  border-radius:16px 16px 0 0!important;
  background:linear-gradient(180deg,rgba(8,17,28,.72),rgba(4,9,15,.68))!important;
  box-shadow:0 -18px 48px rgba(0,0,0,.38),0 1px 0 rgba(255,255,255,.035) inset!important;
  backdrop-filter:blur(18px)!important;
  z-index:42!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(100%)!important;
  pointer-events:none!important;
  transition:transform .22s cubic-bezier(.18,.78,.2,1),opacity .16s ease,visibility .22s ease!important;
}
.reader-hud:not(.hidden),
.reader-hud.open{
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}
.reader-hud.hidden{
  display:block!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:translateY(100%)!important;
  pointer-events:none!important;
}
.reader-hud-close{display:none!important;}
.reader-hud-grabber{
  width:52px!important;
  height:3px!important;
  margin:0 auto 7px!important;
  opacity:.72!important;
}
.reader-hud-main-row{
  display:grid!important;
  grid-template-columns:minmax(132px,.45fr) minmax(270px,.9fr) auto!important;
  gap:14px!important;
  align-items:end!important;
}
.reader-position-block{min-width:0!important;}
.reader-hud-kicker{
  margin-bottom:2px!important;
  font-size:10px!important;
  letter-spacing:.12em!important;
}
#readerPagePosition{
  font-size:16px!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
.reader-scrubber-wrap{margin:8px 0 0!important;}
.reader-scrubber-labels{
  margin-bottom:3px!important;
  font-size:11px!important;
}
.reader-page-slider{height:16px!important;}
.reader-hud-controls{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  align-items:end!important;
}
.reader-hud-controls label{
  margin:0!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
}
.reader-hud-controls select{
  margin-top:4px!important;
  min-height:32px!important;
  padding:7px 10px!important;
  border-radius:9px!important;
  font-size:12px!important;
}
.reader-tray-actions{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  gap:8px!important;
  white-space:nowrap!important;
}
.reader-tray-button{
  min-height:32px!important;
  padding:7px 10px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:9px!important;
  background:rgba(4,10,17,.72)!important;
  color:#edf6ff!important;
  font-size:12px!important;
  font-weight:700!important;
  cursor:pointer!important;
}
.reader-tray-button:hover{border-color:rgba(105,164,255,.58)!important;background:rgba(47,129,255,.16)!important;}
.reader-tray-button.primary-action{background:linear-gradient(180deg,#3387ff,#1d62d6)!important;border-color:#3d8fff!important;color:#fff!important;}
.reader-tray-button.bookmarked{border-color:rgba(255,210,63,.55)!important;color:#ffe492!important;background:rgba(255,210,63,.11)!important;}
#readerExitFullscreen.hidden{display:none!important;}
#pageShell{
  will-change:auto;
}
@media(max-width:980px){
  .reader-hud-main-row{grid-template-columns:1fr!important;align-items:stretch!important;gap:8px!important;}
  .reader-tray-actions{justify-content:space-between!important;}
  .reader-tray-button{flex:1 1 auto!important;}
  .reader-hud{padding:8px 12px 10px!important;}
}
@media(max-width:640px){
  .reader-hud-controls{grid-template-columns:1fr!important;}
  .reader-tray-actions{flex-wrap:wrap!important;}
  #readerPagePosition{white-space:normal!important;}
}
@media(prefers-reduced-motion:reduce){
  .reader-hud{transition:none!important;transform:none!important;}
}

/* v1.0.0: deeper transparent book-depth shading + bookmark toggle polish.
   This keeps the current stable reader footprint and transparent page surface, but
   adds layered feather shading for a deeper center crease and subtle outer-page depth.
   No panel/frame background is reintroduced. */
.book.reader-sized:not(.cover-mode) .page-shell,
.book.reader-sized.page-turning .page-shell,
.previous-spread.guide-soft-hold,
.previous-spread.guide-soft-next,
.previous-spread.guide-soft-prev{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  overflow:visible!important;
}

.book.reader-sized:not(.cover-mode) .left-page,
.book.reader-sized:not(.cover-mode) .right-page,
.previous-spread .prev-left,
.previous-spread .prev-right{
  position:relative!important;
  background:transparent!important;
  overflow:visible!important;
  box-shadow:none!important;
}

/* Outer page-edge feathering: subtle depth at the outside edges only. */
.book.reader-sized:not(.cover-mode) .left-page::before,
.previous-spread .prev-left::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:0!important;
  width:clamp(18px,3.4vw,44px)!important;
  z-index:6!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.16) 34%,
    rgba(0,0,0,.055) 68%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.46!important;
  filter:blur(1.6px)!important;
  mix-blend-mode:multiply!important;
}
.book.reader-sized:not(.cover-mode) .right-page::before,
.previous-spread .prev-right::before{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  right:0!important;
  width:clamp(18px,3.4vw,44px)!important;
  z-index:6!important;
  pointer-events:none!important;
  background:linear-gradient(270deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.16) 34%,
    rgba(0,0,0,.055) 68%,
    rgba(0,0,0,0) 100%)!important;
  opacity:.46!important;
  filter:blur(1.6px)!important;
  mix-blend-mode:multiply!important;
}

/* Center binding: wider/deeper feather, but still transparent and gradient-based. */
.book.reader-sized:not(.cover-mode) .page-shell::before,
.book.reader-sized.page-turning .page-shell::before,
.previous-spread.guide-soft-hold::before,
.previous-spread.guide-soft-next::before,
.previous-spread.guide-soft-prev::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:0!important;
  bottom:0!important;
  width:clamp(48px,6.2vw,96px)!important;
  transform:translateX(-50%)!important;
  z-index:14!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,.34) 0%,
      rgba(0,0,0,.24) 20%,
      rgba(0,0,0,.125) 42%,
      rgba(0,0,0,.045) 66%,
      rgba(0,0,0,0) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.075) 18%,
      rgba(0,0,0,.20) 36%,
      rgba(0,0,0,.40) 48%,
      rgba(255,255,255,.055) 50%,
      rgba(0,0,0,.38) 52%,
      rgba(0,0,0,.18) 64%,
      rgba(0,0,0,.065) 82%,
      rgba(0,0,0,0) 100%)!important;
  opacity:.92!important;
  filter:blur(3.8px)!important;
  mix-blend-mode:multiply!important;
  box-shadow:none!important;
  animation:none!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after,
.book.reader-sized.page-turning .page-shell::after,
.previous-spread.guide-soft-hold::after,
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:0!important;
  bottom:0!important;
  width:2px!important;
  transform:translateX(-50%)!important;
  z-index:15!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.12) 14%,
    rgba(0,0,0,.26) 50%,
    rgba(255,255,255,.08) 86%,
    rgba(255,255,255,0))!important;
  opacity:.30!important;
  filter:blur(.75px)!important;
  box-shadow:none!important;
  animation:none!important;
}

.reader-tray-button.bookmarked{
  border-color:rgba(255,210,63,.68)!important;
  color:#ffeaa6!important;
  background:rgba(255,210,63,.14)!important;
}


/* v1.0.1: live reader shading controls.
   The bottom tray now controls binding and outer-page depth. These overrides keep
   the reader background transparent while making both shadow treatments tunable. */
.book.reader-sized{
  --gv-binding-width:96px;
  --gv-binding-blur:4.2px;
  --gv-binding-opacity:.94;
  --gv-binding-radial-1:.34;
  --gv-binding-radial-2:.24;
  --gv-binding-radial-3:.12;
  --gv-binding-line-soft:.08;
  --gv-binding-line-mid:.36;
  --gv-binding-highlight:.045;
  --gv-binding-centerline:.24;
  --gv-binding-centerline-highlight:.08;
  --gv-outer-width:54px;
  --gv-outer-blur:2.6px;
  --gv-outer-opacity:.68;
  --gv-outer-alpha-1:.36;
  --gv-outer-alpha-2:.20;
  --gv-outer-alpha-3:.07;
}
.book.reader-sized.reader-binding-shade-off .page-shell::before,
.book.reader-sized.reader-binding-shade-off .page-shell::after,
.book.reader-sized.reader-binding-shade-off + .previous-spread::before,
.book.reader-sized.reader-binding-shade-off + .previous-spread::after{
  display:none!important;
}
.book.reader-sized.reader-outer-shade-off .left-page::before,
.book.reader-sized.reader-outer-shade-off .right-page::before,
.book.reader-sized.reader-outer-shade-off .prev-left::before,
.book.reader-sized.reader-outer-shade-off .prev-right::before{
  display:none!important;
}
.book.reader-sized:not(.cover-mode) .left-page::before,
.previous-spread .prev-left::before{
  width:var(--gv-outer-width)!important;
  opacity:var(--gv-outer-opacity)!important;
  filter:blur(var(--gv-outer-blur))!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,var(--gv-outer-alpha-1)) 0%,
    rgba(0,0,0,var(--gv-outer-alpha-2)) 32%,
    rgba(0,0,0,var(--gv-outer-alpha-3)) 66%,
    rgba(0,0,0,0) 100%)!important;
}
.book.reader-sized:not(.cover-mode) .right-page::before,
.previous-spread .prev-right::before{
  width:var(--gv-outer-width)!important;
  opacity:var(--gv-outer-opacity)!important;
  filter:blur(var(--gv-outer-blur))!important;
  background:linear-gradient(270deg,
    rgba(0,0,0,var(--gv-outer-alpha-1)) 0%,
    rgba(0,0,0,var(--gv-outer-alpha-2)) 32%,
    rgba(0,0,0,var(--gv-outer-alpha-3)) 66%,
    rgba(0,0,0,0) 100%)!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::before,
.book.reader-sized.page-turning .page-shell::before,
.previous-spread.guide-soft-hold::before,
.previous-spread.guide-soft-next::before,
.previous-spread.guide-soft-prev::before{
  width:var(--gv-binding-width)!important;
  opacity:var(--gv-binding-opacity)!important;
  filter:blur(var(--gv-binding-blur))!important;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,var(--gv-binding-radial-1)) 0%,
      rgba(0,0,0,var(--gv-binding-radial-2)) 22%,
      rgba(0,0,0,var(--gv-binding-radial-3)) 48%,
      rgba(0,0,0,.035) 70%,
      rgba(0,0,0,0) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,var(--gv-binding-line-soft)) 18%,
      rgba(0,0,0,var(--gv-binding-line-mid)) 43%,
      rgba(0,0,0,calc(var(--gv-binding-line-mid) + .05)) 49%,
      rgba(255,255,255,var(--gv-binding-highlight)) 50%,
      rgba(0,0,0,calc(var(--gv-binding-line-mid) + .04)) 51%,
      rgba(0,0,0,var(--gv-binding-line-mid)) 57%,
      rgba(0,0,0,var(--gv-binding-line-soft)) 82%,
      rgba(0,0,0,0) 100%)!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after,
.book.reader-sized.page-turning .page-shell::after,
.previous-spread.guide-soft-hold::after,
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::after{
  opacity:1!important;
  background:linear-gradient(180deg,
    rgba(255,255,255,0),
    rgba(255,255,255,var(--gv-binding-centerline-highlight)) 13%,
    rgba(0,0,0,var(--gv-binding-centerline)) 50%,
    rgba(255,255,255,calc(var(--gv-binding-centerline-highlight) * .72)) 86%,
    rgba(255,255,255,0))!important;
}
.reader-shading-controls{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:8px!important;
  padding-top:8px!important;
  border-top:1px solid rgba(255,255,255,.08)!important;
}
.reader-shade-group{
  display:grid!important;
  grid-template-columns:minmax(128px,.7fr) minmax(150px,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
}
.reader-shade-toggle,
.reader-shade-slider{
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#cfe0f2!important;
  font-size:11px!important;
  letter-spacing:.04em!important;
  text-transform:none!important;
  white-space:nowrap!important;
}
.reader-shade-toggle input{accent-color:#2f81ff!important;}
.reader-shade-slider span{color:#8fb4df!important;font-size:10px!important;text-transform:uppercase!important;letter-spacing:.1em!important;}
.reader-shade-slider input[type="range"]{
  appearance:none!important;
  -webkit-appearance:none!important;
  flex:1 1 auto!important;
  min-width:84px!important;
  height:16px!important;
  background:transparent!important;
  cursor:pointer!important;
}
.reader-shade-slider input[type="range"]::-webkit-slider-runnable-track{
  height:6px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(90deg,rgba(47,129,255,.62),rgba(255,255,255,.16))!important;
}
.reader-shade-slider input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none!important;
  width:16px!important;
  height:16px!important;
  margin-top:-6px!important;
  border-radius:50%!important;
  border:2px solid #edf6ff!important;
  background:#2f81ff!important;
  box-shadow:0 3px 12px rgba(0,0,0,.45)!important;
}
.reader-shade-slider input[type="range"]::-moz-range-track{
  height:6px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.10)!important;
  background:rgba(255,255,255,.16)!important;
}
.reader-shade-slider input[type="range"]::-moz-range-thumb{
  width:14px!important;
  height:14px!important;
  border-radius:50%!important;
  border:2px solid #edf6ff!important;
  background:#2f81ff!important;
}
.reader-shade-slider input[type="range"]:disabled{opacity:.38!important;cursor:not-allowed!important;}
@media(max-width:980px){
  .reader-shading-controls{grid-template-columns:1fr!important;}
  .reader-shade-group{grid-template-columns:1fr!important;gap:6px!important;}
  .reader-shade-slider{width:100%!important;}
}


/* v1.0.2: outer-edge shading follows the actual scanned page edge.
   The previous control shaded the reader/page containers, which can be invisible when
   object-fit: contain leaves transparent space around a scan. These final overrides
   use JS-measured image bounds so the feather attaches to the far-left edge of the
   left scanned page and the far-right edge of the right scanned page. */
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .page-side{
  --gv-page-image-left:0px;
  --gv-page-image-right:100%;
  --gv-page-image-top:0px;
  --gv-page-image-height:100%;
  position:relative!important;
  isolation:isolate!important;
}
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .page-side img{
  position:relative!important;
  z-index:1!important;
}
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .left-page::before,
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .right-page::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  top:var(--gv-page-image-top)!important;
  height:var(--gv-page-image-height)!important;
  width:var(--gv-outer-width)!important;
  z-index:8!important;
  pointer-events:none!important;
  opacity:var(--gv-outer-opacity)!important;
  filter:blur(var(--gv-outer-blur))!important;
  mix-blend-mode:multiply!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .left-page::before{
  left:var(--gv-page-image-left)!important;
  right:auto!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,var(--gv-outer-alpha-1)) 0%,
    rgba(0,0,0,var(--gv-outer-alpha-2)) 28%,
    rgba(0,0,0,var(--gv-outer-alpha-3)) 58%,
    rgba(0,0,0,0) 100%)!important;
}
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .right-page::before{
  left:calc(var(--gv-page-image-right) - var(--gv-outer-width))!important;
  right:auto!important;
  background:linear-gradient(270deg,
    rgba(0,0,0,var(--gv-outer-alpha-1)) 0%,
    rgba(0,0,0,var(--gv-outer-alpha-2)) 28%,
    rgba(0,0,0,var(--gv-outer-alpha-3)) 58%,
    rgba(0,0,0,0) 100%)!important;
}
.book.reader-sized.reader-outer-shade-off .left-page::before,
.book.reader-sized.reader-outer-shade-off .right-page::before{
  display:none!important;
  content:none!important;
}

/* v1.0.4: reader tray control relocation and tighter shading controls.
   Fullscreen, Previous, Next, and Library now live in the bottom reader tray.
   The top reader badge/buttons are removed, and the tray keeps navigation at the edges. */
.compact-reader-toolbar{
  height:44px!important;
  justify-content:center!important;
  padding:0 18px!important;
}
.compact-reader-toolbar strong{
  flex:0 1 auto!important;
  max-width:min(72vw,900px)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
}
#pageLabel{display:none!important;}
.reader-hud-main-row-controls{
  grid-template-columns:auto minmax(130px,.34fr) minmax(280px,.74fr) auto!important;
  align-items:end!important;
  gap:12px!important;
}
.reader-tray-left-actions,
.reader-tray-right-actions{
  display:flex!important;
  align-items:flex-end!important;
  gap:8px!important;
  white-space:nowrap!important;
}
.reader-tray-left-actions{justify-content:flex-start!important;}
.reader-tray-right-actions{justify-content:flex-end!important;}
.reader-tray-left-actions .reader-tray-button,
.reader-tray-right-actions .reader-tray-button{
  min-width:86px!important;
}
#readerExitLibrary{min-width:82px!important;}
#prevPage{min-width:96px!important;}
#nextPage{min-width:86px!important;}
#readerFullscreen{min-width:96px!important;}
.reader-hud-controls{
  grid-template-columns:minmax(112px,1fr) minmax(144px,1fr)!important;
}
.reader-shading-controls{
  gap:8px!important;
  margin-top:7px!important;
  padding-top:7px!important;
}
.reader-shade-group{
  grid-template-columns:max-content minmax(150px,230px)!important;
  justify-content:start!important;
  align-items:center!important;
  gap:6px!important;
}
.reader-shade-toggle{gap:6px!important;}
.reader-shade-slider{gap:6px!important;}
.reader-shade-slider input[type="range"]{min-width:130px!important;}
@media(max-width:1160px){
  .reader-hud-main-row-controls{
    grid-template-columns:1fr 1fr!important;
    align-items:stretch!important;
  }
  .reader-position-block{order:1!important;}
  .reader-hud-controls{order:2!important;}
  .reader-tray-left-actions{order:3!important;justify-content:flex-start!important;}
  .reader-tray-right-actions{order:4!important;justify-content:flex-end!important;}
}
@media(max-width:760px){
  .reader-hud-main-row-controls{grid-template-columns:1fr!important;gap:8px!important;}
  .reader-tray-left-actions,
  .reader-tray-right-actions{justify-content:space-between!important;}
  .reader-tray-left-actions .reader-tray-button,
  .reader-tray-right-actions .reader-tray-button{flex:1 1 auto!important;min-width:0!important;}
  .reader-shading-controls{grid-template-columns:1fr!important;}
  .reader-shade-group{grid-template-columns:1fr!important;gap:5px!important;}
  .reader-shade-slider input[type="range"]{width:100%!important;min-width:0!important;}
}

/* v1.0.5: compact reader tray cleanup.
   Previous now sits before Library, bookmark/settings are icon buttons, and
   shading controls live in a small advanced flyout instead of occupying the main tray. */
.reader-tray-left-actions #prevPage{order:1!important;}
.reader-tray-left-actions #readerExitLibrary{order:2!important;}
.reader-tray-right-actions{
  position:relative!important;
  align-items:flex-end!important;
}
.reader-icon-button{
  width:36px!important;
  min-width:36px!important;
  height:32px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  font-size:16px!important;
}
.reader-bookmark-button{color:#edf6ff!important;}
.reader-bookmark-icon{
  width:18px!important;
  height:18px!important;
  display:block!important;
  overflow:visible!important;
}
.reader-bookmark-icon path{
  fill:transparent!important;
  stroke:currentColor!important;
  stroke-width:2.05!important;
  stroke-linejoin:round!important;
  stroke-linecap:round!important;
  vector-effect:non-scaling-stroke!important;
}
.reader-bookmark-button.bookmarked{
  color:#ffe486!important;
  border-color:rgba(255,210,63,.68)!important;
  background:rgba(255,210,63,.14)!important;
}
.reader-bookmark-button.bookmarked .reader-bookmark-icon path{
  fill:currentColor!important;
  stroke:currentColor!important;
}
.reader-advanced-wrap{
  position:relative!important;
  display:inline-flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
}
.reader-advanced-button{
  font-size:17px!important;
  font-weight:800!important;
}
.reader-advanced-button.active{
  border-color:rgba(105,164,255,.72)!important;
  background:rgba(47,129,255,.20)!important;
  color:#ffffff!important;
}
.reader-advanced-panel{
  position:absolute!important;
  right:0!important;
  bottom:calc(100% + 12px)!important;
  width:min(560px,calc(100vw - 28px))!important;
  padding:12px!important;
  border:1px solid rgba(116,172,255,.22)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(8,16,28,.96),rgba(4,9,16,.94))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.08)!important;
  z-index:80!important;
  opacity:0!important;
  transform:translateY(8px)!important;
  pointer-events:none!important;
  transition:opacity 130ms ease, transform 130ms ease!important;
}
.reader-advanced-panel.open{
  opacity:1!important;
  transform:translateY(0)!important;
  pointer-events:auto!important;
}
.reader-advanced-panel.hidden{
  display:block!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.reader-advanced-panel .reader-shading-controls{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  margin:0!important;
  padding:0!important;
  border-top:0!important;
}
.reader-advanced-panel .reader-shade-group{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  min-width:0!important;
  justify-content:stretch!important;
  align-items:start!important;
}
.reader-advanced-panel .reader-shade-toggle,
.reader-advanced-panel .reader-shade-slider{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;
  min-width:0!important;
}
.reader-advanced-panel .reader-shade-toggle{
  font-size:12px!important;
  color:#e4f0ff!important;
  line-height:1.2!important;
}
.reader-advanced-panel .reader-shade-slider{
  margin-top:0!important;
  font-size:11px!important;
  color:#aebfd3!important;
}
.reader-advanced-panel .reader-shade-slider span{
  flex:0 0 auto!important;
  min-width:36px!important;
}
.reader-advanced-panel .reader-shade-slider input[type="range"]{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:110px!important;
}
@media(max-width:760px){
  .reader-advanced-panel{
    right:-48px!important;
    width:min(440px,calc(100vw - 20px))!important;
  }
  .reader-advanced-panel .reader-shading-controls{grid-template-columns:1fr!important;}
}

/* v1.0.7: reader tray polish, zoom controls, and a fresh optional page-turn experiment.
   Stable Swap remains the default reader baseline. The experimental turn uses one
   image-only overlay inside the existing page shell so it does not resize or draw a frame. */
.reader-tray-left-actions #prevPage{
  order:1!important;
}
.reader-tray-left-actions #readerExitLibrary{
  order:2!important;
}
#prevPage.primary-action{
  background:linear-gradient(180deg,#3387ff,#1d62d6)!important;
  border-color:#3d8fff!important;
  color:#fff!important;
  box-shadow:0 8px 20px rgba(47,129,255,.18)!important;
}
#readerExitLibrary:not(.primary-action){
  background:rgba(4,10,17,.68)!important;
  border-color:rgba(160,184,214,.28)!important;
  color:#d9e8fb!important;
  box-shadow:none!important;
}
.reader-display-zoom-group{
  display:grid!important;
  grid-template-columns:minmax(112px,1fr) auto!important;
  align-items:end!important;
  gap:8px!important;
  min-width:0!important;
}
.reader-display-zoom-group label{
  min-width:0!important;
}
.reader-zoom-buttons{
  display:flex!important;
  align-items:flex-end!important;
  gap:6px!important;
  padding-bottom:0!important;
}
.reader-zoom-button{
  width:31px!important;
  min-width:31px!important;
  height:31px!important;
  font-size:18px!important;
  font-weight:850!important;
  border-radius:9px!important;
}
.reader-zoom-button:disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
}
#book.book.reader-sized,
#book.book.reader-sized.cover-mode,
.fullscreen-reader #book.book.reader-sized,
.reader-stage:fullscreen #book.book.reader-sized{
  transform:scale(var(--reader-zoom-scale,1))!important;
  transform-origin:center center!important;
}
.reader-page-turn-layer{
  position:absolute!important;
  z-index:42!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  will-change:transform,opacity,filter!important;
  contain:paint!important;
}
.reader-page-turn-layer img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
}
.reader-page-turn-layer::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:.72!important;
  mix-blend-mode:multiply!important;
}
.reader-page-turn-layer.turn-next::after{
  background:linear-gradient(90deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.13) 24%,
    rgba(255,255,255,.035) 42%,
    rgba(0,0,0,.20) 78%,
    rgba(0,0,0,.38) 100%)!important;
}
.reader-page-turn-layer.turn-prev::after{
  background:linear-gradient(270deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.13) 24%,
    rgba(255,255,255,.035) 42%,
    rgba(0,0,0,.20) 78%,
    rgba(0,0,0,.38) 100%)!important;
}
.reader-page-turn-active .page-side,
.reader-page-turn-active .page-side img{
  animation:none!important;
}
@media(max-width:760px){
  .reader-display-zoom-group{grid-template-columns:1fr!important;gap:6px!important;}
  .reader-zoom-buttons{justify-content:flex-start!important;}
}

/* v1.0.8: improved experimental page turn and reader magnifier controls. */
.reader-magnifier-wrap{
  position:relative!important;
  display:flex!important;
  align-items:flex-end!important;
  gap:4px!important;
}
.reader-magnifier-button svg{
  width:17px!important;
  height:17px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.reader-magnifier-button.active,
.reader-magnifier-menu-button.active{
  border-color:rgba(85,166,255,.84)!important;
  color:#fff!important;
  background:rgba(47,129,255,.22)!important;
  box-shadow:0 0 0 1px rgba(47,129,255,.18),0 10px 22px rgba(47,129,255,.16)!important;
}
.reader-magnifier-menu-button{
  width:24px!important;
  min-width:24px!important;
  padding:0!important;
  font-size:12px!important;
}
.reader-magnifier-panel{
  position:absolute!important;
  right:0!important;
  bottom:calc(100% + 13px)!important;
  width:min(340px,calc(100vw - 28px))!important;
  padding:13px!important;
  border:1px solid rgba(135,170,210,.26)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(8,14,22,.96),rgba(5,10,17,.94))!important;
  box-shadow:0 22px 70px rgba(0,0,0,.56),inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(18px)!important;
  z-index:80!important;
}
.reader-magnifier-panel.hidden{display:none!important;}
.reader-panel-title{
  margin:0 0 10px!important;
  color:#f3f8ff!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.reader-magnifier-setting{
  display:grid!important;
  grid-template-columns:72px minmax(150px,1fr)!important;
  gap:10px!important;
  align-items:center!important;
  margin:7px 0!important;
  color:#cfdef0!important;
  font-size:12px!important;
}
.reader-magnifier-setting span{color:#aebed2!important;}
.reader-magnifier-setting input[type="range"]{width:100%!important;}
.reader-magnifier-longpress{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:11px 0 0!important;
  color:#d6e5f8!important;
  font-size:12px!important;
}
.reader-magnifier-longpress input{margin:0!important;}
.reader-magnifier{
  --reader-magnifier-width:320px;
  --reader-magnifier-height:220px;
  --reader-magnifier-opacity:.92;
  position:absolute!important;
  width:var(--reader-magnifier-width)!important;
  height:var(--reader-magnifier-height)!important;
  z-index:36!important;
  pointer-events:none!important;
  overflow:hidden!important;
  border-radius:18px!important;
  opacity:var(--reader-magnifier-opacity)!important;
  border:1px solid rgba(220,238,255,.72)!important;
  background:rgba(0,0,0,.1)!important;
  box-shadow:0 18px 54px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,255,255,.18), inset 0 0 34px rgba(255,255,255,.05)!important;
  backdrop-filter:none!important;
  contain:layout paint!important;
}
.reader-magnifier.hidden{display:none!important;}
.reader-magnifier::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.18),rgba(255,255,255,0) 32%),linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,0) 28%,rgba(0,0,0,.16) 100%)!important;
  mix-blend-mode:screen!important;
}
.reader-magnifier-content{
  position:absolute!important;
  left:0!important;
  top:0!important;
  transform-origin:0 0!important;
  will-change:transform!important;
}
.magnifier-spread{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  background:transparent!important;
}
.magnifier-spread.single{display:block!important;}
.magnifier-page{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:transparent!important;
}
.magnifier-page img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  display:block!important;
  background:transparent!important;
}
.magnifier-page.blank::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:rgba(255,255,255,.04)!important;
}
.reader-page-turn-layer{
  overflow:visible!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  will-change:transform,filter!important;
}
.reader-page-turn-face{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
}
.reader-page-turn-face img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
}
.reader-page-turn-front{transform:rotateY(0deg)!important;}
.reader-page-turn-back{transform:rotateY(180deg)!important;}
.reader-page-turn-layer::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:5!important;
  opacity:.72!important;
  mix-blend-mode:multiply!important;
  backface-visibility:hidden!important;
}
.reader-page-turn-layer.turn-next::before{
  background:linear-gradient(90deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.16) 20%,rgba(255,255,255,.05) 43%,rgba(0,0,0,.24) 78%,rgba(0,0,0,.44) 100%)!important;
}
.reader-page-turn-layer.turn-prev::before{
  background:linear-gradient(270deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.16) 20%,rgba(255,255,255,.05) 43%,rgba(0,0,0,.24) 78%,rgba(0,0,0,.44) 100%)!important;
}
.reader-page-turn-layer::after{display:none!important;}
@media(max-width:760px){
  .reader-magnifier-panel{right:-40px!important;width:min(330px,calc(100vw - 20px))!important;}
  .reader-magnifier-setting{grid-template-columns:62px 1fr!important;}
}

/* v1.0.9: tune Page Turn Experimental.
   Slower turn, no late opacity dissolve. The turning page stays visible until the
   destination spread is already in place and the overlay is removed. */
.reader-page-turn-layer{
  opacity:1!important;
  transform-style:preserve-3d!important;
  transition:none!important;
}
.reader-page-turn-layer.turn-next,
.reader-page-turn-layer.turn-prev{
  animation:none!important;
}
.reader-page-turn-face,
.reader-page-turn-face img{
  opacity:1!important;
}
.reader-page-turn-layer::before{
  opacity:.58!important;
}
.reader-page-turn-layer.turn-next::before{
  background:linear-gradient(90deg,
    rgba(0,0,0,.36) 0%,
    rgba(0,0,0,.13) 22%,
    rgba(255,255,255,.035) 45%,
    rgba(0,0,0,.18) 78%,
    rgba(0,0,0,.32) 100%)!important;
}
.reader-page-turn-layer.turn-prev::before{
  background:linear-gradient(270deg,
    rgba(0,0,0,.36) 0%,
    rgba(0,0,0,.13) 22%,
    rgba(255,255,255,.035) 45%,
    rgba(0,0,0,.18) 78%,
    rgba(0,0,0,.32) 100%)!important;
}

/* v1.1.0: refine Page Turn Experimental face handling.
   Keep the sheet opaque, switch from front to true backside page at the midpoint,
   and remove the remaining dissolve/fade behavior after landing. */
.reader-page-turn-layer{
  opacity:1!important;
  overflow:visible!important;
  isolation:isolate!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
}
.reader-page-turn-layer .reader-page-turn-face{
  opacity:0!important;
  transition:none!important;
  animation:none!important;
  filter:none!important;
  background:transparent!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transform-style:preserve-3d!important;
}
.reader-page-turn-layer .reader-page-turn-front{
  opacity:1!important;
  transform:rotateY(0deg) translateZ(.2px)!important;
}
.reader-page-turn-layer .reader-page-turn-back{
  opacity:0!important;
  transform:rotateY(180deg) translateZ(.2px)!important;
}
.reader-page-turn-layer.reader-turn-show-back .reader-page-turn-front{
  opacity:0!important;
}
.reader-page-turn-layer.reader-turn-show-back .reader-page-turn-back{
  opacity:1!important;
}
.reader-page-turn-layer .reader-page-turn-face img{
  opacity:1!important;
  filter:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-page-turn-layer::before{
  opacity:.42!important;
  transition:none!important;
  animation:none!important;
}
.reader-page-turn-layer.reader-turn-show-back::before{
  opacity:.36!important;
}
.reader-page-turn-layer::after{
  display:none!important;
  opacity:0!important;
}

/* v1.1.1: physical page-turn underlay + natural two-sided face handling.
   This supersedes the earlier midpoint opacity swap. The page turn now keeps the
   old spread visible, reveals the incoming page underneath on the source side,
   and relies on backface-visibility to show the true backside page after midpoint. */
.reader-page-turn-underlay{
  position:absolute!important;
  z-index:34!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  contain:paint!important;
}
.reader-page-turn-underlay img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
}
.reader-page-turn-layer{
  z-index:46!important;
  opacity:1!important;
  overflow:visible!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  transform-style:preserve-3d!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  transition:none!important;
  animation:none!important;
  isolation:isolate!important;
}
.reader-page-turn-layer .reader-page-turn-face{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  opacity:1!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transition:none!important;
  animation:none!important;
  filter:none!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-page-turn-layer .reader-page-turn-front{
  transform:rotateY(0deg) translateZ(.35px)!important;
}
.reader-page-turn-layer .reader-page-turn-back{
  transform:rotateY(180deg) translateZ(.35px)!important;
}
.reader-page-turn-layer.reader-turn-show-back .reader-page-turn-front,
.reader-page-turn-layer.reader-turn-show-back .reader-page-turn-back{
  opacity:1!important;
}
.reader-page-turn-layer .reader-page-turn-face img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  opacity:1!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}
.reader-page-turn-layer::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:7!important;
  opacity:.30!important;
  mix-blend-mode:multiply!important;
  transition:none!important;
  animation:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-page-turn-layer.turn-next::before{
  background:linear-gradient(90deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.16) 22%,
    rgba(255,255,255,.03) 44%,
    rgba(0,0,0,.17) 77%,
    rgba(0,0,0,.34) 100%)!important;
}
.reader-page-turn-layer.turn-prev::before{
  background:linear-gradient(270deg,
    rgba(0,0,0,.38) 0%,
    rgba(0,0,0,.16) 22%,
    rgba(255,255,255,.03) 44%,
    rgba(0,0,0,.17) 77%,
    rgba(0,0,0,.34) 100%)!important;
}
.reader-page-turn-layer::after{display:none!important;content:none!important;opacity:0!important;}
.reader-page-turn-active .page-shell,
.reader-page-turn-active .page-side,
.reader-page-turn-active .page-side img{
  transition:none!important;
  animation:none!important;
}


/* v1.1.2: force the experimental page turn to reveal the true backside page after midpoint.
   This prevents the browser from continuing to paint the current front page mirrored
   once the sheet has crossed the spine. */
.reader-page-turn-layer.reader-turn-back-visible .reader-page-turn-front{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.reader-page-turn-layer.reader-turn-back-visible .reader-page-turn-back{
  opacity:1!important;
  visibility:visible!important;
}
.reader-page-turn-layer:not(.reader-turn-back-visible) .reader-page-turn-front{
  opacity:1!important;
  visibility:visible!important;
}
.reader-page-turn-layer:not(.reader-turn-back-visible) .reader-page-turn-back{
  visibility:hidden!important;
}

/* v1.1.3: two-phase physical page-turn mapping.
   This avoids WebView backface-painting quirks by using two explicit image layers:
   phase 1 narrows the current page to the spine, phase 2 expands the true backside
   page onto the opposite side. No opacity fade is used after the turn. */
.reader-page-turn-flat-layer{
  position:absolute!important;
  z-index:48!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  contain:paint!important;
  opacity:1!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transition:none!important;
  animation:none!important;
  will-change:transform,filter!important;
  isolation:isolate!important;
}
.reader-page-turn-flat-layer.hidden{display:none!important;}
.reader-page-turn-flat-layer img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  opacity:1!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-page-turn-front-sheet{z-index:52!important;}
.reader-page-turn-back-sheet{z-index:54!important;}
.reader-page-turn-flat-layer::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:.22!important;
  mix-blend-mode:multiply!important;
  background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(0,0,0,.10) 28%,rgba(255,255,255,.04) 52%,rgba(0,0,0,.12) 82%,rgba(0,0,0,.28))!important;
}
.reader-page-turn-flat-layer.turn-prev::before{
  background:linear-gradient(270deg,rgba(0,0,0,.30),rgba(0,0,0,.10) 28%,rgba(255,255,255,.04) 52%,rgba(0,0,0,.12) 82%,rgba(0,0,0,.28))!important;
}
.reader-page-turn-active .reader-page-turn-layer,
.reader-page-turn-active .reader-page-turn-face{
  display:none!important;
}

/* v1.1.5: visible curved-page refinement for Page Turn Experimental.
   Adds persistent page-surface shading so the turn does not look like the shadowing disappears
   at the midpoint, and allows clip-path/skew animation to read as a page bend. */
.reader-page-turn-flat-layer{
  overflow:hidden!important;
  will-change:transform,filter,clip-path,box-shadow,border-radius!important;
}
.reader-page-turn-flat-layer::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:.48!important;
  mix-blend-mode:multiply!important;
  transition:none!important;
  animation:none!important;
}
.reader-page-turn-flat-layer.turn-next::after{
  background:
    radial-gradient(ellipse at left center,rgba(0,0,0,.30) 0%,rgba(0,0,0,.16) 18%,rgba(0,0,0,0) 54%),
    linear-gradient(90deg,rgba(0,0,0,.18),rgba(0,0,0,.05) 24%,rgba(255,255,255,.035) 50%,rgba(0,0,0,.15) 100%)!important;
}
.reader-page-turn-flat-layer.turn-prev::after{
  background:
    radial-gradient(ellipse at right center,rgba(0,0,0,.30) 0%,rgba(0,0,0,.16) 18%,rgba(0,0,0,0) 54%),
    linear-gradient(270deg,rgba(0,0,0,.18),rgba(0,0,0,.05) 24%,rgba(255,255,255,.035) 50%,rgba(0,0,0,.15) 100%)!important;
}
.reader-page-turn-back-sheet::after{opacity:.42!important;}
.reader-page-turn-underlay{
  opacity:1!important;
  filter:brightness(.985)!important;
}

/* v1.1.6: keep Page Turn Experimental from changing the reader footprint.
   The experimental animation must never resize the live book. This locks the same
   footprint used by Stable Swap while a two-page turn is animating. Cover/single-page
   turns are intentionally handled with a stable swap until a separate cover-turn model exists. */
.book.reader-sized.reader-page-turn-footprint-locked,
.book.reader-sized.reader-page-turn-footprint-locked.reader-frame-locked,
.fullscreen-reader .book.reader-sized.reader-page-turn-footprint-locked,
.reader-stage:fullscreen .book.reader-sized.reader-page-turn-footprint-locked{
  width:var(--guidevault-reader-width)!important;
  height:var(--guidevault-reader-height)!important;
  min-width:var(--guidevault-reader-width)!important;
  max-width:var(--guidevault-reader-width)!important;
  min-height:var(--guidevault-reader-height)!important;
  max-height:var(--guidevault-reader-height)!important;
  transform:none!important;
  scale:1!important;
  contain:size layout paint!important;
  overflow:visible!important;
}
.book.reader-sized.reader-page-turn-footprint-locked .page-shell.reader-page-turn-shell-locked,
.book.reader-sized.reader-page-turn-footprint-locked .page-shell{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  min-height:100%!important;
  max-height:100%!important;
  transform:none!important;
  scale:1!important;
  transition:none!important;
  animation:none!important;
  overflow:visible!important;
}
.reader-page-turn-active .page-shell,
.reader-page-turn-active .page-side,
.reader-page-turn-active .page-side img{
  transform:none!important;
  scale:1!important;
  transition:none!important;
  animation:none!important;
}

/* v1.1.7: sequential page-turn shadow choreography.
   These overlays are independent of the live binding/page-edge shading so the
   lighting can move with Page Turn Experimental without changing the stable reader. */
.reader-page-turn-dynamic-shadow,
.reader-page-turn-spine-shadow{
  position:absolute!important;
  z-index:57!important;
  pointer-events:none!important;
  border:0!important;
  border-radius:0!important;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  box-shadow:none!important;
  opacity:0;
  transition:none!important;
  animation:none!important;
  will-change:opacity,transform,filter!important;
  contain:paint!important;
}
.reader-page-turn-source-shadow.turn-next{
  background:linear-gradient(90deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.19) 24%,
    rgba(0,0,0,.07) 56%,
    rgba(0,0,0,0) 100%)!important;
}
.reader-page-turn-source-shadow.turn-prev{
  background:linear-gradient(270deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.19) 24%,
    rgba(0,0,0,.07) 56%,
    rgba(0,0,0,0) 100%)!important;
}
.reader-page-turn-destination-shadow.turn-next{
  background:linear-gradient(270deg,
    rgba(0,0,0,.36) 0%,
    rgba(0,0,0,.20) 28%,
    rgba(0,0,0,.08) 62%,
    rgba(0,0,0,0) 100%)!important;
}
.reader-page-turn-destination-shadow.turn-prev{
  background:linear-gradient(90deg,
    rgba(0,0,0,.36) 0%,
    rgba(0,0,0,.20) 28%,
    rgba(0,0,0,.08) 62%,
    rgba(0,0,0,0) 100%)!important;
}
.reader-page-turn-spine-shadow{
  z-index:58!important;
  mix-blend-mode:multiply!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.11) 18%,
    rgba(0,0,0,.34) 43%,
    rgba(0,0,0,.54) 50%,
    rgba(0,0,0,.34) 57%,
    rgba(0,0,0,.11) 82%,
    rgba(0,0,0,0) 100%)!important;
  filter:blur(4px);
}
.reader-page-turn-active .reader-page-turn-flat-layer::before,
.reader-page-turn-active .reader-page-turn-flat-layer::after{
  opacity:.30!important;
  transition:none!important;
  animation:none!important;
}
.reader-page-turn-active .reader-page-turn-front-sheet,
.reader-page-turn-active .reader-page-turn-back-sheet{
  z-index:62!important;
}

/* v1.1.8: Page Turn Experimental stability/lighting refinement.
   Preserve reader zoom during the turn, keep overlay geometry in the same layout
   coordinate space as the live pages, and keep dynamic shadows visible above the
   turning sheet instead of disappearing underneath it. */
.book.reader-sized.reader-page-turn-footprint-locked,
.book.reader-sized.reader-page-turn-footprint-locked.reader-frame-locked,
.fullscreen-reader .book.reader-sized.reader-page-turn-footprint-locked,
.reader-stage:fullscreen .book.reader-sized.reader-page-turn-footprint-locked{
  transform:scale(var(--reader-zoom-scale,1))!important;
  transform-origin:center center!important;
  contain:layout paint!important;
}
.reader-page-turn-active .page-shell::before,
.reader-page-turn-active .page-shell::after{
  display:block!important;
  opacity:var(--gv-binding-opacity,.94)!important;
  z-index:66!important;
  pointer-events:none!important;
}
.reader-page-turn-active .left-page::before,
.reader-page-turn-active .right-page::before{
  display:block!important;
  opacity:var(--gv-outer-opacity,.68)!important;
  z-index:65!important;
  pointer-events:none!important;
}
.reader-page-turn-dynamic-shadow{
  z-index:72!important;
  mix-blend-mode:multiply!important;
}
.reader-page-turn-spine-shadow{
  z-index:74!important;
}
.reader-page-turn-front-sheet,
.reader-page-turn-back-sheet{
  z-index:70!important;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.reader-page-turn-flat-layer::before,
.reader-page-turn-flat-layer::after{
  opacity:.56!important;
  z-index:5!important;
}
.reader-page-turn-back-sheet::before,
.reader-page-turn-back-sheet::after{
  opacity:.52!important;
}
.reader-page-turn-underlay{
  z-index:38!important;
}
.reader-page-turn-active .page-shell,
.reader-page-turn-active .page-side,
.reader-page-turn-active .page-side img{
  transition:none!important;
  animation:none!important;
  scale:1!important;
}


/* v1.1.9: paper-strip refinement for Page Turn Experimental.
   The animated sheet now uses cropped near-spine strips from the real page image.
   This avoids squeezing the whole page into a rigid tablet-looking panel and
   prevents the white/cream page container from flashing around dark pages. */
.reader-page-turn-curl-strip{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  contain:paint!important;
}
.reader-page-turn-curl-strip img{
  position:absolute!important;
  inset:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.reader-page-turn-curl-strip::before{
  opacity:.42!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.16) 18%,
      rgba(255,255,255,.09) 45%,
      rgba(0,0,0,.12) 72%,
      rgba(0,0,0,.34) 100%)!important;
}
.reader-page-turn-curl-strip.turn-prev::before{
  background:
    linear-gradient(270deg,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.16) 18%,
      rgba(255,255,255,.09) 45%,
      rgba(0,0,0,.12) 72%,
      rgba(0,0,0,.34) 100%)!important;
}
.reader-page-turn-curl-strip::after{
  opacity:.36!important;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 12%,
      rgba(0,0,0,0) 38%,
      rgba(0,0,0,.18) 100%)!important;
}
.reader-page-turn-curl-strip.turn-prev::after{
  background:
    linear-gradient(270deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 12%,
      rgba(0,0,0,0) 38%,
      rgba(0,0,0,.18) 100%)!important;
}
.reader-page-turn-active .page-side,
.reader-page-turn-active .page-side img,
.reader-page-turn-active .page-shell{
  background:transparent!important;
  border-color:transparent!important;
  outline:0!important;
}
.reader-page-turn-active .reader-page-turn-underlay{
  background:transparent!important;
  border:0!important;
  outline:0!important;
}

/* v1.2.0: mesh-strip experimental page curl.
   This replaces the single rigid turning sheet with multiple vertical strips so
   the page reads more like flexible paper. It remains isolated to Page Turn Experimental. */
.reader-page-turn-mesh-active .reader-page-turn-layer,
.reader-page-turn-mesh-active .reader-page-turn-flat-layer:not(.reader-page-turn-mesh-strip){
  display:none!important;
}
.reader-page-turn-mesh-strip{
  position:absolute!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  opacity:1!important;
  contain:paint!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  transition:none!important;
  animation:none!important;
  will-change:transform,filter!important;
  isolation:isolate!important;
}
.reader-page-turn-mesh-strip img{
  position:absolute!important;
  display:block!important;
  opacity:1!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
  filter:none!important;
  pointer-events:none!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-page-turn-mesh-strip::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  pointer-events:none!important;
  opacity:.52!important;
  mix-blend-mode:multiply!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.12) 28%,
    rgba(255,255,255,.05) 52%,
    rgba(0,0,0,.15) 76%,
    rgba(0,0,0,.32) 100%)!important;
}
.reader-page-turn-mesh-strip.turn-prev::before{
  background:linear-gradient(270deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.12) 28%,
    rgba(255,255,255,.05) 52%,
    rgba(0,0,0,.15) 76%,
    rgba(0,0,0,.32) 100%)!important;
}
.reader-page-turn-mesh-strip::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:7px!important;
  right:-3px!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:.48!important;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(0,0,0,.26))!important;
  filter:blur(1.8px)!important;
  mix-blend-mode:overlay!important;
}
.reader-page-turn-mesh-strip.turn-prev::after{
  right:auto!important;
  left:-3px!important;
  background:linear-gradient(270deg,rgba(255,255,255,.18),rgba(0,0,0,.26))!important;
}
.reader-page-turn-mesh-underlay{
  z-index:41!important;
  opacity:1!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
.reader-page-turn-mesh-underlay::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:3!important;
  opacity:.14!important;
  background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,0) 42%,rgba(0,0,0,.08))!important;
}
.reader-page-turn-mesh-spine-shadow{
  z-index:78!important;
  pointer-events:none!important;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.42) 0%,
    rgba(0,0,0,.24) 35%,
    rgba(0,0,0,.08) 68%,
    rgba(0,0,0,0) 100%)!important;
  mix-blend-mode:multiply!important;
  opacity:.54!important;
  filter:blur(4px)!important;
  border:0!important;
  box-shadow:none!important;
}
.reader-page-turn-mesh-active .page-side,
.reader-page-turn-mesh-active .page-side img,
.reader-page-turn-mesh-active .page-shell{
  transition:none!important;
  animation:none!important;
}


/* v1.2.0: AE-inspired mesh-curl tuning.
   Fewer/wider strips and stronger in-strip highlights keep the turning page closer
   to the full page size while still allowing a flexible paper-like curl. */
.reader-page-turn-mesh-strip{
  box-shadow:0 0 0 rgba(0,0,0,0)!important;
  overflow:hidden!important;
}
.reader-page-turn-mesh-strip::before{
  opacity:.64!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.36) 0%,
      rgba(0,0,0,.16) 24%,
      rgba(255,255,255,.10) 50%,
      rgba(0,0,0,.14) 76%,
      rgba(0,0,0,.34) 100%)!important;
}
.reader-page-turn-mesh-strip.turn-prev::before{
  background:
    linear-gradient(270deg,
      rgba(0,0,0,.36) 0%,
      rgba(0,0,0,.16) 24%,
      rgba(255,255,255,.10) 50%,
      rgba(0,0,0,.14) 76%,
      rgba(0,0,0,.34) 100%)!important;
}
.reader-page-turn-mesh-strip::after{
  width:12px!important;
  opacity:.62!important;
  filter:blur(2.2px)!important;
}
.reader-page-turn-mesh-underlay{
  opacity:1!important;
}
.reader-page-turn-mesh-spine-shadow{
  opacity:.66!important;
  filter:blur(5.2px)!important;
}

/* v1.2.1: mesh-curl size correction.
   Keep the AE-style mesh idea, but make each strip read as part of a larger page
   instead of a small comb. These visual overrides reduce the vertical banding a bit
   now that the JS uses fewer/wider strips and less collapse. */
.reader-page-turn-mesh-strip::before{
  opacity:.46!important;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,.09) 24%,
      rgba(255,255,255,.08) 50%,
      rgba(0,0,0,.08) 76%,
      rgba(0,0,0,.22) 100%)!important;
}
.reader-page-turn-mesh-strip.turn-prev::before{
  background:
    linear-gradient(270deg,
      rgba(0,0,0,.22) 0%,
      rgba(0,0,0,.09) 24%,
      rgba(255,255,255,.08) 50%,
      rgba(0,0,0,.08) 76%,
      rgba(0,0,0,.22) 100%)!important;
}
.reader-page-turn-mesh-strip::after{
  width:9px!important;
  opacity:.44!important;
  filter:blur(2px)!important;
}

/* v1.2.2: single-sheet curl fallback for Page Turn Experimental.
   The mesh-strip version looked like multiple pages turning at the same time.
   Keep the page full-sized and use one dominant curl sheet with a moving highlight/shadow band. */
.reader-page-turn-single-curl-active .reader-page-turn-mesh-strip,
.reader-page-turn-single-curl-active .reader-page-turn-mesh-underlay,
.reader-page-turn-single-curl-active .reader-page-turn-mesh-spine-shadow{
  display:none!important;
}
.reader-page-turn-single-sheet{
  z-index:64!important;
  opacity:1!important;
  overflow:hidden!important;
  contain:paint!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  will-change:transform,filter,clip-path,opacity!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-page-turn-single-back{z-index:66!important;}
.reader-page-turn-single-sheet img{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  display:block!important;
  opacity:1!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
}
.reader-page-turn-single-sheet::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:.72!important;
  mix-blend-mode:multiply!important;
  background:linear-gradient(90deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.13) 17%,
    rgba(255,255,255,.025) 36%,
    rgba(255,255,255,.07) 53%,
    rgba(0,0,0,.16) 76%,
    rgba(0,0,0,.38) 100%)!important;
}
.reader-page-turn-single-sheet.turn-prev::before{
  background:linear-gradient(270deg,
    rgba(0,0,0,.34) 0%,
    rgba(0,0,0,.13) 17%,
    rgba(255,255,255,.025) 36%,
    rgba(255,255,255,.07) 53%,
    rgba(0,0,0,.16) 76%,
    rgba(0,0,0,.38) 100%)!important;
}
.reader-page-turn-single-sheet::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:clamp(46px,12%,104px)!important;
  right:0!important;
  z-index:5!important;
  pointer-events:none!important;
  opacity:.78!important;
  filter:blur(.4px)!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.18) 34%,
    rgba(0,0,0,.12) 65%,
    rgba(0,0,0,.38))!important;
}
.reader-page-turn-single-sheet.turn-prev::after{
  right:auto!important;
  left:0!important;
  background:linear-gradient(270deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.18) 34%,
    rgba(0,0,0,.12) 65%,
    rgba(0,0,0,.38))!important;
}
.reader-page-turn-single-underlay{
  z-index:42!important;
  opacity:1!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.reader-page-turn-single-source-shadow,
.reader-page-turn-single-destination-shadow,
.reader-page-turn-single-spine-shadow{
  display:block!important;
  pointer-events:none!important;
  mix-blend-mode:multiply!important;
}

/* v1.3.0: WebGL/canvas page-curl experiment.
   The canvas is an overlay inside the fixed page shell. The live reader footprint
   remains locked underneath; if WebGL is unavailable, JavaScript falls back to
   Stable Swap automatically. */
.reader-webgl-page-curl{
  position:absolute!important;
  inset:0!important;
  z-index:90!important;
  display:block!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  max-width:none!important;
  max-height:none!important;
}
.reader-page-turn-webgl-active .page-shell,
.reader-page-turn-webgl-active .page-side,
.reader-page-turn-webgl-active .page-side img{
  transition:none!important;
  animation:none!important;
}

/* v1.3.1: WebGL curl polish + progress-based page block thickness.
   The reader now shows subtle page-stack depth around the left/right edges based on
   reading progress. The stack grows on the left as pages are completed and shrinks
   on the right as the reader approaches the end of the book. */
.book.reader-sized{
  --gv-left-stack:0px;
  --gv-right-stack:28px;
  --gv-left-stack-opacity:.12;
  --gv-right-stack-opacity:.78;
  position:relative!important;
  isolation:isolate!important;
}
.book.reader-sized .page-shell{
  position:relative!important;
  z-index:4!important;
}
.book.reader-sized::before,
.book.reader-sized::after{
  content:""!important;
  position:absolute!important;
  top:clamp(2px,.35vw,6px)!important;
  bottom:clamp(2px,.35vw,6px)!important;
  width:var(--gv-left-stack)!important;
  pointer-events:none!important;
  z-index:1!important;
  border-radius:4px!important;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.22) 0px,
      rgba(255,255,255,.22) 1px,
      rgba(35,40,46,.22) 1px,
      rgba(35,40,46,.22) 2px,
      rgba(255,255,255,.08) 2px,
      rgba(255,255,255,.08) 4px),
    linear-gradient(180deg,rgba(255,255,255,.20),rgba(0,0,0,.18))!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.18),0 0 10px rgba(0,0,0,.20)!important;
  filter:blur(.15px)!important;
  opacity:var(--gv-left-stack-opacity)!important;
}
.book.reader-sized::before{
  left:calc(var(--gv-left-stack) * -1)!important;
  transform:skewY(-.6deg)!important;
}
.book.reader-sized::after{
  right:calc(var(--gv-right-stack) * -1)!important;
  width:var(--gv-right-stack)!important;
  transform:skewY(.6deg)!important;
  opacity:var(--gv-right-stack-opacity)!important;
}
.book.reader-sized.cover-mode::before,
.book.reader-sized.single-page-mode::before{
  display:none!important;
}
.book.reader-sized.cover-mode::after,
.book.reader-sized.single-page-mode::after{
  top:clamp(8px,1vw,18px)!important;
  bottom:clamp(8px,1vw,18px)!important;
}

/* Keep normal binding/edge shading visible during the WebGL curl. The source image,
   not the whole page side, is hidden by JS so the page pseudo-shadows can remain active. */
.reader-page-turn-webgl-active .page-shell::before,
.reader-page-turn-webgl-active .page-shell::after,
.reader-page-turn-webgl-active .left-page::before,
.reader-page-turn-webgl-active .right-page::before{
  visibility:visible!important;
}
.reader-page-turn-webgl-active .reader-webgl-page-curl{
  z-index:84!important;
}
.reader-page-turn-webgl-active .page-shell::before{
  z-index:86!important;
}
.reader-page-turn-webgl-active .left-page::before,
.reader-page-turn-webgl-active .right-page::before{
  z-index:85!important;
}

/* v1.3.2: WebGL curl polish.
   - Fade the WebGL canvas out after the final spread/shadows are ready to avoid shadow pop.
   - Make progress-based page stack thickness visible around the actual book edges.
   - Add a dedicated front-cover opening overlay instead of reusing the two-page curl. */
.reader-webgl-page-curl{
  opacity:1;
  transition:opacity 140ms ease-out!important;
}
.reader-webgl-shadow-settle .page-shell::before,
.reader-webgl-shadow-settle .page-shell::after,
.reader-webgl-shadow-settle .left-page::before,
.reader-webgl-shadow-settle .right-page::before{
  transition:opacity 140ms ease-out, filter 140ms ease-out!important;
}
.book.reader-sized::before,
.book.reader-sized::after{
  top:clamp(5px,.75vw,12px)!important;
  bottom:clamp(5px,.75vw,12px)!important;
  min-width:0!important;
  max-width:64px!important;
  z-index:3!important;
  border-radius:5px!important;
  background:
    repeating-linear-gradient(90deg,
      rgba(245,248,250,.36) 0px,
      rgba(245,248,250,.36) 1px,
      rgba(58,63,70,.28) 1px,
      rgba(58,63,70,.28) 2px,
      rgba(228,232,238,.16) 2px,
      rgba(228,232,238,.16) 4px),
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(0,0,0,.26))!important;
  box-shadow:inset 0 0 14px rgba(0,0,0,.24),0 0 14px rgba(0,0,0,.34)!important;
  filter:blur(.1px)!important;
}
.book.reader-sized::before{
  left:0!important;
  width:var(--gv-left-stack)!important;
  transform:translateX(calc(var(--gv-left-stack) * -.82)) skewY(-.8deg)!important;
  opacity:var(--gv-left-stack-opacity)!important;
}
.book.reader-sized::after{
  right:0!important;
  width:var(--gv-right-stack)!important;
  transform:translateX(calc(var(--gv-right-stack) * .82)) skewY(.8deg)!important;
  opacity:var(--gv-right-stack-opacity)!important;
}
.book.reader-sized.cover-mode::before,
.book.reader-sized.single-page-mode::before{
  display:block!important;
  opacity:calc(var(--gv-left-stack-opacity) * .72)!important;
}
.book.reader-sized.cover-mode::after,
.book.reader-sized.single-page-mode::after{
  display:block!important;
  opacity:var(--gv-right-stack-opacity)!important;
}
.reader-cover-open-overlay{
  position:absolute!important;
  z-index:92!important;
  pointer-events:none!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  box-shadow:0 18px 42px rgba(0,0,0,.32)!important;
  transform-style:preserve-3d!important;
  will-change:transform,opacity,filter!important;
  backface-visibility:hidden!important;
}
.reader-cover-open-overlay img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.reader-cover-open-overlay::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(255,255,255,.08) 28%,rgba(0,0,0,.22) 100%)!important;
  opacity:.50!important;
  mix-blend-mode:multiply!important;
}

/* v1.3.3: tighten progress page-stack edges and make cover-open motion gentler.
   The stack effect now hugs the actual scanned page image edges instead of floating
   out at the book/window edges, and its width is capped so it does not overwhelm guides. */
.book.reader-sized{
  --gv-stack-top:0px;
  --gv-stack-height:100%;
  --gv-left-stack-edge:0px;
  --gv-right-stack-edge:100%;
}
.book.reader-sized::before,
.book.reader-sized::after{
  top:var(--gv-stack-top)!important;
  bottom:auto!important;
  height:var(--gv-stack-height)!important;
  max-width:30px!important;
  min-width:0!important;
  z-index:2!important;
  border-radius:3px!important;
  filter:blur(.08px)!important;
  box-shadow:inset 0 0 8px rgba(0,0,0,.20),0 0 7px rgba(0,0,0,.18)!important;
}
.book.reader-sized::before{
  left:calc(var(--gv-left-stack-edge) - var(--gv-left-stack))!important;
  right:auto!important;
  width:var(--gv-left-stack)!important;
  transform:skewY(-.35deg)!important;
}
.book.reader-sized::after{
  left:var(--gv-right-stack-edge)!important;
  right:auto!important;
  width:var(--gv-right-stack)!important;
  transform:skewY(.35deg)!important;
}
.reader-cover-open-overlay{
  box-shadow:0 16px 34px rgba(0,0,0,.28)!important;
}

/* v1.3.4: hide the destination spread during the front-cover slide phase.
   The first spread is still rendered behind the cover for measurement, but it does
   not become visible until the cover has slid into the right-page slot and starts opening. */
.reader-cover-open-slide-phase .page-side img,
.reader-cover-open-slide-phase .page-shell::before,
.reader-cover-open-slide-phase .page-shell::after,
.reader-cover-open-slide-phase .left-page::before,
.reader-cover-open-slide-phase .right-page::before{
  visibility:hidden!important;
}
.reader-cover-open-slide-phase .reader-cover-open-overlay,
.reader-cover-open-slide-phase .reader-cover-open-overlay img{
  visibility:visible!important;
}

/* v1.3.5: front cover open order/visibility refinement.
   Keep the progress page stack hidden during the cover-only slide, then reveal it
   only after the first two-page spread has been painted. */
.book.reader-sized.reader-cover-stack-hidden::before,
.book.reader-sized.reader-cover-stack-hidden::after{
  display:none!important;
  opacity:0!important;
}
.reader-cover-open-overlay{
  opacity:1!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-cover-open-overlay img{
  opacity:1!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}

/* v1.3.6: deterministic front-cover open repair.
   The cover overlay now uses the true centered cover geometry, keeps page stacks
   hidden until the first spread is painted, and uses a real page-2 backside so the
   cover no longer reveals page 3 midway through the opening turn. */
.book.reader-sized.reader-cover-opening-stage::before,
.book.reader-sized.reader-cover-opening-stage::after{
  display:none!important;
  opacity:0!important;
}
.reader-cover-open-two-face{
  transform-style:preserve-3d!important;
  overflow:visible!important;
  contain:layout paint!important;
  background:transparent!important;
}
.reader-cover-open-face{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-cover-open-face img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.reader-cover-open-front{
  transform:rotateY(0deg) translateZ(.5px)!important;
}
.reader-cover-open-back{
  transform:rotateY(180deg) translateZ(.5px)!important;
}
.reader-cover-open-two-face > img{
  display:none!important;
}
.reader-cover-open-two-face::after{
  z-index:4!important;
  opacity:.42!important;
}

/* v1.3.8: smoother deterministic cover open.
   Use a preloaded page 2/page 3 underlay for the cover-opening phase so the cover
   can slide from its current center position to the right page without exposing a
   black placeholder or rendering the normal spread too early. */
.reader-cover-open-underlay{
  position:absolute!important;
  inset:0!important;
  z-index:80!important;
  pointer-events:none!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
  contain:layout paint!important;
}
.reader-cover-open-underlay.hidden{display:none!important;visibility:hidden!important;opacity:0!important;}
.reader-cover-open-underlay-page{
  position:absolute!important;
  overflow:hidden!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.reader-cover-open-underlay-page img{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:fill!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  opacity:1!important;
}
.reader-cover-open-smooth{
  z-index:96!important;
  transform-style:preserve-3d!important;
  overflow:visible!important;
  background:transparent!important;
}
.reader-cover-open-smooth.reader-cover-open-two-face::after{
  opacity:.34!important;
  pointer-events:none!important;
}
.reader-cover-open-active .reader-cover-open-underlay,
.reader-cover-open-active .reader-cover-open-overlay{
  visibility:visible!important;
}
.book.reader-sized.reader-cover-stack-hidden::before,
.book.reader-sized.reader-cover-stack-hidden::after,
.book.reader-sized.reader-cover-opening-stage::before,
.book.reader-sized.reader-cover-opening-stage::after{
  display:none!important;
  opacity:0!important;
}


/* v1.4.0: front-cover graceful reveal fallback.
   Keep the normal two-page WebGL curl untouched, but stop using the problematic
   cover-specific WebGL handoff. The centered cover slides into the right page,
   the true page 2/3 spread fades in underneath, then the cover softly opens away. */
.reader-cover-open-graceful-reveal{
  z-index:98!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:0 16px 34px rgba(0,0,0,.26)!important;
  will-change:transform,opacity,filter!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
.reader-cover-open-graceful-reveal img{
  width:100%!important;
  height:100%!important;
  object-fit:fill!important;
  display:block!important;
  opacity:1!important;
  background:transparent!important;
}
.reader-cover-open-graceful-reveal::after{
  opacity:.30!important;
  background:linear-gradient(90deg,rgba(0,0,0,.30),rgba(255,255,255,.08) 34%,rgba(0,0,0,.18) 100%)!important;
}
.book.reader-sized.reader-cover-opening-stage::before,
.book.reader-sized.reader-cover-opening-stage::after{
  display:none!important;
  opacity:0!important;
}

/* v1.4.1: front-cover ordered reveal.
   During the cover-to-spread transition, the cover overlay owns the whole visual:
   slide right, open to show page 2 on the back of the cover, then reveal the real
   page 2/3 spread. This prevents page 3 and duplicate cover pieces from appearing early. */
.reader-cover-open-sequenced{
  z-index:102!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:0 18px 36px rgba(0,0,0,.30)!important;
  transform-style:preserve-3d!important;
  will-change:transform,opacity,filter!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}
.reader-cover-open-sequenced::after{
  opacity:.28!important;
  background:linear-gradient(90deg,rgba(0,0,0,.32),rgba(255,255,255,.08) 34%,rgba(0,0,0,.18) 100%)!important;
}
.reader-cover-open-sequenced .reader-cover-open-face{
  background:transparent!important;
  overflow:hidden!important;
}
.reader-cover-open-sequenced .reader-cover-open-front,
.reader-cover-open-sequenced .reader-cover-open-back{
  opacity:1!important;
  visibility:visible!important;
}
.book.reader-sized.reader-cover-opening-stage .page-shell{
  background:transparent!important;
}

/* v1.4.9: reveal the right-side page stack with page 3 during the front-cover curl.
   The cover sequence keeps the full stack hidden during the slide/open, but the
   right page block should appear as page 3 starts forming underneath the cover. */
.book.reader-sized.reader-cover-stack-hidden.reader-cover-page3-stack-visible::after,
.book.reader-sized.reader-cover-opening-stage.reader-cover-page3-stack-visible::after{
  display:block!important;
  opacity:var(--gv-right-stack-opacity)!important;
  visibility:visible!important;
}
.book.reader-sized.reader-cover-stack-hidden.reader-cover-page3-stack-visible::before,
.book.reader-sized.reader-cover-opening-stage.reader-cover-page3-stack-visible::before{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* v1.5.2: reader background picker.
   Background files are discovered from wwwroot/backgrounds and applied behind the book. */
.reader-stage{
  --reader-background-image:none;
  background:radial-gradient(circle at center,rgba(24,38,55,.92),rgba(5,9,13,1) 68%)!important;
}
.reader-stage.reader-custom-background{
  background-image:
    radial-gradient(circle at center,rgba(6,12,20,.14),rgba(1,4,8,.60) 66%,rgba(0,0,0,.82) 100%),
    var(--reader-background-image)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.fullscreen-reader .reader-stage.reader-custom-background{
  background-image:
    radial-gradient(circle at center,rgba(4,8,14,.10),rgba(0,0,0,.58) 68%,rgba(0,0,0,.88) 100%),
    var(--reader-background-image)!important;
  background-size:cover!important;
  background-position:center center!important;
}
.reader-background-controls{
  display:grid!important;
  gap:8px!important;
  padding:0 0 12px 0!important;
  margin:0 0 12px 0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.reader-panel-title{
  font-size:10px!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:#8fb4df!important;
  font-weight:800!important;
}
.reader-background-row{
  display:grid!important;
  grid-template-columns:92px minmax(180px,1fr)!important;
  gap:10px!important;
  align-items:center!important;
}
.reader-background-preview{
  width:92px!important;
  height:52px!important;
  border-radius:10px!important;
  border:1px solid rgba(116,172,255,.32)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-color:rgba(4,9,16,.82)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.28)!important;
  overflow:hidden!important;
}
.reader-background-preview.empty{
  background-image:radial-gradient(circle at center,rgba(47,129,255,.34),rgba(8,16,28,.9) 70%)!important;
}
.reader-background-select-wrap{
  display:grid!important;
  gap:4px!important;
  margin:0!important;
  min-width:0!important;
  color:#e4f0ff!important;
  font-size:12px!important;
}
.reader-background-select-wrap span{
  color:#aebfd3!important;
  font-size:10px!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}
.reader-background-select-wrap select{
  width:100%!important;
  min-width:0!important;
  height:32px!important;
  border-radius:8px!important;
  border:1px solid rgba(116,172,255,.22)!important;
  background:#071018!important;
  color:#edf6ff!important;
  padding:0 9px!important;
}
.reader-background-select-wrap em{
  font-style:normal!important;
  color:#8ea9c8!important;
  font-size:11px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:760px){
  .reader-background-row{grid-template-columns:76px minmax(0,1fr)!important;}
  .reader-background-preview{width:76px!important;height:46px!important;}
}

/* v1.5.2: reader background brightness + opaque color-matched page stack.
   Background image is now its own layer so brightness can be controlled without
   dimming the book, controls, or page stack. The stack uses sampled page colors
   and opaque paper-stripe layers instead of translucent gray over the background. */
.reader-stage{
  --reader-background-brightness:.72;
  --reader-background-dim-opacity:.22;
}
.reader-stage.reader-custom-background{
  background:#05090d!important;
  isolation:isolate!important;
}
.reader-stage.reader-custom-background::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:var(--reader-background-image)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  filter:brightness(var(--reader-background-brightness))!important;
  transform:scale(1.012)!important;
  transform-origin:center center!important;
}
.reader-stage.reader-custom-background::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at center,rgba(0,0,0,.03),rgba(0,0,0,.24) 66%,rgba(0,0,0,.48) 100%),
    linear-gradient(rgba(0,0,0,var(--reader-background-dim-opacity)),rgba(0,0,0,var(--reader-background-dim-opacity)))!important;
}
/* Keep the background pseudo-layers behind the reader without changing the
   positioning model of the hit zones. A blanket direct-child rule here made the
   transparent left/center/right click panels relative instead of absolute, which
   prevented page changes and the bottom tray from opening. */
.reader-stage.reader-custom-background #book{
  position:relative!important;
  z-index:2!important;
}
.reader-stage.reader-custom-background .page-hit{
  position:absolute!important;
  z-index:18!important;
}
.reader-stage.reader-custom-background #leftHit{left:0!important;right:auto!important;top:0!important;bottom:0!important;width:33%!important;}
.reader-stage.reader-custom-background #centerHit{left:33%!important;right:auto!important;top:0!important;bottom:0!important;width:34%!important;}
.reader-stage.reader-custom-background #rightHit{right:0!important;left:auto!important;top:0!important;bottom:0!important;width:33%!important;}
.reader-stage.reader-custom-background .reader-hud{
  position:absolute!important;
  z-index:42!important;
}
.reader-stage.reader-custom-background #readerMagnifier{
  position:absolute!important;
  z-index:44!important;
}
.reader-background-brightness{
  display:grid!important;
  gap:6px!important;
  margin:2px 0 0 0!important;
  color:#aebfd3!important;
  font-size:10px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.reader-background-brightness span{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.reader-background-brightness em{
  font-style:normal!important;
  color:#d9e9ff!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.reader-background-brightness input[type="range"]{
  width:100%!important;
  accent-color:#58a2ff!important;
}
.book.reader-sized{
  --gv-left-stack-rgb:226, 224, 216;
  --gv-left-stack-light-rgb:246, 245, 239;
  --gv-left-stack-mid-rgb:224, 221, 211;
  --gv-left-stack-dark-rgb:116, 112, 104;
  --gv-right-stack-rgb:226, 224, 216;
  --gv-right-stack-light-rgb:246, 245, 239;
  --gv-right-stack-mid-rgb:224, 221, 211;
  --gv-right-stack-dark-rgb:116, 112, 104;
  --gv-binding-paper-rgb:226, 224, 216;
}
.book.reader-sized::before{
  opacity:1!important;
  background:
    repeating-linear-gradient(90deg,
      rgba(var(--gv-left-stack-light-rgb),.98) 0px,
      rgba(var(--gv-left-stack-light-rgb),.98) 1px,
      rgba(var(--gv-left-stack-dark-rgb),.98) 1px,
      rgba(var(--gv-left-stack-dark-rgb),.98) 2px,
      rgba(var(--gv-left-stack-mid-rgb),1) 2px,
      rgba(var(--gv-left-stack-mid-rgb),1) 4px),
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(0,0,0,.22)),
    rgb(var(--gv-left-stack-rgb))!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.28),0 0 8px rgba(0,0,0,.38)!important;
}
.book.reader-sized::after{
  opacity:1!important;
  background:
    repeating-linear-gradient(90deg,
      rgba(var(--gv-right-stack-light-rgb),.98) 0px,
      rgba(var(--gv-right-stack-light-rgb),.98) 1px,
      rgba(var(--gv-right-stack-dark-rgb),.98) 1px,
      rgba(var(--gv-right-stack-dark-rgb),.98) 2px,
      rgba(var(--gv-right-stack-mid-rgb),1) 2px,
      rgba(var(--gv-right-stack-mid-rgb),1) 4px),
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(0,0,0,.22)),
    rgb(var(--gv-right-stack-rgb))!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.28),0 0 8px rgba(0,0,0,.38)!important;
}
.book.reader-sized.cover-mode::before,
.book.reader-sized.single-page-mode::before,
.book.reader-sized.cover-mode::after,
.book.reader-sized.single-page-mode::after{
  opacity:1!important;
}
.book.reader-sized:not(.cover-mode) .page-shell::after,
.book.reader-sized.page-turning .page-shell::after,
.previous-spread.guide-soft-hold::after,
.previous-spread.guide-soft-next::after,
.previous-spread.guide-soft-prev::after{
  background:linear-gradient(180deg,
    rgba(var(--gv-binding-paper-rgb),0),
    rgba(var(--gv-binding-paper-rgb),.16) 13%,
    rgba(0,0,0,var(--gv-binding-centerline)) 50%,
    rgba(var(--gv-binding-paper-rgb),.13) 86%,
    rgba(var(--gv-binding-paper-rgb),0))!important;
}


/* v1.5.3 hotfix: keep color-matched page stacks visually solid over custom reader backgrounds. */
.book.reader-sized:not(.reader-cover-stack-hidden)::before,
.book.reader-sized:not(.reader-cover-stack-hidden)::after{
  background-clip:padding-box!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
}
.book.reader-sized:not(.reader-cover-stack-hidden)::before{
  border-left:1px solid rgba(var(--gv-left-stack-dark-rgb),.74)!important;
}
.book.reader-sized:not(.reader-cover-stack-hidden)::after{
  border-right:1px solid rgba(var(--gv-right-stack-dark-rgb),.74)!important;
}

/* v1.5.4: dynamic reader shadow/stack geometry for custom backgrounds.
   The background layer made old full-book shadows visible. These overrides attach
   binding, center-line, and stack treatments to the measured scanned-page footprint
   instead of the wide reader frame. */
.book.reader-sized{
  --gv-visual-left:0px;
  --gv-visual-right:100%;
  --gv-visual-top:0px;
  --gv-visual-height:100%;
  --gv-binding-left:50%;
  --gv-binding-top:0px;
  --gv-binding-height:100%;
}
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .page-shell::before,
.book.reader-sized.page-turning .page-shell::before{
  left:var(--gv-binding-left)!important;
  top:var(--gv-binding-top)!important;
  bottom:auto!important;
  height:var(--gv-binding-height)!important;
  transform:translateX(-50%)!important;
  max-height:var(--gv-binding-height)!important;
  border-radius:2px!important;
  overflow:hidden!important;
  clip-path:inset(0 round 2px)!important;
}
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .page-shell::after,
.book.reader-sized.page-turning .page-shell::after{
  left:var(--gv-binding-left)!important;
  top:var(--gv-binding-top)!important;
  bottom:auto!important;
  height:var(--gv-binding-height)!important;
  transform:translateX(-50%)!important;
  max-height:var(--gv-binding-height)!important;
  border-radius:2px!important;
  overflow:hidden!important;
  clip-path:inset(0 round 2px)!important;
}
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .left-page::before,
.book.reader-sized:not(.cover-mode):not(.single-page-mode) .right-page::before{
  max-height:var(--gv-page-image-height)!important;
  overflow:hidden!important;
  clip-path:inset(0 round 2px)!important;
}
.book.reader-sized::before,
.book.reader-sized::after{
  top:var(--gv-stack-top)!important;
  bottom:auto!important;
  height:var(--gv-stack-height)!important;
  max-height:var(--gv-stack-height)!important;
  overflow:hidden!important;
  clip-path:inset(0 round 3px)!important;
}
.book.reader-sized.cover-mode::before,
.book.reader-sized.single-page-mode::before{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.book.reader-sized.cover-mode::after,
.book.reader-sized.single-page-mode::after{
  display:block!important;
  left:var(--gv-right-stack-edge)!important;
  right:auto!important;
  top:var(--gv-stack-top)!important;
  bottom:auto!important;
  height:var(--gv-stack-height)!important;
  opacity:var(--gv-right-stack-opacity)!important;
  visibility:visible!important;
}
.book.reader-sized.reader-cover-stack-hidden::before,
.book.reader-sized.reader-cover-stack-hidden::after,
.book.reader-sized.reader-cover-opening-stage::before,
.book.reader-sized.reader-cover-opening-stage::after{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}
.book.reader-sized.reader-cover-stack-hidden.reader-cover-page3-stack-visible::after,
.book.reader-sized.reader-cover-opening-stage.reader-cover-page3-stack-visible::after{
  display:block!important;
  left:var(--gv-right-stack-edge)!important;
  right:auto!important;
  top:var(--gv-stack-top)!important;
  bottom:auto!important;
  height:var(--gv-stack-height)!important;
  opacity:var(--gv-right-stack-opacity)!important;
  visibility:visible!important;
}
.reader-stage.reader-custom-background .book.reader-sized:not(.cover-mode):not(.single-page-mode) .page-shell::before,
.reader-stage.reader-custom-background .book.reader-sized:not(.cover-mode):not(.single-page-mode) .page-shell::after,
.reader-stage.reader-custom-background .book.reader-sized:not(.cover-mode):not(.single-page-mode) .left-page::before,
.reader-stage.reader-custom-background .book.reader-sized:not(.cover-mode):not(.single-page-mode) .right-page::before{
  contain:paint!important;
}

/* v1.5.5: hard clamp reader shadows/stacks to visible pages only.
   Custom backgrounds made the old full-frame transition shadows obvious. During
   WebGL/cover transitions the canvas owns the moving-page lighting; the DOM helper
   shadows are hidden so they cannot leak onto the table/background. Single visual
   pages also never show a left-side stack or two-page gutter shadows. */
.book.reader-sized.reader-single-visual .page-shell::before,
.book.reader-sized.reader-single-visual .page-shell::after,
.book.reader-sized.reader-single-visual .left-page::before,
.book.reader-sized.reader-single-visual .left-page::after,
.book.reader-sized.reader-single-visual .right-page::before,
.book.reader-sized.reader-single-visual .right-page::after,
.book.reader-sized.cover-mode .page-shell::before,
.book.reader-sized.cover-mode .page-shell::after,
.book.reader-sized.cover-mode .left-page::before,
.book.reader-sized.cover-mode .left-page::after,
.book.reader-sized.cover-mode .right-page::before,
.book.reader-sized.cover-mode .right-page::after,
.book.reader-sized.single-page-mode .page-shell::before,
.book.reader-sized.single-page-mode .page-shell::after,
.book.reader-sized.single-page-mode .left-page::before,
.book.reader-sized.single-page-mode .left-page::after,
.book.reader-sized.single-page-mode .right-page::before,
.book.reader-sized.single-page-mode .right-page::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

.book.reader-sized.reader-single-visual::before,
.book.reader-sized.cover-mode::before,
.book.reader-sized.single-page-mode::before{
  display:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  opacity:0!important;
  visibility:hidden!important;
  border:0!important;
  box-shadow:none!important;
}

.book.reader-sized.reader-single-visual:not(.reader-cover-visual)::after,
.book.reader-sized.single-page-mode:not(.cover-mode)::after{
  display:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  opacity:0!important;
  visibility:hidden!important;
  border:0!important;
  box-shadow:none!important;
}

.book.reader-sized.reader-cover-visual::after,
.book.reader-sized.cover-mode::after{
  display:block!important;
  left:var(--gv-right-stack-edge)!important;
  right:auto!important;
  top:var(--gv-stack-top)!important;
  bottom:auto!important;
  height:var(--gv-stack-height)!important;
  width:var(--gv-right-stack)!important;
  opacity:var(--gv-right-stack-opacity)!important;
  visibility:visible!important;
}

.reader-page-turn-webgl-active .page-shell::before,
.reader-page-turn-webgl-active .page-shell::after,
.reader-page-turn-webgl-active .left-page::before,
.reader-page-turn-webgl-active .left-page::after,
.reader-page-turn-webgl-active .right-page::before,
.reader-page-turn-webgl-active .right-page::after,
.reader-cover-webgl-open-active .page-shell::before,
.reader-cover-webgl-open-active .page-shell::after,
.reader-cover-webgl-open-active .left-page::before,
.reader-cover-webgl-open-active .left-page::after,
.reader-cover-webgl-open-active .right-page::before,
.reader-cover-webgl-open-active .right-page::after,
.book.reader-sized.reader-cover-opening-stage .page-shell::before,
.book.reader-sized.reader-cover-opening-stage .page-shell::after,
.book.reader-sized.reader-cover-opening-stage .left-page::before,
.book.reader-sized.reader-cover-opening-stage .left-page::after,
.book.reader-sized.reader-cover-opening-stage .right-page::before,
.book.reader-sized.reader-cover-opening-stage .right-page::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
  transition:none!important;
}

.book.reader-sized.reader-cover-stack-hidden::before,
.book.reader-sized.reader-cover-stack-hidden::after,
.book.reader-sized.reader-cover-opening-stage::before,
.book.reader-sized.reader-cover-opening-stage::after{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

.book.reader-sized.reader-cover-stack-hidden.reader-cover-page3-stack-visible::after,
.book.reader-sized.reader-cover-opening-stage.reader-cover-page3-stack-visible::after{
  display:block!important;
  left:var(--gv-right-stack-edge)!important;
  right:auto!important;
  top:var(--gv-stack-top)!important;
  bottom:auto!important;
  height:var(--gv-stack-height)!important;
  width:var(--gv-right-stack)!important;
  opacity:var(--gv-right-stack-opacity)!important;
  visibility:visible!important;
}

.book.reader-sized.reader-cover-stack-hidden.reader-cover-page3-stack-visible::before,
.book.reader-sized.reader-cover-opening-stage.reader-cover-page3-stack-visible::before{
  display:none!important;
  width:0!important;
  opacity:0!important;
  visibility:hidden!important;
}

.book.reader-sized.reader-single-visual .page-shell{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  overflow:visible!important;
}
.book.reader-sized.reader-single-visual .left-page{
  display:none!important;
}
.book.reader-sized.reader-single-visual .right-page{
  display:block!important;
  overflow:visible!important;
}

/* v1.5.7: idle front covers should not show remaining-page stacks.
   Custom reader backgrounds made the cover stack visible on some portrait/wide cover
   scans. Keep cover/single-page stacks fully hidden while the cover is simply sitting
   idle; only the explicit cover-opening page-3 reveal class may bring the right stack
   back during the animation handoff. */
.book.reader-sized.cover-mode:not(.reader-cover-page3-stack-visible)::before,
.book.reader-sized.cover-mode:not(.reader-cover-page3-stack-visible)::after,
.book.reader-sized.single-page-mode:not(.reader-cover-page3-stack-visible)::before,
.book.reader-sized.single-page-mode:not(.reader-cover-page3-stack-visible)::after,
.book.reader-sized.reader-single-visual:not(.reader-cover-page3-stack-visible)::before,
.book.reader-sized.reader-single-visual:not(.reader-cover-page3-stack-visible)::after,
.book.reader-sized.reader-cover-visual:not(.reader-cover-page3-stack-visible)::before,
.book.reader-sized.reader-cover-visual:not(.reader-cover-page3-stack-visible)::after{
  display:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  opacity:0!important;
  visibility:hidden!important;
  border:0!important;
  box-shadow:none!important;
}

/* Preserve the intentional page-3 reveal during front-cover opening. */
.book.reader-sized.reader-cover-stack-hidden.reader-cover-page3-stack-visible::after,
.book.reader-sized.reader-cover-opening-stage.reader-cover-page3-stack-visible::after{
  display:block!important;
  left:var(--gv-right-stack-edge)!important;
  right:auto!important;
  top:var(--gv-stack-top)!important;
  bottom:auto!important;
  height:var(--gv-stack-height)!important;
  width:var(--gv-right-stack)!important;
  opacity:var(--gv-right-stack-opacity)!important;
  visibility:visible!important;
  border:0!important;
}
.book.reader-sized.reader-cover-stack-hidden.reader-cover-page3-stack-visible::before,
.book.reader-sized.reader-cover-opening-stage.reader-cover-page3-stack-visible::before{
  display:none!important;
  width:0!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* v1.5.8: page-turn opacity guard + visual vertical centering.
   The custom table/background layer made the first few WebGL curl frames reveal
   tiny transparent seams. JavaScript now draws a short opaque source-page hold,
   and this CSS keeps the canvas composited normally while nudging the book upward
   enough to center it in the usable reader viewport above the bottom control rail. */
.reader-webgl-page-curl{
  opacity:1!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}
#book.book.reader-sized{
  margin-top:clamp(-38px,-3.2vh,-20px)!important;
  margin-bottom:clamp(20px,3.2vh,38px)!important;
}
.book.reader-sized.reader-page-turn-footprint-locked,
.book.reader-sized.reader-page-turn-footprint-locked.reader-frame-locked{
  margin-top:clamp(-38px,-3.2vh,-20px)!important;
  margin-bottom:clamp(20px,3.2vh,38px)!important;
}
@media(max-height:620px){
  #book.book.reader-sized,
  .book.reader-sized.reader-page-turn-footprint-locked,
  .book.reader-sized.reader-page-turn-footprint-locked.reader-frame-locked{
    margin-top:clamp(-24px,-2.2vh,-12px)!important;
    margin-bottom:clamp(12px,2.2vh,24px)!important;
  }
}

/* v1.5.9: full-height reader fit + neutral centering.
   Remove the previous upward nudge and let the book use the full reader-stage
   height. This makes tall manuals fit by height instead of trying to compensate
   around the bottom tray with margins. */
.reader-stage{
  padding:0!important;
  align-items:center!important;
  justify-items:center!important;
  place-items:center!important;
}
.reader-stage:fullscreen,
.fullscreen-reader .reader-stage{
  padding:0!important;
}
#book.book.reader-sized,
.book.reader-sized.reader-page-turn-footprint-locked,
.book.reader-sized.reader-page-turn-footprint-locked.reader-frame-locked{
  margin-top:0!important;
  margin-bottom:0!important;
}
.reader-webgl-page-curl{
  opacity:1!important;
  mix-blend-mode:normal!important;
  background:transparent!important;
}

/* v1.5.x: adaptive two-page spread mode.
   After the cover, one scanned image can occupy the full open-book footprint while
   still using the wide reader frame. */
.book.reader-sized.adaptive-spread-mode .page-shell,
.book.reader-sized.page-turning.adaptive-spread-mode .page-shell,
.book.reader-sized.reader-frame-locked.adaptive-spread-mode .page-shell{
  grid-template-columns:1fr!important;
}
.book.reader-sized.adaptive-spread-mode .left-page,
.book.reader-sized.adaptive-spread-mode .prev-left{
  display:none!important;
}
.book.reader-sized.adaptive-spread-mode .right-page,
.book.reader-sized.adaptive-spread-mode .prev-right{
  grid-column:1 / -1!important;
  width:100%!important;
  border-radius:9px!important;
  border-left:0!important;
  box-shadow:0 22px 56px rgba(0,0,0,.32)!important;
}
.book.reader-sized.adaptive-spread-mode .right-page img,
.book.reader-sized.adaptive-spread-mode .prev-right img{
  object-fit:contain!important;
  object-position:center center!important;
}
.book.reader-sized.adaptive-spread-mode .page-shell::before,
.book.reader-sized.adaptive-spread-mode .page-shell::after{
  display:none!important;
  opacity:0!important;
}


/* v1.6.0: Two Pages Adaptive display mode.
   Some scans already contain a full two-page spread in one image. Adaptive mode
   keeps the cover as a single page, then displays each following image as one
   wide spread and lets WebGL turn that single wide image instead of composing two
   separate page files. */
.book.reader-sized.adaptive-spread-mode .page-shell,
.book.reader-sized.adaptive-spread-mode.page-turning .page-shell{
  display:block!important;
  grid-template-columns:none!important;
  padding:12px!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
}
.book.reader-sized.adaptive-spread-mode .left-page{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.book.reader-sized.adaptive-spread-mode .right-page{
  position:absolute!important;
  inset:12px!important;
  width:auto!important;
  height:auto!important;
  display:block!important;
  transform:none!important;
  border:0!important;
  border-radius:9px!important;
  overflow:hidden!important;
  background:#141414!important;
  box-shadow:0 28px 74px rgba(0,0,0,.58)!important;
}
.book.reader-sized.adaptive-spread-mode .right-page img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#141414!important;
}
.book.reader-sized.adaptive-spread-mode .right-page::after{
  display:none!important;
  content:none!important;
}
.book.reader-sized.adaptive-spread-mode .page-shell::before{
  content:""!important;
  position:absolute!important;
  left:var(--gv-binding-left, 50%)!important;
  top:var(--gv-binding-top, 12px)!important;
  width:70px!important;
  height:var(--gv-binding-height, calc(100% - 24px))!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  z-index:4!important;
  pointer-events:none!important;
  opacity:.38!important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(0,0,0,.10) 30%,
    rgba(0,0,0,.24) 48%,
    rgba(255,255,255,.06) 52%,
    rgba(0,0,0,.10) 70%,
    rgba(255,255,255,0) 100%)!important;
}
.book.reader-sized.adaptive-spread-mode .page-shell::after{
  display:none!important;
  content:none!important;
}
.book.reader-sized.adaptive-spread-mode.reader-adaptive-spread-turning .right-page img{
  visibility:hidden!important;
}
.reader-adaptive-spread-turn-active .reader-webgl-page-curl{
  z-index:96!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  background:transparent!important;
}


/* v1.6.1: adaptive spread containment and half-page curl cleanup.
   Adaptive spreads are already complete two-page scans. Keep the scan constrained
   to the measured reader stage and avoid drawing a second dark frame behind it. */
.book.reader-sized.adaptive-spread-mode .page-shell,
.book.reader-sized.adaptive-spread-mode.page-turning .page-shell,
.book.reader-sized.reader-frame-locked.adaptive-spread-mode .page-shell{
  display:block!important;
  grid-template-columns:none!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}
.book.reader-sized.adaptive-spread-mode .right-page,
.book.reader-sized.adaptive-spread-mode .prev-right{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  display:block!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:0!important;
}
.book.reader-sized.adaptive-spread-mode .right-page img,
.book.reader-sized.adaptive-spread-mode .prev-right img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.book.reader-sized.adaptive-spread-mode .left-page,
.book.reader-sized.adaptive-spread-mode .prev-left{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
.book.reader-sized.adaptive-spread-mode .page-shell::before,
.book.reader-sized.adaptive-spread-mode .page-shell::after,
.book.reader-sized.adaptive-spread-mode .right-page::before,
.book.reader-sized.adaptive-spread-mode .right-page::after{
  display:none!important;
  content:none!important;
  opacity:0!important;
}
.reader-adaptive-spread-turn-active .reader-webgl-page-curl{
  z-index:96!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  background:transparent!important;
}

/* v1.6.2: adaptive spread containment + controls-safe fit.
   When the bottom reader tray is open, reserve enough vertical room so adaptive
   spreads do not grow underneath the tray. */
.reader-stage.reader-controls-open{
  padding-bottom:52px!important;
}
.reader-stage.reader-controls-open #book.book.reader-sized{
  max-height:calc(100% - 52px)!important;
}
.book.reader-sized.adaptive-spread-mode,
.book.reader-sized.adaptive-spread-mode.reader-frame-locked,
.book.reader-sized.adaptive-spread-mode.reader-page-turn-footprint-locked{
  overflow:visible!important;
}
.book.reader-sized.adaptive-spread-mode .page-shell,
.book.reader-sized.adaptive-spread-mode.page-turning .page-shell,
.book.reader-sized.reader-frame-locked.adaptive-spread-mode .page-shell{
  overflow:hidden!important;
  contain:layout paint!important;
}
.reader-adaptive-spread-turn-active .reader-webgl-page-curl{
  z-index:96!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
  background:transparent!important;
}

/* v1.6.3: reader tray overlay + navigation cues.
   The bottom tray should not participate in reader layout; it simply overlays the
   stage. Keep the book footprint stable when controls open, and only use the
   controls-open state for temporary left/right click hints. */
.reader-stage.reader-controls-open{
  padding-bottom:0!important;
}
.reader-stage.reader-controls-open #book.book.reader-sized{
  max-height:none!important;
}
.reader-stage.reader-controls-open .page-hit.left::after,
.reader-stage.reader-controls-open .page-hit.right::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  width:48px!important;
  height:48px!important;
  transform:translateY(-50%)!important;
  border-radius:999px!important;
  background:rgba(8,15,25,.46)!important;
  border:1px solid rgba(190,215,255,.36)!important;
  box-shadow:0 14px 36px rgba(0,0,0,.34), inset 0 0 18px rgba(255,255,255,.06)!important;
  color:rgba(235,245,255,.88)!important;
  display:grid!important;
  place-items:center!important;
  font-size:34px!important;
  line-height:1!important;
  font-weight:800!important;
  pointer-events:none!important;
  opacity:.88!important;
  z-index:2!important;
}
.reader-stage.reader-controls-open .page-hit.left::after{
  content:"\2039"!important;
  left:28px!important;
}
.reader-stage.reader-controls-open .page-hit.right::after{
  content:"\203A"!important;
  right:28px!important;
}
.reader-stage:not(.reader-controls-open) .page-hit.left::after,
.reader-stage:not(.reader-controls-open) .page-hit.right::after{
  display:none!important;
  content:none!important;
}
.reader-cover-close-adaptive-overlay{
  z-index:104!important;
  background:transparent!important;
  overflow:hidden!important;
}


/* Library performance/layout polish */
.main{
  overflow:hidden!important;
  min-height:0!important;
}
.library-view{
  height:calc(100vh - 66px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  padding-bottom:18px!important;
}
.detail-view,
.settings-view{
  height:calc(100vh - 66px)!important;
  overflow:auto!important;
}
.library-grid-area{
  min-height:0!important;
  flex:1 1 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 26px!important;
  gap:8px!important;
  align-items:stretch!important;
}
.library-grid-scroll{
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:0 6px 40px 0!important;
  scrollbar-gutter:stable!important;
}
.library-grid-scroll .grid{
  padding-right:4px!important;
}
.alpha-rail{
  position:sticky!important;
  top:0!important;
  align-self:start!important;
  max-height:calc(100vh - 165px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:flex-start!important;
  gap:2px!important;
  padding:2px 0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:4!important;
}
.alpha-rail.hidden{display:none!important;}
.alpha-jump{
  width:22px!important;
  height:20px!important;
  padding:0!important;
  border:0!important;
  border-radius:4px!important;
  background:transparent!important;
  color:#b9c8dc!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:20px!important;
  text-align:center!important;
}
.alpha-jump:hover:not(:disabled){
  color:#fff!important;
  background:rgba(47,129,255,.30)!important;
}
.alpha-jump.disabled,
.alpha-jump:disabled{
  opacity:.22!important;
  color:#7d8da0!important;
}
.task-monitor-wrap{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
}
.task-monitor-button{
  position:relative!important;
  font-size:15px!important;
}
.task-monitor-badge{
  position:absolute!important;
  right:-5px!important;
  top:-5px!important;
  min-width:17px!important;
  height:17px!important;
  padding:0 4px!important;
  border-radius:999px!important;
  background:#2f81ff!important;
  color:white!important;
  font-size:10px!important;
  line-height:17px!important;
  font-weight:800!important;
}
.task-monitor-panel{
  position:absolute!important;
  right:0!important;
  top:44px!important;
  width:360px!important;
  max-height:420px!important;
  overflow:auto!important;
  padding:12px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:rgba(9,16,24,.98)!important;
  box-shadow:0 24px 70px rgba(0,0,0,.52)!important;
  z-index:50!important;
}
.task-panel-title{
  font-weight:800!important;
  margin-bottom:10px!important;
}
.task-card{
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:10px!important;
  padding:10px!important;
  margin-bottom:8px!important;
  background:rgba(255,255,255,.04)!important;
}
.task-card strong{display:block!important;margin-bottom:3px!important;}
.task-card small{display:block!important;color:var(--muted)!important;}
.task-progress{
  height:6px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.10)!important;
  overflow:hidden!important;
  margin-top:8px!important;
}
.task-progress span{
  display:block!important;
  height:100%!important;
  width:var(--task-progress,0%)!important;
  background:linear-gradient(90deg,#2f81ff,#4ad66d)!important;
}
.task-empty{color:var(--muted)!important;padding:8px 2px!important;}
.settings-side-nav{
  padding:16px!important;
}
.settings-side-nav h3{
  margin:10px 10px 12px!important;
  font-size:12px!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:#b6c3d2!important;
}
.settings-side-back,
.settings-side-nav .settings-nav{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  border:0!important;
  border-radius:8px!important;
  padding:10px 12px!important;
  margin-bottom:4px!important;
  color:var(--text)!important;
  background:transparent!important;
  cursor:pointer!important;
  text-align:left!important;
}
.settings-side-back:hover,
.settings-side-nav .settings-nav:hover,
.settings-side-nav .settings-nav.active{
  background:#1d63d8!important;
}
body.settings-sidebar-mode #mainLibraryNav,
body.settings-sidebar-mode #categorySideSection{
  display:none!important;
}
body.settings-sidebar-mode #settingsSideNav{
  display:block!important;
}
body:not(.settings-sidebar-mode) #settingsSideNav{
  display:none!important;
}
.settings-content-panel-main{
  padding:22px 14px 70px!important;
  max-width:1440px!important;
  margin:0 auto!important;
}
.settings-view{
  background:linear-gradient(180deg,#0b141e,#071018)!important;
}
.settings-content-panel-main .settings-section-panel{
  max-width:1360px!important;
}
body.left-collapsed.settings-sidebar-mode .settings-side-nav .settings-nav,
body.left-collapsed.settings-sidebar-mode .settings-side-back{
  justify-content:center!important;
  padding-left:0!important;
  padding-right:0!important;
  font-size:0!important;
}
body.left-collapsed.settings-sidebar-mode .settings-side-nav h3{
  display:none!important;
}
body.left-collapsed.settings-sidebar-mode .settings-side-nav .settings-nav::first-letter,
body.left-collapsed.settings-sidebar-mode .settings-side-back::first-letter{
  font-size:14px!important;
}

/* Library/settings cleanup pass */
.topbar{
  gap:10px!important;
}
.topbar .search{
  flex:1 1 auto!important;
  max-width:760px!important;
}
.task-monitor-wrap{
  margin-left:auto!important;
  order:20!important;
}
#settingsBtn{
  order:21!important;
}
.task-monitor-button{
  font-size:17px!important;
  line-height:1!important;
}
.task-monitor-panel{
  right:0!important;
}
.library-view{
  padding-right:8px!important;
}
.library-grid-area{
  grid-template-columns:minmax(0,1fr) 42px!important;
  gap:0!important;
  padding-right:0!important;
}
.library-grid-scroll{
  height:100%!important;
  min-height:240px!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  padding-right:10px!important;
  scrollbar-width:thin!important;
  scrollbar-color:#38516b rgba(8,15,22,.55)!important;
}
.library-grid-scroll::-webkit-scrollbar{
  width:11px!important;
}
.library-grid-scroll::-webkit-scrollbar-track{
  background:rgba(8,15,22,.55)!important;
  border-radius:999px!important;
}
.library-grid-scroll::-webkit-scrollbar-thumb{
  background:#38516b!important;
  border-radius:999px!important;
  border:2px solid rgba(8,15,22,.55)!important;
}
.library-grid-scroll::-webkit-scrollbar-thumb:hover{
  background:#4f6f92!important;
}
.alpha-rail{
  justify-self:end!important;
  align-self:start!important;
  width:38px!important;
  padding:0 2px!important;
  margin-right:0!important;
  align-items:center!important;
}
.alpha-jump{
  width:32px!important;
  height:24px!important;
  line-height:24px!important;
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
}
.settings-side-nav h3{
  font-size:20px!important;
  letter-spacing:.03em!important;
  text-transform:none!important;
  color:#edf4ff!important;
  margin:12px 10px 16px!important;
}
.settings-side-back,
.settings-side-nav .settings-nav{
  font-size:18px!important;
  font-weight:800!important;
  padding:13px 13px!important;
}
.settings-submenu{
  margin:-2px 0 8px 14px!important;
  padding-left:10px!important;
  border-left:1px solid rgba(142,160,182,.28)!important;
}
.settings-side-nav .settings-subnav{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  border:0!important;
  border-radius:8px!important;
  padding:9px 11px!important;
  margin:2px 0!important;
  color:#b9c8dc!important;
  background:transparent!important;
  cursor:pointer!important;
  text-align:left!important;
  font-size:15px!important;
  font-weight:750!important;
}
.settings-side-nav .settings-subnav:hover,
.settings-side-nav .settings-subnav.active{
  color:#fff!important;
  background:rgba(47,129,255,.22)!important;
}
.settings-section-panel > h1,
.settings-title-row h1{
  font-size:34px!important;
  line-height:1.08!important;
  margin-top:0!important;
}
.detail-view{
  display:block;
}
.detail-view.hidden{
  display:none!important;
}
body.settings-sidebar-mode #detailView{
  display:none!important;
}
body:not(.settings-sidebar-mode) #settingsSideNav{
  display:none!important;
}
body.settings-sidebar-mode .settings-view #settingsImportPanel.hidden{
  display:none!important;
}
@media(max-width:900px){
  .library-grid-area{grid-template-columns:minmax(0,1fr) 36px!important;}
  .alpha-jump{width:28px!important;font-size:14px!important;}
}


/* v1.6.x library navigation/details recovery pass */
.topbar{
  display:flex!important;
  align-items:center!important;
}
.topbar .search{
  flex:1 1 auto!important;
  max-width:none!important;
  min-width:180px!important;
  margin-right:auto!important;
}
.task-monitor-wrap{
  margin-left:auto!important;
  margin-right:6px!important;
  order:98!important;
  flex:0 0 auto!important;
}
#settingsBtn{
  order:99!important;
  flex:0 0 auto!important;
}
.task-monitor-button{
  width:36px!important;
  height:36px!important;
  font-size:18px!important;
  display:grid!important;
  place-items:center!important;
}
.task-monitor-panel{
  right:0!important;
  left:auto!important;
  top:42px!important;
}

.library-view{
  position:relative!important;
  height:calc(100vh - 66px)!important;
  min-height:0!important;
  overflow:hidden!important;
  padding-right:64px!important;
}
.library-grid-area{
  position:relative!important;
  display:block!important;
  min-height:260px!important;
  flex:1 1 auto!important;
  overflow:visible!important;
  padding-right:0!important;
}
.library-grid-scroll{
  height:100%!important;
  max-height:100%!important;
  min-height:260px!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  padding:0 18px 44px 0!important;
  scrollbar-gutter:stable both-edges!important;
  scrollbar-width:auto!important;
  scrollbar-color:#6f8aaa rgba(8,15,22,.62)!important;
}
.library-grid-scroll::-webkit-scrollbar{
  width:14px!important;
  display:block!important;
}
.library-grid-scroll::-webkit-scrollbar-track{
  background:rgba(8,15,22,.72)!important;
  border-radius:999px!important;
}
.library-grid-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#7896ba,#496984)!important;
  border-radius:999px!important;
  border:3px solid rgba(8,15,22,.72)!important;
}
.library-grid-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#92add0,#5b7d9a)!important;
}
.alpha-rail{
  position:absolute!important;
  top:0!important;
  right:-54px!important;
  bottom:auto!important;
  width:44px!important;
  min-width:44px!important;
  padding:0!important;
  margin:0!important;
  z-index:12!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:2px!important;
}
.alpha-jump{
  width:38px!important;
  height:26px!important;
  line-height:26px!important;
  font-size:17px!important;
  font-weight:900!important;
  color:#d7e6f8!important;
  text-shadow:0 1px 4px rgba(0,0,0,.72)!important;
}
.alpha-jump:hover:not(:disabled){
  background:rgba(47,129,255,.42)!important;
  color:white!important;
}

.settings-side-nav h3{
  font-size:24px!important;
}
.settings-side-back,
.settings-side-nav .settings-nav{
  font-size:19px!important;
}
.settings-side-nav .settings-subnav{
  font-size:17px!important;
}
.detail-view{
  display:block!important;
  height:calc(100vh - 66px)!important;
  overflow:auto!important;
}
.detail-view.hidden{
  display:none!important;
}
body:not(.settings-sidebar-mode) #detailView:not(.hidden){
  display:block!important;
}
body:not(.settings-sidebar-mode) #settingsSideNav{
  display:none!important;
}
body.settings-sidebar-mode #mainLibraryNav,
body.settings-sidebar-mode #categorySideSection{
  display:none!important;
}
body.settings-sidebar-mode #settingsSideNav{
  display:block!important;
}
body.settings-sidebar-mode #libraryView,
body.settings-sidebar-mode #detailView{
  display:none!important;
}
body.settings-sidebar-mode #settingsView{
  display:block!important;
}

/* v1.6.x follow-up: main-container scrollbar + far-right alphabet rail */
.topbar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
.topbar .search{
  flex:0 1 520px!important;
  max-width:520px!important;
  min-width:220px!important;
  margin-right:0!important;
}
.task-monitor-wrap{
  margin-left:auto!important;
  margin-right:6px!important;
  order:98!important;
  flex:0 0 auto!important;
}
#settingsBtn{
  order:99!important;
  flex:0 0 auto!important;
}

#libraryView.library-view{
  height:calc(100vh - 66px)!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 54px!important;
  grid-template-rows:minmax(0,1fr)!important;
  column-gap:0!important;
  overflow:hidden!important;
  padding:22px 0 0 24px!important;
  position:relative!important;
}
#libraryGridScroll.library-grid-scroll{
  grid-column:1!important;
  grid-row:1!important;
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  overflow-y:scroll!important;
  overflow-x:hidden!important;
  padding:0 18px 70px 0!important;
  scrollbar-gutter:stable!important;
  scrollbar-width:auto!important;
  scrollbar-color:#7d98b7 rgba(8,15,22,.68)!important;
}
#libraryGridScroll.library-grid-scroll::-webkit-scrollbar{
  width:16px!important;
  display:block!important;
}
#libraryGridScroll.library-grid-scroll::-webkit-scrollbar-track{
  background:rgba(8,15,22,.72)!important;
  border-radius:999px!important;
}
#libraryGridScroll.library-grid-scroll::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#86a3c2,#4d6f8a)!important;
  border-radius:999px!important;
  border:3px solid rgba(8,15,22,.72)!important;
}
#libraryGridScroll.library-grid-scroll::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#9bb8d8,#5e82a0)!important;
}
.library-grid-area{
  display:block!important;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  padding:0!important;
  margin:0!important;
}
.library-grid-inner{
  min-height:0!important;
  overflow:visible!important;
  padding:0 0 24px 0!important;
}
#alphaRail.alpha-rail{
  grid-column:2!important;
  grid-row:1!important;
  position:sticky!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  width:54px!important;
  min-width:54px!important;
  height:100%!important;
  max-height:none!important;
  min-height:0!important;
  padding:4px 5px 8px 5px!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-evenly!important;
  align-items:center!important;
  gap:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:12!important;
}
#alphaRail.alpha-rail.hidden{display:none!important;}
#alphaRail .alpha-jump{
  width:42px!important;
  min-height:24px!important;
  height:auto!important;
  line-height:22px!important;
  padding:0!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#dceaff!important;
  font-size:18px!important;
  font-weight:950!important;
  text-align:center!important;
  text-shadow:0 1px 5px rgba(0,0,0,.78)!important;
}
#alphaRail .alpha-jump:hover:not(:disabled){
  background:rgba(47,129,255,.42)!important;
  color:#fff!important;
}
#alphaRail .alpha-jump.disabled,
#alphaRail .alpha-jump:disabled{
  opacity:.24!important;
  color:#77879a!important;
}
@media(max-height:820px){
  #alphaRail .alpha-jump{font-size:16px!important;line-height:18px!important;min-height:18px!important;}
}
@media(max-width:900px){
  #libraryView.library-view{grid-template-columns:minmax(0,1fr) 46px!important;padding-left:16px!important;}
  #alphaRail.alpha-rail{width:46px!important;min-width:46px!important;}
  #alphaRail .alpha-jump{width:36px!important;font-size:15px!important;}
}


/* v1.6.x: app-owned library dialogs instead of browser prompts / inline editors */
.app-modal{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  display:grid!important;
  place-items:center!important;
  padding:24px!important;
  background:rgba(1,6,12,.68)!important;
  backdrop-filter:blur(9px)!important;
}
.app-modal.hidden{display:none!important;}
.app-modal-card{
  width:min(560px,calc(100vw - 48px))!important;
  max-height:calc(100vh - 64px)!important;
  overflow:auto!important;
  background:linear-gradient(180deg,#172332,#0f1823)!important;
  border:1px solid rgba(140,166,198,.38)!important;
  border-radius:18px!important;
  padding:22px!important;
  color:var(--text)!important;
  box-shadow:0 32px 110px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.app-modal-card h2{
  margin:0 0 10px!important;
  font-size:24px!important;
}
.app-modal-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin-top:22px!important;
}
.app-modal-actions .danger,
button.danger{
  border:1px solid #d04d63!important;
  background:linear-gradient(180deg,#bc2d46,#8f1d32)!important;
  color:#fff!important;
  border-radius:8px!important;
  padding:9px 12px!important;
  cursor:pointer!important;
}

#libraryEditor.settings-library-card:not(.hidden){
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:10001!important;
  width:min(820px,calc(100vw - 56px))!important;
  max-width:min(820px,calc(100vw - 56px))!important;
  max-height:calc(100vh - 72px)!important;
  overflow:auto!important;
  margin:0!important;
  padding:22px!important;
  background:linear-gradient(180deg,#172332,#0f1823)!important;
  border:1px solid rgba(140,166,198,.38)!important;
  border-radius:18px!important;
  box-shadow:0 0 0 100vmax rgba(1,6,12,.68),0 32px 110px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.05)!important;
}
#libraryEditor.settings-library-card:not(.hidden) h3{
  font-size:22px!important;
  margin:0 0 18px!important;
}
#libraryEditor.settings-library-card:not(.hidden) .settings-actions{
  justify-content:flex-end!important;
  margin-top:18px!important;
}

/* v1.6.x: navigation/details recovery and top-right task placement refinement */
.topbar{
  display:grid!important;
  grid-template-columns:minmax(260px,520px) minmax(0,1fr) 40px 40px!important;
  align-items:center!important;
  column-gap:8px!important;
}
.topbar .search{
  grid-column:1!important;
  width:100%!important;
  max-width:520px!important;
  min-width:220px!important;
  margin:0!important;
}
.task-monitor-wrap{
  grid-column:3!important;
  justify-self:end!important;
  margin:0!important;
  order:initial!important;
}
#settingsBtn{
  grid-column:4!important;
  justify-self:end!important;
  order:initial!important;
}
.task-monitor-button,
#settingsBtn.top-icon-button{
  width:36px!important;
  height:36px!important;
}
.task-monitor-panel{
  right:0!important;
  left:auto!important;
}
.settings-side-nav .settings-nav.active,
.settings-side-nav .settings-subnav.active{
  outline:1px solid rgba(122,180,255,.28)!important;
}
.settings-side-nav .settings-nav:not(.active){
  background:transparent!important;
}
body.detail-page-mode .shell{
  grid-template-columns:var(--left) minmax(720px,1fr)!important;
}
body.detail-page-mode #libraryView,
body.detail-page-mode #settingsView,
body.detail-page-mode #readerView{
  display:none!important;
}
body.detail-page-mode #detailView{
  display:block!important;
  height:calc(100vh - 66px)!important;
  overflow:auto!important;
  position:relative!important;
  z-index:2!important;
}
body.detail-page-mode #settingsSideNav{
  display:none!important;
}
body.detail-page-mode #mainLibraryNav,
body.detail-page-mode #categorySideSection{
  display:block!important;
}
@media(max-width:900px){
  .topbar{grid-template-columns:minmax(170px,1fr) 36px 36px!important;}
  .topbar .search{grid-column:1!important;min-width:0!important;}
  .task-monitor-wrap{grid-column:2!important;}
  #settingsBtn{grid-column:3!important;}
}


/* v1.6.x task monitor cleanup controls */
.task-panel-title{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}
.task-clear-button{
  border:1px solid rgba(122,180,255,.26)!important;
  background:rgba(255,255,255,.055)!important;
  color:#d9e8fb!important;
  border-radius:8px!important;
  padding:4px 9px!important;
  font-size:12px!important;
  font-weight:800!important;
  cursor:pointer!important;
}
.task-clear-button:disabled{
  opacity:.38!important;
  cursor:default!important;
}
.task-clear-button:not(:disabled):hover{
  border-color:#58a2ff!important;
  background:rgba(47,129,255,.22)!important;
}


/* Guidevault reader open mode: keep the reader visible even after detail/settings layout patches. */
body.reader-page-mode #readerView{
  display:flex!important;
  visibility:visible!important;
}
body.reader-page-mode #libraryView,
body.reader-page-mode #detailView,
body.reader-page-mode #settingsView{
  display:none!important;
  visibility:hidden!important;
}
body.reader-page-mode #readerView.hidden{
  display:flex!important;
}


/* v1.7.x: ESRB badge display in details overview. Icons are loaded from wwwroot/assets/ESRB. */
#overviewPanel{
  position:relative;
}
#overviewPanel.has-esrb-icon{
  padding-right:88px;
  min-height:132px;
}
.detail-esrb-icon{
  position:absolute;
  right:18px;
  bottom:18px;
  width:58px;
  max-height:86px;
  object-fit:contain;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
  z-index:2;
}

/* ESRB scraped rating remains visible on the Metadata tab only; overview uses icon-only presentation. */
.metadata-readonly-field input[readonly]{
  cursor:default!important;
  opacity:.86!important;
  color:#c9d7e8!important;
  background:rgba(255,255,255,.035)!important;
}


/* v1.6.x — magazine overview layout and detail-page spacing refinement */
.detail-view{
  padding:18px 20px 56px!important;
}
.detail-page-shell{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
}
.detail-page-top{
  margin-left:0!important;
}
.detail-page-grid{
  grid-template-columns:minmax(330px,430px) minmax(620px,1fr)!important;
  gap:18px!important;
  align-items:start!important;
}
.detail-cover-column{
  justify-self:start!important;
  width:100%!important;
  max-width:430px!important;
  padding:16px!important;
}
.detail-main-column{
  min-width:0!important;
  width:100%!important;
  padding:16px 18px!important;
}
.detail-cover{
  max-height:600px!important;
}
.detail-action-stack{
  margin-top:10px!important;
}
.detail-meta-list,
.metadata-technical-list{
  display:grid;
  grid-template-columns:minmax(128px,max-content) minmax(0,1fr);
  gap:10px 16px;
  margin:0;
}
.detail-meta-list dt,
.metadata-technical-list dt{
  color:#9db0c7;
}
.detail-meta-list dd,
.metadata-technical-list dd{
  margin:0;
  overflow-wrap:anywhere;
}
.magazine-overview{
  display:block;
}
.magazine-overview-summary{
  color:#cbd8e8;
  line-height:1.5;
  margin:0 0 14px;
  max-width:100%;
}
.magazine-overview-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(260px,1fr));
  gap:14px;
  align-items:start;
}
.overview-card,
.overview-tag-section{
  border:1px solid rgba(78,108,142,.58);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(18,31,44,.88),rgba(10,18,27,.92));
  padding:14px;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}
.overview-card h3,
.overview-tag-section h3,
.metadata-technical-info h3{
  margin:0 0 10px;
  font-size:13px;
  color:#dfeaff;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.overview-field-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px 14px;
}
.overview-field{
  min-width:0;
}
.overview-field.wide{
  grid-column:1 / -1;
}
.overview-field span{
  display:block;
  color:#9db0c7;
  font-size:12px;
  margin-bottom:3px;
}
.overview-field strong{
  display:block;
  color:#f1f6ff;
  font-size:14px;
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.overview-tag-section{
  min-height:82px;
}
.overview-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.overview-chip{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(88,151,255,.28);
  background:rgba(47,129,255,.13);
  color:#dceaff;
  font-size:12px;
  line-height:1.2;
}
.muted-dash{
  color:#8ea0b6;
}
.metadata-technical-info{
  margin:14px 0;
  padding:14px;
  border:1px solid rgba(78,108,142,.58);
  border-radius:14px;
  background:rgba(8,16,24,.62);
}
@media(max-width:1180px){
  .detail-page-grid{
    grid-template-columns:minmax(300px,390px) minmax(0,1fr)!important;
  }
  .magazine-overview-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:900px){
  .detail-page-grid{
    grid-template-columns:1fr!important;
  }
  .detail-cover-column{
    max-width:520px!important;
  }
}

/* v1.6.x: library grid top clipping + hidden scrollbar polish.
   Keep the grid itself as the scroll surface, but hide the browser scrollbar and
   give the first row enough breathing room so selected/hovered cards are not
   clipped at the top edge. */
#libraryGridScroll.library-grid-scroll{
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-top:10px!important;
  padding-right:10px!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
#libraryGridScroll.library-grid-scroll::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
#libraryGridScroll .library-grid-inner,
#libraryGridScroll .grid{
  padding-top:8px!important;
}
#libraryGridScroll .card:first-child,
#libraryGridScroll .grid > .card:nth-child(-n+8){
  margin-top:0!important;
}
#alphaRail.alpha-rail{
  border-left:0!important;
}


/* v1.8.x: cover paint persistence.
   Do not virtualize the grid/cards with content-visibility; on Chromium this can
   leave archive-backed covers as black tiles until hover invalidates the card. */
.grid,
.card-row,
#grid,
#recentGrid,
.category-cover-stack,
.cover-wrap{
  content-visibility:visible!important;
  contain-intrinsic-size:auto!important;
}
.card,
.category-card,
.cover-wrap,
.category-cover-stack,
.cover-wrap img,
.category-cover-stack img{
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}
.cover-wrap img,
.category-cover-stack img{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  min-width:1px!important;
  min-height:1px!important;
  transform:none;
  transition:opacity .12s ease!important;
}
.cover-wrap img.cover-loading,
.category-cover-stack img.cover-loading{
  opacity:.999!important;
}
.cover-wrap img.cover-loaded,
.category-cover-stack img.cover-loaded{
  opacity:1!important;
}
.cover-wrap img.cover-repaint-pulse,
.category-cover-stack img.cover-repaint-pulse{
  transform:translateZ(0.001px)!important;
}

/* v1.7.x — strategy guide metadata/detail layout polish.
   Keep the cover/actions card anchored at the top of the details view and give
   strategy guides a denser overview that is not just a sequential field list. */
.detail-page-grid{
  align-items:start!important;
}
.detail-cover-column{
  align-self:start!important;
  position:sticky!important;
  top:18px!important;
  margin-top:0!important;
  height:max-content!important;
  transform:none!important;
}
.detail-main-column{
  align-self:start!important;
}
.strategy-overview .magazine-overview-summary{
  display:none!important;
}
.strategy-hero-overview{
  border:1px solid rgba(88,151,255,.30);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(24,45,68,.96),rgba(12,21,31,.94));
  padding:16px 18px;
  margin-bottom:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}
.strategy-hero-kicker{
  color:#8ebdff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.strategy-hero-overview h2{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.1;
  color:#f3f8ff;
}
.strategy-hero-overview p{
  margin:0;
  color:#c6d5e7;
  line-height:1.45;
}
.strategy-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:12px;
}
.strategy-overview-board{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);
  gap:14px;
  align-items:start;
}
.strategy-overview-board > .overview-card{
  min-width:0;
}
.strategy-content-card{
  grid-column:1 / -1;
}
.strategy-snapshot-grid,
.strategy-context-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}
.strategy-snapshot-grid .overview-field.wide{
  grid-column:1 / -1;
}
.strategy-context-list .overview-tag-section{
  grid-column:1 / -1;
}
.strategy-content-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.strategy-content-card .overview-tag-section,
.strategy-context-list .overview-tag-section{
  min-height:0!important;
  padding:10px!important;
  background:rgba(8,16,24,.36)!important;
  box-shadow:none!important;
}
.strategy-content-card .overview-tag-section h3,
.strategy-context-list .overview-tag-section h3{
  font-size:12px!important;
  margin-bottom:8px!important;
}
#editIsbnLabel input{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media(max-width:1180px){
  .strategy-overview-board,
  .strategy-content-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:900px){
  .detail-cover-column{
    position:relative!important;
    top:auto!important;
  }
  .strategy-snapshot-grid,
  .strategy-context-list{
    grid-template-columns:1fr!important;
  }
}

/* v1.7.1 — strategy overview hero polish and anchored details layout.
   Strategy summaries now live only inside the overview hero, the ESRB badge sits
   inside that hero container, and the cover/action card stays fixed at the top
   while the overview/metadata column scrolls independently. */
body.detail-page-mode .main{
  overflow:hidden!important;
}
body.detail-page-mode .detail-view{
  height:calc(100vh - 66px)!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:18px 20px 18px!important;
}
body.detail-page-mode .detail-page-shell{
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
body.detail-page-mode .detail-page-top{
  flex:0 0 auto!important;
}
body.detail-page-mode .detail-page-grid{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.detail-page-mode .detail-cover-column{
  position:relative!important;
  top:auto!important;
  align-self:start!important;
  justify-self:start!important;
  max-height:100%!important;
  overflow:hidden!important;
}
body.detail-page-mode .detail-main-column{
  align-self:stretch!important;
  max-height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  scrollbar-width:thin;
  scrollbar-color:#38516b #0b1520;
}
body.detail-page-mode .detail-main-column::-webkit-scrollbar{
  width:10px;
}
body.detail-page-mode .detail-main-column::-webkit-scrollbar-track{
  background:#0b1520;
}
body.detail-page-mode .detail-main-column::-webkit-scrollbar-thumb{
  background:#38516b;
  border-radius:999px;
  border:2px solid #0b1520;
}
body.detail-page-mode .detail-cover{
  max-height:min(62vh,640px)!important;
}
.strategy-hero-overview{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:18px;
  min-height:160px;
}
.strategy-hero-overview.has-hero-esrb{
  padding-right:24px!important;
}
.strategy-hero-copy{
  min-width:0;
  flex:1 1 auto;
}
.strategy-hero-esrb{
  flex:0 0 auto;
  align-self:flex-end;
  width:78px;
  max-height:112px;
  object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.48));
  margin-left:auto;
}
.strategy-overview #description,
#overviewPanel .strategy-overview ~ #description{
  display:none!important;
}
@media(max-width:900px){
  body.detail-page-mode .main,
  body.detail-page-mode .detail-view,
  body.detail-page-mode .detail-page-shell,
  body.detail-page-mode .detail-page-grid{
    overflow:auto!important;
    height:auto!important;
  }
  body.detail-page-mode .detail-main-column{
    overflow:visible!important;
    max-height:none!important;
  }
  .strategy-hero-overview{
    min-height:0;
  }
  .strategy-hero-esrb{
    width:62px;
    max-height:92px;
  }
}

/* v1.7.2 — detail-page viewport containment.
   The strategy overview pass made the detail layout visually better, but the
   two-column container could still overrun smaller/windowed viewports. Keep the
   detail page inside the visible main area and let only the right metadata panel
   scroll. */
body.detail-page-mode .main{
  overflow:hidden!important;
  min-width:0!important;
}
body.detail-page-mode #detailView,
body.detail-page-mode .detail-view{
  height:calc(100vh - 66px)!important;
  max-height:calc(100vh - 66px)!important;
  min-height:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.detail-page-mode .detail-page-shell{
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  max-height:100%!important;
  min-width:0!important;
  min-height:0!important;
  overflow:hidden!important;
}
body.detail-page-mode .detail-page-top{
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:100%!important;
}
body.detail-page-mode .detail-page-grid{
  grid-template-columns:minmax(280px,430px) minmax(0,1fr)!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
}
body.detail-page-mode .detail-cover-column,
body.detail-page-mode .detail-main-column{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
body.detail-page-mode .detail-cover-column{
  align-self:start!important;
  max-height:100%!important;
  overflow:hidden!important;
}
body.detail-page-mode .detail-main-column{
  height:100%!important;
  max-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body.detail-page-mode .strategy-overview,
body.detail-page-mode .strategy-hero-overview,
body.detail-page-mode .strategy-overview-board,
body.detail-page-mode .strategy-content-card{
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}
@media(max-width:1100px){
  body.detail-page-mode .detail-page-grid{
    grid-template-columns:minmax(240px,360px) minmax(0,1fr)!important;
  }
  body.detail-page-mode .detail-cover{
    max-height:min(54vh,520px)!important;
  }
}

/* v1.7.3 — detail bottom clamp and strategy overview layout cleanup.
   Keep both detail columns inside the visible app viewport, hide the right
   metadata scrollbar, reduce the hero ESRB badge slightly, and separate Genre
   from the Game Context card. */
body.detail-page-mode #detailView,
body.detail-page-mode .detail-view{
  height:calc(100vh - 88px)!important;
  max-height:calc(100vh - 88px)!important;
  padding-bottom:12px!important;
}
body.detail-page-mode .detail-page-shell{
  height:100%!important;
  max-height:100%!important;
  padding-bottom:0!important;
}
body.detail-page-mode .detail-page-grid{
  height:100%!important;
  max-height:100%!important;
  padding-bottom:14px!important;
  gap:18px!important;
}
body.detail-page-mode .detail-cover-column{
  max-height:calc(100vh - 178px)!important;
  padding-bottom:12px!important;
}
body.detail-page-mode .detail-main-column{
  height:100%!important;
  max-height:calc(100vh - 178px)!important;
  padding-bottom:18px!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
body.detail-page-mode .detail-main-column::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
body.detail-page-mode .detail-cover{
  max-height:min(58vh,600px)!important;
}
.strategy-hero-esrb{
  width:64px!important;
  max-height:92px!important;
}
.strategy-overview-board{
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr)!important;
  grid-auto-flow:row!important;
}
.strategy-quick-card,
.strategy-game-card,
.strategy-genre-card,
.strategy-content-card{
  min-width:0!important;
}
.strategy-game-card{
  grid-column:2!important;
}
.strategy-genre-card{
  grid-column:2!important;
}
.strategy-content-card{
  grid-column:1 / -1!important;
}
.strategy-quick-card > h3,
.strategy-game-card > h3{
  display:none!important;
}
.strategy-genre-card{
  padding:10px!important;
}
.strategy-genre-card > .overview-tag-section{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}
@media(max-width:1180px){
  .strategy-game-card,
  .strategy-genre-card,
  .strategy-content-card{
    grid-column:auto!important;
  }
}
@media(max-width:900px){
  body.detail-page-mode #detailView,
  body.detail-page-mode .detail-view,
  body.detail-page-mode .detail-main-column,
  body.detail-page-mode .detail-cover-column{
    height:auto!important;
    max-height:none!important;
  }
  body.detail-page-mode .detail-page-grid{
    padding-bottom:24px!important;
  }
  .strategy-hero-esrb{
    width:56px!important;
    max-height:80px!important;
  }
}


/* v1.7.4 — detail bottom safe-area pass.
   The previous clamp shortened the page, but the visible card edges could still
   sit underneath the app bottom rail. Keep the details surface in the viewport,
   reserve a real bottom safe area inside each scrollable column, and hide all
   detail-view scrollbars without disabling scrolling. */
body.detail-page-mode #detailView,
body.detail-page-mode .detail-view{
  height:calc(100dvh - 112px)!important;
  max-height:calc(100dvh - 112px)!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:16px 20px 0!important;
  box-sizing:border-box!important;
}
body.detail-page-mode .detail-page-shell{
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.detail-page-mode .detail-page-top{
  flex:0 0 auto!important;
  margin-bottom:14px!important;
}
body.detail-page-mode .detail-page-grid{
  flex:1 1 auto!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  box-sizing:border-box!important;
}

/* Both columns get their own safe scrolling area so cards/buttons are never
   clipped by the window edge or bottom rail. */
body.detail-page-mode .detail-cover-column,
body.detail-page-mode .detail-main-column{
  max-height:100%!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:74px!important;
  scroll-padding-bottom:74px!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}
body.detail-page-mode .detail-cover-column::-webkit-scrollbar,
body.detail-page-mode .detail-main-column::-webkit-scrollbar,
body.detail-page-mode #detailView::-webkit-scrollbar,
body.detail-page-mode .detail-view::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

/* Keep the left cover/action card visually anchored but allow its contents to
   breathe inside the available height instead of hiding the bottom buttons. */
body.detail-page-mode .detail-cover-column{
  align-self:stretch!important;
  position:relative!important;
  top:auto!important;
}
body.detail-page-mode .detail-cover{
  max-height:min(52dvh,520px)!important;
}

/* Make the right tab panel feel like one contained surface with hidden scrolling. */
body.detail-page-mode .detail-main-column{
  align-self:stretch!important;
  height:auto!important;
}

/* Slightly smaller ESRB badge inside the strategy overview hero. */
.strategy-hero-esrb{
  width:54px!important;
  max-height:78px!important;
}

/* Ensure Genre remains its own card underneath the game context card. */
.strategy-game-card{ grid-column:2!important; }
.strategy-genre-card{ grid-column:2!important; }
.strategy-content-card{ grid-column:1 / -1!important; }

@media(max-width:1180px){
  body.detail-page-mode #detailView,
  body.detail-page-mode .detail-view{
    height:calc(100dvh - 100px)!important;
    max-height:calc(100dvh - 100px)!important;
  }
  .strategy-game-card,
  .strategy-genre-card,
  .strategy-content-card{
    grid-column:auto!important;
  }
}
@media(max-width:900px){
  body.detail-page-mode #detailView,
  body.detail-page-mode .detail-view,
  body.detail-page-mode .detail-page-shell,
  body.detail-page-mode .detail-page-grid,
  body.detail-page-mode .detail-cover-column,
  body.detail-page-mode .detail-main-column{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
  body.detail-page-mode .detail-cover-column,
  body.detail-page-mode .detail-main-column{
    padding-bottom:24px!important;
  }
}


/* v1.7.5 — detail column hard clamp and strategy context stack.
   The bottom app rail is overlay-like, so the detail columns must be shorter
   than the viewport rather than merely adding padding inside clipped columns. */
body.detail-page-mode #detailView,
body.detail-page-mode .detail-view{
  height:calc(100dvh - 126px)!important;
  max-height:calc(100dvh - 126px)!important;
  padding:16px 20px 18px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
body.detail-page-mode .detail-page-shell{
  height:100%!important;
  max-height:100%!important;
  overflow:hidden!important;
}
body.detail-page-mode .detail-page-top{
  flex:0 0 auto!important;
  margin-bottom:12px!important;
}
body.detail-page-mode .detail-page-grid{
  flex:1 1 auto!important;
  height:calc(100% - 8px)!important;
  max-height:calc(100% - 8px)!important;
  min-height:0!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  align-items:start!important;
}
body.detail-page-mode .detail-cover-column,
body.detail-page-mode .detail-main-column{
  align-self:start!important;
  height:auto!important;
  max-height:calc(100dvh - 248px)!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:16px!important;
  scroll-padding-bottom:28px!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  box-sizing:border-box!important;
}
body.detail-page-mode .detail-cover-column::-webkit-scrollbar,
body.detail-page-mode .detail-main-column::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
body.detail-page-mode .detail-cover{
  max-height:min(48dvh,500px)!important;
}
.strategy-context-stack{
  grid-column:2!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  min-width:0!important;
  align-self:start!important;
}
.strategy-context-stack .strategy-game-card,
.strategy-context-stack .strategy-genre-card{
  grid-column:auto!important;
  width:100%!important;
  margin:0!important;
}
.strategy-overview-board{
  align-items:start!important;
}
.strategy-genre-card{
  padding:14px!important;
}
.strategy-genre-card > .overview-tag-section{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  min-height:0!important;
}
.strategy-hero-esrb{
  width:50px!important;
  max-height:72px!important;
}
@media(max-width:1180px){
  .strategy-context-stack{
    grid-column:auto!important;
  }
}
@media(max-width:900px){
  body.detail-page-mode #detailView,
  body.detail-page-mode .detail-view,
  body.detail-page-mode .detail-page-shell,
  body.detail-page-mode .detail-page-grid,
  body.detail-page-mode .detail-cover-column,
  body.detail-page-mode .detail-main-column{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}


/* v1.7.6 — stretch detail columns down to the bottom safe edge.
   Keep the top anchor exactly where it is, but let the left cover/actions card
   and right overview/metadata column extend closer to the browser bottom without
   being clipped by the app/bottom rail. */
body.detail-page-mode #detailView,
body.detail-page-mode .detail-view{
  height:calc(100dvh - 78px)!important;
  max-height:calc(100dvh - 78px)!important;
  padding-bottom:0!important;
}

body.detail-page-mode .detail-page-shell{
  height:100%!important;
  max-height:100%!important;
}

body.detail-page-mode .detail-page-grid{
  height:100%!important;
  max-height:100%!important;
  min-height:0!important;
  padding-bottom:0!important;
  overflow:hidden!important;
}

/* Stretch both visible cards/columns while preserving their current top edge. */
body.detail-page-mode .detail-cover-column,
body.detail-page-mode .detail-main-column{
  align-self:stretch!important;
  height:100%!important;
  max-height:calc(100dvh - 144px)!important;
  min-height:0!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-bottom:22px!important;
  scroll-padding-bottom:22px!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}

body.detail-page-mode .detail-cover-column::-webkit-scrollbar,
body.detail-page-mode .detail-main-column::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}

/* Give the cover a little more room again now that the column is taller. */
body.detail-page-mode .detail-cover{
  max-height:min(61dvh,620px)!important;
}

/* Avoid large artificial bottom gaps from previous safe-area passes. */
body.detail-page-mode .detail-action-stack{
  margin-bottom:0!important;
}
body.detail-page-mode .detail-main-column > *:last-child{
  margin-bottom:0!important;
}

@media(max-width:1180px){
  body.detail-page-mode .detail-cover-column,
  body.detail-page-mode .detail-main-column{
    max-height:calc(100dvh - 136px)!important;
  }
}

@media(max-width:900px){
  body.detail-page-mode #detailView,
  body.detail-page-mode .detail-view,
  body.detail-page-mode .detail-page-shell,
  body.detail-page-mode .detail-page-grid,
  body.detail-page-mode .detail-cover-column,
  body.detail-page-mode .detail-main-column{
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
  }
}

/* v1.7.7 — strategy overview card gradient consistency.
   Match the Strategy Guide hero treatment across the rest of the overview cards
   so Guide Context, Genre, and Guide Content feel like one cohesive surface. */
.strategy-overview .overview-card,
.strategy-overview .overview-tag-section,
.strategy-overview .strategy-quick-card,
.strategy-overview .strategy-game-card,
.strategy-overview .strategy-genre-card,
.strategy-overview .strategy-content-card{
  border:1px solid rgba(88,151,255,.30)!important;
  background:linear-gradient(135deg,rgba(24,45,68,.96),rgba(12,21,31,.94))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}

/* Nested tag/list containers inside the overview should keep the same language,
   but stay slightly quieter so they do not compete with their parent card. */
.strategy-overview .strategy-content-card .overview-tag-section,
.strategy-overview .strategy-context-stack .overview-tag-section,
.strategy-overview .strategy-genre-card .overview-tag-section,
.strategy-overview .strategy-context-list .overview-tag-section{
  border:1px solid rgba(88,151,255,.24)!important;
  background:linear-gradient(135deg,rgba(20,39,60,.72),rgba(8,16,24,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.16)!important;
}

.strategy-overview .overview-card h3,
.strategy-overview .overview-tag-section h3{
  color:#dfeaff!important;
}


/* v1.7.8 — strategy genre simplification and static cover/actions column.
   Remove the nested genre box, remove the platform lookup action from the left
   rail, and keep the cover/buttons card equal-height but non-scrollable. */
#lookupPlatformsBtn{
  display:none!important;
}

.strategy-overview .strategy-genre-card{
  padding:14px 16px!important;
}
.strategy-overview .strategy-genre-card > h3{
  margin:0 0 10px!important;
  font-size:13px!important;
  color:#dfeaff!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.strategy-overview .strategy-genre-card > .overview-chip-list{
  min-height:26px!important;
}
/* In case an older rendered genre section is still present, flatten it visually. */
.strategy-overview .strategy-genre-card > .overview-tag-section{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}
.strategy-overview .strategy-genre-card > .overview-tag-section > h3{
  margin:0 0 10px!important;
}

body.detail-page-mode .detail-cover-column{
  overflow:hidden!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
  display:flex!important;
  flex-direction:column!important;
}
body.detail-page-mode .detail-cover-column::-webkit-scrollbar{
  width:0!important;
  height:0!important;
  display:none!important;
}
body.detail-page-mode .detail-cover{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  width:100%!important;
  object-fit:contain!important;
}
body.detail-page-mode .detail-action-stack{
  flex:0 0 auto!important;
  margin-top:12px!important;
  margin-bottom:0!important;
}
body.detail-page-mode .detail-action-stack #downloadBtn,
body.detail-page-mode .detail-action-stack #deleteBtn,
body.detail-page-mode .detail-action-stack #readBtn{
  flex:0 0 auto!important;
}

@media(max-width:900px){
  body.detail-page-mode .detail-cover-column{
    display:block!important;
    overflow:visible!important;
  }
  body.detail-page-mode .detail-cover{
    max-height:min(62dvh,620px)!important;
  }
}

/* v1.7.9 — strategy overview recovery + magazine gradient consistency.
   Restore the strategy overview fields after the genre simplification pass and
   apply the same Guidevault gradient card language to video-game magazine
   overview panels. */
.magazine-hero-overview,
.magazine-overview .overview-card,
.magazine-overview .overview-tag-section{
  border:1px solid rgba(88,151,255,.30)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(24,45,68,.96),rgba(12,21,31,.94))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}
.magazine-hero-overview{
  padding:16px 18px!important;
  margin:0 0 14px!important;
}
.magazine-hero-kicker{
  color:#8ebdff!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  margin-bottom:6px!important;
}
.magazine-hero-overview h2{
  margin:0 0 8px!important;
  font-size:24px!important;
  line-height:1.1!important;
  color:#f3f8ff!important;
}
.magazine-hero-overview h2 span{
  color:#9eb6d3!important;
  font-weight:800!important;
}
.magazine-hero-overview p{
  margin:0!important;
  color:#c6d5e7!important;
  line-height:1.45!important;
}
.magazine-hero-tags{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:12px!important;
}
.magazine-overview .overview-tag-section{
  min-height:0!important;
}
.magazine-overview .overview-card h3,
.magazine-overview .overview-tag-section h3{
  color:#dfeaff!important;
}
.magazine-overview .overview-card .overview-tag-section,
.magazine-overview .overview-tag-section .overview-tag-section{
  border:1px solid rgba(88,151,255,.24)!important;
  background:linear-gradient(135deg,rgba(20,39,60,.72),rgba(8,16,24,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.16)!important;
}


/* v1.7.7 — Strategy Guide left panel styling consistency.
   Match the cover/actions card to the Strategy Guide overview gradient style so
   the cover + Open Reader/Remove actions feel like part of the same detail view. */
body.strategy-detail-mode.detail-page-mode .detail-cover-column{
  border:1px solid rgba(88,151,255,.30)!important;
  background:
    radial-gradient(circle at 24% 8%, rgba(88,151,255,.18), transparent 34%),
    linear-gradient(135deg,rgba(24,45,68,.96),rgba(12,21,31,.94))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}

body.strategy-detail-mode.detail-page-mode .detail-cover-column .detail-cover{
  border:1px solid rgba(170,199,235,.20)!important;
  background:linear-gradient(180deg,rgba(7,16,25,.78),rgba(4,9,15,.92))!important;
  box-shadow:0 16px 36px rgba(0,0,0,.30)!important;
}

body.strategy-detail-mode.detail-page-mode .detail-action-stack .primary,
body.strategy-detail-mode.detail-page-mode .detail-action-stack .ghost,
body.strategy-detail-mode.detail-page-mode .detail-action-stack .danger{
  box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}

body.strategy-detail-mode.detail-page-mode .detail-action-stack .primary{
  border-color:rgba(88,151,255,.54)!important;
}

body.strategy-detail-mode.detail-page-mode .detail-action-stack .ghost{
  background:rgba(8,16,24,.42)!important;
  border-color:rgba(88,151,255,.24)!important;
}

body.strategy-detail-mode.detail-page-mode .detail-action-stack .danger{
  border-color:rgba(255,104,104,.42)!important;
}


/* v1.8.0 — Magazine/manual left panel and manual detail overview pass.
   Apply the same Guidevault gradient language used on Strategy Guide details to
   magazines and manuals, and give manuals a structured details layout instead
   of the older plain metadata list. */
body.magazine-detail-mode.detail-page-mode .detail-cover-column,
body.manual-detail-mode.detail-page-mode .detail-cover-column{
  border:1px solid rgba(88,151,255,.30)!important;
  background:
    radial-gradient(circle at 24% 8%, rgba(88,151,255,.18), transparent 34%),
    linear-gradient(135deg,rgba(24,45,68,.96),rgba(12,21,31,.94))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}
body.magazine-detail-mode.detail-page-mode .detail-cover-column .detail-cover,
body.manual-detail-mode.detail-page-mode .detail-cover-column .detail-cover{
  border:1px solid rgba(170,199,235,.20)!important;
  background:linear-gradient(180deg,rgba(7,16,25,.78),rgba(4,9,15,.92))!important;
  box-shadow:0 16px 36px rgba(0,0,0,.30)!important;
}
body.magazine-detail-mode.detail-page-mode .detail-action-stack .primary,
body.magazine-detail-mode.detail-page-mode .detail-action-stack .ghost,
body.magazine-detail-mode.detail-page-mode .detail-action-stack .danger,
body.manual-detail-mode.detail-page-mode .detail-action-stack .primary,
body.manual-detail-mode.detail-page-mode .detail-action-stack .ghost,
body.manual-detail-mode.detail-page-mode .detail-action-stack .danger{
  box-shadow:0 10px 26px rgba(0,0,0,.18)!important;
}
body.magazine-detail-mode.detail-page-mode .detail-action-stack .ghost,
body.manual-detail-mode.detail-page-mode .detail-action-stack .ghost{
  background:rgba(8,16,24,.42)!important;
  border-color:rgba(88,151,255,.24)!important;
}

.manual-hero-overview,
.manual-overview .overview-card,
.manual-overview .overview-tag-section{
  border:1px solid rgba(88,151,255,.30)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg,rgba(24,45,68,.96),rgba(12,21,31,.94))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.22)!important;
}
.manual-hero-overview{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:18px;
  min-height:150px;
  padding:16px 18px!important;
  margin:0 0 14px!important;
}
.manual-hero-copy{
  min-width:0;
  flex:1 1 auto;
}
.manual-hero-kicker{
  color:#8ebdff!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
  margin-bottom:6px!important;
}
.manual-hero-overview h2{
  margin:0 0 8px!important;
  font-size:24px!important;
  line-height:1.1!important;
  color:#f3f8ff!important;
}
.manual-hero-overview p{
  margin:0!important;
  color:#c6d5e7!important;
  line-height:1.45!important;
}
.manual-hero-tags{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:12px!important;
}
.manual-overview-board{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
  gap:14px;
  align-items:start;
}
.manual-overview-board > .overview-card,
.manual-context-stack,
.manual-content-card{
  min-width:0;
}
.manual-context-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.manual-content-card{
  grid-column:1 / -1;
}
.manual-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
}
.manual-field-grid .overview-field.wide{
  grid-column:1 / -1;
}
.manual-content-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.manual-content-grid > .overview-field.wide{
  grid-column:1 / -1;
}
.manual-content-card .overview-tag-section{
  min-height:0!important;
  padding:10px!important;
  border:1px solid rgba(88,151,255,.24)!important;
  background:linear-gradient(135deg,rgba(20,39,60,.72),rgba(8,16,24,.74))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 26px rgba(0,0,0,.16)!important;
}
.manual-genre-card{
  padding:14px 16px!important;
}
.manual-genre-card > h3,
.manual-content-card > h3{
  margin:0 0 10px!important;
  font-size:13px!important;
  color:#dfeaff!important;
  letter-spacing:.04em!important;
  text-transform:uppercase!important;
}
.manual-genre-card > .overview-chip-list{
  min-height:26px!important;
}
.manual-overview .overview-card h3,
.manual-overview .overview-tag-section h3{
  color:#dfeaff!important;
}
@media(max-width:1180px){
  .manual-overview-board,
  .manual-content-grid{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:900px){
  .manual-field-grid{
    grid-template-columns:1fr!important;
  }
}


/* v1.9.x — Manual overview ESRB hero badge.
   The old lower-right manual ESRB overlay stays removed; manuals now show their
   ESRB badge inside the top Manual hero container, matching the Strategy Guide
   hero treatment. */
.manual-hero-overview.has-hero-esrb{
  padding-right:24px!important;
}
.manual-hero-esrb{
  flex:0 0 auto;
  align-self:flex-end;
  width:54px!important;
  max-height:78px!important;
  object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.48));
  margin-left:auto;
}
@media(max-width:900px){
  .manual-hero-esrb{
    width:48px!important;
    max-height:70px!important;
  }
}


/* v1.8.x — detail Previous/Next navigation.
   Buttons live in the upper-right of the detail header and navigate within the
   current filtered/category result when possible, otherwise within the same item kind. */
.detail-page-top{
  align-items:center!important;
}
.detail-title-block{
  min-width:0;
  flex:1 1 auto;
}
.detail-nav-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
}
.detail-nav-controls.hidden,
.detail-nav-button.hidden{
  display:none!important;
}
.detail-nav-button{
  min-width:92px;
  height:36px;
  border-radius:999px!important;
  padding:0 16px!important;
  white-space:nowrap;
  background:rgba(8,16,24,.42)!important;
  border-color:rgba(88,151,255,.24)!important;
}
.detail-nav-button:hover{
  background:rgba(47,129,255,.18)!important;
  border-color:rgba(88,151,255,.42)!important;
}

@media(max-width:900px){
  .detail-page-top{
    align-items:flex-start!important;
    flex-wrap:wrap;
  }
  .detail-title-block{
    flex-basis:calc(100% - 120px);
  }
  .detail-nav-controls{
    width:100%;
    justify-content:flex-start;
    margin-left:0;
  }
}


/* v1.8.x — reader tray Details return button.
   Details sits next to Library in the reader control tray and returns to the
   current item's details page without going through the main library grid. */
#readerExitDetails{
  min-width:82px;
}
.reader-tray-left-actions{
  gap:8px!important;
  flex-wrap:wrap;
}


/* v1.8.x — hard-fix reader tray visual order.
   The tray can inherit/flex-order buttons from prior rules, so explicitly force:
   Previous → Details → Library. */
.reader-tray-left-actions{
  display:flex!important;
  flex-direction:row!important;
}
.reader-tray-left-actions #prevPage{
  order:1!important;
}
.reader-tray-left-actions #readerExitDetails{
  order:2!important;
}
.reader-tray-left-actions #readerExitLibrary{
  order:3!important;
}


/* v1.8.x — collapsed Library Data dropdown in details Metadata tab. */
.metadata-technical-info{
  margin-top:16px!important;
}
.metadata-library-data-dropdown{
  border:1px solid rgba(88,151,255,.22);
  border-radius:18px;
  background:
    radial-gradient(circle at 12% 0%, rgba(88,151,255,.14), transparent 36%),
    linear-gradient(135deg,rgba(18,34,51,.86),rgba(8,15,23,.82));
  box-shadow:0 14px 32px rgba(0,0,0,.18);
  overflow:hidden;
}
.metadata-library-data-dropdown > summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  color:#dfeeff;
  font-weight:800;
  letter-spacing:.01em;
}
.metadata-library-data-dropdown > summary::-webkit-details-marker{
  display:none;
}
.metadata-library-data-dropdown > summary::before{
  content:'\25B8';
  color:#8fb9ff;
  font-size:14px;
  transition:transform .16s ease;
}
.metadata-library-data-dropdown[open] > summary::before{
  transform:rotate(90deg);
}
.metadata-library-data-dropdown > summary span{
  flex:1 1 auto;
}
.metadata-library-data-dropdown > summary em{
  color:#8fa8bd;
  font-style:normal;
  font-size:12px;
  font-weight:700;
}
.metadata-library-data-dropdown .metadata-technical-list{
  margin:0;
  padding:0 16px 16px;
  border-top:1px solid rgba(255,255,255,.08);
}


/* v1.8.x — Library Data dropdown without outer wrapper card.
   Keep the collapsed dropdown functionality, but remove the surrounding container
   so only the dropdown/header card itself is visible. */
#metadataTechnicalInfo,
.metadata-technical-info{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin-top:14px!important;
  margin-bottom:0!important;
  border-radius:0!important;
}

#metadataTechnicalInfo .metadata-library-data-dropdown,
.metadata-technical-info .metadata-library-data-dropdown{
  margin:0!important;
}

#metadataTechnicalInfo .metadata-library-data-dropdown{
  width:100%;
  box-sizing:border-box;
}


/* Guidevault local login/account profile gate */
body.auth-locked{
  min-height:100vh!important;
  overflow:hidden!important;
}
.login-view{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:32px;
  background:
    radial-gradient(circle at 50% 12%, rgba(47,129,255,.24), transparent 34%),
    radial-gradient(circle at 20% 78%, rgba(216,82,255,.14), transparent 30%),
    linear-gradient(180deg,#101b28,#05090e 72%);
}
.login-card{
  width:min(480px, calc(100vw - 32px));
  border:1px solid rgba(142,160,182,.28);
  border-radius:24px;
  padding:28px;
  background:linear-gradient(180deg,rgba(18,31,45,.96),rgba(8,16,24,.98));
  box-shadow:0 34px 100px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
}
.login-brand{
  text-align:center;
  margin-bottom:22px;
}
.login-wordmark{
  max-width:280px;
  width:80%;
  height:auto;
  margin:0 auto 14px;
  display:block;
}
.login-form h1{
  margin:0 0 14px;
  font-size:30px;
  line-height:1.08;
}
.login-form label,
.account-form-grid label{
  color:#d7e4f4;
  font-weight:750;
}
.login-form input,
.account-form-grid input{
  width:100%;
  box-sizing:border-box;
  margin-top:7px;
  border:1px solid rgba(142,160,182,.28);
  border-radius:10px;
  padding:12px 13px;
  background:#071018;
  color:var(--text);
  outline:0;
}
.login-form input:focus,
.account-form-grid input:focus{
  border-color:#3d8fff;
  box-shadow:0 0 0 3px rgba(47,129,255,.18);
}
.account-form-grid input:disabled{
  opacity:.74;
  cursor:not-allowed;
}
.login-status,
.account-status{
  min-height:20px;
  margin:12px 0 6px;
  color:#b8c7d9;
}
.login-status[data-tone="error"],
.account-status[data-tone="error"]{color:#ffb3bd;}
.login-status[data-tone="success"],
.account-status[data-tone="success"]{color:#b9ffd0;}
.login-status[data-tone="info"],
.account-status[data-tone="info"]{color:#b9d8ff;}
.login-help{
  margin:18px 0 0;
  color:#8ea0b6;
  text-align:center;
  font-size:13px;
}
.account-settings-grid{
  grid-template-columns:minmax(360px, 1.2fr) minmax(260px, .8fr)!important;
}
.account-profile-card{
  max-width:780px;
}
.account-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.account-card-header h3{
  margin-bottom:4px!important;
}
.account-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 16px;
}
.account-form-grid label:last-child{
  grid-column:1 / -1;
}
.account-actions{
  align-items:center;
}
@media(max-width:900px){
  .account-settings-grid{grid-template-columns:1fr!important;}
  .account-form-grid{grid-template-columns:1fr;}
  .login-view{padding:18px;}
  .login-card{padding:22px;}
}

/* Account > Reading Profiles */
.reading-profile-grid{
  grid-template-columns:repeat(auto-fit,minmax(360px,1fr))!important;
}
.reading-profile-card{
  min-width:0;
}
.reading-profile-card-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}
.reading-profile-card-header h3{
  margin-bottom:4px!important;
}
.reading-profile-card label,
.reading-profile-effective-card label{
  display:block;
  color:#d7e4f4;
  font-weight:750;
  margin-top:12px;
}
.reading-profile-card select,
.reading-profile-card input[type="range"]{
  width:100%;
  box-sizing:border-box;
  margin-top:7px;
}
.reading-profile-card select{
  border:1px solid rgba(142,160,182,.28);
  border-radius:10px;
  padding:12px 13px;
  background:#071018;
  color:var(--text);
  outline:0;
}
.reading-profile-card select:focus{
  border-color:#3d8fff;
  box-shadow:0 0 0 3px rgba(47,129,255,.18);
}
.reading-profile-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 16px;
  margin:14px 0 16px;
}
.reading-profile-zoom-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 58px;
  align-items:center;
  gap:10px;
  margin-top:7px;
}
.reading-profile-zoom-row output{
  color:#dbe8f7;
  font-weight:850;
  text-align:right;
}
.reading-profile-effective-card{
  margin-top:16px;
}
@media(max-width:900px){
  .reading-profile-grid{grid-template-columns:1fr!important;}
  .reading-profile-form-grid{grid-template-columns:1fr;}
}

/* Refined Reading Profile presets and detail assignments */
.reading-profile-grid.refined{
  grid-template-columns:minmax(420px,1.1fr) minmax(300px,.9fr)!important;
}
.reading-profile-manager-card input[type="text"],
.reading-profile-card input[type="text"],
.detail-reading-profile-card select{
  width:100%;
  box-sizing:border-box;
  border:1px solid rgba(142,160,182,.28);
  border-radius:10px;
  padding:12px 13px;
  background:#071018;
  color:var(--text);
  outline:0;
  margin-top:7px;
}
.reading-profile-manager-card input[type="text"]:focus,
.detail-reading-profile-card select:focus{
  border-color:#3d8fff;
  box-shadow:0 0 0 3px rgba(47,129,255,.18);
}
.reading-profile-preset-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.reading-profile-preset-row{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  color:var(--text);
  background:rgba(7,16,24,.72);
  border:1px solid rgba(142,160,182,.20);
  border-radius:12px;
  padding:12px;
  cursor:pointer;
}
.reading-profile-preset-row:hover{
  border-color:rgba(103,176,255,.45);
  background:rgba(18,33,48,.86);
}
.reading-profile-preset-row b,
.reading-profile-preset-row em{
  display:block;
}
.reading-profile-preset-row em{
  margin-top:4px;
  color:#8ea0b6;
  font-size:12px;
  font-style:normal;
}
.detail-reading-profile-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
}
.detail-reading-profile-card{
  background:linear-gradient(180deg,rgba(22,34,49,.96),rgba(12,22,32,.96));
  border:1px solid rgba(142,160,182,.24);
  border-radius:16px;
  padding:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.detail-reading-profile-card.effective{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.detail-reading-profile-card h3{
  margin:0 0 6px;
}
.detail-reading-profile-card label{
  display:block;
  color:#d7e4f4;
  font-weight:750;
  margin-top:12px;
}
@media(max-width:900px){
  .reading-profile-grid.refined,
  .detail-reading-profile-grid{grid-template-columns:1fr!important;}
  .detail-reading-profile-card.effective{display:block;}
  .detail-reading-profile-card.effective .ghost{margin-top:12px;}
}

/* Account > OPDS / Auth Keys */
.opds-title-row{
  align-items:flex-start;
}
.opds-auth-card,
.opds-key-card{
  margin-top:18px;
  background:#0b0c12;
  border:1px solid rgba(184,190,205,.14);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.opds-section-kicker{
  color:#f3f1ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.opds-private-note{
  margin-bottom:22px;
  color:#d7d2e6;
}
.opds-url-toolbar{
  display:grid;
  grid-template-columns:minmax(280px,1fr) auto 244px;
  gap:12px;
  align-items:end;
}
.opds-url-label{
  display:block;
  color:#e5e0ef;
  font-size:20px;
  font-weight:900;
}
.opds-url-label input,
.opds-new-key-inline input{
  width:100%;
  box-sizing:border-box;
  margin-top:8px;
  border:1px solid rgba(226,220,255,.72);
  border-radius:7px;
  padding:12px 13px;
  background:#66569b;
  color:#fff;
  outline:0;
  font-size:15px;
}
.opds-url-label input:read-only{
  cursor:default;
}
.opds-url-label input:focus,
.opds-new-key-inline input:focus,
.opds-url-key-select:focus{
  border-color:#a66cff;
  box-shadow:0 0 0 3px rgba(166,108,255,.22);
}
.opds-copy-button{
  min-width:82px;
  height:39px;
  margin-bottom:0;
  border-color:transparent!important;
  background:transparent!important;
  color:#f0eef6!important;
  font-size:17px;
  font-weight:850;
}
.opds-url-key-select{
  height:39px;
  border:1px solid rgba(226,220,255,.72);
  border-radius:7px;
  padding:0 12px;
  background:#282a36;
  color:#f2effa;
  outline:0;
  font-size:17px;
}
.opds-url-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.opds-help-text{
  color:#8e8e98;
  font-size:14px;
}
.opds-key-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:20px;
}
.opds-key-header h2{
  margin:0 0 8px;
  font-size:28px;
  color:#e8e3f4;
}
.opds-new-key{
  border-color:#9564f5!important;
  background:#15111f!important;
  color:#fff!important;
  box-shadow:none!important;
}
.opds-new-key-inline{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto auto;
  gap:12px;
  align-items:end;
  margin:0 0 18px;
  padding:14px;
  border:1px solid rgba(149,100,245,.28);
  border-radius:12px;
  background:rgba(149,100,245,.08);
}
.opds-new-key-inline label{
  color:#e4dff0;
  font-weight:850;
}
.opds-table-wrap{
  overflow:auto;
}
.opds-key-table{
  width:100%;
  min-width:820px;
  border-collapse:collapse;
  color:#dfdce8;
}
.opds-key-table th,
.opds-key-table td{
  padding:15px 12px;
  border-bottom:1px solid rgba(238,236,246,.68);
  text-align:left;
  vertical-align:middle;
}
.opds-key-table th{
  color:#c7c1d2;
  font-size:13px;
  font-weight:800;
}
.opds-key-table tfoot td{
  border-bottom:0;
  background:rgba(255,255,255,.23);
  color:#fff;
  font-weight:900;
  padding:16px 18px;
}
.opds-masked-key{
  display:inline-block;
  min-width:160px;
  letter-spacing:.07em;
  color:#e6e1ed;
  font-weight:850;
}
.opds-inline-copy{
  margin-left:12px;
  border:0;
  background:transparent;
  color:#dfdce8;
  cursor:pointer;
  font-size:18px;
  vertical-align:middle;
}
.opds-inline-copy:hover{
  color:#fff;
}
.opds-actions-cell{
  display:flex;
  gap:8px;
}
.opds-action-button{
  width:46px;
  height:38px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  background:#9864ff;
  color:#fff;
  cursor:pointer;
  font-size:18px;
  font-weight:900;
}
.opds-action-button:hover{
  filter:brightness(1.08);
}
.opds-action-button.danger{
  background:#2b2d35;
}
.opds-action-button.danger:hover{
  background:#ef3b55;
}
.opds-empty-row{
  color:#a7a0b3;
  text-align:center!important;
  padding:28px!important;
}
@media(max-width:1000px){
  .opds-url-toolbar,
  .opds-new-key-inline{
    grid-template-columns:1fr;
  }
  .opds-copy-button{
    width:max-content;
  }
  .opds-key-header{
    display:block;
  }
  .opds-key-header .opds-new-key{
    margin-top:12px;
  }
}

/* Account > Devices / connected client history */
.device-title-row,
.device-client-title-row{
  align-items:flex-start;
}
.device-add-button{
  border-color:#9564f5!important;
  background:#15111f!important;
  color:#fff!important;
  box-shadow:none!important;
}
.device-email-card{
  margin-top:18px;
  background:#0b0c12;
  border:1px solid rgba(184,190,205,.14);
  border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);
}
.device-email-editor{
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(220px,1.3fr) minmax(160px,.8fr) auto auto;
  gap:12px;
  align-items:end;
  margin:0 0 18px;
  padding:14px;
  border:1px solid rgba(149,100,245,.28);
  border-radius:12px;
  background:rgba(149,100,245,.08);
}
.device-email-editor label{
  color:#e4dff0;
  font-weight:850;
  font-size:13px;
}
.device-email-editor input{
  width:100%;
  box-sizing:border-box;
  margin-top:8px;
  border:1px solid rgba(226,220,255,.48);
  border-radius:7px;
  padding:11px 12px;
  background:#282a36;
  color:#fff;
  outline:0;
  font-size:14px;
}
.device-email-editor input:focus{
  border-color:#a66cff;
  box-shadow:0 0 0 3px rgba(166,108,255,.22);
}
.device-table-wrap{
  overflow:auto;
}
.device-email-table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  color:#dfdce8;
}
.device-email-table th,
.device-email-table td{
  padding:15px 12px;
  border-bottom:1px solid rgba(238,236,246,.68);
  text-align:left;
  vertical-align:middle;
}
.device-email-table th{
  color:#c7c1d2;
  font-size:13px;
  font-weight:800;
}
.device-email-table tfoot td{
  border-bottom:0;
  background:rgba(255,255,255,.23);
  color:#fff;
  font-weight:900;
  padding:16px 18px;
}
.device-empty-row{
  color:#a7a0b3;
  padding:24px 20px!important;
}
.device-table-action{
  width:42px;
  height:34px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.14);
  border-radius:7px;
  background:#2b2d35;
  color:#fff;
  cursor:pointer;
  font-size:16px;
}
.device-table-action:hover,
.device-table-action.danger:hover{
  background:#ef3b55;
}
.device-section-break{
  height:1px;
  margin:30px 0 28px;
  background:rgba(224,225,238,.18);
}
.device-actions{
  justify-content:flex-end;
}
.device-client-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:16px;
  width:100%;
}
.device-client-card{
  position:relative;
  border:1px solid rgba(184,190,205,.10);
  border-radius:7px;
  background:#1b1d26;
  color:#d9d7e2;
  padding:16px 16px 14px;
  box-shadow:0 14px 38px rgba(0,0,0,.20);
}
.device-card-menu{
  position:absolute;
  top:12px;
  right:12px;
}
.device-card-menu-button{
  border:0;
  background:transparent;
  color:#f0edf6;
  cursor:pointer;
  font-size:26px;
  line-height:1;
  padding:0 3px;
}
.device-card-menu-popover{
  display:none;
  position:absolute;
  top:30px;
  right:0;
  min-width:150px;
  z-index:10;
  border:1px solid rgba(170,143,255,.42);
  border-radius:10px;
  background:#242633;
  box-shadow:0 18px 40px rgba(0,0,0,.36);
  overflow:hidden;
}
.device-card-menu-popover.open{
  display:block;
}
.device-card-menu-popover button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:#eeeaf8;
  padding:10px 13px;
  text-align:left;
  font-weight:850;
  cursor:pointer;
}
.device-card-menu-popover button:hover{
  background:rgba(143,100,255,.26);
}
.device-card-menu-popover button.danger:hover{
  background:#ef3b55;
  color:#fff;
}
.device-card-title{
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:28px;
  color:#f1eef8;
  font-size:19px;
  line-height:1.2;
}
.device-client-name-input{
  flex:1;
  min-width:0;
  border:1px solid rgba(170,143,255,.62);
  border-radius:8px;
  background:#11131b;
  color:#fff;
  padding:8px 10px;
  font-size:16px;
  font-weight:850;
}
.device-card-edit-actions{
  display:flex;
  gap:10px;
  margin:12px 0 14px 28px;
}
.device-card-edit-actions .primary,
.device-card-edit-actions .ghost{
  min-height:34px;
  padding:7px 13px;
}
.device-card-icon{
  color:#d8d5df;
  font-size:18px;
}
.gv-device-icon{
  width:16px;
  height:16px;
  flex:0 0 auto;
  color:currentColor;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.small-icon .gv-device-icon,
.device-table-action .gv-device-icon,
.opds-action-button .gv-device-icon{
  width:16px;
  height:16px;
}

.device-card-title .gv-device-icon{
  width:22px;
  height:22px;
  color:#d8d5df;
}
.device-card-fact{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.device-card-fact span{
  min-width:0;
}
.device-card-fact .gv-device-icon{
  color:#aaa6b3;
  opacity:.95;
}
.device-card-footer-item{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.device-card-footer-item .gv-device-icon{
  width:15px;
  height:15px;
  color:#8f8b98;
}
.device-card-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin:8px 0 16px;
}
.device-badge{
  display:inline-flex;
  align-items:center;
  min-height:18px;
  border-radius:6px;
  padding:2px 7px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  color:#fff;
  background:#8d66ff;
}
.device-badge.opds{
  background:#1ccff0;
}
.device-badge.web{
  background:#8d66ff;
}
.device-badge.auth{
  background:#7b8494;
}
.device-badge.active{
  background:#39d98a;
  color:#071018;
}
.device-card-user{
  color:#9a95a6;
  font-weight:800;
  margin-left:2px;
}
.device-card-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 22px;
  color:#a9a5b2;
  font-size:14px;
  line-height:1.25;
}
.device-card-facts b{
  color:#dfdce8;
  font-weight:800;
}
.device-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(238,236,246,.72);
  color:#8f8b98;
  font-size:14px;
  font-weight:850;
}
.device-client-empty{
  grid-column:1/-1;
  color:#a7a0b3;
  padding:24px!important;
  text-align:center;
}
@media(max-width:1250px){
  .device-client-grid{grid-template-columns:1fr;}
}
@media(max-width:1100px){
  .device-email-editor{grid-template-columns:1fr;}
  .device-card-facts{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){
  .device-card-facts{grid-template-columns:1fr;}
  .device-card-footer{display:block;}
  .device-card-footer span{display:block;margin-top:8px;}
}

/* Insights > Devices monthly device analytics */
.insight-devices-title-row{
  align-items:flex-start;
  margin-bottom:16px;
}
.insight-device-summary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:22px 0 12px;
}
.insight-device-summary-card{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:82px;
  padding:15px 16px;
  border:1px solid rgba(184,190,205,.12);
  border-radius:14px;
  background:rgba(255,255,255,.035);
  box-shadow:0 16px 36px rgba(0,0,0,.16);
}
.insight-device-summary-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:12px;
  color:#cfc8dc;
  background:rgba(154,104,255,.16);
  border:1px solid rgba(154,104,255,.24);
}
.insight-device-summary-icon .gv-device-icon{
  width:22px;
  height:22px;
}
.insight-device-summary-card strong{
  display:block;
  color:#f6f2ff;
  font-size:28px;
  line-height:1;
  font-weight:900;
}
.insight-device-summary-card span{
  display:block;
  margin-top:4px;
  color:#dfdce8;
  font-size:13px;
  font-weight:900;
}
.insight-device-summary-card small{
  display:block;
  margin-top:3px;
  color:#9d97aa;
  font-size:12px;
  font-weight:750;
}
.insight-device-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:42px;
  margin-top:18px;
}
.insight-chart-card{
  min-height:300px;
  background:transparent!important;
  border:0!important;
  border-radius:0;
  padding:12px 4px 6px!important;
  box-shadow:none!important;
}
.insight-chart-head h2{
  margin:0 0 6px;
  color:#dfdce8;
  font-size:27px;
  line-height:1.12;
}
.insight-chart-head .sub{
  margin:0;
}
.insight-semi-chart{
  min-height:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.insight-chart-legend{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px 14px;
  margin:2px 0 4px;
  color:#e3dfee;
  font-size:13px;
  font-weight:850;
}
.insight-chart-legend-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.insight-chart-legend-item i{
  width:24px;
  height:13px;
  display:inline-block;
  border-radius:4px;
  background:var(--legend-color);
}
.insight-donut-wrap{
  position:relative;
  max-width:390px;
  width:100%;
  margin:0 auto;
}
.insight-donut-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
.insight-donut-track,
.insight-donut-segment{
  fill:none;
  stroke-width:54;
  stroke-linecap:butt;
}
.insight-donut-track{
  stroke:rgba(255,255,255,.08);
}
.insight-donut-segment{
  stroke:var(--segment-color);
}
.insight-donut-total{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:grid;
  place-items:center;
  color:#f4f1fb;
  text-align:center;
  pointer-events:none;
}
.insight-donut-total strong{
  display:block;
  font-size:34px;
  line-height:1;
}
.insight-donut-total span{
  display:block;
  margin-top:4px;
  color:#9e98aa;
  font-size:12px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.insight-chart-empty{
  min-height:170px;
  display:grid;
  place-items:center;
  color:#9e98aa;
  border:1px dashed rgba(184,190,205,.20);
  border-radius:10px;
  margin-top:20px;
  text-align:center;
  padding:18px;
}
.insight-client-title-row{
  margin-bottom:8px;
}
.insight-device-client-grid{
  margin-top:16px;
}
.insight-device-client-grid .device-card-menu{
  display:none;
}
@media(max-width:1200px){
  .insight-device-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:1100px){
  .insight-device-chart-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .insight-device-summary-grid{grid-template-columns:1fr;}
  .insight-chart-card{padding:8px 0!important;}
  .insight-chart-head h2{font-size:23px;}
}

/* v1.8.x — Preferences / Colorscape dynamic detail gradients. */
.preferences-settings-grid{
  grid-template-columns:minmax(320px,760px)!important;
}
.preferences-card{
  position:relative!important;
  overflow:hidden!important;
}
.settings-card-kicker{
  color:#8ebdff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:12px;
}
.preference-toggle-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}
.preference-toggle-row h3{
  margin:0 0 6px!important;
  font-size:22px!important;
}
.preference-toggle-row .sub{
  max-width:620px;
  margin-bottom:0!important;
}
.colorscape-preview-note{
  margin-top:14px!important;
  color:#a7bbd2!important;
}
.gv-toggle{
  margin:2px 0 0!important;
  display:inline-flex!important;
  align-items:center!important;
  cursor:pointer!important;
  user-select:none!important;
}
.gv-toggle input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
}
.gv-toggle-track{
  width:58px;
  height:32px;
  border-radius:999px;
  border:1px solid rgba(142,160,182,.38);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.18);
  position:relative;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.gv-toggle-thumb{
  position:absolute;
  top:4px;
  left:4px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#c9d7ea;
  box-shadow:0 5px 14px rgba(0,0,0,.35);
  transition:transform .18s ease,background .18s ease;
}
.gv-toggle input:checked + .gv-toggle-track{
  border-color:rgba(142,103,255,.78);
  background:linear-gradient(135deg,rgba(142,103,255,.95),rgba(47,129,255,.9));
  box-shadow:0 0 0 1px rgba(142,103,255,.28),0 16px 34px rgba(75,79,255,.24);
}
.gv-toggle input:checked + .gv-toggle-track .gv-toggle-thumb{
  transform:translateX(26px);
  background:#fff;
}
.gv-toggle:focus-within .gv-toggle-track{
  outline:2px solid rgba(142,103,255,.65);
  outline-offset:3px;
}

body.colorscape-active.detail-page-mode #detailView{
  background:
    radial-gradient(circle at 14% 0%,rgba(var(--colorscape-rgb),.34),rgba(var(--colorscape-rgb),.11) 28%,transparent 52%),
    linear-gradient(180deg,rgba(5,10,15,.94),rgba(7,16,24,.98))!important;
}
body.colorscape-active.detail-page-mode .detail-page-top{
  border-color:rgba(var(--colorscape-rgb),.26)!important;
}
body.colorscape-active.detail-page-mode .detail-cover-column,
body.colorscape-active.detail-page-mode .detail-main-column{
  border-color:rgba(var(--colorscape-rgb),.38)!important;
  background:
    linear-gradient(145deg,rgba(var(--colorscape-rgb),.18),rgba(12,21,31,.90) 46%,rgba(7,14,21,.96))!important;
  box-shadow:0 22px 60px rgba(0,0,0,.26),0 0 42px rgba(var(--colorscape-rgb),.10)!important;
}
body.colorscape-active.detail-page-mode .detail-cover{
  border-color:rgba(var(--colorscape-rgb),.52)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.36),0 0 36px rgba(var(--colorscape-rgb),.16)!important;
}
body.colorscape-active.detail-page-mode .tabs{
  border-bottom-color:rgba(var(--colorscape-rgb),.28)!important;
}
body.colorscape-active.detail-page-mode .tab.active{
  border-bottom-color:rgb(var(--colorscape-rgb))!important;
}
body.colorscape-active.detail-page-mode .tag,
body.colorscape-active.detail-page-mode .pill{
  background:rgba(var(--colorscape-rgb),.16)!important;
  border:1px solid rgba(var(--colorscape-rgb),.24)!important;
}
body.colorscape-active.detail-page-mode .magazine-hero-overview,
body.colorscape-active.detail-page-mode .manual-hero-overview,
body.colorscape-active.detail-page-mode .strategy-hero-overview,
body.colorscape-active.detail-page-mode .magazine-overview .overview-card,
body.colorscape-active.detail-page-mode .magazine-overview .overview-tag-section,
body.colorscape-active.detail-page-mode .manual-overview .overview-card,
body.colorscape-active.detail-page-mode .manual-overview .overview-tag-section,
body.colorscape-active.detail-page-mode .strategy-overview .overview-card,
body.colorscape-active.detail-page-mode .strategy-overview .overview-tag-section,
body.colorscape-active.detail-page-mode .strategy-overview .strategy-quick-card,
body.colorscape-active.detail-page-mode .strategy-overview .strategy-game-card,
body.colorscape-active.detail-page-mode .strategy-overview .strategy-genre-card,
body.colorscape-active.detail-page-mode .strategy-overview .strategy-content-card,
body.colorscape-active.detail-page-mode .detail-reading-profile-card,
body.colorscape-active.detail-page-mode .metadata-technical-info{
  border-color:rgba(var(--colorscape-rgb),.44)!important;
  background:
    linear-gradient(135deg,rgba(var(--colorscape-rgb),.26),rgba(13,23,33,.94) 44%,rgba(7,14,21,.96))!important;
  box-shadow:0 18px 45px rgba(0,0,0,.24),0 0 36px rgba(var(--colorscape-rgb),.10)!important;
}
body.colorscape-active.detail-page-mode .manual-content-card .overview-tag-section,
body.colorscape-active.detail-page-mode .strategy-overview .strategy-content-card .overview-tag-section,
body.colorscape-active.detail-page-mode .strategy-overview .strategy-context-stack .overview-tag-section,
body.colorscape-active.detail-page-mode .strategy-overview .strategy-genre-card .overview-tag-section,
body.colorscape-active.detail-page-mode .strategy-overview .strategy-context-list .overview-tag-section{
  border-color:rgba(var(--colorscape-rgb),.30)!important;
  background:linear-gradient(135deg,rgba(var(--colorscape-rgb),.18),rgba(8,16,24,.76))!important;
}
body.colorscape-active.detail-page-mode .detail-action-stack .primary{
  border-color:rgba(var(--colorscape-rgb),.55)!important;
  background:linear-gradient(180deg,rgba(var(--colorscape-rgb),.95),rgba(var(--colorscape-rgb),.58))!important;
}
body.colorscape-active.detail-page-mode .detail-action-stack .ghost,
body.colorscape-active.detail-page-mode .detail-action-stack .danger{
  border-color:rgba(var(--colorscape-rgb),.28)!important;
}

/* v1.9.x — Info / System settings page and magazine overview header cleanup. */
.settings-page-kicker{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:900;
  color:#dce9fb;
  margin-bottom:8px;
}
.system-info-panel{
  color:#e7eef8;
}
.system-info-panel h1{
  margin-bottom:12px!important;
}
.system-info-panel h2{
  font-size:30px;
  line-height:1.12;
  margin:28px 0 12px;
  color:#e8eef7;
}
.system-about-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:18px 72px;
  max-width:860px;
  margin-top:10px;
}
.system-info-field span,
.system-more-info-grid span{
  display:block;
  color:#b9c7d8;
  font-weight:750;
  margin-bottom:2px;
}
.system-info-field strong,
.system-more-info-grid strong{
  display:block;
  color:#eef5ff;
  font-size:19px;
  font-weight:780;
  word-break:break-word;
}
.system-info-divider{
  border:0;
  border-top:1px solid rgba(156,171,190,.28);
  margin:30px 0 0;
}
.system-more-info-grid{
  display:grid;
  grid-template-columns:180px minmax(220px,1fr);
  gap:7px 28px;
  max-width:900px;
}
.system-more-info-grid strong{
  color:#7ab4ff;
  font-size:18px;
}
.system-update-list{
  display:grid;
  gap:10px;
  max-width:1220px;
}
.system-update-entry{
  border:0;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(31,82,139,.78),rgba(16,43,74,.88));
  box-shadow:0 0 0 1px rgba(88,162,255,.42),0 20px 44px rgba(0,0,0,.24),0 0 32px rgba(47,129,255,.14);
}
.system-update-entry summary{
  list-style:none;
  cursor:pointer;
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 26px;
  background:linear-gradient(180deg,rgba(34,93,164,.82),rgba(20,56,103,.90));
  color:#edf3fb;
  font-size:26px;
  font-weight:760;
}
.system-update-entry summary::-webkit-details-marker{
  display:none;
}
.system-update-entry summary::after{
  content:'\2304';
  font-size:26px;
  line-height:1;
  transition:transform .18s ease;
}
.system-update-entry[open] summary::after{
  transform:rotate(180deg);
}
.system-update-entry summary em{
  font-style:normal;
  font-size:15px;
  padding:7px 12px;
  border-radius:8px;
  background:rgba(122,180,255,.22);
  color:#fff;
  white-space:nowrap;
}
.system-update-body{
  padding:22px 30px 26px;
  background:linear-gradient(180deg,rgba(17,39,67,.94),rgba(11,26,45,.96));
  color:#f0f4fb;
  font-size:16px;
}
.system-update-body h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:10px 0 8px;
  color:#edf4ff;
  font-size:22px;
}
.system-update-body h3 b{
  display:inline-grid;
  place-items:center;
  min-width:26px;
  height:26px;
  border-radius:8px;
  background:#2f81ff;
  color:#fff;
  font-size:15px;
}
.system-update-body ul{
  margin:0 0 18px 18px;
  padding:0;
}
.system-update-body li{
  margin:6px 0;
}
.system-update-body code{
  color:#fff;
  background:rgba(0,0,0,.18);
  padding:2px 5px;
  border-radius:5px;
}
.magazine-overview-card-no-heading{
  padding-top:16px!important;
}
.magazine-overview-card-no-heading .overview-field-grid{
  margin-top:0!important;
}
@media(max-width:900px){
  .system-about-grid,
  .system-more-info-grid{
    grid-template-columns:1fr;
  }
  .system-update-entry summary{
    font-size:20px;
    padding:16px 18px;
  }
}


/* Metadata Manager */
.metadata-manager-column-panel {
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 12px 0 14px;
  margin: 4px 0 14px;
}
.metadata-manager-column-panel summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  color: #f6fbff;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.metadata-manager-column-panel summary::-webkit-details-marker { display: none; }
.metadata-manager-column-panel summary em {
  color: rgba(202, 230, 255, 0.62);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.metadata-manager-column-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(185px, 1fr));
  gap: 8px;
  margin-top: 12px;
  max-height: 260px;
  overflow: auto;
  padding-right: 6px;
}
.metadata-manager-column-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(108, 184, 255, 0.14);
  background: rgba(10, 17, 27, 0.48);
  border-radius: 10px;
  color: rgba(234, 244, 255, 0.84);
  font-size: 0.82rem;
  font-weight: 800;
}
.metadata-manager-column-option input { accent-color: #5bbcff; }
.metadata-manager-column-actions {
  justify-content: flex-start;
  margin-top: 12px;
}

.metadata-manager-panel .settings-title-row {
  align-items: flex-start;
}
.metadata-manager-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(130px, 1fr));
  gap: 12px;
  margin: 18px 0 18px;
}
.metadata-manager-stat {
  border: 1px solid rgba(82, 176, 255, 0.22);
  background: linear-gradient(135deg, rgba(36, 76, 112, 0.32), rgba(12, 19, 29, 0.72));
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.2);
}
.metadata-manager-stat span {
  display: block;
  color: rgba(214, 234, 255, 0.68);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
}
.metadata-manager-stat strong {
  font-size: 1.35rem;
  color: #f5f9ff;
}
.metadata-manager-toolbar {
  margin-bottom: 18px;
}
.metadata-manager-filter-grid,
.metadata-manager-batch-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.metadata-manager-batch-grid {
  grid-template-columns: repeat(6, minmax(135px, 1fr));
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.metadata-manager-filter-grid label,
.metadata-manager-batch-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(226, 238, 255, 0.78);
  font-size: 0.82rem;
  font-weight: 700;
}
.metadata-manager-filter-grid input,
.metadata-manager-filter-grid select,
.metadata-manager-batch-grid input,
.metadata-manager-batch-grid select,
.metadata-manager-input {
  border: 1px solid rgba(135, 195, 255, 0.22);
  border-radius: 10px;
  background: rgba(8, 14, 22, 0.78);
  color: #f7fbff;
  padding: 9px 10px;
  min-height: 38px;
  outline: none;
}
.metadata-manager-filter-grid input:focus,
.metadata-manager-filter-grid select:focus,
.metadata-manager-batch-grid input:focus,
.metadata-manager-batch-grid select:focus,
.metadata-manager-input:focus {
  border-color: rgba(102, 192, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(69, 166, 255, 0.13);
}
.metadata-manager-batch-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.metadata-manager-grid-card {
  padding: 0;
  overflow: hidden;
}
.metadata-manager-table-wrap {
  width: 100%;
  overflow: auto;
  max-height: min(68vh, 760px);
}
.metadata-manager-table {
  width: 100%;
  min-width: 1480px;
  border-collapse: collapse;
  color: #e8f3ff;
  font-size: 0.9rem;
}
.metadata-manager-table th,
.metadata-manager-table td {
  border-bottom: 1px solid rgba(255,255,255,0.11);
  padding: 10px 8px;
  vertical-align: middle;
  text-align: left;
}
.metadata-manager-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(10, 16, 25, 0.96);
  color: rgba(231, 243, 255, 0.72);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.metadata-manager-table tbody tr:hover {
  background: rgba(55, 132, 196, 0.12);
}
.metadata-manager-table tbody tr.metadata-row-dirty {
  background: rgba(61, 151, 226, 0.14);
}
.metadata-manager-input {
  width: 120px;
  min-height: 34px;
  padding: 7px 8px;
  border-radius: 8px;
}
.metadata-manager-input.wide {
  width: 210px;
}
.metadata-kind-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(125, 194, 255, 0.22);
  background: rgba(60, 130, 190, 0.17);
  color: #dff1ff;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 800;
}

.metadata-kind-preview-trigger {
  cursor: zoom-in;
  user-select: none;
  touch-action: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.metadata-kind-preview-trigger:hover,
.metadata-kind-preview-trigger:active {
  border-color: rgba(124, 210, 255, 0.62);
  background: rgba(71, 154, 218, 0.28);
  transform: translateY(-1px);
}
.metadata-cover-preview {
  position: fixed;
  z-index: 10000;
  width: 190px;
  max-width: calc(100vw - 28px);
  pointer-events: none;
  border: 1px solid rgba(126, 204, 255, 0.34);
  background: linear-gradient(180deg, rgba(18, 29, 43, 0.96), rgba(7, 12, 20, 0.98));
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.54), 0 0 28px rgba(67, 163, 255, 0.18);
  color: #f5fbff;
  backdrop-filter: blur(12px);
}
.metadata-cover-preview.hidden {
  display: none;
}
.metadata-cover-preview-art {
  width: 100%;
  aspect-ratio: 3 / 4.15;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.metadata-cover-preview-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: radial-gradient(circle at top, rgba(55, 119, 174, 0.18), rgba(7, 12, 20, 0.82));
}
.metadata-cover-preview-caption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 3px 2px;
  min-width: 0;
}
.metadata-cover-preview-caption strong {
  font-size: 0.86rem;
  line-height: 1.22;
  color: #f8fbff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.metadata-cover-preview-caption span,
.metadata-cover-preview-caption em {
  font-size: 0.72rem;
  line-height: 1.25;
  color: rgba(219, 237, 255, 0.72);
  font-style: normal;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metadata-cover-preview-caption em {
  color: rgba(128, 204, 255, 0.88);
}
.metadata-source-text {
  color: rgba(223, 234, 246, 0.66);
  white-space: nowrap;
  font-size: 0.82rem;
}
.metadata-manager-empty {
  color: rgba(231, 238, 247, 0.68);
  text-align: center !important;
  padding: 32px !important;
}
.metadata-manager-table-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  background: rgba(64, 74, 87, 0.68);
  color: #f7fbff;
  font-weight: 800;
}
@media (max-width: 1250px) {
  .metadata-manager-summary { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .metadata-manager-column-picker { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
  .metadata-manager-filter-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
  .metadata-manager-batch-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 720px) {
  .metadata-manager-summary,
  .metadata-manager-filter-grid,
  .metadata-manager-batch-grid,
  .metadata-manager-column-picker { grid-template-columns: 1fr; }
}


/* v0.9.8: associated-platform card badges and read-only preferred platform state */
.card-platform-stack{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  margin-top:2px;
}
.card-platform-icons{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:20px;
  overflow:hidden;
}
/* v0.9.9: show associated-platform icons directly, without chip/container backgrounds */
.card-platform-icon-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;
  height:18px;
  padding:0;
  border:0;
  background:transparent;
  border-radius:0;
  color:#dff2ff;
  font-size:.58rem;
  font-weight:900;
  line-height:1;
  box-shadow:none;
}
.card-platform-icon-badge .platform-icon.tiny{
  width:17px;
  height:17px;
  margin:0;
}
.card-category-multi{
  color:#9fcaec;
  font-weight:800;
}
.metadata-manager-input.readonly,
#editCategory.metadata-derived-readonly{
  cursor:default!important;
  color:#cfe4f8!important;
  background:rgba(74,117,152,.18)!important;
  border-color:rgba(121,190,255,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}

/* Guidevault 0.9.10 - Keybinds, Customize, and Statistics */
.home-shelves{
  display:flex;
  flex-direction:column;
  gap:28px;
  margin:18px 0 28px;
}
.home-shelf-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:0 0 12px;
}
.home-shelf-heading h2{margin:0;font-size:22px;}
.home-shelf-heading .sub{margin:4px 0 0;color:var(--muted);}
.home-shelf-row{margin-bottom:0;}
.empty-message.compact{padding:16px 18px;min-height:auto;}

.keybinds-card{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;}
.keybinds-list{display:flex;flex-direction:column;gap:18px;max-width:980px;}
.keybind-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 104px;
  gap:18px;
  align-items:center;
  padding:10px 0 12px;
  border-bottom:1px solid rgba(133,180,220,.14);
}
.keybind-row h3{margin:0 0 8px;font-size:22px;color:#e9f5ff;}
.keybind-chip-line{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.keybind-key-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 12px;
  border-radius:8px;
  background:linear-gradient(135deg,#2f86d8,#5bbcff);
  color:#fff;
  font-weight:800;
  box-shadow:0 0 18px rgba(91,188,255,.18);
}
.keybind-actions{display:flex;justify-content:flex-end;gap:18px;}
.keybind-action{
  width:28px;height:28px;border:0;background:transparent;color:#eaf6ff;
  font-size:22px;font-weight:900;cursor:pointer;border-radius:8px;
}
.keybind-action:hover{color:#5bbcff;background:rgba(91,188,255,.1);}

.customize-tabs,.statistics-tabs{display:flex;gap:14px;margin:18px 0 22px;flex-wrap:wrap;}
.customize-tab,.statistics-tab{
  border:0;border-radius:10px;background:transparent;color:#9bd7ff;
  font-weight:800;padding:12px 18px;cursor:pointer;
}
.customize-tab.active,.statistics-tab.active{background:linear-gradient(135deg,#2566a8,#5bbcff);color:#fff;box-shadow:0 0 20px rgba(91,188,255,.18);}
.customize-home-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:18px;}
.customize-add-shelf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.customize-add-shelf select{min-width:230px;}
.customize-shelf-list{display:flex;flex-direction:column;gap:10px;}
.customize-shelf-row{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:14px 16px;border:1px solid rgba(91,188,255,.18);border-radius:14px;
  background:rgba(11,22,34,.58);
}
.customize-shelf-handle{color:#9bd7ff;font-size:18px;letter-spacing:1px;}
.customize-shelf-row strong{font-size:18px;color:#edf7ff;}
.customize-shelf-row p{margin:3px 0 0;}
.customize-shelf-actions{display:flex;gap:8px;align-items:center;}

.statistics-title-row{align-items:flex-start;}
.statistics-summary-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:0;margin:22px 0 28px;border-bottom:1px solid rgba(210,232,255,.16);}
.statistics-summary-card{min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-right:1px solid rgba(210,232,255,.18);}
.statistics-summary-card:last-child{border-right:0;}
.statistics-summary-card span{font-weight:800;color:#eaf5ff;}
.statistics-summary-card b{font-size:20px;color:#d6eaff;}
.statistics-summary-card i{font-style:normal;color:#7dc7ff;opacity:.9;}
.statistics-explore-row{display:flex;align-items:center;gap:14px;margin:10px 0 26px;}
.statistics-explore-row h2{margin:0;font-size:28px;}
.statistics-explore-row h2 span{color:#5bbcff;}
.statistics-explore-row select{max-width:260px;}
.statistics-grid.featured{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.statistics-popular-card{min-height:250px;}
.statistics-popular-list{display:flex;flex-direction:column;gap:8px;margin-top:12px;}
.statistics-rank-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.statistics-rank-row span{color:#9fb4c8;text-align:center;}
.statistics-rank-row strong{color:#f2f8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.statistics-rank-row em{font-style:normal;color:#aebed0;}
.statistics-book-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.statistics-book-row img{width:42px;height:56px;object-fit:cover;border-radius:6px;background:#111923;}
.statistics-book-row strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.statistics-book-row em{display:block;font-style:normal;color:#9eb1c3;font-size:12px;}
.statistics-top-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 28px;}
.statistics-section-heading{margin:28px 0 12px;color:#a9c7dc;text-transform:uppercase;letter-spacing:.08em;font-size:14px;}
.statistics-user-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:24px;}
.statistics-user-card{display:flex;align-items:center;gap:14px;}
.statistics-avatar{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#2566a8,#5bbcff);font-weight:900;color:#fff;}
.statistics-user-card strong{display:block;color:#fff;font-size:18px;}
.statistics-user-card span{color:#aebed0;}
.statistics-activity-card,.statistics-management-card{padding:18px!important;}
.statistics-legend{display:flex;justify-content:center;gap:18px;margin-bottom:10px;}
.statistics-legend span{display:flex;align-items:center;gap:6px;font-weight:800;color:#e8f5ff;}
.statistics-legend i{width:12px;height:12px;border-radius:50%;background:var(--legend-color);display:inline-block;}
.statistics-line-chart{min-height:230px;}
.statistics-chart-svg{width:100%;height:260px;overflow:visible;}
.statistics-chart-svg text{fill:#cde5fa;font-size:12px;}
.statistics-grid-line{stroke:rgba(220,238,255,.22);stroke-width:1;}
.statistics-empty-chart{display:grid;place-items:center;min-height:220px;color:#90a8bb;border:1px dashed rgba(91,188,255,.18);border-radius:14px;}
.statistics-format-graph{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.statistics-format-bar{display:grid;grid-template-columns:70px minmax(0,1fr) 180px;gap:12px;align-items:center;}
.statistics-format-bar span{font-weight:800;color:#dcefff;}
.statistics-format-bar b{display:block;height:14px;border-radius:999px;background:linear-gradient(90deg,#2566a8,#5bbcff);min-width:6px;}
.statistics-format-bar em{font-style:normal;color:#aebed0;text-align:right;}
.statistics-format-table-wrap{overflow:auto;}
.statistics-format-table{width:100%;border-collapse:collapse;}
.statistics-format-table th,.statistics-format-table td{padding:14px 12px;border-bottom:1px solid rgba(220,238,255,.22);text-align:left;}
.statistics-format-table th{color:#eaf7ff;}

@media (max-width:1200px){
  .statistics-summary-row{grid-template-columns:repeat(4,minmax(0,1fr));}
  .statistics-top-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:820px){
  .keybind-row,.customize-shelf-row{grid-template-columns:1fr;}
  .keybind-actions,.customize-shelf-actions{justify-content:flex-start;}
  .customize-home-header,.statistics-grid.featured{grid-template-columns:1fr;display:grid;}
  .statistics-summary-row,.statistics-top-grid,.statistics-user-grid{grid-template-columns:1fr;}
}

/* Guidevault 0.9.11 - Home shelf carousel and performance pass */
.home-shelf{
  contain:layout paint;
}
.home-shelf-heading{
  align-items:center!important;
}
.home-shelf-title-block{
  min-width:0;
}
.home-shelf-controls{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex:0 0 auto;
  color:#9fcaec;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
}
.home-shelf-arrow{
  width:34px;
  height:34px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(92,166,255,.36);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(43,102,170,.34),rgba(14,30,46,.94));
  color:#eaf6ff;
  font-size:24px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.home-shelf-arrow:hover:not(:disabled){
  border-color:rgba(114,190,255,.68);
  box-shadow:0 0 0 1px rgba(74,159,255,.16),0 12px 30px rgba(0,0,0,.24);
}
.home-shelf-arrow:disabled{
  opacity:.38;
  cursor:default;
}
.home-shelf-row{
  grid-template-columns:repeat(6,minmax(120px,1fr))!important;
  overflow:hidden;
  margin-bottom:0!important;
  animation:homeShelfPageIn .16s ease-out;
}
@keyframes homeShelfPageIn{
  from{opacity:.72;transform:translateX(10px)}
  to{opacity:1;transform:translateX(0)}
}
@media(max-width:1200px){
  .home-shelf-row{grid-template-columns:repeat(4,minmax(120px,1fr))!important;}
}
@media(max-width:900px){
  .home-shelf-heading{align-items:flex-start!important;flex-direction:column;}
  .home-shelf-controls{margin-left:0;width:100%;justify-content:flex-end;}
  .home-shelf-row{grid-template-columns:repeat(2,minmax(120px,1fr))!important;}
}

/* Keep Home shelves as a single six-card strip so cards do not wrap into extra rows. */
.home-shelf-row{
  grid-template-columns:repeat(6,minmax(96px,1fr))!important;
}
@media(max-width:900px){
  .home-shelf-row{grid-template-columns:repeat(6,minmax(82px,1fr))!important;}
}

/* Guidevault 0.9.12 - Statistics and shelf motion polish */
.home-shelf-row.slide-out-to-left{animation:homeShelfSlideOutLeft .16s cubic-bezier(.34,.77,.24,1) forwards!important;}
.home-shelf-row.slide-out-to-right{animation:homeShelfSlideOutRight .16s cubic-bezier(.34,.77,.24,1) forwards!important;}
.home-shelf-row.slide-in-from-right{animation:homeShelfSlideInRight .22s cubic-bezier(.2,.72,.2,1) both!important;}
.home-shelf-row.slide-in-from-left{animation:homeShelfSlideInLeft .22s cubic-bezier(.2,.72,.2,1) both!important;}
@keyframes homeShelfSlideOutLeft{to{opacity:.38;transform:translate3d(-34px,0,0);}}
@keyframes homeShelfSlideOutRight{to{opacity:.38;transform:translate3d(34px,0,0);}}
@keyframes homeShelfSlideInRight{from{opacity:.35;transform:translate3d(42px,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}
@keyframes homeShelfSlideInLeft{from{opacity:.35;transform:translate3d(-42px,0,0);}to{opacity:1;transform:translate3d(0,0,0);}}
.statistics-summary-card{position:relative;padding:10px 6px 12px;}
.statistics-summary-icon{width:26px;height:26px;display:grid;place-items:center;color:#69bfff;margin-bottom:2px;}
.statistics-summary-icon svg{width:24px;height:24px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(91,188,255,.18));}
.statistics-summary-card span{font-size:13px;line-height:1.2;text-align:center;}
.statistics-summary-card b{font-size:19px;line-height:1.1;text-align:center;}
.statistics-management-legend{justify-content:flex-start;margin:0 0 6px;}
.statistics-chart-note{margin:8px 0 0;color:#91b6d2;font-size:12px;}
.statistics-axis-label{fill:#cde5fa;font-size:11px;font-weight:700;}
.statistics-axis-caption{fill:#86bddd;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;}
.statistics-grid-line{stroke:rgba(220,238,255,.24);stroke-width:1;}


/* v0.9.13 — image-backed Home bar icons */
.nav-icon.homebar-icon{
  width:24px;
  height:24px;
  display:inline-grid;
  place-items:center;
  flex:0 0 24px;
}
.nav-icon.homebar-icon img{
  width:22px;
  height:22px;
  display:block;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.35));
}
.nav:hover .nav-icon.homebar-icon img,
.nav.active .nav-icon.homebar-icon img{
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.42)) brightness(1.08);
}
body.left-collapsed .nav-icon.homebar-icon{
  width:30px;
  height:30px;
  flex-basis:30px;
}
body.left-collapsed .nav-icon.homebar-icon img{
  width:26px;
  height:26px;
}

/* Guidevault 0.9.14 - home-bar magazine icon and shelf badge cleanup */
.nav-icon.homebar-icon img.homebar-icon-missing{
  opacity:.25;
  filter:none;
}


/* Guidevault 0.9.15 - Library menu layout refresh */
.group-mode #grid{
  grid-template-columns:repeat(auto-fill,minmax(360px,1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
.group-hub-panel{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  margin:2px 0 8px;
  padding:20px 22px;
  border:1px solid rgba(88,151,255,.18);
  border-radius:22px;
  background:
    radial-gradient(circle at 18% 0%,rgba(47,129,255,.18),transparent 36%),
    linear-gradient(135deg,rgba(13,26,40,.94),rgba(7,14,22,.86));
  box-shadow:0 18px 54px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
}
.group-hub-copy span{
  display:block;
  margin-bottom:6px;
  color:#77b5ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.group-hub-copy h2{
  margin:0 0 6px;
  font-size:24px;
}
.group-hub-copy p{
  margin:0;
  max-width:760px;
  color:#9fb2ca;
}
.group-hub-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(96px,1fr));
  gap:10px;
}
.group-hub-stats div{
  min-width:102px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:16px;
  background:rgba(255,255,255,.035);
  text-align:center;
}
.group-hub-stats strong{
  display:block;
  font-size:20px;
  line-height:1.1;
}
.group-hub-stats span{
  display:block;
  margin-top:4px;
  color:#8ea0b6;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.category-card.category-card-redesign,
.group-mode.magazine-mode .category-card.category-card-redesign{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 138px!important;
  gap:18px!important;
  min-height:168px!important;
  padding:18px!important;
  align-items:stretch!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(47,129,255,.14),transparent 38%),
    linear-gradient(135deg,rgba(14,27,42,.95),rgba(8,14,22,.98))!important;
  border:1px solid rgba(128,178,255,.14)!important;
  border-radius:22px!important;
  box-shadow:0 18px 44px rgba(0,0,0,.22)!important;
}
.category-card.category-card-redesign:hover{
  border-color:rgba(88,162,255,.58)!important;
  box-shadow:0 22px 62px rgba(0,0,0,.34),0 0 0 1px rgba(88,162,255,.16)!important;
}
.category-card-content{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
}
.category-title-line{
  display:flex;
  gap:12px;
  align-items:flex-start;
  min-width:0;
}
.category-platform-mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  flex:0 0 44px;
}
.category-platform-mark .platform-icon.large{
  width:40px!important;
  height:40px!important;
  margin:0!important;
  flex:0 0 auto!important;
}
.category-card-redesign .category-title{
  margin:0!important;
  font-size:20px!important;
  line-height:1.18!important;
}
.category-card-redesign .category-title-line p{
  margin:6px 0 0;
  color:#93a9c3;
}
.category-card-facts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.category-card-facts span{
  padding:5px 9px;
  border:1px solid rgba(88,162,255,.18);
  border-radius:999px;
  background:rgba(88,162,255,.08);
  color:#c9def7;
  font-size:12px;
}
.category-latest{
  display:block;
  max-width:100%;
  color:#879bb4!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:none!important;
  letter-spacing:0!important;
}
.category-preview-strip{
  position:relative;
  min-height:132px;
  border-radius:17px;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(22,36,53,.92),rgba(5,10,16,.94));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),10px 10px 0 rgba(255,255,255,.025);
}
.category-preview-strip img{
  position:absolute;
  width:74px;
  height:104px;
  top:14px;
  left:calc(16px + (var(--slot) * 20px));
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 12px 28px rgba(0,0,0,.38);
  transform:rotate(calc((var(--slot) - 1.5) * 2deg));
}
.category-preview-strip img:nth-child(1){z-index:4;}
.category-preview-strip img:nth-child(2){z-index:3;}
.category-preview-strip img:nth-child(3){z-index:2;}
.category-preview-strip img:nth-child(4){z-index:1;opacity:.72;filter:saturate(.85) brightness(.9)}
.category-preview-strip img.cover-loading[data-cover-priority="secondary"]{opacity:0;}
.category-preview-strip img.cover-missing{display:none!important;}
.category-preview-empty{
  height:100%;
  display:grid;
  place-items:center;
  opacity:.78;
}
.category-preview-empty .platform-icon.large{
  width:52px!important;
  height:52px!important;
}
.category-card-redesign.nes-manual-category .category-preview-strip{
  min-height:112px;
}
.category-card-redesign.nes-manual-category .category-preview-strip img{
  width:88px;
  height:62px;
  top:26px;
}
@media(max-width:1180px){
  .group-hub-panel{grid-template-columns:1fr;}
  .group-hub-stats{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:760px){
  .group-mode #grid{grid-template-columns:1fr!important;}
  .category-card.category-card-redesign,
  .group-mode.magazine-mode .category-card.category-card-redesign{grid-template-columns:1fr!important;}
  .category-preview-strip{min-height:118px;}
  .group-hub-stats{grid-template-columns:1fr;}
}


/* Guidevault 0.9.16 - Library Hub Subtitle Spacing Cleanup */
.library-view.group-mode #gridTitle{
  display:none!important;
}
.library-view.group-mode #grid,
.library-view.group-mode #libraryGridScroll .grid{
  margin-top:0!important;
  padding-top:0!important;
}
.library-view.group-mode .group-hub-panel{
  margin-top:0!important;
}

/* Guidevault 0.9.17 - Login wallpaper, category browsing modes, and cover-size slider */
:root{
  --gv-cover-scale:1;
  --gv-card-min:calc(150px * var(--gv-cover-scale));
  --gv-category-card-min:calc(300px * var(--gv-cover-scale));
}
.login-view{
  background:
    radial-gradient(circle at 50% 12%, rgba(47,129,255,.24), transparent 34%),
    linear-gradient(180deg, rgba(7,16,24,.42), rgba(5,9,14,.88) 72%),
    url('/assets/backgrounds/loginwallpaper.png'),
    linear-gradient(180deg,#101b28,#05090e 72%)!important;
  background-size:auto, auto, cover, auto!important;
  background-position:center, center, center!important;
  background-repeat:no-repeat!important;
}
.login-card{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.category-side-section{
  padding-top:14px!important;
}
.category-side-heading{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.category-structure-select{
  width:100%;
  min-width:0;
  padding:8px 9px!important;
  border-radius:9px!important;
  border-color:rgba(92,166,255,.28)!important;
  background:linear-gradient(180deg,rgba(17,31,45,.95),rgba(8,15,23,.96))!important;
  color:#dcecff!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
}
.category-mini-icon{
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  color:#7ec7ff;
  opacity:.9;
  flex:0 0 auto;
}
body.left-collapsed .category-side-heading,
body.left-collapsed .category-structure-select{
  display:none!important;
}
.category-group.collapsed .category-body{
  display:none!important;
}
.library-heading-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  min-width:0;
}
.cover-size-control,
.library-sort-control{
  display:flex!important;
  align-items:center;
  gap:7px;
  margin:0!important;
  padding:4px 8px;
  min-height:34px;
  border:1px solid rgba(92,166,255,.28);
  border-radius:8px;
  background:rgba(13,27,42,.84);
  color:#cce4f9!important;
  white-space:nowrap;
}
.cover-size-control span,
.cover-size-control em{
  font-size:12px;
  font-style:normal;
  font-weight:750;
  color:#a8c8e2;
}
.library-sort-control{
  height:34px;
  min-height:34px;
}
.library-sort-control span{
  font-size:11.5px;
  font-style:normal;
  font-weight:600;
  letter-spacing:0;
  color:#a8c8e2;
}
.cover-size-control input[type="range"]{
  width:112px;
  accent-color:#4ea4ff;
}

.library-sort-control select{
  width:112px;
  min-width:112px;
  max-width:112px;
  height:24px;
  line-height:24px;
  padding:0 18px 0 0;
  border:0;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  outline:0;
}
.grid{
  grid-template-columns:repeat(auto-fill,minmax(max(120px,var(--gv-card-min)),1fr))!important;
}
.category-mode .grid{
  grid-template-columns:repeat(auto-fill,minmax(max(140px,calc(180px * var(--gv-cover-scale))),1fr))!important;
}
.category-mode.magazine-mode .grid{
  grid-template-columns:repeat(auto-fill,minmax(max(160px,calc(210px * var(--gv-cover-scale))),1fr))!important;
}
.home-shelf-row{
  grid-template-columns:repeat(6,minmax(max(86px,calc(96px * var(--gv-cover-scale))),1fr))!important;
}
.group-mode #grid{
  grid-template-columns:repeat(auto-fill,minmax(max(260px,var(--gv-category-card-min)),1fr))!important;
}
.group-mode.magazine-mode #grid{
  grid-template-columns:repeat(auto-fill,minmax(max(270px,calc(320px * var(--gv-cover-scale))),1fr))!important;
}
@media(max-width:900px){
  .heading-row{align-items:flex-start;gap:12px;}
  .library-heading-controls{flex-wrap:wrap;}
  .cover-size-control input[type="range"]{width:92px;}
  .library-sort-control select{width:108px;min-width:108px;max-width:108px;}
}


/* v0.9.18 — category select theme, favorites, user menu, and navigation cleanup */
select,
select option,
.category-structure-select,
.category-structure-select option,
#sort option,
#metadataManagerFocus option,
#metadataManagerType option,
#metadataManagerMissing option,
#metadataManagerCategory option{
  background-color:#101b26;
  color:var(--text);
}
select option:checked,
.category-structure-select option:checked{
  background-color:#1d63d8;
  color:#ffffff;
}
.category-structure-select:focus,
#sort:focus{
  outline:2px solid rgba(88,151,255,.45);
  outline-offset:2px;
  border-color:#58a2ff;
}
.favorite{
  position:absolute;
  right:8px;
  top:8px;
  z-index:3;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(5,10,16,.55);
  color:#758397;
  cursor:pointer;
  text-shadow:none;
  transition:color .14s ease,border-color .14s ease,background .14s ease,transform .14s ease,box-shadow .14s ease;
}
.favorite:hover{
  transform:translateY(-1px);
  color:#ffd86a;
  border-color:rgba(255,216,106,.42);
  background:rgba(18,27,37,.86);
}
.favorite.active{
  color:var(--gold);
  border-color:rgba(255,210,63,.5);
  background:rgba(80,62,11,.72);
  box-shadow:0 0 18px rgba(255,210,63,.18);
}
.top-user-wrap{position:relative;display:flex;align-items:center;margin-left:2px;}
.top-user-button{height:38px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;background:rgba(16,27,38,.94);color:var(--text);padding:0 10px 0 7px;cursor:pointer;min-width:0;}
.top-user-button:hover,.top-user-button[aria-expanded="true"]{border-color:#58a2ff;background:#132235;}
.top-user-avatar{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,#2f81ff,#75b7ff);color:#06111d;font-weight:900;font-size:11px;letter-spacing:.04em;box-shadow:0 0 18px rgba(47,129,255,.24);}
.top-user-name{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;}
.top-user-caret{color:#9fb5ce;font-size:12px;}
.top-user-menu{position:absolute;right:0;top:44px;min-width:190px;z-index:30;border:1px solid #27445e;border-radius:12px;background:linear-gradient(180deg,#101d2b,#09131e);box-shadow:0 20px 60px rgba(0,0,0,.45);padding:7px;}
.top-user-menu button{width:100%;display:flex;align-items:center;gap:8px;border:0;border-radius:8px;background:transparent;color:var(--text);padding:10px 11px;text-align:left;cursor:pointer;font-weight:700;}
.top-user-menu button:hover{background:rgba(47,129,255,.18);color:#d9ecff;}
@media(max-width:900px){.top-user-name{display:none}.top-user-button{padding-right:8px}.top-user-menu{right:-4px}}

/* v0.9.19 — top-right user menu alignment and guide metadata controls */
.topbar{
  display:grid!important;
  grid-template-columns:minmax(260px,520px) minmax(0,1fr) 40px 40px minmax(150px,max-content)!important;
  align-items:center!important;
  column-gap:10px!important;
  height:66px!important;
}
.topbar .search{
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  max-width:520px!important;
  min-width:220px!important;
  margin:0!important;
}
.task-monitor-wrap{
  grid-column:3!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  margin:0!important;
  order:initial!important;
}
#settingsBtn{
  grid-column:4!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  order:initial!important;
}
.top-user-wrap{
  grid-column:5!important;
  grid-row:1!important;
  justify-self:end!important;
  align-self:center!important;
  margin-left:0!important;
  position:relative!important;
  min-width:0!important;
}
.top-user-button{
  max-width:230px!important;
  height:38px!important;
  background:linear-gradient(180deg,rgba(18,32,47,.96),rgba(10,20,31,.96))!important;
  border-color:rgba(90,145,201,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.top-user-menu{
  right:0!important;
  top:46px!important;
}
.edit-grid select[multiple]#editGuideType{
  min-height:148px!important;
  padding:8px!important;
  line-height:1.35!important;
}
.edit-grid select[multiple]#editGuideType option{
  padding:7px 9px!important;
  border-radius:6px!important;
}
.edit-grid select[multiple]#editGuideType option:checked{
  background:linear-gradient(180deg,#3387ff,#1d62d6)!important;
  color:#fff!important;
}
.field-help{
  display:block!important;
  margin-top:6px!important;
  color:#8ea0b6!important;
  font-size:12px!important;
  line-height:1.35!important;
}
@media(max-width:1100px){
  .topbar{grid-template-columns:minmax(200px,1fr) 40px 40px 48px!important;column-gap:8px!important;}
  .topbar .search{grid-column:1!important;min-width:0!important;}
  .task-monitor-wrap{grid-column:2!important;}
  #settingsBtn{grid-column:3!important;}
  .top-user-wrap{grid-column:4!important;}
  .top-user-name,.top-user-caret{display:none!important;}
  .top-user-button{width:40px!important;padding:0!important;justify-content:center!important;}
}


/* v0.9.20 — metadata dropdown cleanup and borderless user control */
.metadata-hidden-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.meta-multi-select{
  position:relative;
  margin-top:6px;
  width:100%;
}
.meta-multi-button{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border:1px solid rgba(66,116,167,.58);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(18,34,51,.98),rgba(8,18,30,.98));
  color:#dcecff;
  padding:9px 11px;
  cursor:pointer;
  font:inherit;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 24px rgba(0,0,0,.2);
}
.meta-multi-button:hover,
.meta-multi-button[aria-expanded="true"]{
  border-color:#5ba6ff;
  background:linear-gradient(180deg,rgba(27,53,79,.98),rgba(10,24,40,.98));
  box-shadow:0 0 0 1px rgba(47,129,255,.18),0 13px 30px rgba(0,0,0,.28);
}
.meta-multi-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
}
.meta-multi-caret{color:#8ebdff;font-size:12px;flex:0 0 auto;}
.meta-multi-panel{
  position:absolute;
  z-index:80;
  left:0;
  right:0;
  top:calc(100% + 6px);
  display:none;
  max-height:260px;
  overflow:auto;
  border:1px solid rgba(65,122,180,.72);
  border-radius:12px;
  background:linear-gradient(180deg,#102338,#071321);
  box-shadow:0 20px 52px rgba(0,0,0,.52),0 0 0 1px rgba(47,129,255,.08) inset;
  padding:7px;
}
.meta-multi-select.open .meta-multi-panel{display:block;}
.meta-multi-option{
  display:flex!important;
  align-items:center;
  gap:9px;
  padding:8px 9px!important;
  border-radius:9px;
  color:#d7e9ff!important;
  cursor:pointer;
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  margin:0!important;
}
.meta-multi-option:hover{background:rgba(47,129,255,.16);}
.meta-multi-option input{
  width:15px!important;
  height:15px!important;
  accent-color:#2f81ff;
  flex:0 0 auto;
}
.meta-multi-option span{line-height:1.25;}
.edit-grid select#editEsrbRating{
  background:#0b1724!important;
  color:#dcecff!important;
  border-color:rgba(66,116,167,.58)!important;
}
.edit-grid select#editEsrbRating option{
  background:#0b1724!important;
  color:#dcecff!important;
}
.top-user-button,
.top-user-button:hover,
.top-user-button[aria-expanded="true"]{
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  padding:0 2px!important;
  height:40px!important;
}
.top-user-button:hover .top-user-name,
.top-user-button[aria-expanded="true"] .top-user-name{color:#d9ecff!important;}
.top-user-avatar{
  box-shadow:0 0 14px rgba(47,129,255,.22)!important;
}
.top-user-name{
  text-shadow:0 1px 8px rgba(0,0,0,.35)!important;
}
@media(max-width:1100px){
  .top-user-button{width:40px!important;justify-content:center!important;}
}


/* Docker/server folder browser */
.folder-browse-dialog::backdrop { background: rgba(2, 8, 22, .72); backdrop-filter: blur(7px); }
.folder-browse-card { max-width: 820px; }
.folder-browse-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.folder-browse-current { margin: 14px 0; padding: 12px 14px; border: 1px solid rgba(63, 178, 255, .24); border-radius: 14px; background: linear-gradient(135deg, rgba(8, 26, 54, .82), rgba(7, 15, 35, .72)); display: grid; gap: 4px; }
.folder-browse-current span { color: rgba(220, 238, 255, .62); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.folder-browse-current strong { color: #eaf6ff; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.folder-browse-quick-roots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.folder-browse-root { border: 1px solid rgba(66, 178, 255, .32); border-radius: 999px; background: rgba(15, 53, 94, .42); color: #e8f6ff; padding: 7px 11px; cursor: pointer; }
.folder-browse-root:hover { border-color: rgba(99, 201, 255, .70); background: rgba(34, 103, 164, .55); }
.folder-browse-list { max-height: 340px; overflow: auto; display: grid; gap: 8px; padding: 4px 4px 8px; }
.folder-browse-entry { width: 100%; display: grid; grid-template-columns: 28px 1fr; grid-template-areas: 'icon name' 'icon path'; align-items: center; gap: 2px 10px; text-align: left; border: 1px solid rgba(98, 170, 236, .20); border-radius: 14px; background: rgba(8, 20, 44, .60); color: #f0f8ff; padding: 10px 12px; cursor: pointer; }
.folder-browse-entry:hover { border-color: rgba(89, 195, 255, .58); background: rgba(13, 54, 98, .76); }
.folder-browse-icon { grid-area: icon; color: #56c8ff; font-size: 1.05rem; }
.folder-browse-entry span:not(.folder-browse-icon) { grid-area: name; font-weight: 700; }
.folder-browse-entry small { grid-area: path; color: rgba(218, 236, 255, .62); font-size: .76rem; word-break: break-all; }
.folder-browse-empty { border: 1px dashed rgba(119, 180, 240, .26); border-radius: 14px; padding: 22px; text-align: center; color: rgba(221, 237, 255, .66); }


/* v0.9.24: Login cleanup + reader keyboard focus polish */
.login-card .login-form h1.hidden,
.login-card .login-brand .sub.hidden,
.login-card .login-help.hidden{
  display:none!important;
}
.login-card .login-brand{
  margin-bottom:18px!important;
}
.login-card .login-form h1.hidden + label{
  margin-top:0!important;
}
.reader-view .page-hit,
.reader-view .page-hit:hover,
.reader-view .page-hit:active,
.reader-view .page-hit:focus,
.reader-view .page-hit:focus-visible{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  -webkit-tap-highlight-color:transparent!important;
}
.reader-view .page-hit::-moz-focus-inner{
  border:0!important;
  padding:0!important;
}
.reader-view .page-hit:focus-visible::before,
.reader-view .page-hit:focus-visible::after{
  outline:0!important;
  box-shadow:none!important;
}
.reader-view .page-hit[tabindex="-1"]{
  user-select:none!important;
}


/* v0.9.25: Reader hit-zone overlay cleanup.
   The invisible click zones are no longer allowed to render native button focus/active
   visuals. They remain clickable overlays only and briefly ignore pointer events after
   keyboard navigation while the browser exits any stale focus state. */
#readerView .page-hit,
#readerView .page-hit.left,
#readerView .page-hit.center,
#readerView .page-hit.right,
#readerView .page-hit:hover,
#readerView .page-hit:active,
#readerView .page-hit:focus,
#readerView .page-hit:focus-visible{
  appearance:none!important;
  -webkit-appearance:none!important;
  -moz-appearance:none!important;
  display:block!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0!important;
  outline-color:transparent!important;
  box-shadow:none!important;
  background:transparent!important;
  background-color:transparent!important;
  color:transparent!important;
  caret-color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  text-shadow:none!important;
  border-radius:0!important;
  opacity:1!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-tap-highlight-color:transparent!important;
}
#readerView .page-hit::before,
#readerView .page-hit::after,
#readerView .page-hit:focus::before,
#readerView .page-hit:focus::after,
#readerView .page-hit:focus-visible::before,
#readerView .page-hit:focus-visible::after{
  display:none!important;
  content:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
#readerView.reader-key-action-cleanup .page-hit{
  pointer-events:none!important;
}
#readerStage,
#readerStage:focus,
#readerStage:focus-visible,
#book,
#book:focus,
#book:focus-visible{
  outline:0!important;
  box-shadow:none!important;
}

/* v0.9.26 — stable update notification and performance diagnostics */
.update-notify-button{
  position:relative!important;
  margin-left:10px!important;
  color:#dff0ff!important;
  background:linear-gradient(180deg,rgba(47,129,255,.42),rgba(18,62,116,.72))!important;
  box-shadow:0 0 0 1px rgba(122,180,255,.45),0 10px 26px rgba(47,129,255,.18)!important;
}
.update-notify-button:not(.hidden){
  animation:guidevaultUpdatePulse 2.2s ease-in-out infinite;
}
.update-notify-badge{
  position:absolute!important;
  right:-5px!important;
  top:-5px!important;
  min-width:17px!important;
  height:17px!important;
  padding:0 4px!important;
  border-radius:999px!important;
  background:#2f81ff!important;
  color:white!important;
  font-size:10px!important;
  line-height:17px!important;
  font-weight:900!important;
}
.update-notify-button:not(.hidden) .update-notify-badge{display:block!important;}
@keyframes guidevaultUpdatePulse{
  0%,100%{box-shadow:0 0 0 1px rgba(122,180,255,.45),0 10px 26px rgba(47,129,255,.18)}
  50%{box-shadow:0 0 0 1px rgba(180,220,255,.85),0 14px 34px rgba(47,129,255,.34),0 0 26px rgba(47,129,255,.24)}
}
.system-update-notice{
  max-width:900px;
  border-radius:14px;
  padding:16px 18px;
  background:linear-gradient(180deg,rgba(31,82,139,.62),rgba(14,35,66,.82));
  box-shadow:0 0 0 1px rgba(88,162,255,.36),0 18px 38px rgba(0,0,0,.22);
  color:#e8f2ff;
}
.system-update-notice[data-status="available"]{
  box-shadow:0 0 0 1px rgba(122,180,255,.72),0 20px 44px rgba(0,0,0,.24),0 0 30px rgba(47,129,255,.22);
}
.system-update-notice-main{
  display:grid;
  gap:6px;
}
.system-update-notice-main strong{
  font-size:20px;
  color:#f2f8ff;
}
.system-update-notice-main span,
.system-update-notes{
  color:#b9cce4;
  font-size:14px;
}
.system-update-notes{
  margin:12px 0 0 18px;
  padding:0;
}
.system-diagnostic-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.system-diagnostic-actions .ghost,
.system-diagnostic-actions a.ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 12px;
  text-decoration:none;
}
.system-performance-grid strong{
  font-variant-numeric:tabular-nums;
}

/* v0.9.31 — account avatar, server settings, email/users/tasks, and custom side nav */
.top-user-avatar.has-image,
.account-avatar-preview.has-image{
  background-position:center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  color:transparent!important;
  text-indent:-999px;
  overflow:hidden;
}
.account-avatar-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px;
  border:1px solid rgba(88,162,255,.18);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(20,38,66,.62),rgba(12,24,42,.82));
  margin:14px 0;
}
.account-avatar-preview{
  width:74px;
  height:74px;
  flex:0 0 74px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#2f81ff,#9ad7ff);
  color:#06111d;
  font-weight:900;
  font-size:22px;
  letter-spacing:.05em;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 34px rgba(0,0,0,.25);
}
.account-avatar-copy{display:grid;gap:5px;min-width:0;}
.account-avatar-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px;}
.custom-side-nav-items{
  display:grid;
  gap:6px;
  padding:8px 0 0;
  margin-top:8px;
  border-top:1px solid rgba(125,170,219,.12);
}
.custom-side-nav-items.hidden{display:none!important;}
.custom-side-nav-button span:first-child{opacity:.82;min-width:18px;text-align:center;}
.side-nav-builder-grid,
.server-settings-grid,
.tasks-schedule-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
}
.side-nav-builder-grid label,
.server-settings-grid label,
.tasks-schedule-grid label,
.email-settings-card label,
.server-settings-card label{
  display:grid;
  gap:7px;
  color:#dfeaff;
  font-weight:800;
}
.side-nav-builder-grid input,
.side-nav-builder-grid select,
.server-settings-grid input,
.server-settings-grid select,
.tasks-schedule-grid input,
.tasks-schedule-grid select,
#mediaBookmarksDirectory{
  min-height:42px;
  border:1px solid rgba(130,170,220,.32);
  border-radius:10px;
  background:#111d2d;
  color:#eaf3ff;
  padding:0 12px;
}
.custom-side-nav-list,
.users-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.custom-side-nav-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid rgba(110,164,232,.18);
  border-radius:14px;
  background:rgba(11,22,39,.72);
}
.custom-side-nav-icon{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(100,161,255,.14);
  color:#b9dbff;
}
.notice-card{
  border-color:rgba(255,194,91,.52)!important;
  background:linear-gradient(135deg,rgba(85,56,14,.42),rgba(19,29,46,.9))!important;
  color:#fff3c7!important;
  font-weight:800;
}
.email-checkbox,
.inline-check{
  display:flex!important;
  align-items:center;
  gap:8px;
  margin-top:10px;
  color:#dfeaff;
}
.checkbox-list{
  min-height:130px;
  display:grid;
  align-content:start;
  gap:8px;
  padding:12px;
  border:1px solid rgba(91,141,201,.18);
  border-radius:14px;
  background:rgba(9,20,36,.72);
}
.users-permission-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin-top:14px;
}
.user-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.8fr);
  gap:14px;
  align-items:start;
}
.user-chip-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.user-chip-list span{
  border:1px solid rgba(138,176,224,.18);
  border-radius:999px;
  padding:6px 10px;
  background:rgba(24,43,68,.74);
  color:#c8d8eb;
  font-size:12px;
  max-width:100%;
}
.ad-hoc-task-list{
  display:grid;
  grid-template-columns:minmax(190px,max-content) minmax(0,1fr);
  gap:12px 18px;
  align-items:center;
}
.ad-hoc-task-list p{margin:0;color:#93a5bb;}
@media(max-width:800px){
  .account-avatar-row,.user-card{grid-template-columns:1fr;display:grid;}
  .account-avatar-actions,.user-chip-list{justify-content:flex-start;}
  .custom-side-nav-row,.ad-hoc-task-list{grid-template-columns:1fr;}
}

/* v0.9.32 — settings refinement: open avatar layout, stronger side-nav builder, cleaner server general */
.account-avatar-row.account-avatar-open-row{
  border:0!important;
  background:transparent!important;
  padding:6px 0 12px!important;
  margin:8px 0 18px!important;
  border-radius:0!important;
  box-shadow:none!important;
  align-items:center!important;
  gap:24px!important;
}
.account-avatar-row.account-avatar-open-row .account-avatar-preview{
  width:118px!important;
  height:118px!important;
  flex-basis:118px!important;
  font-size:34px!important;
  border:3px solid rgba(146,196,255,.42);
  box-shadow:0 0 0 4px rgba(72,132,255,.08),0 24px 44px rgba(0,0,0,.32);
}
.account-avatar-row.account-avatar-open-row .account-avatar-copy{
  align-content:center;
  gap:8px;
}
.account-avatar-row.account-avatar-open-row .account-avatar-copy strong{
  font-size:18px;
}
.account-avatar-row.account-avatar-open-row .account-avatar-copy .sub{
  max-width:620px;
  margin:0 0 2px;
}
.account-avatar-actions.settings-actions.inline-actions{
  margin-top:4px;
}
.side-nav-layout-grid{
  display:grid;
  grid-template-columns:minmax(320px,1.1fr) minmax(300px,.9fr);
  gap:18px;
  align-items:start;
}
.side-nav-builder-card{
  border:1px solid rgba(107,161,232,.18);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(12,25,44,.86),rgba(8,17,31,.96));
  padding:18px;
}
.side-nav-card-heading{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:14px;
}
.side-nav-card-heading h3{
  margin:0 0 4px;
  font-size:20px;
}
.side-nav-card-heading .sub{
  margin:0;
}
.side-nav-card-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(123,173,255,.14);
  color:#cfe4ff;
  border:1px solid rgba(132,184,255,.18);
  font-size:20px;
  flex:0 0 38px;
}
.side-nav-builder-grid.refined{
  grid-template-columns:repeat(2,minmax(180px,1fr));
}
.side-nav-builder-grid.refined label:first-child,
.side-nav-builder-grid.refined label:nth-child(3){
  grid-column:1 / -1;
}
.side-nav-help-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:14px 0 4px;
}
.side-nav-help-grid div{
  border:1px solid rgba(127,170,220,.14);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(255,255,255,.035);
}
.side-nav-help-grid strong{
  display:block;
  margin-bottom:2px;
  color:#edf6ff;
}
.side-nav-help-grid span{
  display:block;
  color:#90a5bd;
  font-size:12px;
}
.custom-side-nav-button{
  justify-content:flex-start!important;
  text-align:left!important;
}
.custom-side-nav-button .custom-list-icon{
  width:24px;
  min-width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(143,188,255,.12);
  color:#cfe4ff;
  font-size:15px;
}
.custom-side-nav-button .nav-label{
  text-align:left!important;
}
.custom-side-nav-button em{
  margin-left:auto;
  opacity:.82;
}
.custom-side-nav-row{
  grid-template-columns:42px minmax(0,1fr) auto!important;
  padding:14px!important;
}
.custom-side-nav-icon{
  width:42px!important;
  height:42px!important;
  font-size:20px;
  background:linear-gradient(135deg,rgba(90,152,255,.2),rgba(148,90,255,.12))!important;
}
.custom-side-nav-row-copy strong{
  display:block;
  font-size:16px;
  margin-bottom:3px;
}
.custom-side-nav-row-copy .sub{
  margin:0 0 8px;
}
.custom-side-nav-chipline{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.custom-side-nav-chipline span{
  border:1px solid rgba(139,179,224,.18);
  border-radius:999px;
  padding:4px 8px;
  background:rgba(26,46,72,.68);
  color:#c2d4e8;
  font-size:12px;
}
.settings-side-nav .settings-nav,
.settings-side-nav .settings-subnav,
.settings-side-back{
  justify-content:flex-start!important;
  text-align:left!important;
}
.server-general-title-row{
  align-items:flex-start!important;
}
.server-general-notice{
  margin-bottom:16px;
}
.server-general-card{
  padding:0!important;
  overflow:hidden;
}
.server-general-section{
  padding:20px 22px;
  border-bottom:1px solid rgba(116,156,207,.16);
}
.server-general-section:last-of-type{
  border-bottom:0;
}
.server-general-section-head{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.server-general-section-head h2{
  margin:0 0 4px;
  font-size:25px;
}
.server-general-section-head .sub{
  margin:0;
}
.server-section-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  color:#cfe4ff;
  background:linear-gradient(135deg,rgba(71,135,255,.22),rgba(161,94,255,.14));
  border:1px solid rgba(141,186,255,.2);
  font-size:21px;
}
.server-network-grid{
  grid-template-columns:repeat(2,minmax(240px,1fr));
}
.server-maintenance-grid{
  grid-template-columns:2fr 1fr;
}
.server-settings-grid .field-help{
  display:block;
  color:#8293aa;
  font-weight:600;
  font-size:12.5px;
  line-height:1.35;
}
.server-maintenance-actions{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:16px;
  padding:14px;
  border:1px solid rgba(126,170,224,.14);
  border-radius:14px;
  background:rgba(9,20,35,.56);
}
.server-maintenance-actions .sub{
  margin:0;
}
.server-general-actions{
  padding:0 22px 22px;
  margin-top:0!important;
}
.server-general-card #serverSettingsStatus{
  padding:0 22px 22px;
}
.server-summary-grid{
  margin-top:16px;
}
@media(max-width:980px){
  .side-nav-layout-grid,
  .server-network-grid,
  .server-maintenance-grid{
    grid-template-columns:1fr;
  }
  .side-nav-help-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:800px){
  .account-avatar-row.account-avatar-open-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    justify-items:start;
  }
  .custom-side-nav-row{
    grid-template-columns:42px 1fr!important;
  }
  .custom-side-nav-row button{
    grid-column:1 / -1;
    width:max-content;
  }
  .server-maintenance-actions{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* v0.9.33 — email, users, and tasks refinement */
.settings-card-heading-row{
  display:flex;
  gap:14px;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px;
}
.settings-card-heading-row h2{
  margin:0 0 4px;
  font-size:24px;
}
.settings-card-heading-row .sub{margin:0;}
.email-title-row,
.users-title-row,
.tasks-title-row{align-items:flex-start!important;}
.email-health-card{
  min-width:170px;
  border:1px solid rgba(126,170,224,.18);
  border-radius:16px;
  background:rgba(11,23,40,.72);
  padding:12px 14px;
  display:grid;
  gap:4px;
  color:#dfeaff;
}
.email-health-card strong{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#a9caff;}
.email-health-card span{font-size:12px;color:#91a5bd;line-height:1.35;}
.email-notice-card{margin-bottom:16px;}
.email-layout-grid{
  display:grid;
  grid-template-columns:minmax(360px,1fr) minmax(360px,1fr);
  gap:18px;
  align-items:start;
}
.email-compose-card,
.email-template-card,
.email-preview-card,
.email-test-card{min-width:0;}
.email-refined-grid{grid-template-columns:repeat(2,minmax(180px,1fr));}
.email-refined-grid label:first-child,
.email-refined-grid label:nth-child(2){grid-column:auto;}
.email-toggle-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;}
.email-template-fields{grid-template-columns:1fr 1fr;}
.email-template-fields label:first-child{grid-column:1 / -1;}
.template-body-label{
  display:grid;
  gap:7px;
  color:#dfeaff;
  font-weight:800;
  margin-top:14px;
}
.template-body-label textarea,
.email-template-fields input,
.email-template-fields select,
.email-test-card input,
.users-identity-grid input,
.users-identity-grid select,
.task-setting-card input,
.task-setting-card select{
  border:1px solid rgba(130,170,220,.32);
  border-radius:10px;
  background:#111d2d;
  color:#eaf3ff;
  padding:10px 12px;
}
.template-body-label textarea{
  min-height:230px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:13px;
  line-height:1.45;
}
.template-token-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.template-token-row span{
  border:1px solid rgba(139,179,224,.18);
  border-radius:999px;
  padding:5px 9px;
  background:rgba(28,49,76,.7);
  color:#c7d9ee;
  font-size:12px;
}
.email-template-preview-frame{
  width:100%;
  min-height:330px;
  max-height:520px;
  overflow:auto;
  box-sizing:border-box;
  border:1px solid rgba(132,176,230,.22);
  border-radius:14px;
  background:#fff;
  color:#111827;
  padding:18px;
  font-family:Arial,system-ui,sans-serif;
  line-height:1.55;
}
.email-template-preview-frame *{box-sizing:border-box;}
.email-template-preview-frame h1,
.email-template-preview-frame h2,
.email-template-preview-frame h3{color:#111827;margin:0 0 12px;line-height:1.2;}
.email-template-preview-frame p{margin:0 0 12px;color:#1f2937;}
.email-template-preview-frame a{color:#2563eb;}
.email-template-preview-frame pre{margin:0;white-space:pre-wrap;font-family:system-ui,Segoe UI,sans-serif;line-height:1.45;color:#111827;}
.email-template-preview-frame.plain-text-preview{font-family:system-ui,Segoe UI,sans-serif;}
.email-preview-subject{
  display:grid;
  gap:4px;
  border:1px solid rgba(132,176,230,.16);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:12px;
  background:rgba(9,20,35,.56);
}
.email-preview-subject span{color:#91a5bd;font-size:12px;text-transform:uppercase;letter-spacing:.08em;}
.email-preview-subject strong{color:#f4f8ff;}
.email-test-card label{
  display:grid;
  gap:7px;
  color:#dfeaff;
  font-weight:800;
}
.users-layout-grid{
  display:grid;
  grid-template-columns:minmax(420px,1fr) minmax(250px,.42fr);
  gap:18px;
  align-items:start;
}
.users-identity-grid{grid-template-columns:repeat(2,minmax(180px,1fr));}
.refined-permission-grid section{
  min-width:0;
}
.permission-section-title{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-end;
  margin-bottom:8px;
}
.permission-section-title h3{margin:0;font-size:18px;}
.permission-section-title span{color:#91a5bd;font-size:12px;max-width:260px;text-align:right;}
.refined-checkbox-list{min-height:170px;max-height:260px;overflow:auto;}
.refined-checkbox-list .inline-check{margin-top:0;}
.users-help-card h2{margin-top:0;}
.users-help-list{display:grid;gap:12px;}
.users-help-list div{
  border:1px solid rgba(130,170,220,.14);
  border-radius:14px;
  padding:12px;
  background:rgba(10,22,38,.62);
}
.users-help-list strong{display:block;color:#edf6ff;margin-bottom:4px;}
.users-help-list span{display:block;color:#93a5bb;line-height:1.35;font-size:13px;}
.users-current-section{margin-top:18px;}
.refined-user-card{
  grid-template-columns:46px minmax(0,1fr) minmax(260px,.75fr)!important;
  align-items:start;
}
.user-avatar-badge{
  width:46px;
  height:46px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(94,158,255,.24),rgba(154,96,255,.18));
  color:#dcecff;
  font-weight:900;
  border:1px solid rgba(147,190,255,.24);
}
.user-card-main h3{margin:0 0 3px;}
.user-chip-list.left{justify-content:flex-start;margin-top:8px;}
.user-access-summary{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:6px 10px;
  color:#93a5bb;
  font-size:13px;
}
.user-access-summary strong{color:#dfeaff;}
.task-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(240px,1fr));
  gap:14px;
}
.task-setting-card{
  display:grid;
  gap:8px;
  border:1px solid rgba(126,170,224,.16);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(145deg,rgba(13,27,47,.82),rgba(8,18,33,.94));
  color:#dfeaff;
}
.task-setting-card span{font-weight:900;font-size:16px;}
.task-setting-card em{font-style:normal;color:#8fa2b9;font-size:12.5px;line-height:1.35;min-height:34px;}
.ad-hoc-task-tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.task-action-tile{
  border:1px solid rgba(126,170,224,.18);
  border-radius:16px;
  padding:14px;
  background:rgba(12,25,44,.78);
  color:#eaf3ff;
  text-align:left;
  display:grid;
  gap:6px;
  cursor:pointer;
}
.task-action-tile:hover{border-color:rgba(156,114,255,.48);transform:translateY(-1px);}
.task-action-tile strong{font-size:15px;}
.task-action-tile span{color:#91a5bd;font-size:12.5px;line-height:1.35;}
.email-history-list{display:grid;gap:10px;}
.email-history-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,max-content);
  gap:12px;
  align-items:start;
}
.email-history-main{display:grid;gap:4px;}
.email-history-main strong{color:#f4f8ff;}
.email-history-main span,
.email-history-main small{color:#93a5bb;}
.email-history-meta{display:flex;gap:8px;justify-content:flex-end;align-items:center;flex-wrap:wrap;}
.email-history-meta span{
  border-radius:999px;
  padding:5px 9px;
  background:rgba(28,49,76,.82);
  border:1px solid rgba(139,179,224,.18);
  color:#d7e7fa;
  font-size:12px;
}
.email-history-meta em{font-style:normal;color:#93a5bb;font-size:12px;}
.email-history-message{grid-column:1 / -1;margin:0;}
.email-history-row[data-status="sent"] .email-history-meta span{background:rgba(38,124,80,.28);border-color:rgba(84,202,139,.32);}
.email-history-row[data-status="failed"] .email-history-meta span,
.email-history-row[data-status="blocked"] .email-history-meta span{background:rgba(149,49,49,.28);border-color:rgba(255,126,126,.32);}
@media(max-width:1050px){
  .email-layout-grid,
  .users-layout-grid,
  .task-card-grid{grid-template-columns:1fr;}
  .refined-user-card{grid-template-columns:46px minmax(0,1fr)!important;}
  .user-access-summary{grid-column:1 / -1;}
}
@media(max-width:700px){
  .email-refined-grid,
  .email-template-fields,
  .users-identity-grid{grid-template-columns:1fr;}
  .permission-section-title{display:grid;align-items:start;}
  .permission-section-title span{text-align:left;}
  .email-history-row{grid-template-columns:1fr;}
  .email-history-meta{justify-content:flex-start;}
}

/* v0.9.34 — email template preview hotfix */


/* v0.9.35 — robust email preview rendering and fallback */
.email-template-preview-host{display:block;min-height:1px;}
.email-template-preview-host h1,
.email-template-preview-host h2,
.email-template-preview-host h3{color:#111827;margin:0 0 12px;line-height:1.2;font-family:Arial,system-ui,sans-serif;}
.email-template-preview-host p{margin:0 0 12px;color:#1f2937;font-family:Arial,system-ui,sans-serif;}
.email-template-preview-host a{color:#2563eb;}
.email-preview-status{margin:8px 2px 0;color:#91a5bd;font-size:12px;}
.email-preview-empty{display:grid;gap:6px;border:1px dashed #94a3b8;border-radius:12px;padding:16px;background:#f8fafc;color:#334155;}
.email-preview-empty strong{color:#0f172a;}


/* v0.9.36 — email test/save status helper hotfix */


/* v0.9.38 — reliable personal profile navigation */
.email-provider-picker{
  margin-bottom:14px;
}
.email-provider-picker label,
.email-api-field{
  display:grid;
  gap:7px;
  color:#dfeaff;
  font-weight:800;
}
.email-provider-picker select,
.email-api-field input{
  min-height:42px;
  border:1px solid rgba(130,170,220,.32);
  border-radius:10px;
  background:#111d2d;
  color:#eaf3ff;
  padding:0 12px;
}
.email-provider-help{
  margin-top:14px;
  border:1px solid rgba(122,171,236,.18);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(8,18,32,.58);
  display:grid;
  gap:4px;
}
.email-provider-help strong{color:#dfeaff;}
.email-provider-help span{color:#92a7bf;line-height:1.45;}
.profile-view{
  padding:22px;
  overflow:auto;
  height:calc(100vh - 72px);
  background:linear-gradient(180deg,rgba(5,12,22,.12),rgba(5,10,18,.86));
}
.profile-hero{
  position:relative;
  min-height:246px;
  border-radius:2px;
  overflow:hidden;
  background:
    radial-gradient(circle at 22% 10%,rgba(151,67,238,.54),transparent 28%),
    radial-gradient(circle at 88% 30%,rgba(180,26,78,.38),transparent 32%),
    linear-gradient(135deg,#111827,#050a12 72%);
  border:1px solid rgba(117,158,215,.12);
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.profile-hero-scrim{
  position:absolute;inset:0;
  backdrop-filter:blur(10px);
  background:linear-gradient(90deg,rgba(0,0,0,.42),rgba(5,10,18,.18),rgba(0,0,0,.36));
}
.profile-hero-content{
  position:relative;
  z-index:1;
  display:flex;
  gap:28px;
  align-items:center;
  min-height:246px;
  padding:28px 34px;
}
.profile-page-avatar{
  width:180px;height:180px;flex:0 0 180px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#2f81ff,#9ad7ff);
  color:#06111d;
  font-weight:900;
  font-size:44px;
  border:4px solid #05070d;
  box-shadow:0 0 0 2px rgba(255,255,255,.2),0 22px 44px rgba(0,0,0,.42);
}
.profile-page-avatar.has-image{
  background-position:center!important;background-size:cover!important;background-repeat:no-repeat!important;color:transparent!important;text-indent:-999px;overflow:hidden;
}
.profile-identity-block{display:grid;gap:14px;min-width:0;}
.profile-name-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.profile-name-row h1{margin:0;color:#fff;font-size:34px;letter-spacing:-.03em;}
.profile-read-badge{background:#22b66b;color:#eafff4;border-radius:999px;padding:5px 10px;font-weight:900;font-size:12px;}
.profile-quick-stats{display:grid;gap:8px;color:#eef5ff;font-weight:800;}
.profile-quick-stats span{display:flex;gap:8px;align-items:baseline;}
.profile-quick-stats strong{color:#fff;}
.profile-quick-stats em{font-style:normal;color:#d9e8ff;}
.profile-tabs{display:flex;gap:0;margin:10px 0 18px;}
.profile-tab{border:0;background:transparent;color:#f5f8ff;padding:13px 20px;font-weight:900;font-size:16px;cursor:pointer;}
.profile-tab.active{background:#9556ec;color:#fff;}
.profile-panel-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
.profile-panel-heading h2{margin:0;color:#f6f8ff;font-size:26px;font-weight:700;}
.profile-panel-heading select{min-height:40px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:#121821;color:#fff;padding:0 12px;font-weight:800;}
.profile-metric-strip{display:grid;grid-template-columns:repeat(7,minmax(110px,1fr));gap:0;margin:26px 0 36px;}
.profile-metric{display:grid;place-items:center;gap:6px;min-height:80px;border-right:1px solid rgba(255,255,255,.22);color:#fff;text-align:center;}
.profile-metric:last-child{border-right:0;}
.profile-metric span{font-weight:900;color:#f6f8ff;}
.profile-metric i{font-style:normal;color:#fff;opacity:.95;}
.profile-metric strong{font-size:17px;}
.profile-activity-card{background:#101a2c;border-radius:10px;padding:18px 16px 22px;border:1px solid rgba(93,141,205,.14);}
.profile-activity-card h2{margin:12px 0 24px;color:#f6f8ff;font-size:26px;}
.profile-heatmap{overflow:auto;padding-bottom:4px;}
.profile-heatmap-months{display:grid;grid-template-columns:repeat(12,1fr);min-width:980px;margin-left:42px;color:#7e8da3;font-size:13px;margin-bottom:8px;}
.profile-heatmap-grid{display:flex;gap:8px;min-width:1020px;}
.profile-heatmap-days{display:grid;grid-template-rows:repeat(7,16px);gap:4px;width:34px;color:#8796ad;font-size:13px;}
.profile-heatmap-days span:nth-child(2){grid-row:3;}.profile-heatmap-days span:nth-child(3){grid-row:5;}.profile-heatmap-days span:nth-child(4){grid-row:7;}
.profile-heatmap-weeks{display:grid;grid-template-columns:repeat(53,16px);gap:4px;}
.profile-heatmap-week{display:grid;grid-template-rows:repeat(7,16px);gap:4px;}
.profile-heatmap-cell{width:16px;height:16px;border-radius:3px;border:1px solid rgba(80,99,132,.45);background:#101a2c;}
.profile-heatmap-cell[data-level="1"],.profile-heatmap-legend i[data-level="1"]{background:#0e4429;}
.profile-heatmap-cell[data-level="2"],.profile-heatmap-legend i[data-level="2"]{background:#006d32;}
.profile-heatmap-cell[data-level="3"],.profile-heatmap-legend i[data-level="3"]{background:#26a641;}
.profile-heatmap-cell[data-level="4"],.profile-heatmap-legend i[data-level="4"]{background:#39d353;}
.profile-heatmap-legend{display:flex;align-items:center;gap:6px;color:#7e8da3;font-size:12px;margin:14px 0 0;}
.profile-heatmap-legend i{display:inline-block;width:18px;height:18px;border-radius:3px;background:#101a2c;border:1px solid rgba(80,99,132,.45);}
.profile-recent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px;}
.profile-recent-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;border:1px solid rgba(128,172,232,.16);border-radius:14px;padding:10px;background:rgba(11,22,38,.72);}
.profile-recent-card img{width:56px;height:76px;object-fit:cover;border-radius:8px;background:#08111d;}
.profile-recent-card strong{display:block;color:#f6f8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-recent-card span{display:block;color:#8fa3bb;font-size:12px;margin-top:3px;}
.profile-top-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;}
.profile-activity-list{display:grid;gap:10px;}
.profile-activity-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:14px;align-items:center;}
.profile-activity-row strong{color:#f6f8ff;}.profile-activity-row span,.profile-activity-row em{color:#95a9c1;font-style:normal;}
@media(max-width:1000px){
  .profile-hero-content{align-items:flex-start;flex-direction:column;}
  .profile-metric-strip{grid-template-columns:repeat(2,minmax(120px,1fr));}
  .profile-metric{border-right:0;border-bottom:1px solid rgba(255,255,255,.15);}
  .profile-activity-row{grid-template-columns:1fr;}
}


/* v0.9.38 — force the personal profile page to behave as a first-class app view. */
body.profile-page-mode #libraryView,
body.profile-page-mode #settingsView,
body.profile-page-mode #detailView,
body.profile-page-mode #readerView{
  display:none!important;
  visibility:hidden!important;
}
body.profile-page-mode #profileView{
  display:block!important;
  visibility:visible!important;
  position:relative!important;
  z-index:2!important;
}
body.profile-page-mode #settingsSideNav{
  display:none!important;
}
body.profile-page-mode #mainLibraryNav,
body.profile-page-mode #categorySideSection{
  display:block!important;
}
body.profile-page-mode .main{
  min-width:0!important;
}


/* v0.9.39 — normalize inline view visibility after profile navigation. */

/* Guidevault 0.9.40 update-check notification polish */
.system-update-notice-main b{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.guidevault-update-toast{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:10050;
  display:flex;
  align-items:center;
  gap:14px;
  max-width:min(520px,calc(100vw - 48px));
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(29,68,119,.96),rgba(12,31,58,.98));
  box-shadow:0 22px 60px rgba(0,0,0,.42),0 0 0 1px rgba(122,180,255,.42),0 0 30px rgba(47,129,255,.22);
  color:#edf6ff;
}
.guidevault-update-toast.hidden{display:none!important;}
.guidevault-update-toast-icon{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:rgba(47,129,255,.24);
  color:#ffffff;
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(180,220,255,.34);
}
.guidevault-update-toast-copy{
  min-width:0;
  display:grid;
  gap:3px;
  flex:1;
}
.guidevault-update-toast-copy strong{font-size:15px;}
.guidevault-update-toast-copy span{font-size:13px;color:#b9cce4;}
.guidevault-update-toast-actions{
  display:flex;
  gap:8px;
  align-items:center;
}
.guidevault-update-toast-actions button{
  border:1px solid rgba(140,180,235,.34);
  border-radius:10px;
  padding:8px 10px;
  background:rgba(8,18,34,.42);
  color:#eaf4ff;
  font-weight:800;
  cursor:pointer;
}
.guidevault-update-toast-actions button:hover{background:rgba(47,129,255,.28);}
@media (max-width:720px){
  .guidevault-update-toast{
    left:14px;
    right:14px;
    bottom:14px;
    flex-wrap:wrap;
  }
  .guidevault-update-toast-actions{width:100%;justify-content:flex-end;}
}


/* 0.9.42 polish: stable controls, device badges, compact Metadata Manager */
.device-badge.web{
  background:#2f81ff!important;
  color:#ffffff;
}
.top-icon-button,
.update-notify-button,
.task-monitor-button,
#settingsBtn{
  border-color:rgba(72,152,255,.42)!important;
}
.top-icon-button:hover,
.update-notify-button:hover,
.task-monitor-button:hover,
#settingsBtn:hover{
  border-color:rgba(93,177,255,.88)!important;
  box-shadow:0 0 0 3px rgba(47,129,255,.18);
}
.metadata-manager-toolbar{
  padding:14px 16px!important;
}
.metadata-manager-filter-grid{
  grid-template-columns:minmax(220px,1.4fr) minmax(130px,.72fr) minmax(150px,.82fr) minmax(190px,1fr)!important;
  gap:8px!important;
  align-items:end;
  margin-bottom:8px!important;
}
.metadata-manager-filter-grid label{
  gap:4px!important;
  font-size:.74rem!important;
  letter-spacing:.01em;
}
.metadata-manager-filter-grid input,
.metadata-manager-filter-grid select{
  min-height:32px!important;
  padding:6px 8px!important;
  border-radius:8px!important;
  font-size:.82rem!important;
}
.metadata-manager-column-panel,
.metadata-manager-batch-panel{
  margin-top:8px;
  border:1px solid rgba(99,155,220,.16);
  border-radius:12px;
  background:rgba(9,19,33,.38);
  padding:0;
}
.metadata-manager-column-panel summary,
.metadata-manager-batch-panel summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:8px 10px;
  color:#ddecff;
  font-size:.86rem;
  font-weight:900;
}
.metadata-manager-column-panel summary em,
.metadata-manager-batch-panel summary em{
  color:#91a9c4;
  font-size:.74rem;
  font-style:normal;
  font-weight:700;
}
.metadata-manager-column-panel[open],
.metadata-manager-batch-panel[open]{
  padding-bottom:10px;
}
.metadata-manager-batch-grid{
  grid-template-columns:repeat(6,minmax(110px,1fr))!important;
  gap:8px!important;
  padding:10px 10px 0!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
}
.metadata-manager-batch-grid label{
  gap:4px!important;
  font-size:.72rem!important;
}
.metadata-manager-batch-grid input,
.metadata-manager-batch-grid select{
  min-height:30px!important;
  padding:5px 7px!important;
  border-radius:8px!important;
  font-size:.8rem!important;
}
.metadata-manager-batch-actions{
  padding:8px 10px 0;
  gap:8px!important;
}
.metadata-legacy-match-field{
  display:none!important;
}
@media(max-width:1200px){
  .metadata-manager-filter-grid{
    grid-template-columns:repeat(2,minmax(180px,1fr))!important;
  }
  .metadata-manager-batch-grid{
    grid-template-columns:repeat(2,minmax(150px,1fr))!important;
  }
}


/* 0.9.42 follow-up polish: blue rings, compact metadata summary, softer update status */
button:focus-visible,
.icon-button:focus-visible,
.top-icon-button:focus-visible,
button.ghost:focus-visible,
button.primary:focus-visible,
button.small-icon:focus-visible,
.settings-actions button:focus-visible,
.metadata-manager-actions button:focus-visible,
#deviceAddEmailTop:focus-visible,
#deviceAddClientTop:focus-visible,
#deviceAddUser:focus-visible,
#usersAdd:focus-visible,
#permissionsAdd:focus-visible,
button[id*="Add"]:focus-visible{
  outline:2px solid rgba(72,152,255,.95)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px rgba(47,129,255,.18)!important;
}
button.ghost,
.settings-actions button.ghost,
button[id*="Add"].ghost,
button[id*="Add"]{
  border-color:rgba(72,152,255,.58)!important;
}
button.ghost:hover,
.settings-actions button.ghost:hover,
button[id*="Add"]:hover{
  border-color:rgba(112,193,255,.92)!important;
  box-shadow:0 0 0 3px rgba(47,129,255,.16)!important;
}
.device-badge.web{
  background:#2f81ff!important;
  color:#fff!important;
}
.metadata-manager-summary{
  display:grid!important;
  grid-template-columns:repeat(7,minmax(118px,1fr))!important;
  gap:8px!important;
  margin:12px 0 16px!important;
}
.metadata-manager-summary-card,
.metadata-manager-stat,
.metadata-manager-summary > *{
  min-width:0!important;
  padding:10px 12px!important;
  min-height:62px!important;
  border-radius:12px!important;
}
.metadata-manager-summary-card span,
.metadata-manager-stat span,
.metadata-manager-summary > * span{
  font-size:.68rem!important;
  letter-spacing:.12em!important;
  line-height:1.1!important;
}
.metadata-manager-summary-card strong,
.metadata-manager-stat strong,
.metadata-manager-summary > * strong,
.metadata-manager-summary-card b,
.metadata-manager-stat b,
.metadata-manager-summary > * b{
  font-size:1.25rem!important;
  line-height:1.1!important;
}
.metadata-manager-toolbar{
  padding:12px 14px!important;
}
.metadata-manager-filter-grid{
  grid-template-columns:minmax(220px,1.4fr) minmax(125px,.72fr) minmax(145px,.82fr) minmax(180px,1fr)!important;
  gap:8px!important;
  align-items:end!important;
  margin-bottom:8px!important;
}
.metadata-manager-filter-grid label{
  gap:4px!important;
  font-size:.72rem!important;
}
.metadata-manager-filter-grid input,
.metadata-manager-filter-grid select{
  min-height:31px!important;
  padding:5px 8px!important;
  border-radius:8px!important;
  font-size:.8rem!important;
}
.metadata-legacy-match-field{
  display:none!important;
}
@media(max-width:1450px){
  .metadata-manager-summary{
    grid-template-columns:repeat(7,minmax(96px,1fr))!important;
  }
  .metadata-manager-summary-card,
  .metadata-manager-stat,
  .metadata-manager-summary > *{
    padding:8px 10px!important;
  }
}
@media(max-width:1180px){
  .metadata-manager-summary{
    grid-template-columns:repeat(4,minmax(110px,1fr))!important;
  }
}


/* 0.9.42 OPDS blue accent polish */
#opdsPanel,
#opdsSettingsPanel,
#opdsSettings,
.settings-panel-opds,
[data-settings-panel="opds"]{
  --opds-accent:#2f81ff;
  --opds-accent-strong:#5fb1ff;
  --opds-accent-soft:rgba(47,129,255,.18);
}

#opdsPanel input,
#opdsSettingsPanel input,
#opdsSettings input,
.settings-panel-opds input,
[data-settings-panel="opds"] input,
#opdsPanel select,
#opdsSettingsPanel select,
#opdsSettings select,
.settings-panel-opds select,
[data-settings-panel="opds"] select{
  border-color:rgba(72,152,255,.42)!important;
  background:rgba(7,18,31,.88)!important;
  color:#f5fbff!important;
}

#opdsPanel input:focus,
#opdsSettingsPanel input:focus,
#opdsSettings input:focus,
.settings-panel-opds input:focus,
[data-settings-panel="opds"] input:focus,
#opdsPanel select:focus,
#opdsSettingsPanel select:focus,
#opdsSettings select:focus,
.settings-panel-opds select:focus,
[data-settings-panel="opds"] select:focus{
  border-color:rgba(95,177,255,.92)!important;
  box-shadow:0 0 0 3px rgba(47,129,255,.2)!important;
  outline:none!important;
}

#opdsPanel button,
#opdsSettingsPanel button,
#opdsSettings button,
.settings-panel-opds button,
[data-settings-panel="opds"] button{
  border-color:rgba(72,152,255,.58)!important;
}

#opdsPanel button:hover,
#opdsSettingsPanel button:hover,
#opdsSettings button:hover,
.settings-panel-opds button:hover,
[data-settings-panel="opds"] button:hover{
  border-color:rgba(112,193,255,.92)!important;
  box-shadow:0 0 0 3px rgba(47,129,255,.16)!important;
}

#opdsPanel button:focus-visible,
#opdsSettingsPanel button:focus-visible,
#opdsSettings button:focus-visible,
.settings-panel-opds button:focus-visible,
[data-settings-panel="opds"] button:focus-visible{
  outline:2px solid rgba(72,152,255,.95)!important;
  outline-offset:2px!important;
  box-shadow:0 0 0 4px rgba(47,129,255,.18)!important;
}

/* Broad switch override for the OPDS enable toggle and any remaining purple toggle state. */
input[type="checkbox"]:checked + .toggle,
.toggle input:checked + span,
.toggle-switch input:checked + span,
.switch input:checked + span,
.opds-toggle input:checked + span{
  background:linear-gradient(135deg,#2f81ff,#62bdff)!important;
  box-shadow:0 10px 28px rgba(47,129,255,.28)!important;
}

#opdsPanel .toggle,
#opdsSettingsPanel .toggle,
#opdsSettings .toggle,
.settings-panel-opds .toggle,
[data-settings-panel="opds"] .toggle,
#opdsPanel .toggle-switch,
#opdsSettingsPanel .toggle-switch,
#opdsSettings .toggle-switch,
.settings-panel-opds .toggle-switch,
[data-settings-panel="opds"] .toggle-switch{
  border-color:rgba(72,152,255,.56)!important;
}

/* Some OPDS URL fields are read-only/masked. Keep them dark-blue instead of purple. */
#opdsUrl,
#opdsConnectionUrl,
#opdsUrlInput,
#opdsConnectionUrlInput,
input[id*="opds"][readonly],
input[id*="Opds"][readonly]{
  background:linear-gradient(135deg,rgba(20,55,96,.92),rgba(10,25,44,.92))!important;
  border-color:rgba(72,152,255,.65)!important;
  color:#eaf5ff!important;
}

/* Make Update History collapsed state feel intentional. */
.system-update-entry:not([open]) .system-update-body{
  display:none!important;
}
.system-update-entry summary{
  cursor:pointer;
}


/* 0.9.42 Reading Profile reader defaults */
.reading-profile-check-row{
  min-height:44px;
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:10px!important;
  padding:10px 12px;
  border:1px solid rgba(72,152,255,.22);
  border-radius:12px;
  background:rgba(7,18,31,.45);
  color:#dcecff!important;
  font-weight:850;
}
.reading-profile-check-row input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color:#2f81ff;
  flex:0 0 auto;
}
.reading-profile-check-row span{
  line-height:1.25;
}
.reading-profile-zoom-row output{
  min-width:46px;
  text-align:right;
}


/* 0.9.42 hard override: exact OPDS selectors + Reading Profile visibility */
#settingsOpdsPanel{
  --opds-blue:#2f81ff;
  --opds-blue-strong:#62bdff;
  --opds-blue-soft:rgba(47,129,255,.2);
}
#settingsOpdsPanel .gv-toggle input:checked + .gv-toggle-track{
  border-color:rgba(72,152,255,.88)!important;
  background:linear-gradient(135deg,#2f81ff,#62bdff)!important;
  box-shadow:0 0 0 1px rgba(47,129,255,.32),0 16px 34px rgba(47,129,255,.24)!important;
}
#settingsOpdsPanel .gv-toggle:focus-within .gv-toggle-track{
  outline:2px solid rgba(72,152,255,.78)!important;
  outline-offset:3px!important;
}
#settingsOpdsPanel .opds-url-label input,
#settingsOpdsPanel .opds-new-key-inline input,
#settingsOpdsPanel .opds-url-key-select,
#opdsConnectionUrl,
#opdsUrlKeySelect,
#opdsNewKeyName{
  background:linear-gradient(135deg,rgba(21,68,118,.96),rgba(8,23,42,.96))!important;
  border-color:rgba(72,152,255,.72)!important;
  color:#eef8ff!important;
}
#settingsOpdsPanel .opds-url-label input:focus,
#settingsOpdsPanel .opds-new-key-inline input:focus,
#settingsOpdsPanel .opds-url-key-select:focus,
#opdsConnectionUrl:focus,
#opdsUrlKeySelect:focus,
#opdsNewKeyName:focus{
  border-color:rgba(98,189,255,.96)!important;
  box-shadow:0 0 0 3px rgba(47,129,255,.22)!important;
}
#settingsOpdsPanel button,
#settingsOpdsPanel .ghost,
#settingsOpdsPanel .primary,
#opdsCopyUrl,
#opdsEditUrl,
#opdsRevealUrl,
#opdsGenerateKey,
#opdsCreateKey{
  border-color:rgba(72,152,255,.62)!important;
}
#settingsOpdsPanel button:hover,
#settingsOpdsPanel .ghost:hover,
#settingsOpdsPanel .primary:hover,
#opdsCopyUrl:hover,
#opdsEditUrl:hover,
#opdsRevealUrl:hover,
#opdsGenerateKey:hover,
#opdsCreateKey:hover{
  border-color:rgba(112,193,255,.96)!important;
  box-shadow:0 0 0 3px rgba(47,129,255,.16)!important;
}
#settingsOpdsPanel .opds-copy-button,
#settingsOpdsPanel .opds-new-key,
#opdsCopyUrl,
#opdsGenerateKey{
  background:linear-gradient(135deg,rgba(47,129,255,.26),rgba(11,26,46,.86))!important;
  color:#f4fbff!important;
}
.reading-profile-check-row{
  min-height:44px;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 12px!important;
  border:1px solid rgba(72,152,255,.22)!important;
  border-radius:12px!important;
  background:rgba(7,18,31,.45)!important;
  color:#dcecff!important;
  font-weight:850!important;
}
.reading-profile-check-row input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  accent-color:#2f81ff!important;
  flex:0 0 auto!important;
}
.reading-profile-zoom-row output{
  min-width:46px!important;
  text-align:right!important;
}


/* 0.9.43 clickable Guidevault wordmark cursor */
.brand-wordmark[role="button"],
.brand-wordmark{
  cursor:pointer!important;
}
.brand-wordmark[role="button"]:hover,
.brand-wordmark:hover{
  filter:drop-shadow(0 0 10px rgba(95,177,255,.28));
}
.brand-wordmark[role="button"]:focus-visible{
  outline:2px solid rgba(72,152,255,.95);
  outline-offset:4px;
  border-radius:8px;
}


/* 0.9.43 individual metadata export button */
.metadata-save-export-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.75fr);
  gap:10px;
  align-items:center;
}
.metadata-save-export-row button{
  width:100%;
}
@media(max-width:760px){
  .metadata-save-export-row{
    grid-template-columns:1fr;
  }
}


/* 0.9.45 login identity cleanup */
.login-form label.hidden,
.login-form input.hidden{
  display:none!important;
}


/* 0.9.47 filename schema rename tab */
.metadata-file-maintenance{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(88,151,255,.24);
  border-radius:18px;
  background:linear-gradient(135deg,rgba(16,31,47,.82),rgba(8,15,24,.76));
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}
.metadata-file-maintenance-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:10px;
}
.metadata-file-maintenance h3{
  margin:0 0 3px;
  color:#e7f1ff;
  font-size:15px;
}
.metadata-file-maintenance .sub{
  margin:0;
  color:#8fa8bd;
  font-size:12px;
}
.metadata-file-maintenance-list{
  display:grid;
  gap:8px;
  margin:0 0 12px;
}
.metadata-file-maintenance-list > div{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.metadata-file-maintenance-list dt{
  color:#8fa8bd;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.metadata-file-maintenance-list dd{
  margin:0;
  color:#dceaff;
  font-size:13px;
  overflow-wrap:anywhere;
}
.metadata-file-maintenance-actions{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);
  gap:10px;
  margin-top:12px;
}
.metadata-file-maintenance-actions.single-action{
  grid-template-columns:minmax(0,180px) minmax(240px,.75fr);
  justify-content:end;
}
.metadata-file-maintenance-actions button{
  width:100%;
}
.filename-schema-label{
  margin-top:14px!important;
}
.filename-schema-label input{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
}
.filename-schema-label code{
  color:#b8d8ff;
}
.filename-rename-status{
  margin:10px 0 0!important;
  font-size:12px;
}
button.danger-soft{
  border-color:rgba(255,176,72,.38)!important;
  color:#ffe0ad!important;
}
button.danger-soft:not(:disabled):hover{
  border-color:rgba(255,196,98,.72)!important;
  background:rgba(255,176,72,.12)!important;
}
@media(max-width:760px){
  .metadata-file-maintenance-list > div,
  .metadata-file-maintenance-actions{
    grid-template-columns:1fr;
  }
}

/* 0.9.48 filename schema token buttons */
.filename-token-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 10px;
}
.filename-token-button{
  width:auto!important;
  min-height:30px;
  padding:6px 10px;
  border:1px solid rgba(120,174,255,.32);
  border-radius:999px;
  background:rgba(24,47,72,.74);
  color:#cfe4ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.01em;
  cursor:pointer;
}
.filename-token-button:hover,
.filename-token-button:focus-visible{
  border-color:rgba(162,204,255,.74);
  background:rgba(42,79,118,.88);
  color:#fff;
}
.filename-schema-label .field-help{
  display:block;
  margin:5px 0 0;
}


/* 0.9.49 filename tab polish */
#file-namePanel .metadata-file-maintenance-list{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
  margin:0 0 14px!important;
}
#file-namePanel .metadata-file-maintenance-list > div{
  display:grid!important;
  grid-template-columns:minmax(132px,max-content) minmax(0,1fr)!important;
  gap:14px!important;
  align-items:start!important;
  padding:9px 11px!important;
  border:1px solid rgba(88,151,255,.14)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.025)!important;
  min-width:0!important;
}
#file-namePanel .metadata-file-maintenance-list dt{
  white-space:nowrap!important;
  min-width:max-content!important;
}
#file-namePanel .metadata-file-maintenance-list dd{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
#file-namePanel .filename-schema-token-area{
  margin-top:8px!important;
}
#file-namePanel .filename-token-buttons{
  display:grid!important;
  gap:12px!important;
  margin:8px 0 12px!important;
}
#file-namePanel .filename-token-group{
  border:1px solid rgba(88,151,255,.14)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.022)!important;
  padding:10px 11px!important;
}
#file-namePanel .filename-token-group-title{
  margin:0 0 8px!important;
  color:#a9c9ef!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}
#file-namePanel .filename-token-group-buttons{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
#file-namePanel .filename-rename-status.error{
  color:#ffb8c5!important;
}
.confirm-modal-card #appConfirmMessage{
  white-space:pre-line!important;
  line-height:1.45!important;
}
@media(max-width:760px){
  #file-namePanel .metadata-file-maintenance-list > div{
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
}

/* Guidevault 0.9.52 - Metadata export read-only handling */
.metadata-export-status {
  margin: 0.35rem 0 0;
  min-height: 1.2rem;
}
.metadata-export-status.success {
  color: var(--accent-strong, #8fd3ff);
}
.metadata-export-status.error {
  color: var(--danger, #ff8f8f);
  font-weight: 700;
}

/* Guidevault 0.9.53 - Filename rename preview target */

/* Guidevault 0.9.59 - File & Metadata workflow */
.file-metadata-action-card{
  margin:0 0 14px!important;
  padding:12px 13px!important;
  border:1px solid rgba(88,151,255,.16)!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.024)!important;
}
.file-metadata-action-card h4{
  margin:0 0 4px!important;
  color:#e7f1ff!important;
  font-size:13px!important;
}
.file-metadata-action-card .sub{
  margin:0 0 10px!important;
}
.file-metadata-actions{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;
}
.file-metadata-actions button{
  width:100%!important;
}
@media(max-width:900px){
  .file-metadata-actions{
    grid-template-columns:1fr!important;
  }
}


/* Guidevault 0.9.61 - Strategy platform layout cleanup */
.library-view.group-mode .group-hub-panel{
  grid-template-columns:1fr!important;
  padding:18px 22px!important;
  margin-bottom:12px!important;
}
.library-view.group-mode .group-hub-stats{
  display:none!important;
}
.library-view.group-mode #grid{
  grid-template-columns:repeat(auto-fill,minmax(315px,1fr))!important;
  gap:16px!important;
}
.library-view.group-mode .category-card.category-card-redesign,
.library-view.group-mode.magazine-mode .category-card.category-card-redesign{
  grid-template-columns:minmax(0,1fr) 104px!important;
  gap:12px!important;
  min-height:138px!important;
  padding:16px 16px!important;
  border-radius:18px!important;
}
.library-view.group-mode .category-card-content{
  gap:9px!important;
}
.library-view.group-mode .category-title-line{
  gap:10px!important;
}
.library-view.group-mode .category-platform-mark{
  width:38px!important;
  height:38px!important;
  flex-basis:38px!important;
}
.library-view.group-mode .category-platform-mark .platform-icon.large{
  width:34px!important;
  height:34px!important;
}
.library-view.group-mode .category-card-redesign .category-title{
  font-size:18px!important;
  line-height:1.15!important;
}
.library-view.group-mode .category-card-redesign .category-title-line p{
  margin-top:4px!important;
  font-size:13px!important;
  line-height:1.25!important;
}
.library-view.group-mode .category-card-facts span{
  padding:4px 8px!important;
  font-size:11px!important;
}
.library-view.group-mode .category-preview-strip{
  min-height:106px!important;
  max-height:116px!important;
  border-radius:14px!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),6px 8px 0 rgba(255,255,255,.018)!important;
}
.library-view.group-mode .category-preview-strip img{
  width:54px!important;
  height:76px!important;
  top:14px!important;
  left:calc(10px + (var(--slot) * 13px))!important;
  border-radius:7px!important;
}
.library-view.group-mode .category-preview-strip img:nth-child(n+4){
  display:none!important;
}
.library-view.group-mode .category-card-redesign.nes-manual-category .category-preview-strip{
  min-height:92px!important;
  max-height:100px!important;
}
.library-view.group-mode .category-card-redesign.nes-manual-category .category-preview-strip img{
  width:64px!important;
  height:45px!important;
  top:24px!important;
}
@media(max-width:760px){
  .library-view.group-mode .category-card.category-card-redesign,
  .library-view.group-mode.magazine-mode .category-card.category-card-redesign{
    grid-template-columns:1fr!important;
  }
  .library-view.group-mode .category-preview-strip{
    min-height:96px!important;
  }
}


.library-progressive-render-note {
  grid-column: 1 / -1;
  padding: 12px 16px;
  border: 1px solid rgba(120, 170, 255, 0.22);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(8, 18, 32, 0.72);
  text-align: center;
  font-size: 0.9rem;
}

/* Guidevault 0.9.64 - File Metadata layout */
#file-namePanel .file-metadata-workflow{
  display:grid!important;
  gap:14px!important;
}
.file-metadata-workflow-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.file-metadata-card{
  border:1px solid rgba(88,151,255,.16)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.026)!important;
  padding:13px!important;
  min-width:0!important;
}
.file-metadata-card-heading{
  margin:0 0 11px!important;
}
.file-metadata-card-heading h4{
  margin:0 0 4px!important;
  color:#e7f1ff!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
}
.file-metadata-card-heading .sub{
  margin:0!important;
  color:#8fa8bd!important;
  font-size:12px!important;
  line-height:1.45!important;
}
.file-metadata-card-file #metadataTechnicalInfo{
  margin-top:10px!important;
}
.file-metadata-card-file .metadata-library-data-dropdown{
  border-radius:14px!important;
  background:rgba(10,20,32,.54)!important;
}
.file-metadata-card-file .metadata-library-data-dropdown > summary{
  padding:11px 13px!important;
}
.file-metadata-card-file .metadata-library-data-dropdown .metadata-technical-list{
  padding:0 13px 13px!important;
  grid-template-columns:minmax(112px,max-content) minmax(0,1fr)!important;
}
.file-metadata-card-actions .file-metadata-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
}
.file-metadata-card-actions .file-metadata-actions button{
  width:100%!important;
}
.file-metadata-card-schema .filename-schema-token-area{
  margin-top:0!important;
}
.file-metadata-card-schema .metadata-file-maintenance-actions.single-action{
  grid-template-columns:minmax(0,200px) minmax(240px,.7fr)!important;
}
@media(max-width:980px){
  .file-metadata-workflow-grid{
    grid-template-columns:1fr!important;
  }
  .file-metadata-card-schema .metadata-file-maintenance-actions.single-action{
    grid-template-columns:1fr!important;
  }
}


/* Guidevault 0.9.65 - File Metadata layout polish */
#file-namePanel .file-metadata-workflow{
  display:grid!important;
  gap:14px!important;
}
#file-namePanel .file-metadata-main-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr)!important;
  gap:14px!important;
  align-items:start!important;
}
#file-namePanel .file-metadata-library-top{
  padding:12px!important;
}
#file-namePanel .file-metadata-library-top #metadataTechnicalInfo{
  margin-top:0!important;
}
#file-namePanel .file-metadata-library-top .metadata-library-data-dropdown{
  margin:0!important;
  border-radius:14px!important;
  background:rgba(10,20,32,.56)!important;
}
#file-namePanel .file-metadata-library-top .metadata-library-data-dropdown > summary{
  padding:11px 13px!important;
}
#file-namePanel .file-metadata-library-top .metadata-library-data-dropdown .metadata-technical-list{
  padding:0 13px 13px!important;
  grid-template-columns:minmax(120px,max-content) minmax(0,1fr)!important;
}
#file-namePanel .file-metadata-card-rename .file-rename-preview-list{
  margin-bottom:12px!important;
}
#file-namePanel .file-metadata-card-rename .file-rename-preview-list div{
  grid-template-columns:minmax(112px,max-content) minmax(0,1fr)!important;
}
#file-namePanel .file-metadata-card-rename .file-rename-preview-list dd{
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
#file-namePanel .file-metadata-card-rename .filename-schema-token-area{
  margin-top:8px!important;
}
#file-namePanel .file-metadata-card-rename .file-rename-actions{
  margin-top:12px!important;
  grid-template-columns:minmax(0,210px) minmax(180px,.45fr)!important;
  justify-content:start!important;
  align-items:center!important;
}
#file-namePanel .file-metadata-card-actions .file-metadata-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px!important;
}
#file-namePanel .file-metadata-card-actions .file-metadata-actions button{
  width:100%!important;
}
@media(max-width:980px){
  #file-namePanel .file-metadata-main-grid{
    grid-template-columns:1fr!important;
  }
  #file-namePanel .file-metadata-card-rename .file-rename-actions{
    grid-template-columns:1fr!important;
  }
}


/* Guidevault 0.9.90 - Metadata Manager column header polish */
.metadata-manager-table th.metadata-manager-column-header {
  padding: 6px 8px !important;
  min-width: 128px;
  vertical-align: middle;
  cursor: grab;
}
.metadata-manager-table th.metadata-manager-column-header:active {
  cursor: grabbing;
}
.metadata-manager-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
}
button.metadata-manager-sort-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid transparent !important;
  border-radius: 8px;
  background: transparent !important;
  color: rgba(226, 241, 255, 0.82) !important;
  box-shadow: none !important;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  line-height: 1.15;
  text-align: left;
  text-transform: uppercase;
}
button.metadata-manager-sort-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.metadata-manager-sort-button b {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(112, 190, 255, 0.22);
  background: rgba(58, 137, 205, 0.14);
  color: rgba(178, 219, 255, 0.84);
  font-size: 0.68rem;
  line-height: 1;
}
.metadata-manager-column-header.is-sorted button.metadata-manager-sort-button {
  color: #f5fbff !important;
  background: rgba(60, 145, 215, 0.12) !important;
  border-color: rgba(99, 190, 255, 0.22) !important;
}
.metadata-manager-column-header.is-sorted button.metadata-manager-sort-button b {
  border-color: rgba(108, 210, 255, 0.5);
  background: rgba(45, 165, 225, 0.28);
  color: #ffffff;
}
button.metadata-manager-sort-button:hover,
button.metadata-manager-sort-button:focus-visible {
  color: #ffffff !important;
  border-color: rgba(103, 190, 255, 0.38) !important;
  background: rgba(68, 150, 220, 0.16) !important;
  outline: none;
}
.metadata-manager-column-drag-handle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 24px;
  border-radius: 7px;
  color: rgba(179, 212, 240, 0.46);
  font-size: 0.8rem;
  line-height: 1;
  letter-spacing: -0.18em;
  pointer-events: none;
}
.metadata-manager-column-header:hover .metadata-manager-column-drag-handle {
  color: rgba(215, 238, 255, 0.82);
  background: rgba(82, 160, 230, 0.12);
}
.metadata-manager-column-reorder {
  display: none !important;
}

/* v0.9.90: compact Open Library batch lookup layout */
.metadata-manager-source-batch-panel[open]{
  padding-bottom:10px;
}
.metadata-manager-source-batch-panel > .sub{
  margin:6px 12px 0;
}
.metadata-source-batch-shell{
  margin:8px 10px 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.metadata-source-batch-topline{
  display:grid;
  grid-template-columns:minmax(360px,1fr) minmax(210px,.42fr) auto;
  gap:10px;
  align-items:stretch;
}
.metadata-source-provider-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(118px,1fr));
  gap:8px;
  min-width:0;
}
.metadata-source-provider-pill{
  display:grid!important;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:8px;
  row-gap:1px;
  min-width:0;
  margin:0;
  padding:8px 10px;
  border:1px solid rgba(105,174,255,.24);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(34,75,112,.34),rgba(7,15,26,.72));
  color:#e8f4ff;
  line-height:1.15;
}
.metadata-source-provider-pill input{
  grid-row:1 / span 2;
  width:16px;
  height:16px;
  min-height:0!important;
  margin:0;
  accent-color:#ff2c55;
}
.metadata-source-provider-pill span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.78rem;
  font-weight:900;
}
.metadata-source-provider-pill small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(211,229,247,.68);
  font-size:.66rem;
  font-weight:700;
}
.metadata-source-provider-pill.is-active{
  border-color:rgba(96,178,255,.48);
  box-shadow:inset 0 0 0 1px rgba(73,154,255,.12),0 10px 28px rgba(0,0,0,.16);
}
.metadata-source-provider-pill.is-disabled{
  opacity:.56;
  background:rgba(12,20,31,.52);
  border-color:rgba(180,200,220,.12);
}
.metadata-source-import-mode{
  display:flex!important;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  min-width:0;
  padding:8px 10px;
  border:1px solid rgba(105,174,255,.18);
  border-radius:12px;
  background:rgba(7,15,26,.54);
  color:rgba(226,238,255,.78);
  font-size:.7rem;
  font-weight:900;
}
.metadata-source-import-mode span{
  line-height:1;
}
.metadata-source-import-mode select{
  width:100%;
  min-height:30px!important;
  padding:5px 8px!important;
  border-radius:8px!important;
  font-size:.8rem!important;
}
.metadata-source-batch-actions{
  align-self:stretch;
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:8px!important;
  flex-wrap:nowrap!important;
  padding:0!important;
  margin:0!important;
}
.metadata-source-batch-actions button{
  min-height:36px;
  white-space:nowrap;
}
.metadata-source-fields-card{
  border:1px solid rgba(105,174,255,.18);
  border-radius:12px;
  background:rgba(6,14,24,.45);
  padding:8px 10px 10px;
}
.metadata-source-fields-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.metadata-source-fields-head strong{
  display:block;
  color:#eaf5ff;
  font-size:.82rem;
  line-height:1.1;
}
.metadata-source-fields-head span{
  display:block;
  color:rgba(211,229,247,.62);
  font-size:.68rem;
  font-weight:700;
  margin-top:2px;
}
.metadata-source-fields-actions{
  padding:0!important;
  margin:0!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
}
.metadata-source-field-chip-grid{
  display:grid;
  grid-template-columns:repeat(9,minmax(92px,1fr));
  gap:6px;
}
.metadata-source-field-chip-grid label{
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  justify-content:flex-start;
  gap:6px!important;
  min-width:0;
  margin:0;
  padding:6px 8px;
  border:1px solid rgba(135,195,255,.16);
  border-radius:10px;
  background:rgba(11,22,36,.62);
  color:rgba(232,244,255,.84);
  font-size:.72rem!important;
  font-weight:800!important;
  line-height:1.1;
  white-space:nowrap;
}
.metadata-source-field-chip-grid label input{
  width:14px;
  height:14px;
  min-height:0!important;
  margin:0;
  accent-color:#ff2c55;
}
.metadata-batch-source-results{
  margin-top:10px;
}
@media(max-width:1320px){
  .metadata-source-batch-topline{
    grid-template-columns:1fr minmax(210px,.44fr);
  }
  .metadata-source-batch-actions{
    grid-column:1 / -1;
    justify-content:flex-start;
  }
  .metadata-source-field-chip-grid{
    grid-template-columns:repeat(5,minmax(110px,1fr));
  }
}
@media(max-width:900px){
  .metadata-source-batch-topline{
    grid-template-columns:1fr;
  }
  .metadata-source-provider-strip,
  .metadata-source-field-chip-grid{
    grid-template-columns:repeat(2,minmax(120px,1fr));
  }
  .metadata-source-fields-head{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(max-width:560px){
  .metadata-source-provider-strip,
  .metadata-source-field-chip-grid{
    grid-template-columns:1fr;
  }
  .metadata-source-batch-actions,
  .metadata-source-fields-actions{
    flex-wrap:wrap!important;
  }
}
.metadata-source-import-mode select{
  border:1px solid rgba(135,195,255,.22);
  background:rgba(8,14,22,.78);
  color:#f7fbff;
  outline:none;
}
.metadata-source-import-mode select:focus{
  border-color:rgba(102,192,255,.65);
  box-shadow:0 0 0 3px rgba(69,166,255,.13);
}

/* v0.9.91: batch lookup source re-enable, result wrapping, and metadata info icon polish */
.metadata-source-fields-stack{
  display:grid;
  grid-template-columns:minmax(320px,1.08fr) minmax(320px,1fr) minmax(190px,.58fr);
  gap:8px;
  align-items:start;
}
.metadata-source-fields-stack .metadata-source-fields-card{
  height:100%;
  min-width:0;
}
.metadata-source-fields-stack .metadata-source-field-chip-grid{
  grid-template-columns:repeat(3,minmax(92px,1fr));
}
.metadata-source-fields-stack .metadata-source-field-chip-grid.compact{
  grid-template-columns:repeat(2,minmax(92px,1fr));
}
.metadata-source-provider-pill:has(input:checked){
  border-color:rgba(96,178,255,.48);
  background:linear-gradient(135deg,rgba(34,75,112,.46),rgba(7,15,26,.78));
  box-shadow:inset 0 0 0 1px rgba(73,154,255,.13),0 10px 28px rgba(0,0,0,.16);
}

.metadata-source-note{
  display:block;
  margin:.35rem 0 0;
  max-width:780px;
  color:rgba(196,216,238,.72);
}
.metadata-batch-source-warning{
  margin:0 10px 10px;
  padding:8px 10px;
  border:1px solid rgba(255,183,77,.28);
  border-radius:10px;
  background:rgba(255,183,77,.08);
  color:rgba(255,235,205,.9);
  font-size:.78rem;
  line-height:1.35;
}
.metadata-batch-source-warning strong{
  color:#ffe2ad;
}

.metadata-batch-source-results-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 10px 8px;
  color:rgba(226,241,255,.88);
}
.metadata-batch-source-results-head span{
  color:rgba(190,210,232,.68);
  font-size:.78rem;
}
.metadata-batch-source-table-wrap{
  max-height:min(54vh,620px);
  overflow:auto;
}
.metadata-batch-source-table{
  min-width:1040px;
  table-layout:fixed;
}
.metadata-batch-source-table-compact th:nth-child(3),
.metadata-batch-source-table-compact td:nth-child(3){
  width:250px;
}
.metadata-batch-source-table-compact th:nth-child(4),
.metadata-batch-source-table-compact td:nth-child(4){
  width:360px;
}
.metadata-batch-source-table-compact th:nth-child(5),
.metadata-batch-source-table-compact td:nth-child(5){
  width:230px;
}
.metadata-batch-source-table-compact th:nth-child(6),
.metadata-batch-source-table-compact td:nth-child(6){
  width:150px;
}
.metadata-batch-source-table-compact th,
.metadata-batch-source-table-compact td{
  vertical-align:middle;
}
.metadata-batch-source-table-compact th:nth-child(1),
.metadata-batch-source-table-compact td:nth-child(1){
  width:54px;
  text-align:center;
}
.metadata-batch-source-table-compact th:nth-child(2),
.metadata-batch-source-table-compact td:nth-child(2){
  width:112px;
}
.metadata-batch-guide-cell,
.metadata-batch-source-summary{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.metadata-batch-guide-cell strong,
.metadata-batch-source-summary strong{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#eef7ff;
  line-height:1.18;
}
.metadata-batch-guide-cell small,
.metadata-batch-source-summary small,
.metadata-batch-match-cell > small{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(196,216,238,.72);
  font-size:.72rem;
  line-height:1.16;
}
.metadata-batch-match-cell{
  min-width:260px;
}
.metadata-batch-source-summary{
  padding:4px 0;
  border-bottom:1px solid rgba(130,172,216,.08);
}
.metadata-batch-source-summary:last-child{
  border-bottom:0;
}
.metadata-batch-source-summary.is-found strong{
  color:#eaf8ff;
}
.metadata-batch-source-summary.is-error strong{
  color:#ffd4dc;
}
.metadata-batch-source-summary.is-muted strong{
  color:rgba(199,215,232,.7);
}

.metadata-batch-match-cell .metadata-batch-source-summary strong{
  white-space:normal;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.metadata-batch-match-cell .metadata-batch-source-summary small{
  white-space:normal;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.metadata-batch-guide-cell small{
  margin-top:1px;
}

.metadata-batch-fields-cell{
  max-width:300px;
  color:rgba(226,241,255,.78);
  font-size:.78rem;
  line-height:1.25;
}
.metadata-info-button{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  min-height:18px!important;
  margin:0 0 0 5px!important;
  padding:0!important;
  border:1px solid rgba(132,190,255,.46)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(57,142,222,.92),rgba(23,75,132,.92))!important;
  color:#ffffff!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset,0 5px 14px rgba(0,0,0,.22)!important;
  font-size:11px!important;
  font-weight:900!important;
  font-family:Inter,Segoe UI,system-ui,sans-serif!important;
  line-height:1!important;
  text-align:center!important;
  vertical-align:middle!important;
  cursor:pointer!important;
  transform:translateY(-1px);
}
.metadata-info-button:hover,
.metadata-info-button:focus-visible,
.metadata-info-button[aria-expanded="true"]{
  border-color:rgba(176,222,255,.82)!important;
  background:linear-gradient(180deg,rgba(78,164,242,.98),rgba(31,100,170,.98))!important;
  box-shadow:0 0 0 3px rgba(78,164,242,.16),0 8px 18px rgba(0,0,0,.26)!important;
  outline:none!important;
}
.metadata-info-popover{
  position:absolute;
  z-index:30;
  max-width:min(360px,calc(100vw - 42px));
  margin-top:24px;
  padding:9px 11px;
  border:1px solid rgba(118,184,255,.32);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(17,31,45,.98),rgba(8,17,28,.98));
  color:rgba(232,244,255,.92);
  box-shadow:0 20px 55px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06);
  font-size:.78rem;
  font-weight:700;
  line-height:1.35;
}
#metadataPanel label{
  position:relative;
}
@media(max-width:1320px){
  .metadata-source-fields-stack{
    grid-template-columns:1fr 1fr;
  }
  .metadata-source-fields-stack .metadata-source-fields-card:last-child{
    grid-column:1 / -1;
  }
  .metadata-source-fields-stack .metadata-source-fields-card:last-child .metadata-source-field-chip-grid{
    grid-template-columns:repeat(4,minmax(92px,1fr));
  }
}
@media(max-width:900px){
  .metadata-source-fields-stack{
    grid-template-columns:1fr;
  }
  .metadata-source-fields-stack .metadata-source-fields-card:last-child{
    grid-column:auto;
  }
  .metadata-source-fields-stack .metadata-source-field-chip-grid,
  .metadata-source-fields-stack .metadata-source-field-chip-grid.compact,
  .metadata-source-fields-stack .metadata-source-fields-card:last-child .metadata-source-field-chip-grid{
    grid-template-columns:repeat(2,minmax(112px,1fr));
  }
  .metadata-batch-source-results-head{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* v0.9.94: single-source batch lookup locks and active preview comparison */
.metadata-source-fields-card.is-disabled{
  opacity:.46;
  filter:saturate(.55);
  background:rgba(6,14,24,.24);
  border-color:rgba(180,200,220,.10);
}
.metadata-source-fields-card.is-disabled .metadata-source-fields-head,
.metadata-source-fields-card.is-disabled .metadata-source-field-chip-grid{
  pointer-events:none;
}
.metadata-source-provider-pill.is-disabled{
  cursor:not-allowed;
}
.metadata-source-provider-pill.is-disabled input{
  cursor:not-allowed;
}
.metadata-batch-cover-compare{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:104px;
}
.metadata-batch-cover-compare figure{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
}
.metadata-batch-cover-compare figcaption{
  max-width:48px;
  color:rgba(196,216,238,.72);
  font-size:.65rem;
  font-weight:800;
  line-height:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.metadata-batch-gv-cover,
.metadata-batch-lookup-preview-img,
.metadata-batch-lookup-preview-empty{
  width:42px;
  height:56px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  background:rgba(7,15,26,.64);
}
.metadata-batch-gv-cover,
.metadata-batch-lookup-preview-img{
  object-fit:cover;
}
.metadata-batch-lookup-preview-empty{
  display:grid;
  place-items:center;
  border-style:dashed;
  color:rgba(196,216,238,.66);
  font-size:.62rem;
  font-weight:800;
  line-height:1.05;
  text-align:center;
}
.metadata-batch-lookup-preview-img.is-esrb,
.metadata-batch-lookup-preview-empty.is-esrb{
  object-fit:contain;
  padding:3px;
}
.metadata-batch-lookup-preview-empty.is-esrb{
  padding:0 4px;
}

/* v0.9.96: individual metadata lookup dialog layout restore */
.openlibrary-dialog{
  width:min(1100px,calc(100vw - 48px));
  max-width:min(1100px,calc(100vw - 48px));
  max-height:calc(100vh - 56px);
  padding:0;
  border:1px solid rgba(88,162,255,.28);
  border-radius:16px;
  background:#0b141f;
  color:var(--text);
  overflow:hidden;
  box-shadow:0 30px 120px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.035) inset;
}
.openlibrary-dialog::backdrop{
  background:rgba(2,8,18,.72);
  backdrop-filter:blur(8px);
}
.openlibrary-modal{
  width:100%;
  min-height:0;
  max-height:calc(100vh - 56px);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  background:linear-gradient(180deg,rgba(15,27,39,.98),rgba(7,16,24,.98));
}
.openlibrary-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px 14px;
  border-bottom:1px solid rgba(88,162,255,.18);
  background:linear-gradient(135deg,rgba(47,129,255,.11),rgba(255,122,42,.07) 65%,rgba(7,16,24,.98));
}
.openlibrary-modal-head h3{
  margin:0 0 6px;
  font-size:17px;
  letter-spacing:.01em;
}
.openlibrary-modal-head p{
  margin:0;
  max-width:860px;
  color:#b8c7da;
  line-height:1.35;
}
.openlibrary-modal-head .ghost.tiny{
  flex:0 0 auto;
  margin-top:0;
  padding:7px 10px;
}
.openlibrary-modal-body{
  min-height:0;
  max-height:calc(100vh - 150px);
  overflow:auto;
  padding:14px 16px 18px;
}
.openlibrary-search-panel,
.openlibrary-compare-panel{
  display:grid;
  gap:12px;
}
.openlibrary-search-fields{
  display:grid;
  grid-template-columns:minmax(260px,2fr) minmax(220px,1.25fr) auto;
  align-items:end;
  gap:12px;
  padding:12px;
  border:1px solid rgba(88,162,255,.18);
  border-radius:13px;
  background:rgba(7,16,24,.76);
}
.igdb-search-fields{
  grid-template-columns:minmax(260px,1.8fr) minmax(180px,1fr) minmax(110px,.55fr) auto;
}
.esrb-search-fields{
  grid-template-columns:minmax(260px,2fr) minmax(220px,1.1fr) auto;
}
.openlibrary-search-fields label{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0;
  color:#c6d5e8;
  font-size:12px;
  font-weight:700;
}
.openlibrary-search-fields input{
  width:100%;
  height:40px;
  padding:9px 10px;
  border:1px solid #24384a;
  border-radius:8px;
  background:#071018;
  color:var(--text);
  outline:0;
}
.openlibrary-search-fields input:focus{
  border-color:#58a2ff;
  box-shadow:0 0 0 2px rgba(88,162,255,.18);
}
.openlibrary-search-fields .primary{
  min-height:40px;
  align-self:end;
  white-space:nowrap;
}
.openlibrary-help{
  margin:0;
  padding:9px 11px;
  border-left:3px solid rgba(88,162,255,.55);
  border-radius:8px;
  background:rgba(88,162,255,.07);
  color:#b5c5d8;
  font-size:12px;
}
.openlibrary-status{
  min-height:19px;
  margin:0;
  color:#b8c7da;
  font-weight:700;
}
.openlibrary-status[data-tone="success"]{color:#8ff0aa;}
.openlibrary-status[data-tone="error"]{color:#ffc0cb;}
.openlibrary-status[data-tone="info"]{color:#9ecaff;}
.openlibrary-results{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:10px;
}
.openlibrary-empty{
  grid-column:1/-1;
  padding:16px;
  border:1px dashed rgba(143,160,180,.35);
  border-radius:12px;
  color:#aebdd0;
  background:rgba(255,255,255,.025);
}
.openlibrary-result-card{
  display:grid;
  grid-template-columns:72px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  min-height:104px;
  padding:11px;
  border:1px solid rgba(88,162,255,.16);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(17,29,40,.96),rgba(10,18,27,.96));
}
.openlibrary-result-card:hover{
  border-color:rgba(88,162,255,.45);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.openlibrary-result-cover{
  width:64px;
  height:86px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(143,160,180,.28);
  border-radius:8px;
  background:#071018;
  color:#9fb1c6;
  font-size:11px;
  text-align:center;
}
.openlibrary-result-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.esrb-result-badge img{
  object-fit:contain;
  padding:6px;
  background:#fff;
}
.openlibrary-result-main{
  min-width:0;
}
.openlibrary-result-main h4{
  margin:0 0 4px;
  line-height:1.2;
  font-size:14px;
}
.openlibrary-result-main p,
.openlibrary-result-main small{
  display:block;
  margin:0;
  color:#aebdd0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.openlibrary-result-main p{
  white-space:nowrap;
}
.openlibrary-result-main small{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.25;
}
.openlibrary-select-result,
.igdb-select-result,
.esrb-select-result{
  align-self:center;
  white-space:nowrap;
}
.openlibrary-compare-panel > .ghost.tiny{
  justify-self:start;
}
.openlibrary-cover-compare{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:12px;
}
.esrb-cover-compare{
  grid-template-columns:minmax(180px,260px);
}
.openlibrary-cover-compare figure{
  margin:0;
  min-height:190px;
  display:grid;
  grid-template-rows:auto 1fr;
  place-items:center;
  gap:8px;
  padding:11px;
  border:1px solid rgba(88,162,255,.16);
  border-radius:12px;
  background:rgba(7,16,24,.72);
}
.openlibrary-cover-compare figcaption{
  width:100%;
  color:#cbd9ea;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.openlibrary-cover-compare figcaption em{
  display:block;
  margin-top:2px;
  color:#899aad;
  font-size:10px;
  font-style:normal;
  text-transform:none;
  letter-spacing:0;
}
.openlibrary-cover-compare img{
  max-width:136px;
  max-height:178px;
  width:auto;
  height:auto;
  border-radius:8px;
  border:1px solid rgba(143,160,180,.25);
  object-fit:contain;
  background:#071018;
}
.openlibrary-cover-compare .esrb-compare-badge{
  max-width:116px;
  max-height:160px;
  padding:8px;
  background:#fff;
}
.openlibrary-cover-compare span{
  color:#9fb1c6;
  font-size:12px;
}
.openlibrary-selected-source{
  padding:12px;
  border:1px solid rgba(88,162,255,.16);
  border-radius:12px;
  background:rgba(17,29,40,.68);
}
.openlibrary-selected-source h4{
  margin:0 0 5px;
}
.openlibrary-selected-source p{
  margin:0;
  color:#b5c5d8;
}
.openlibrary-table-wrap{
  overflow:auto;
  border:1px solid rgba(88,162,255,.16);
  border-radius:12px;
}
.openlibrary-comparison-table{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
  background:rgba(7,16,24,.55);
}
.openlibrary-comparison-table th,
.openlibrary-comparison-table td{
  padding:10px 11px;
  border-bottom:1px solid rgba(143,160,180,.15);
  text-align:left;
  vertical-align:top;
}
.openlibrary-comparison-table th{
  color:#b8c7da;
  background:rgba(255,255,255,.035);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.openlibrary-comparison-table tr.different td{
  background:rgba(47,129,255,.045);
}
.openlibrary-comparison-table tr.missing-incoming td{
  color:#7f8fa3;
}
.openlibrary-comparison-table td:first-child,
.openlibrary-comparison-table th:first-child{
  width:70px;
  text-align:center;
}
.openlibrary-import-actions{
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  position:sticky;
  bottom:-18px;
  padding:12px 0 0;
  background:linear-gradient(180deg,rgba(7,16,24,0),#071018 34%);
}
.esrb-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
  margin-top:10px;
}
.esrb-detail-grid div{
  padding:10px;
  border:1px solid rgba(143,160,180,.16);
  border-radius:10px;
  background:rgba(7,16,24,.62);
}
.esrb-detail-grid span{
  display:block;
  margin-bottom:4px;
  color:#8fa0b4;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.esrb-rating-summary{
  margin-top:10px!important;
  line-height:1.45;
}
@media(max-width:780px){
  .openlibrary-dialog{
    width:calc(100vw - 18px);
    max-width:calc(100vw - 18px);
  }
  .openlibrary-modal-head{
    padding:14px;
    flex-direction:column;
  }
  .openlibrary-search-fields,
  .igdb-search-fields,
  .esrb-search-fields{
    grid-template-columns:1fr;
  }
  .openlibrary-results{
    grid-template-columns:1fr;
  }
  .openlibrary-result-card{
    grid-template-columns:64px minmax(0,1fr);
  }
  .openlibrary-result-card .ghost{
    grid-column:1/-1;
    width:100%;
  }
}


/* v0.9.97: richer IGDB/ESRB result cards and strategy identity cleanup */
.metadata-lookup-detailed-card{
  align-items:start!important;
  min-height:142px!important;
}
.metadata-lookup-detailed-card .openlibrary-result-main{
  display:grid;
  gap:6px;
}
.metadata-lookup-card-subtitle{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  line-height:1.25!important;
}
.metadata-lookup-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px 7px;
  margin-top:1px;
}
.metadata-lookup-fact{
  min-width:0;
  padding:6px 7px;
  border:1px solid rgba(88,162,255,.14);
  border-radius:8px;
  background:rgba(7,16,24,.50);
}
.metadata-lookup-fact.wide,
.metadata-lookup-fact.systems{
  grid-column:1 / -1;
}
.metadata-lookup-fact span{
  display:block;
  margin-bottom:2px;
  color:#8ea3bb;
  font-size:10px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.metadata-lookup-fact strong{
  display:block;
  color:#d8e8fb;
  font-size:12px;
  line-height:1.22;
  font-weight:800;
  white-space:normal;
  overflow-wrap:anywhere;
}
.metadata-lookup-fact.muted strong{
  color:#8fa0b4;
}
.igdb-result-card .openlibrary-result-main small,
.esrb-result-card .openlibrary-result-main small{
  -webkit-line-clamp:1;
  color:#95a9c1;
}
#metadataPanel.metadata-kind-strategy #editGameTitleLabel.strategy-game-context-order{
  order:36;
}
@media(max-width:780px){
  .metadata-lookup-facts{
    grid-template-columns:1fr;
  }
}
.igdb-results,
.esrb-results{
  grid-template-columns:repeat(auto-fill,minmax(420px,1fr));
}
@media(max-width:960px){
  .igdb-results,
  .esrb-results{
    grid-template-columns:1fr;
  }
}

/* v0.9.98: lookup dialogs now reset against the currently active detail item */


/* v0.9.99: metadata manager render cap controls */
.metadata-manager-render-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.metadata-manager-render-actions[hidden],
.metadata-manager-render-actions button[hidden] {
  display: none !important;
}

.metadata-manager-hidden-note {
  color: var(--muted);
  font-style: italic;
  background: rgba(77, 163, 255, 0.06);
}

.metadata-manager-table-footer {
  gap: 0.75rem;
  flex-wrap: wrap;
}

.metadata-lock-button{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
  margin:0 0 0 6px!important;
  padding:0!important;
  border:1px solid rgba(148,163,184,.38)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(25,37,54,.96),rgba(12,20,32,.96))!important;
  color:rgba(226,241,255,.86)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,0 5px 14px rgba(0,0,0,.2)!important;
  font-size:12px!important;
  line-height:1!important;
  vertical-align:middle!important;
  cursor:pointer!important;
  transform:translateY(-1px);
}
.metadata-lock-button.locked{
  border-color:rgba(248,204,92,.72)!important;
  background:linear-gradient(180deg,rgba(107,78,24,.96),rgba(54,38,13,.96))!important;
  color:#ffe8a3!important;
}
.metadata-lock-button:hover,
.metadata-lock-button:focus-visible{
  border-color:rgba(176,222,255,.82)!important;
  box-shadow:0 0 0 3px rgba(78,164,242,.16),0 8px 18px rgba(0,0,0,.26)!important;
  outline:none!important;
}
.metadata-lock-inline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:4px;
  color:#ffe8a3;
  font-size:.82rem;
}
.openlibrary-comparison-table tr.locked-field,
.igdb-comparison-table tr.locked-field,
.esrb-comparison-table tr.locked-field{
  opacity:.82;
}
.openlibrary-comparison-table tr.locked-field td,
.igdb-comparison-table tr.locked-field td,
.esrb-comparison-table tr.locked-field td{
  background:rgba(248,204,92,.06);
}

/* Guidevault metadata locks: locked editor fields are protected from manual edits until unlocked. */
#metadataPanel input.metadata-lock-readonly,
#metadataPanel textarea.metadata-lock-readonly,
#metadataPanel select.metadata-lock-readonly,
.meta-multi-select.metadata-lock-readonly .meta-multi-button{
  opacity:.78;
  cursor:not-allowed!important;
  border-color:rgba(248,204,92,.46)!important;
  background:linear-gradient(180deg,rgba(42,36,24,.96),rgba(22,20,17,.96))!important;
  color:rgba(255,239,194,.88)!important;
  box-shadow:inset 0 0 0 1px rgba(248,204,92,.12),0 8px 20px rgba(0,0,0,.22)!important;
}

#metadataPanel input.metadata-lock-readonly:focus,
#metadataPanel textarea.metadata-lock-readonly:focus,
#metadataPanel select.metadata-lock-readonly:focus,
.meta-multi-select.metadata-lock-readonly .meta-multi-button:focus{
  outline:none!important;
  box-shadow:inset 0 0 0 1px rgba(248,204,92,.28),0 0 0 3px rgba(248,204,92,.12)!important;
}

.meta-multi-select.metadata-lock-readonly.open .meta-multi-panel{
  display:none!important;
}

/* Guidevault metadata review status */
.metadata-status-select {
  min-width: 150px;
}

.metadata-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(125, 194, 255, 0.22);
  background: rgba(60, 130, 190, 0.17);
  color: #dff1ff;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 800;
}

.metadata-status-needs-review {
  border-color: rgba(248, 204, 92, 0.48);
  background: rgba(154, 105, 18, 0.22);
  color: #ffe8a3;
}

.metadata-status-reviewed {
  border-color: rgba(90, 220, 160, 0.42);
  background: rgba(22, 128, 88, 0.2);
  color: #c7ffe4;
}

.metadata-status-locked {
  border-color: rgba(248, 204, 92, 0.62);
  background: rgba(107, 78, 24, 0.26);
  color: #ffe8a3;
}

.metadata-status-failed-lookup {
  border-color: rgba(255, 120, 120, 0.48);
  background: rgba(145, 38, 38, 0.2);
  color: #ffd0d0;
}

.metadata-status-manual-only {
  border-color: rgba(180, 150, 255, 0.45);
  background: rgba(92, 65, 180, 0.2);
  color: #e4dbff;
}

/* v0.9.104 — Metadata Manager summary cards: keep desktop counters on one row. */
.metadata-manager-summary{
  grid-template-columns:repeat(10,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
}
.metadata-manager-summary-card,
.metadata-manager-stat,
.metadata-manager-summary > *{
  min-width:0!important;
  padding:9px 10px!important;
  min-height:58px!important;
}
.metadata-manager-summary-card span,
.metadata-manager-stat span,
.metadata-manager-summary > * span{
  font-size:.62rem!important;
  letter-spacing:.105em!important;
  line-height:1.05!important;
  overflow-wrap:anywhere!important;
}
.metadata-manager-summary-card strong,
.metadata-manager-stat strong,
.metadata-manager-summary > * strong,
.metadata-manager-summary-card b,
.metadata-manager-stat b,
.metadata-manager-summary > * b{
  font-size:1.12rem!important;
  line-height:1.05!important;
}
@media(max-width:1180px){
  .metadata-manager-summary{
    grid-template-columns:repeat(4,minmax(110px,1fr))!important;
  }
}
@media(max-width:720px){
  .metadata-manager-summary{
    grid-template-columns:repeat(2,minmax(120px,1fr))!important;
  }
}
@media(max-width:460px){
  .metadata-manager-summary{
    grid-template-columns:1fr!important;
  }
}

/* v0.9.105 — Metadata Manager filters: keep all primary filters on one desktop row. */
.metadata-manager-filter-grid{
  grid-template-columns:minmax(170px,.9fr) minmax(185px,1fr) minmax(130px,.7fr) minmax(180px,.95fr) minmax(200px,1.05fr)!important;
  gap:8px!important;
  align-items:end!important;
}
.metadata-manager-filter-grid label[for="metadataManagerSearch"] input{
  min-width:0!important;
}
.metadata-manager-filter-grid label[for="metadataManagerStatusFilter"]{
  min-width:0!important;
}
@media(max-width:1180px){
  .metadata-manager-filter-grid{
    grid-template-columns:repeat(2,minmax(180px,1fr))!important;
  }
}
@media(max-width:720px){
  .metadata-manager-filter-grid{
    grid-template-columns:1fr!important;
  }
}

/* v0.9.106 — Metadata Manager columns grouped by content context. */
.metadata-manager-column-picker{
  display:block!important;
  max-height:300px;
  padding:10px 10px 4px!important;
  border-top:1px solid rgba(255,255,255,.06);
}
.metadata-manager-column-group{
  margin:0 0 14px;
  padding:0 0 12px;
  border-bottom:1px solid rgba(108,184,255,.10);
}
.metadata-manager-column-group:last-child{
  border-bottom:0;
  margin-bottom:0;
  padding-bottom:0;
}
.metadata-manager-column-group h4{
  margin:0 0 8px;
  color:#9ed6ff;
  font-size:.74rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.metadata-manager-column-group-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(185px,1fr));
  gap:8px;
}
.metadata-manager-column-option span{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media(max-width:1100px){
  .metadata-manager-column-group-grid{grid-template-columns:repeat(3,minmax(170px,1fr));}
}
@media(max-width:900px){
  .metadata-manager-column-group-grid{grid-template-columns:repeat(2,minmax(160px,1fr));}
}
@media(max-width:640px){
  .metadata-manager-column-group-grid{grid-template-columns:1fr;}
}


/* v0.9.108 — large-library performance pass.
   Large item grids now window rendered, so the browser only keeps the visible card
   slice in the DOM while preserving scroll height with lightweight spacers. */
.grid.virtualized-grid{
  align-items:start;
}
.gv-virtual-spacer{
  grid-column:1 / -1;
  pointer-events:none;
  min-height:0;
}
.library-progressive-render-note{
  grid-column:1 / -1;
  color:#9eb8d1;
  border:1px dashed rgba(92,166,255,.28);
  border-radius:12px;
  padding:12px 14px;
  text-align:center;
  background:rgba(10,18,27,.72);
}


/* v0.9.109 — Metadata Manager batch editor follows the visible editable columns. */
.metadata-manager-batch-empty{
  grid-column:1 / -1;
  margin:0;
  color:#9db3cc;
  font-size:.82rem;
  border:1px dashed rgba(124,184,255,.22);
  border-radius:10px;
  padding:10px 12px;
  background:rgba(8,15,25,.45);
}
.metadata-manager-batch-mode-field{
  border-left:1px solid rgba(113,174,235,.18);
  padding-left:10px;
}

/* v0.9.112 — Magazine grouping now uses Magazine Title/series; removed redundant Magazine Group editing surface. */

/* v0.9.114 — clearer sidebar category-mode section headings inside the native select popup. */
.category-structure-select optgroup,
.category-structure-select option.category-structure-heading,
.category-structure-select option[disabled].category-structure-heading{
  background-color:#17324d!important;
  color:#9fd8ff!important;
  font-weight:900!important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.category-structure-select option{
  background-color:#0b1622!important;
  color:#f2f8ff!important;
}
.category-structure-select option:not(.category-structure-heading){
  padding-left:14px;
}
.category-structure-select option:checked{
  background-color:#1d63d8!important;
  color:#ffffff!important;
}


/* v0.9.124 — startup status and home-grid scroll stability. */
.library-startup-status{
  margin:10px 0 2px!important;
  padding:9px 12px!important;
  border:1px solid rgba(92,166,255,.26)!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,rgba(47,129,255,.12),rgba(8,15,22,.72))!important;
  color:#cfe6ff!important;
  font-size:12.5px!important;
  font-weight:650!important;
  letter-spacing:.01em!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.library-startup-status[data-tone="success"]{
  border-color:rgba(74,214,109,.26)!important;
  background:linear-gradient(135deg,rgba(74,214,109,.10),rgba(8,15,22,.72))!important;
  color:#d9ffe4!important;
}
.library-startup-status[data-tone="error"]{
  border-color:rgba(255,88,116,.32)!important;
  background:linear-gradient(135deg,rgba(255,88,116,.12),rgba(8,15,22,.72))!important;
  color:#ffd9df!important;
}
.grid.virtualized-grid{
  overflow-anchor:none!important;
}
.gv-virtual-spacer{
  contain:strict!important;
}


/* v0.9.125 — profile polish, review editor, and quieter startup. */
.profile-hero{
  border-radius:16px;
  background:
    radial-gradient(circle at 15% 18%,rgba(47,129,255,.45),transparent 30%),
    radial-gradient(circle at 82% 24%,rgba(0,174,239,.24),transparent 34%),
    linear-gradient(135deg,#0d1b31,#060b14 72%);
  border-color:rgba(93,170,255,.22);
}
.profile-hero-scrim{
  background:linear-gradient(90deg,rgba(2,7,16,.48),rgba(8,16,30,.12),rgba(2,7,16,.42));
}
.profile-read-badge{
  background:linear-gradient(135deg,#2f81ff,#35c2ff);
  color:#eef8ff;
  box-shadow:0 10px 24px rgba(47,129,255,.22);
}
.profile-quick-stats{
  grid-template-columns:repeat(2,minmax(190px,1fr));
  gap:10px 18px;
  max-width:720px;
}
.profile-quick-stats span{
  padding:8px 10px;
  border:1px solid rgba(128,178,255,.14);
  border-radius:10px;
  background:rgba(5,14,28,.34);
}
.profile-tabs{
  gap:8px;
  margin:14px 0 22px;
}
.profile-tab{
  border:1px solid transparent;
  border-radius:12px;
  color:#cfe2ff;
  padding:12px 20px;
}
.profile-tab:hover{
  border-color:rgba(107,174,255,.24);
  background:rgba(47,129,255,.08);
}
.profile-tab.active{
  background:linear-gradient(135deg,#1f6feb,#35a2ff);
  color:#fff;
  box-shadow:0 12px 26px rgba(31,111,235,.24);
}
.profile-metric-strip{
  gap:12px;
  grid-template-columns:repeat(7,minmax(120px,1fr));
}
.profile-metric{
  border:1px solid rgba(128,172,232,.16);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(16,30,50,.82),rgba(7,16,29,.82));
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  padding:14px 10px;
}
.profile-metric:last-child{border-right:1px solid rgba(128,172,232,.16);}
.profile-metric i{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  color:#77c7ff;
}
.profile-metric i svg{
  width:28px;
  height:28px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.profile-metric span{color:#dbeaff;font-size:13px;}
.profile-metric strong{font-size:20px;color:#fff;}
.profile-activity-card{
  border-radius:16px;
  background:linear-gradient(180deg,rgba(16,30,50,.92),rgba(8,18,32,.92));
  border-color:rgba(93,141,205,.22);
}
.profile-heatmap{overflow:visible;padding-bottom:4px;width:100%;}
.profile-heatmap-months{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  min-width:0;
  width:calc(100% - 44px);
  margin-left:44px;
}
.profile-heatmap-grid{
  display:flex;
  gap:10px;
  min-width:0;
  width:100%;
}
.profile-heatmap-days{flex:0 0 34px;}
.profile-heatmap-weeks{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(53,minmax(0,1fr));
  gap:4px;
}
.profile-heatmap-week{
  display:grid;
  grid-template-rows:repeat(7,minmax(10px,1fr));
  gap:4px;
}
.profile-heatmap-cell{
  width:100%;
  height:auto;
  min-height:10px;
  aspect-ratio:1/1;
}
.profile-heatmap-cell[data-in-year="false"]{opacity:.35;}
.profile-top-card h2,
.profile-review-editor h2{margin-top:0;color:#f6f8ff;}
.profile-stat-preview-row{
  display:grid;
  grid-template-columns:28px 44px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid rgba(125,170,228,.12);
}
.profile-stat-preview-row:last-child{border-bottom:0;}
.profile-stat-preview-row img,
.profile-stat-preview-fallback{
  width:44px;
  height:58px;
  border-radius:8px;
  object-fit:cover;
  background:#091422;
  border:1px solid rgba(128,172,232,.16);
}
.profile-stat-preview-fallback{display:grid;place-items:center;color:#7fbfff;font-weight:900;}
.profile-stat-rank{color:#7fbfff;font-weight:900;text-align:center;}
.profile-stat-preview-row strong{display:block;color:#f6f8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-stat-preview-row em{display:block;color:#94a9c2;font-style:normal;font-size:12px;margin-top:2px;}
.profile-review-layout{display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:18px;align-items:start;}
.profile-review-editor{position:sticky;top:10px;display:grid;gap:12px;}
.profile-review-editor label{display:grid;gap:7px;color:#dfeaff;font-weight:800;}
.profile-review-editor select,
.profile-review-editor textarea{
  width:100%;
  border:1px solid rgba(130,170,220,.3);
  border-radius:12px;
  background:#0d1828;
  color:#eaf3ff;
  padding:10px 12px;
  font:inherit;
}
.profile-review-editor textarea{resize:vertical;line-height:1.45;}
.profile-review-actions{display:flex;gap:10px;flex-wrap:wrap;}
.profile-review-list{display:grid;gap:12px;}
.profile-review-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:14px;
  padding:14px;
  border:1px solid rgba(128,172,232,.16);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(16,30,50,.78),rgba(7,16,29,.82));
}
.profile-review-card img,
.profile-review-card .profile-stat-preview-fallback{width:64px;height:88px;border-radius:10px;}
.profile-review-card-head{display:flex;gap:12px;align-items:center;justify-content:space-between;}
.profile-review-card-head strong{color:#f6f8ff;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.profile-review-card-head span{color:#39d353;white-space:nowrap;}
.profile-review-card p{margin:8px 0;color:#d8e6f7;line-height:1.45;}
.profile-review-card em{display:block;color:#8fa3bb;font-style:normal;font-size:12px;margin-bottom:10px;}
.profile-review-delete{padding:6px 10px;font-size:12px;}
.profile-activity-limit-note{
  padding:10px 12px;
  border:1px solid rgba(128,172,232,.14);
  border-radius:12px;
  background:rgba(11,22,38,.72);
  color:#9fb4ce;
  font-size:13px;
}
@media(max-width:1100px){
  .profile-quick-stats{grid-template-columns:1fr;}
  .profile-metric-strip{grid-template-columns:repeat(2,minmax(120px,1fr));}
  .profile-review-layout{grid-template-columns:1fr;}
  .profile-review-editor{position:static;}
}
@media(max-width:760px){
  .profile-heatmap{overflow:auto;}
  .profile-heatmap-grid{min-width:760px;}
  .profile-heatmap-months{min-width:716px;}
}


/* v0.9.126 — semi-gloss profile-image hero background. */
.profile-hero{
  isolation:isolate;
}
.profile-hero.has-profile-hero-image::before{
  content:"";
  position:absolute;
  inset:-36px;
  z-index:0;
  pointer-events:none;
  background-image:var(--profile-hero-image);
  background-size:cover;
  background-position:center;
  filter:blur(28px) saturate(1.45) brightness(.72) contrast(1.08);
  opacity:.56;
  transform:scale(1.08);
}
.profile-hero.has-profile-hero-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(105deg,rgba(8,18,34,.18),rgba(8,18,34,.58) 44%,rgba(3,8,16,.78) 100%),
    radial-gradient(circle at 12% 44%,rgba(255,255,255,.16),transparent 22%),
    linear-gradient(128deg,rgba(255,255,255,.18),rgba(255,255,255,.045) 18%,transparent 44%,rgba(255,255,255,.06) 72%,transparent 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -80px 110px rgba(0,0,0,.20);
}
.profile-hero.has-profile-hero-image .profile-hero-scrim{
  z-index:1;
  backdrop-filter:blur(7px) saturate(1.12);
  background:linear-gradient(90deg,rgba(2,7,16,.32),rgba(8,16,30,.16),rgba(2,7,16,.58));
}
.profile-hero.has-profile-hero-image .profile-hero-content{
  z-index:2;
}


/* Guidevault 0.9.127 - Colorscape preference controls and menu container tinting. */
.preferences-card .preference-toggle-row-master{
  padding-bottom:16px!important;
  border-bottom:1px solid rgba(88,162,255,.14)!important;
}
.colorscape-child-settings{
  display:grid!important;
  gap:14px!important;
  margin-top:16px!important;
}
.preference-toggle-row-child{
  align-items:center!important;
  padding:12px 14px!important;
  border:1px solid rgba(128,178,255,.12)!important;
  border-radius:14px!important;
  background:rgba(8,16,26,.38)!important;
}
.preference-toggle-row-child h3{
  font-size:16px!important;
  margin-bottom:3px!important;
}
.preference-toggle-row-child .sub{
  font-size:12px!important;
  line-height:1.35!important;
}
.colorscape-subsection-title{
  margin:2px 0 -4px!important;
  color:#8ebdff!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}
.colorscape-menu-toggle-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(190px,1fr))!important;
  gap:12px!important;
}
.preferences-card.colorscape-disabled .colorscape-child-settings{
  opacity:.55!important;
}
.preferences-card.colorscape-disabled .preference-toggle-row-child{
  background:rgba(8,16,26,.22)!important;
}
.gv-toggle input:checked + .gv-toggle-track{
  border-color:rgba(64,169,255,.82)!important;
  background:linear-gradient(135deg,rgba(64,169,255,.98),rgba(47,129,255,.92))!important;
  box-shadow:0 0 0 1px rgba(64,169,255,.28),0 16px 34px rgba(47,129,255,.24)!important;
}
.gv-toggle:focus-within .gv-toggle-track{
  outline:2px solid rgba(64,169,255,.68)!important;
  outline-offset:3px!important;
}
.gv-toggle input:disabled + .gv-toggle-track{
  opacity:.62!important;
  cursor:not-allowed!important;
}
.category-card.category-card-redesign.category-colorscape-active,
.group-mode.magazine-mode .category-card.category-card-redesign.category-colorscape-active{
  background:
    radial-gradient(circle at 0% 0%,rgba(var(--category-colorscape-rgb),.32),transparent 42%),
    linear-gradient(135deg,rgba(var(--category-colorscape-rgb),.22),rgba(8,14,22,.98) 62%)!important;
  border-color:rgba(var(--category-colorscape-rgb),.40)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.24),0 0 36px rgba(var(--category-colorscape-rgb),.10)!important;
}
.category-card.category-card-redesign.category-colorscape-active:hover,
.group-mode.magazine-mode .category-card.category-card-redesign.category-colorscape-active:hover{
  border-color:rgba(var(--category-colorscape-rgb),.66)!important;
  box-shadow:0 22px 62px rgba(0,0,0,.34),0 0 0 1px rgba(var(--category-colorscape-rgb),.18),0 0 44px rgba(var(--category-colorscape-rgb),.16)!important;
}
.category-card.category-card-redesign.category-colorscape-pending{
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .22s ease!important;
}
@media(max-width:1000px){
  .colorscape-menu-toggle-grid{grid-template-columns:1fr!important;}
}

/* Guidevault 0.9.128 - Colorscape applies from cache/fallback first; no visual CSS changes required. */

/* Guidevault 0.9.129 - Cover priority loading.
   Primary/front covers now load before decorative stacked preview covers; visual styling is unchanged. */


/* Guidevault 0.9.131 - Category preview prewarm and no-placeholder stack.
   Primary category covers now use their real src immediately and remain visually on top of the decorative stack. */


/* Guidevault 0.9.132 - Category cover fast path.
   Category menu tiles use one primary real cover plus CSS depth layers instead of
   requesting a full decorative image stack during first open. */
.category-preview-strip.single-cover::before,
.category-preview-strip.single-cover::after{
  content:"";
  position:absolute;
  width:54px;
  height:76px;
  top:16px;
  left:50%;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(160deg,rgba(24,38,56,.78),rgba(6,12,20,.92));
  box-shadow:0 10px 22px rgba(0,0,0,.28);
  pointer-events:none;
}
.category-preview-strip.single-cover::before{
  transform:translateX(-38%) rotate(3deg);
  opacity:.62;
}
.category-preview-strip.single-cover::after{
  transform:translateX(-27%) rotate(6deg);
  opacity:.36;
}
.category-preview-strip.single-cover img.category-preview-primary-cover{
  z-index:3;
  left:50%!important;
  transform:translateX(-58%) rotate(-2deg)!important;
  transition:opacity .12s ease,filter .12s ease!important;
}
.category-preview-strip.single-cover img.category-preview-primary-cover.cover-loading{
  opacity:.96!important;
}
.library-view.group-mode .category-preview-strip.single-cover::before,
.library-view.group-mode .category-preview-strip.single-cover::after{
  width:54px!important;
  height:76px!important;
  top:14px!important;
}
.library-view.group-mode .category-preview-strip.single-cover img.category-preview-primary-cover{
  left:50%!important;
  transform:translateX(-58%) rotate(-2deg)!important;
}
.category-preview-strip.single-cover img.cover-missing{
  display:none!important;
}


/* Guidevault 0.9.133 - Fast faux three-cover category stacks.
   Restores the visual three-cover stack without requesting secondary preview images on first open. */
.category-preview-strip.single-cover.faux-three-cover::before,
.category-preview-strip.single-cover.faux-three-cover::after{
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18)),
    var(--gv-category-preview-cover),
    linear-gradient(160deg,rgba(24,38,56,.78),rgba(6,12,20,.92))!important;
  background-size:cover!important;
  background-position:center!important;
  z-index:1;
  opacity:.72;
  filter:saturate(.82) brightness(.76);
}
.category-preview-strip.single-cover.faux-three-cover::before{
  transform:translateX(-35%) rotate(4deg)!important;
}
.category-preview-strip.single-cover.faux-three-cover::after{
  z-index:2;
  transform:translateX(-20%) rotate(7deg)!important;
  opacity:.48;
  filter:saturate(.72) brightness(.64);
}
.category-preview-strip.single-cover.faux-three-cover img.category-preview-primary-cover{
  z-index:4!important;
}
.category-preview-strip.single-cover.faux-three-cover.category-preview-missing::before,
.category-preview-strip.single-cover.faux-three-cover.category-preview-missing::after{
  display:none!important;
}

/* Guidevault 0.9.134 - collapsible settings sidebar, account polish, and update-history cap. */
.settings-side-nav{
  background:
    radial-gradient(circle at 20% 0%,rgba(47,129,255,.18),transparent 34%),
    linear-gradient(180deg,rgba(13,24,38,.98),rgba(6,13,23,.98))!important;
  border:1px solid rgba(105,166,255,.16)!important;
  border-radius:18px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 18px 44px rgba(0,0,0,.22)!important;
}
.settings-side-nav h3{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:14px 10px 18px!important;
  color:#f2f8ff!important;
}
.settings-side-nav h3::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:#2f81ff;
  box-shadow:0 0 18px rgba(47,129,255,.72);
}
.settings-side-nav .settings-nav-group{
  min-height:46px!important;
  border:1px solid transparent!important;
  background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.008))!important;
  transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease!important;
}
.settings-side-nav .settings-nav-group:hover{
  border-color:rgba(98,189,255,.22)!important;
  background:linear-gradient(135deg,rgba(47,129,255,.15),rgba(12,24,42,.68))!important;
}
.settings-side-nav .settings-nav-group.active,
.settings-side-nav .settings-nav-group.group-active{
  border-color:rgba(98,189,255,.36)!important;
  background:linear-gradient(135deg,rgba(31,111,235,.82),rgba(13,33,62,.92))!important;
  box-shadow:0 12px 26px rgba(31,111,235,.20),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.settings-nav-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(130,184,255,.12);
  color:#d9ecff;
  font-size:15px;
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgba(142,194,255,.10);
}
.settings-nav-text{
  min-width:0;
  flex:1 1 auto;
}
.settings-nav-chevron{
  margin-left:auto;
  color:#9fc9ff;
  font-size:22px;
  line-height:1;
  transform:rotate(90deg);
  transition:transform .14s ease,opacity .14s ease;
  opacity:.9;
}
.settings-nav-group.collapsed .settings-nav-chevron{
  transform:rotate(0deg);
  opacity:.62;
}
.settings-submenu{
  overflow:hidden!important;
  max-height:520px!important;
  opacity:1!important;
  transition:max-height .18s ease,opacity .16s ease,margin .18s ease,padding .18s ease!important;
}
.settings-submenu.collapsed,
.settings-submenu.hidden{
  max-height:0!important;
  opacity:0!important;
  margin-top:0!important;
  margin-bottom:4px!important;
  padding-top:0!important;
  padding-bottom:0!important;
  pointer-events:none!important;
}
.settings-side-nav .settings-subnav{
  position:relative!important;
  min-height:34px!important;
  border:1px solid transparent!important;
  border-radius:10px!important;
  padding-left:16px!important;
}
.settings-side-nav .settings-subnav::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:999px;
  background:rgba(120,180,255,.46);
  margin-right:2px;
  box-shadow:0 0 12px rgba(47,129,255,.18);
}
.settings-side-nav .settings-subnav.active{
  border-color:rgba(98,189,255,.20)!important;
  background:linear-gradient(135deg,rgba(47,129,255,.24),rgba(47,129,255,.09))!important;
}
.settings-side-nav .settings-subnav.active::before{
  background:#62bdff;
  box-shadow:0 0 14px rgba(98,189,255,.62);
}
body.left-collapsed.settings-sidebar-mode .settings-side-nav .settings-nav-group{
  justify-content:center!important;
}
body.left-collapsed.settings-sidebar-mode .settings-nav-text,
body.left-collapsed.settings-sidebar-mode .settings-nav-chevron,
body.left-collapsed.settings-sidebar-mode .settings-submenu{
  display:none!important;
}
body.left-collapsed.settings-sidebar-mode .settings-nav-icon{
  margin:0!important;
}
body.left-collapsed.settings-sidebar-mode .settings-side-nav .settings-nav-group,
body.left-collapsed.settings-sidebar-mode .settings-side-back{
  font-size:0!important;
}

#settingsAccountPanel{
  --account-blue:#2f81ff;
  --account-cyan:#62bdff;
}
#settingsAccountPanel > h1{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  letter-spacing:-.035em!important;
}
#settingsAccountPanel > h1::before{
  content:"";
  width:42px;
  height:42px;
  border-radius:14px;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.65),transparent 14%),
    linear-gradient(135deg,rgba(47,129,255,.95),rgba(98,189,255,.76));
  box-shadow:0 14px 34px rgba(47,129,255,.22),inset 0 1px 0 rgba(255,255,255,.24);
}
#settingsAccountPanel > .sub{
  max-width:820px;
  margin-bottom:20px!important;
  padding:11px 14px;
  border:1px solid rgba(105,166,255,.14);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(47,129,255,.08),rgba(8,16,28,.34));
}
#settingsAccountPanel .account-settings-grid{
  grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr)!important;
  align-items:start!important;
  gap:18px!important;
}
#settingsAccountPanel .settings-card{
  border-color:rgba(105,166,255,.18)!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(47,129,255,.12),transparent 38%),
    linear-gradient(180deg,rgba(18,34,55,.92),rgba(8,17,30,.96))!important;
}
.account-profile-card{
  position:relative!important;
  overflow:hidden!important;
  padding:0!important;
}
.account-profile-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 28%,rgba(47,129,255,.06) 68%,transparent);
  opacity:.9;
}
.account-profile-card > *{
  position:relative;
  z-index:1;
}
.account-card-header{
  padding:20px 22px 16px!important;
  margin:0!important;
  border-bottom:1px solid rgba(117,174,255,.15)!important;
  background:linear-gradient(135deg,rgba(47,129,255,.12),rgba(8,17,30,.18))!important;
}
.account-card-header h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 3px!important;
  font-size:22px!important;
}
.account-card-header h3::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:999px;
  background:#62bdff;
  box-shadow:0 0 18px rgba(98,189,255,.68);
}
.account-profile-card .account-avatar-row.account-avatar-open-row{
  margin:0!important;
  padding:22px!important;
  border-bottom:1px solid rgba(117,174,255,.11)!important;
  background:rgba(5,13,24,.18)!important;
}
.account-avatar-row.account-avatar-open-row .account-avatar-preview{
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.65),transparent 16%),
    linear-gradient(135deg,#2f81ff,#62bdff)!important;
  border-color:rgba(159,207,255,.56)!important;
}
.account-avatar-copy strong{
  color:#f4f9ff!important;
}
.account-profile-card .account-form-grid{
  padding:20px 22px 6px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(210px,1fr))!important;
  gap:14px!important;
}
.account-profile-card .account-form-grid label:last-child{
  grid-column:1 / -1!important;
}
.account-profile-card .account-form-grid label{
  color:#dcecff!important;
  font-weight:850!important;
}
.account-profile-card .account-form-grid input{
  min-height:42px!important;
  border:1px solid rgba(130,179,235,.28)!important;
  border-radius:12px!important;
  background:rgba(5,13,24,.66)!important;
  color:#edf6ff!important;
  padding:0 12px!important;
}
.account-profile-card .account-form-grid input:disabled{
  opacity:.78!important;
}
.account-profile-card .account-actions,
.account-profile-card .account-status{
  margin-left:22px!important;
  margin-right:22px!important;
}
.account-profile-card .account-actions{
  padding-top:12px!important;
  padding-bottom:2px!important;
}
#settingsAccountPanel .account-settings-grid > .settings-card:not(.account-profile-card){
  min-height:220px;
  position:relative;
  overflow:hidden;
}
#settingsAccountPanel .account-settings-grid > .settings-card:not(.account-profile-card)::before{
  content:"Local";
  position:absolute;
  right:16px;
  top:14px;
  border:1px solid rgba(98,189,255,.26);
  border-radius:999px;
  padding:5px 9px;
  color:#9fd6ff;
  background:rgba(47,129,255,.10);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#settingsAccountPanel .account-settings-grid > .settings-card:not(.account-profile-card) h3{
  padding-right:58px;
  font-size:22px!important;
}
#settingsAccountPanel .account-settings-grid > .settings-card:not(.account-profile-card) p{
  color:#b8cce4!important;
  line-height:1.55!important;
}
.system-update-history-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-top:4px;
}
.system-update-history-head h2{
  margin:0!important;
}
.system-update-history-head .sub{
  max-width:520px;
  margin:0!important;
  text-align:right;
  color:#8fa9c8!important;
}
@media(max-width:980px){
  #settingsAccountPanel .account-settings-grid,
  #settingsAccountPanel .account-profile-card .account-form-grid{
    grid-template-columns:1fr!important;
  }
  .account-profile-card .account-form-grid label:last-child{grid-column:auto!important;}
  .system-update-history-head{display:block;}
  .system-update-history-head .sub{text-align:left;margin-top:6px!important;}
}


/* Guidevault 0.9.135 - top bar click hotfix.
   Keeps the top bar above the app view layers and prevents hidden/stuck views from swallowing input. */
.topbar{
  position:sticky!important;
  top:0!important;
  z-index:12000!important;
  isolation:isolate!important;
  pointer-events:auto!important;
}
.topbar::before,
.topbar::after{
  pointer-events:none!important;
}
.topbar .search,
.topbar .search input,
.topbar .task-monitor-wrap,
.topbar .top-icon-button,
.topbar .top-user-wrap,
.topbar .top-user-button,
.topbar button{
  position:relative!important;
  z-index:12002!important;
  pointer-events:auto!important;
}
.task-monitor-panel,
.top-user-menu{
  z-index:12050!important;
  pointer-events:auto!important;
}
#libraryView.hidden,
#settingsView.hidden,
#profileView.hidden,
#readerView.hidden,
#detailView.hidden,
body:not(.settings-sidebar-mode) #settingsView,
body:not(.profile-page-mode) #profileView,
body:not(.reader-page-mode) #readerView{
  pointer-events:none!important;
}
body.panel-animating .main{
  pointer-events:auto!important;
}
body.panel-animating .topbar,
body.panel-animating .topbar *{
  pointer-events:auto!important;
}


/* Guidevault 0.9.136 - account avatar, update-history cap, and settings-sidebar cleanup. */
.account-avatar-preview.has-image,
.account-avatar-row.account-avatar-open-row .account-avatar-preview.has-image,
.top-user-avatar.has-image{
  background:var(--guidevault-avatar-image) center center / cover no-repeat!important;
  color:transparent!important;
  text-indent:-999px!important;
  overflow:hidden!important;
}
.settings-side-nav{
  border-radius:0!important;
}
.system-update-history-head{
  align-items:center!important;
}
.system-update-history-head .sub{
  display:none!important;
}


/* Guidevault 0.9.137 - top bar reliability hardening.
   Keep the top bar and its menus above all app view layers, even when a view transition or hidden section gets stuck. */
.main{
  position:relative!important;
  isolation:isolate!important;
}
.topbar{
  position:sticky!important;
  top:0!important;
  z-index:50000!important;
  pointer-events:auto!important;
  isolation:isolate!important;
  transform:translateZ(0)!important;
}
.topbar,
.topbar *{
  pointer-events:auto!important;
}
.task-monitor-panel,
.top-user-menu{
  z-index:50100!important;
  pointer-events:auto!important;
}
body:not(.auth-locked) #loginView,
#libraryView.hidden,
#settingsView.hidden,
#profileView.hidden,
#readerView.hidden,
#detailView.hidden,
body:not(.settings-sidebar-mode) #settingsView,
body:not(.profile-page-mode) #profileView,
body:not(.reader-page-mode) #readerView{
  pointer-events:none!important;
}
body.panel-animating .main,
body.panel-animating .topbar,
body.panel-animating .topbar *{
  pointer-events:auto!important;
}

/* Guidevault 0.9.139 - Settings sidebar corner refinement.
   Keep the settings sidebar shell square, but allow the interactive containers/icons to be rounded. */
.settings-side-nav{
  border-radius:0!important;
  padding:14px!important;
  background:
    linear-gradient(180deg,rgba(32,87,158,.18),transparent 145px),
    linear-gradient(180deg,rgba(11,22,36,.98),rgba(5,12,22,.99))!important;
  box-shadow:inset -1px 0 0 rgba(124,185,255,.12),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.settings-side-back{
  min-height:40px!important;
  border:1px solid rgba(115,172,242,.16)!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,rgba(47,129,255,.12),rgba(5,13,24,.22))!important;
  color:#dbeaff!important;
}
.settings-side-back:hover{
  border-color:rgba(98,189,255,.36)!important;
  background:linear-gradient(135deg,rgba(47,129,255,.24),rgba(5,13,24,.44))!important;
}
.settings-side-nav h3{
  margin:16px 8px 14px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid rgba(117,174,255,.14)!important;
  font-size:19px!important;
  letter-spacing:.01em!important;
}
.settings-side-nav .settings-nav-group{
  border-radius:14px!important;
  margin-bottom:5px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.018),rgba(255,255,255,.006))!important;
}
.settings-side-nav .settings-nav{
  border-radius:14px!important;
}
.settings-side-nav .settings-nav-group.active,
.settings-side-nav .settings-nav-group.group-active{
  background:linear-gradient(135deg,rgba(47,129,255,.84),rgba(8,29,57,.92))!important;
  border-left:3px solid #62bdff!important;
  border-radius:14px!important;
  padding-left:10px!important;
}
.settings-nav-icon{
  border-radius:10px!important;
  background:rgba(98,189,255,.12)!important;
}
.settings-submenu{
  margin:0 0 10px 12px!important;
  border-left:1px solid rgba(98,189,255,.22)!important;
}
.settings-side-nav .settings-subnav{
  border-radius:10px!important;
  min-height:32px!important;
  font-size:14px!important;
  font-weight:740!important;
}
.settings-side-nav .settings-subnav.active{
  background:linear-gradient(90deg,rgba(47,129,255,.28),rgba(47,129,255,.07))!important;
  border-left:2px solid #62bdff!important;
  padding-left:14px!important;
}
#settingsAccountPanel .account-settings-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr)!important;
}
#settingsAccountPanel .settings-card,
.profile-panel .settings-card,
.profile-activity-card,
.profile-review-card{
  border-color:rgba(102,165,244,.20)!important;
  box-shadow:0 20px 52px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.account-card-header{
  background:
    radial-gradient(circle at 12% 18%,rgba(98,189,255,.20),transparent 34%),
    linear-gradient(135deg,rgba(47,129,255,.16),rgba(8,17,30,.14))!important;
}
.account-avatar-row.account-avatar-open-row .account-avatar-preview{
  box-shadow:0 18px 40px rgba(47,129,255,.24),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
#settingsAccountPanel .account-settings-grid > .settings-card:not(.account-profile-card){
  min-height:0!important;
  display:grid!important;
  align-content:start!important;
  gap:8px!important;
}
#settingsAccountPanel .account-settings-grid > .settings-card:not(.account-profile-card)::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(98,189,255,.42),transparent);
  opacity:.55;
}
.profile-hero{
  border:1px solid rgba(105,166,255,.22)!important;
  box-shadow:0 26px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.08)!important;
}
.profile-tab{
  border-radius:0!important;
}
.profile-tab.active{
  background:linear-gradient(135deg,#1f6feb,#35a2ff)!important;
}
.profile-metric,
.profile-top-card,
.profile-review-editor,
.profile-activity-row{
  background:
    radial-gradient(circle at 0% 0%,rgba(47,129,255,.10),transparent 40%),
    linear-gradient(180deg,rgba(16,30,50,.86),rgba(7,16,29,.88))!important;
}
.category-preview-strip.single-cover.faux-three-cover{
  overflow:visible!important;
  background:
    radial-gradient(circle at 28% 18%,rgba(98,189,255,.14),transparent 28%),
    linear-gradient(160deg,rgba(15,28,45,.96),rgba(5,10,16,.96))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.055),0 18px 36px rgba(0,0,0,.20)!important;
}
.category-preview-strip.single-cover.faux-three-cover::before,
.category-preview-strip.single-cover.faux-three-cover::after{
  width:54px!important;
  height:76px!important;
  top:14px!important;
  border-radius:7px!important;
  border:1px solid rgba(170,205,255,.13)!important;
  box-shadow:
    -3px 0 0 rgba(230,240,255,.10),
    inset -8px 0 16px rgba(0,0,0,.22),
    inset 2px 0 0 rgba(255,255,255,.10),
    0 12px 26px rgba(0,0,0,.30)!important;
  background-image:
    linear-gradient(90deg,rgba(242,247,255,.18) 0 2px,transparent 2px 5px,rgba(255,255,255,.06) 5px 6px,transparent 6px 100%),
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.30)),
    var(--gv-category-preview-cover),
    linear-gradient(160deg,rgba(25,39,58,.86),rgba(6,12,20,.94))!important;
  background-size:8px 100%,cover,cover,cover!important;
  background-position:left center,center,center,center!important;
  background-blend-mode:screen,multiply,luminosity,normal!important;
  filter:blur(.35px) saturate(.34) brightness(.58) contrast(.96)!important;
}
.category-preview-strip.single-cover.faux-three-cover::before{
  z-index:1!important;
  opacity:.78!important;
  transform:translateX(-28%) translateY(2px) rotate(6deg)!important;
}
.category-preview-strip.single-cover.faux-three-cover::after{
  z-index:2!important;
  opacity:.58!important;
  transform:translateX(-12%) translateY(5px) rotate(10deg)!important;
}
.category-preview-strip.single-cover.faux-three-cover img.category-preview-primary-cover{
  z-index:5!important;
  box-shadow:0 16px 34px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.14)!important;
}
.category-preview-strip.single-cover.faux-three-cover::selection{background:transparent;}
.category-card.category-card-redesign:hover .category-preview-strip.single-cover.faux-three-cover::before{
  transform:translateX(-31%) translateY(2px) rotate(5deg)!important;
}
.category-card.category-card-redesign:hover .category-preview-strip.single-cover.faux-three-cover::after{
  transform:translateX(-8%) translateY(5px) rotate(11deg)!important;
}
@media(max-width:980px){
  #settingsAccountPanel .account-settings-grid{grid-template-columns:1fr!important;}
}


/* Guidevault 0.9.140 - Customize shelf drag reorder. */
.customize-shelf-row{
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease, background .16s ease;
}
.customize-shelf-handle{
  width:32px!important;
  min-height:46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  border:1px solid rgba(91,188,255,.18)!important;
  background:linear-gradient(180deg,rgba(47,129,255,.16),rgba(7,16,28,.18))!important;
  color:#a9dcff!important;
  cursor:grab!important;
  user-select:none!important;
  touch-action:none!important;
}
.customize-shelf-handle:hover{
  color:#fff!important;
  border-color:rgba(91,188,255,.45)!important;
  background:linear-gradient(180deg,rgba(47,129,255,.34),rgba(7,16,28,.30))!important;
}
.customize-shelf-handle:active,
.customize-shelf-row.dragging .customize-shelf-handle{
  cursor:grabbing!important;
}
.customize-shelf-row.dragging{
  opacity:.58!important;
  transform:scale(.992)!important;
  border-color:rgba(91,188,255,.42)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.22),0 0 0 1px rgba(91,188,255,.12)!important;
}
.customize-shelf-row.drag-over-before,
.customize-shelf-row.drag-over-after{
  position:relative!important;
  border-color:rgba(91,188,255,.58)!important;
  background:linear-gradient(135deg,rgba(47,129,255,.18),rgba(11,22,34,.64))!important;
}
.customize-shelf-row.drag-over-before::before,
.customize-shelf-row.drag-over-after::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,#5bbcff,transparent);
  box-shadow:0 0 18px rgba(91,188,255,.55);
  pointer-events:none;
}
.customize-shelf-row.drag-over-before::before{top:-7px;}
.customize-shelf-row.drag-over-after::after{bottom:-7px;}
.customize-shelf-actions .ghost[data-shelf-action="up"],
.customize-shelf-actions .ghost[data-shelf-action="down"]{
  display:none!important;
}

/* Guidevault 0.9.144 - Insights Statistics visual depth and graph polish. */
.statistics-panel{
  --stats-blue:#4aa7ff;
  --stats-blue-2:#76d3ff;
  --stats-deep:#06111f;
}
.statistics-panel .settings-title-row{
  position:relative!important;
  padding:18px 20px!important;
  border:1px solid rgba(85,158,239,.20)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(74,167,255,.22),transparent 32%),
    linear-gradient(135deg,rgba(14,35,61,.80),rgba(5,12,22,.72))!important;
  box-shadow:0 22px 56px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}
.statistics-panel .settings-title-row::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 28%,rgba(255,255,255,.055) 42%,transparent 62%);
  opacity:.72;
}
.statistics-panel .settings-page-kicker{
  color:#86d7ff!important;
  text-shadow:0 0 18px rgba(74,167,255,.35)!important;
}
.statistics-tabs{
  padding:6px!important;
  border:1px solid rgba(109,179,255,.18)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,rgba(10,22,37,.72),rgba(4,10,18,.62))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 14px 34px rgba(0,0,0,.18)!important;
}
.statistics-tab{
  border-radius:12px!important;
  color:#b9dbf7!important;
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease!important;
}
.statistics-tab:hover{
  transform:translateY(-1px)!important;
  background:rgba(74,167,255,.13)!important;
  color:#fff!important;
}
.statistics-tab.active{
  background:linear-gradient(145deg,#1f6feb,#47b5ff 58%,#8ee7ff)!important;
  color:#fff!important;
  box-shadow:0 14px 32px rgba(47,129,255,.30),inset 0 1px 0 rgba(255,255,255,.25),inset 0 -10px 18px rgba(0,52,117,.18)!important;
}
.statistics-summary-row{
  grid-template-columns:repeat(4,minmax(170px,1fr))!important;
  gap:14px!important;
  border-bottom:0!important;
  margin:22px 0 30px!important;
}
.statistics-summary-card{
  min-height:128px!important;
  position:relative!important;
  align-items:flex-start!important;
  padding:18px 18px 16px!important;
  border-right:0!important;
  border:1px solid rgba(111,183,255,.20)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 15% 5%,rgba(93,195,255,.22),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(47,129,255,.12),transparent 34%),
    linear-gradient(160deg,rgba(18,39,65,.92),rgba(6,15,28,.94))!important;
  box-shadow:0 20px 46px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -18px 30px rgba(0,0,0,.12)!important;
  overflow:hidden!important;
}
.statistics-summary-card::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:10px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(118,211,255,.42),transparent);
  opacity:.65;
}
.statistics-summary-icon{
  width:42px!important;
  height:42px!important;
  margin:0 0 8px!important;
  border:1px solid rgba(118,211,255,.26)!important;
  border-radius:14px!important;
  color:#9fe4ff!important;
  background:linear-gradient(145deg,rgba(47,129,255,.24),rgba(0,198,255,.10))!important;
  box-shadow:0 12px 28px rgba(47,129,255,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.statistics-summary-icon svg{
  width:27px!important;
  height:27px!important;
  stroke-width:1.8!important;
  filter:drop-shadow(0 0 10px rgba(118,211,255,.35))!important;
}
.statistics-summary-card span{
  text-align:left!important;
  color:#b9cce0!important;
  font-size:12px!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
}
.statistics-summary-card b{
  text-align:left!important;
  font-size:23px!important;
  color:#f2f8ff!important;
  text-shadow:0 0 18px rgba(118,211,255,.18)!important;
}
.statistics-grid.featured,
.statistics-top-grid,
.statistics-user-grid{
  gap:18px!important;
}
.statistics-popular-card,
.statistics-top-card,
.statistics-user-card,
.statistics-activity-card,
.statistics-management-card{
  position:relative!important;
  border:1px solid rgba(100,169,244,.20)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(74,167,255,.13),transparent 34%),
    linear-gradient(180deg,rgba(14,29,50,.95),rgba(6,15,27,.96))!important;
  box-shadow:0 24px 60px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.055)!important;
  overflow:hidden!important;
}
.statistics-popular-card::before,
.statistics-top-card::before,
.statistics-user-card::before,
.statistics-activity-card::before,
.statistics-management-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:72px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(118,211,255,.075),transparent);
}
.statistics-popular-card h3,
.statistics-top-card h3{
  position:relative!important;
  margin-top:0!important;
  color:#f2f8ff!important;
  text-shadow:0 0 20px rgba(74,167,255,.15)!important;
}
.statistics-section-heading{
  color:#9fd9ff!important;
  text-shadow:0 0 16px rgba(74,167,255,.18)!important;
}
.statistics-rank-row,
.statistics-book-row{
  border-bottom-color:rgba(129,190,255,.12)!important;
}
.statistics-book-row img{
  border-radius:9px!important;
  box-shadow:0 12px 24px rgba(0,0,0,.34)!important;
  border:1px solid rgba(183,219,255,.14)!important;
}
.statistics-avatar{
  width:54px!important;
  height:54px!important;
  background:linear-gradient(145deg,#1f6feb,#5bc6ff 70%,#a5efff)!important;
  box-shadow:0 15px 34px rgba(47,129,255,.28),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.statistics-activity-card,
.statistics-management-card{
  padding:20px!important;
}
.statistics-legend{
  justify-content:flex-start!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin:0 0 12px!important;
}
.statistics-legend span{
  padding:6px 10px!important;
  border:1px solid rgba(124,185,255,.16)!important;
  border-radius:999px!important;
  background:rgba(8,20,35,.64)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.statistics-legend i{
  width:13px!important;
  height:13px!important;
  box-shadow:0 0 14px var(--legend-color)!important;
}
.statistics-line-chart{
  width:100%!important;
  min-height:320px!important;
  display:block!important;
  position:relative!important;
}
.statistics-chart-svg{
  width:100%!important;
  min-width:100%!important;
  height:330px!important;
  display:block!important;
  overflow:visible!important;
}
.statistics-chart-frame{
  stroke:rgba(134,215,255,.18);
  stroke-width:1;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.24));
}
.statistics-chart-floor{
  fill:rgba(1,8,15,.38);
  stroke:rgba(118,211,255,.10);
  stroke-width:1;
}
.statistics-grid-line{
  stroke:rgba(162,212,255,.18)!important;
  stroke-width:1!important;
}
.statistics-grid-line.vertical{
  stroke:rgba(162,212,255,.08)!important;
}
.statistics-axis-label{
  fill:#cfe7fb!important;
  font-size:11px!important;
  font-weight:750!important;
  text-shadow:0 1px 3px rgba(0,0,0,.62)!important;
}
.statistics-axis-caption{
  fill:#8fdcff!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.statistics-series-area{
  opacity:.9;
}
.statistics-series-depth{
  fill:none;
  stroke:rgba(0,0,0,.35);
  stroke-width:7;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.60;
}
.statistics-series-line{
  stroke-width:4.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.statistics-point-halo{
  opacity:.16;
}
.statistics-point{
  stroke:#eaf7ff;
  stroke-width:1.4;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
.statistics-empty-chart{
  min-height:300px!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(74,167,255,.12),transparent 42%),
    linear-gradient(180deg,rgba(11,24,41,.72),rgba(5,12,22,.72))!important;
}
.statistics-format-graph{
  gap:14px!important;
  margin:4px 0 22px!important;
}
.statistics-format-bar{
  grid-template-columns:86px minmax(0,1fr) 205px!important;
  gap:14px!important;
  padding:10px 12px!important;
  border:1px solid rgba(119,185,255,.12)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(13,28,47,.72),rgba(6,15,28,.72))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.statistics-format-bar b{
  position:relative!important;
  height:20px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#1f6feb,#42b7ff 58%,#9decff)!important;
  box-shadow:0 12px 24px rgba(47,129,255,.22),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -9px 14px rgba(0,52,117,.22)!important;
  transform:perspective(500px) rotateX(8deg)!important;
}
.statistics-format-bar b::after{
  content:"";
  position:absolute;
  left:7px;
  right:7px;
  top:4px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.34);
  filter:blur(.2px);
}
.statistics-format-table-wrap{
  border:1px solid rgba(119,185,255,.12)!important;
  border-radius:16px!important;
  background:rgba(3,10,18,.34)!important;
}
.statistics-format-table th{
  background:rgba(47,129,255,.10)!important;
}
.statistics-format-table th,
.statistics-format-table td{
  border-bottom-color:rgba(119,185,255,.12)!important;
}
.statistics-chart-note{
  padding:8px 10px!important;
  border-radius:10px!important;
  background:rgba(74,167,255,.07)!important;
  color:#a9cce8!important;
}
@media(max-width:1200px){
  .statistics-summary-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:820px){
  .statistics-summary-row{grid-template-columns:1fr!important;}
  .statistics-format-bar{grid-template-columns:1fr!important;}
  .statistics-format-bar em{text-align:left!important;}
}


/* Guidevault 0.9.144 - Insights compact metrics, Devices visual polish, and main menu gradient. */

/* Statistics top summary: keep the 0.9.141 styling, but make the eight KPI cards fit tighter on one row. */
.statistics-summary-row{
  grid-template-columns:repeat(8,minmax(96px,1fr))!important;
  gap:10px!important;
  margin:16px 0 24px!important;
}
.statistics-summary-card{
  min-height:74px!important;
  display:grid!important;
  grid-template-columns:32px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:9px!important;
  row-gap:1px!important;
  align-items:center!important;
  padding:10px 11px!important;
  border-radius:14px!important;
}
.statistics-summary-card::after{
  left:10px!important;
  right:10px!important;
  bottom:7px!important;
  opacity:.42!important;
}
.statistics-summary-icon{
  grid-row:1 / span 2!important;
  width:32px!important;
  height:32px!important;
  margin:0!important;
  border-radius:11px!important;
}
.statistics-summary-icon svg{
  width:20px!important;
  height:20px!important;
}
.statistics-summary-card span{
  align-self:end!important;
  font-size:10px!important;
  line-height:1.05!important;
  letter-spacing:.045em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.statistics-summary-card b{
  align-self:start!important;
  font-size:18px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
@media(max-width:1500px){
  .statistics-summary-row{grid-template-columns:repeat(4,minmax(140px,1fr))!important;}
}
@media(max-width:900px){
  .statistics-summary-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:560px){
  .statistics-summary-row{grid-template-columns:1fr!important;}
}

/* Insights > Devices: use the same blue-glass/depth language without changing the page layout. */
#settingsInsightDevicesPanel{
  --stats-blue:#4aa7ff;
  --stats-blue-2:#76d3ff;
  --stats-deep:#06111f;
}
#settingsInsightDevicesPanel .settings-title-row{
  position:relative!important;
  padding:18px 20px!important;
  border:1px solid rgba(85,158,239,.20)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 8% 0%,rgba(74,167,255,.22),transparent 32%),
    linear-gradient(135deg,rgba(14,35,61,.80),rgba(5,12,22,.72))!important;
  box-shadow:0 22px 56px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
  overflow:hidden!important;
}
#settingsInsightDevicesPanel .settings-title-row::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 28%,rgba(255,255,255,.055) 42%,transparent 62%);
  opacity:.72;
}
#settingsInsightDevicesPanel .opds-section-kicker{
  color:#86d7ff!important;
  text-shadow:0 0 18px rgba(74,167,255,.35)!important;
}
.insight-device-summary-card{
  position:relative!important;
  border-color:rgba(111,183,255,.20)!important;
  background:
    radial-gradient(circle at 15% 5%,rgba(93,195,255,.20),transparent 34%),
    radial-gradient(circle at 100% 100%,rgba(47,129,255,.11),transparent 34%),
    linear-gradient(160deg,rgba(18,39,65,.90),rgba(6,15,28,.93))!important;
  box-shadow:0 20px 46px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -18px 30px rgba(0,0,0,.12)!important;
  overflow:hidden!important;
}
.insight-device-summary-card::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:9px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(118,211,255,.38),transparent);
  opacity:.58;
}
.insight-device-summary-icon{
  color:#9fe4ff!important;
  border-color:rgba(118,211,255,.26)!important;
  background:linear-gradient(145deg,rgba(47,129,255,.24),rgba(0,198,255,.10))!important;
  box-shadow:0 12px 28px rgba(47,129,255,.22),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.insight-device-summary-icon .gv-device-icon{
  filter:drop-shadow(0 0 10px rgba(118,211,255,.35))!important;
}
.insight-device-summary-card strong{
  color:#f2f8ff!important;
  text-shadow:0 0 18px rgba(118,211,255,.18)!important;
}
.insight-device-summary-card span{
  color:#b9cce0!important;
}
.insight-device-summary-card small{
  color:#8fb1cb!important;
}
.insight-chart-card{
  position:relative!important;
  min-height:300px!important;
  border:1px solid rgba(100,169,244,.20)!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(74,167,255,.13),transparent 34%),
    linear-gradient(180deg,rgba(14,29,50,.95),rgba(6,15,27,.96))!important;
  box-shadow:0 24px 60px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.055)!important;
  overflow:hidden!important;
  padding:20px!important;
}
.insight-chart-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:72px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(118,211,255,.075),transparent);
}
.insight-chart-head{
  position:relative!important;
  z-index:1!important;
}
.insight-chart-head h2{
  color:#f2f8ff!important;
  text-shadow:0 0 20px rgba(74,167,255,.15)!important;
}
.insight-semi-chart{
  position:relative!important;
  z-index:1!important;
  min-height:235px!important;
  padding-top:8px!important;
}
.insight-donut-wrap{
  filter:drop-shadow(0 20px 22px rgba(0,0,0,.28))!important;
}
.insight-donut-track{
  stroke:rgba(118,211,255,.12)!important;
}
.insight-donut-segment{
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.28))!important;
}
.insight-chart-legend{
  justify-content:flex-start!important;
  gap:10px!important;
}
.insight-chart-legend-item{
  padding:6px 10px!important;
  border:1px solid rgba(124,185,255,.16)!important;
  border-radius:999px!important;
  background:rgba(8,20,35,.64)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.insight-chart-legend-item i{
  box-shadow:0 0 14px var(--legend-color)!important;
}
.insight-chart-empty{
  border-radius:18px!important;
  border-color:rgba(119,185,255,.18)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(74,167,255,.12),transparent 42%),
    linear-gradient(180deg,rgba(11,24,41,.72),rgba(5,12,22,.72))!important;
}
.insight-device-client-grid .device-client-card{
  border-color:rgba(100,169,244,.20)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(74,167,255,.11),transparent 34%),
    linear-gradient(180deg,rgba(14,29,50,.92),rgba(6,15,27,.94))!important;
  box-shadow:0 22px 52px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
.insight-device-client-grid .device-card-icon{
  background:linear-gradient(145deg,#1f6feb,#5bc6ff 70%,#a5efff)!important;
  box-shadow:0 15px 34px rgba(47,129,255,.28),inset 0 1px 0 rgba(255,255,255,.30)!important;
}
.insight-device-client-grid .device-card-title h3{
  color:#f2f8ff!important;
}
.insight-device-client-grid .device-card-facts,
.insight-device-client-grid .device-card-footer{
  color:#a9c5dd!important;
}
.insight-device-client-grid .device-card-footer{
  border-top-color:rgba(119,185,255,.14)!important;
}

/* Main Guidevault sidebar: mirror the Settings sidebar gradient shell, while keeping menu items rounded. */
#mainLibraryNav{
  margin:0!important;
  padding:14px!important;
  background:
    linear-gradient(180deg,rgba(32,87,158,.18),transparent 145px),
    linear-gradient(180deg,rgba(11,22,36,.98),rgba(5,12,22,.99))!important;
  box-shadow:inset -1px 0 0 rgba(124,185,255,.12),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
#mainLibraryNav .nav{
  border-radius:14px!important;
  margin-bottom:5px!important;
  border:1px solid transparent!important;
  background:linear-gradient(135deg,rgba(255,255,255,.018),rgba(255,255,255,.006))!important;
}
#mainLibraryNav .nav:hover{
  color:#fff!important;
  border-color:rgba(98,189,255,.28)!important;
  background:linear-gradient(135deg,rgba(47,129,255,.24),rgba(5,13,24,.44))!important;
}
#mainLibraryNav .nav.active{
  color:#fff!important;
  border-color:rgba(98,189,255,.38)!important;
  background:linear-gradient(135deg,rgba(47,129,255,.84),rgba(8,29,57,.92))!important;
  box-shadow:0 14px 30px rgba(47,129,255,.18),inset 0 1px 0 rgba(255,255,255,.12)!important;
}
#mainLibraryNav .nav-icon{
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  background:rgba(98,189,255,.12)!important;
}
body.left-collapsed #mainLibraryNav{
  padding:10px!important;
}
body.left-collapsed #mainLibraryNav .nav{
  margin-bottom:6px!important;
}