/* Prism navigation recovery: cosmetic rules ONLY. No page layout or extra header/drawer. */
:root #appShell :is(.sidebar,.mobile-nav,.app-header,.topbar){
  --pn-bg:#ffffff;--pn-ink:#132b5b;--pn-muted:#7888a6;--pn-line:#e5eaf5;
  --pn-soft:#eff3ff;--pn-blue:#0069fb;--pn-purple:#a98af4;
  --pn-selected:#e9f2ff;--pn-selected-ink:#005be0;
  --pn-profile:linear-gradient(115deg,#eaf2ff,#f2eaff);
  font-family:var(--sans,Inter,system-ui,sans-serif);
}
html[data-app-theme="dark"] #appShell :is(.sidebar,.mobile-nav,.app-header,.topbar){
  --pn-bg:#0d1c38;--pn-ink:#eef4ff;--pn-muted:#a1b0cd;--pn-line:#2c4065;
  --pn-soft:#1a3056;--pn-blue:#67b1ff;--pn-purple:#b59dff;
  --pn-selected:linear-gradient(110deg,#144dab,#5a438a);--pn-selected-ink:#ffffff;
  --pn-profile:linear-gradient(120deg,#182d53,#302c58);
}
/* Do not change visibility, position, heights, or main-wrapper geometry. */
:root #appShell .mobile-nav{
  background:var(--pn-bg)!important;
  border-top:1px solid var(--pn-line)!important;
  box-shadow:0 -2px 12px #001c600b;
}
:root #appShell .mobile-nav button{
  position:relative;color:var(--pn-muted)!important;
  background:transparent!important;border-color:transparent!important;
  box-shadow:none!important;border-radius:9px;
  font-family:inherit;font-weight:600;font-size:10px;letter-spacing:0;
  gap:4px;
}
:root #appShell .mobile-nav button.active{
  color:var(--pn-selected-ink)!important;font-weight:750;
}
:root #appShell .mobile-nav button.active::before{
  content:"";position:absolute;left:50%;top:5px;transform:translateX(-50%);
  width:33px;height:27px;border-radius:9px;background:var(--pn-selected);
  pointer-events:none;z-index:0;
}
:root #appShell .mobile-nav button>.icon,
:root #appShell .mobile-nav button>.soc-nav-profile{
  position:relative;z-index:1;width:20px;height:20px;
  color:inherit!important;flex-shrink:0;
}
:root #appShell .mobile-nav button>.soc-nav-profile{
  background:transparent!important;overflow:visible;
}
:root #appShell .mobile-nav button>.soc-nav-profile .icon{width:20px;height:20px;color:inherit}
:root #appShell .mobile-nav .soc-nav-counts{z-index:2}
:root #appShell .mobile-nav button:not(.active):hover{
  color:var(--pn-blue)!important;background:var(--pn-soft)!important;
}
/* Existing app header and mobile-web topbar: appearance ONLY, no display override. */
:root #appShell .app-header,
:root #appShell .topbar{
  background:var(--pn-bg)!important;border-bottom-color:var(--pn-line)!important;
  color:var(--pn-ink);
}
:root #appShell .app-header .app-add-book{
  color:#fff;background:linear-gradient(115deg,#0069fb,#8c6bf1);
  border-color:transparent;
}
html[data-app-theme="dark"] #appShell .app-header .app-brand-logo{
  filter:brightness(0) invert(1);
}
:root #appShell .topbar :is(.breadcrumb,.breadcrumb strong,.icon-button){
  color:var(--pn-muted);
}
/* Desktop left menu. Keep existing width, layout, links, and room controls. */
@media(min-width:1024px){
  :root #appShell:not(.phone-preview):not(.app-preview) .sidebar{
    background:var(--pn-bg)!important;color:var(--pn-ink)!important;
    border-right:1px solid var(--pn-line)!important;
    --ink:var(--pn-ink);--muted:var(--pn-muted);
  }
  :root #appShell .sidebar .sidebar-brand-caption,
  :root #appShell .sidebar :is(.sidebar-section-heading,.workspace-label){
    color:var(--pn-muted)!important;
  }
  :root #appShell .sidebar .primary-nav .nav-item{
    min-height:44px;border-radius:10px;padding:7px 10px;gap:10px;
    background:transparent!important;color:var(--pn-ink)!important;
    font:650 13px/1.3 var(--sans,Inter,system-ui,sans-serif);
    border-color:transparent!important;box-shadow:none!important;
  }
  :root #appShell .sidebar .primary-nav .nav-item:hover{
    background:var(--pn-soft)!important;color:var(--pn-blue)!important;
  }
  :root #appShell .sidebar .primary-nav .nav-item.active{
    background:var(--pn-selected)!important;color:var(--pn-selected-ink)!important;
  }
  :root #appShell .sidebar :is(.sidebar-nav-icon,.soc-nav-profile){
    flex:0 0 30px;width:30px;height:30px;border-radius:9px;
    background:var(--pn-soft)!important;color:var(--pn-blue)!important;
  }
  :root #appShell .sidebar .primary-nav .nav-item.active :is(.sidebar-nav-icon,.soc-nav-profile){
    color:inherit!important;background:transparent!important;
  }
  :root #appShell .sidebar .primary-nav .nav-item .icon{
    width:18px;height:18px;stroke-width:1.8;
  }
  :root #appShell .sidebar .nav-count{
    background:var(--pn-soft)!important;color:var(--pn-blue)!important;
  }
  :root #appShell .sidebar .profile{
    background:var(--pn-profile)!important;color:var(--pn-ink)!important;
    border:1px solid var(--pn-line)!important;border-radius:12px;
  }
  :root #appShell .sidebar .profile strong{color:var(--pn-ink)!important}
  :root #appShell .sidebar .profile small{color:var(--pn-muted)!important}
  :root #appShell .sidebar .profile .avatar{
    background:linear-gradient(135deg,#0069fb,#a98af4)!important;
    border-color:transparent!important;color:#fff!important;
  }
  :root #appShell .sidebar #addBookButton{
    background:linear-gradient(110deg,#004ffa,#795de2)!important;
    border-color:transparent!important;border-radius:10px;
  }
  html[data-app-theme="dark"] #appShell .sidebar .brand-image{
    filter:brightness(0) invert(1);
  }
  :root #appShell .sidebar .sidebar-studio{
    background:var(--pn-soft);border-color:var(--pn-line);
  }
}
@media(prefers-reduced-motion:reduce){
  :root #appShell .mobile-nav button{transition:none}
}


/* Booknook Prism v3: mobile header and drawer only; page content remains unstyled. */
:root #appShell :is(.prism-mobile-top,.prism-menu-layer){
  --pn-bg:#ffffff;--pn-ink:#132b5b;--pn-muted:#7888a6;--pn-line:#e5eaf5;
  --pn-soft:#eff3ff;--pn-blue:#0069fb;--pn-purple:#a98af4;
  --pn-selected:#e9f2ff;--pn-selected-ink:#005be0;
  --pn-profile:linear-gradient(115deg,#eaf2ff,#f2eaff);
  --pn-lumi:linear-gradient(115deg,#6757d0,#9b76df);
  font-family:var(--sans,Inter,system-ui,sans-serif);
}
html[data-app-theme="dark"] #appShell :is(.prism-mobile-top,.prism-menu-layer){
  --pn-bg:#0d1c38;--pn-ink:#eef4ff;--pn-muted:#a8b6d3;--pn-line:#2c4065;
  --pn-soft:#1a3056;--pn-blue:#67b1ff;--pn-purple:#b59dff;
  --pn-selected:linear-gradient(110deg,#144dab,#5a438a);--pn-selected-ink:#fff;
  --pn-profile:linear-gradient(120deg,#182d53,#302c58);
  --pn-lumi:linear-gradient(115deg,#6757d0,#9b76df);
}
:root #appShell .prism-mobile-top{
  display:none;flex-shrink:0;align-items:center;justify-content:space-between;gap:8px;
  height:52px;min-height:52px;padding:0 14px;background:var(--pn-bg)!important;
  color:var(--pn-ink);border-bottom:1px solid var(--pn-line);position:relative;z-index:32;
}
:root #appShell .prism-brand{
  display:inline-flex;align-items:center;gap:8px;min-width:0;padding:0;
  border:0;background:transparent;color:var(--pn-ink);cursor:pointer;text-decoration:none;
}
:root #appShell .prism-brand-mark{
  display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;
  border-radius:10px;background:linear-gradient(140deg,#0069fb,#a98af4);color:#fff;
  box-shadow:0 3px 10px #0069fb26;
}
:root #appShell .prism-nav-svg{
  display:block;width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
:root #appShell .prism-brand img{
  width:144px;max-width:100%;height:auto;max-height:30px;object-fit:contain;
  filter:none;
}
html[data-app-theme="dark"] #appShell .prism-brand img{filter:brightness(0) invert(1)}
:root #appShell .prism-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}
:root #appShell .prism-top-action,
:root #appShell .prism-close{
  flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;
  padding:0;border:0;border-radius:12px;background:transparent;color:var(--pn-blue);
  cursor:pointer;position:relative;
}
:root #appShell .prism-top-action::before{
  content:"";position:absolute;inset:5px;border-radius:10px;
  background:var(--pn-soft);pointer-events:none;
}
:root #appShell .prism-top-action .prism-nav-svg{position:relative;z-index:1}
html[data-app-theme="dark"] #appShell .prism-mobile-top{
  --pn-bg:#111f3b;
}
:root #appShell .prism-menu-layer{
  position:fixed;inset:0;z-index:1100;background:#0012358f;
  overflow:hidden;overscroll-behavior:contain;
}
:root #appShell:is(.phone-preview,.app-preview) .prism-menu-layer{
  position:absolute;inset:0;border-radius:inherit;
}
:root #appShell .prism-drawer{
  width:88%;max-width:360px;height:100%;min-height:0;
  display:flex;flex-direction:column;gap:0;
  padding:calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;background:var(--pn-bg);
  color:var(--pn-ink);border-right:1px solid var(--pn-line);
  box-shadow:10px 0 28px #00123530;
  animation:prism-in .19s ease-out;
}
:root #appShell .prism-menu-header{
  display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
  gap:6px;margin-bottom:13px;padding:0 3px;
}
:root #appShell .prism-menu-header .prism-brand img{width:130px}
:root #appShell .prism-close{color:var(--pn-muted);border:1px solid var(--pn-line);width:32px;height:32px;flex-basis:32px;border-radius:9px;background:var(--pn-soft)}
:root #appShell .prism-close .prism-nav-svg{width:16px;height:16px}
:root #appShell .prism-reader{
  display:flex;align-items:center;gap:10px;padding:11px 10px;
  flex:0 0 auto;border:1px solid var(--pn-line);border-radius:12px;
  background:var(--pn-profile);color:var(--pn-ink);width:100%;text-align:left;
}
:root #appShell .prism-reader-avatar{
  display:grid;place-items:center;flex:0 0 37px;width:37px;height:37px;
  border-radius:12px;color:#fff;background:linear-gradient(140deg,#0069fb,#a98af4);
  font-size:15px;font-weight:800;overflow:hidden;
}
:root #appShell .prism-reader-avatar img{width:100%;height:100%;object-fit:cover}
:root #appShell .prism-reader-copy{min-width:0;flex:1}
:root #appShell .prism-reader-copy strong{display:block;font-size:11px;font-weight:760;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:root #appShell .prism-reader-copy small{display:block;margin-top:4px;font-size:9px;color:var(--pn-muted);line-height:1.3}
:root #appShell .prism-reader>.prism-nav-svg{width:15px;height:15px;color:var(--pn-purple)}
:root #appShell .prism-menu-nav{flex:0 0 auto;display:flex;flex-direction:column;gap:0}
:root #appShell .prism-menu-label{
  margin:14px 9px 6px;color:var(--pn-muted);
  font-size:9px;line-height:1.3;font-weight:800;letter-spacing:1.2px;
}
:root #appShell .prism-menu-row{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;
  width:100%;min-height:44px;margin:0;padding:6px 9px;
  border:0;border-radius:9px;background:transparent;color:var(--pn-ink);
  text-align:left;font:650 12px/1.3 var(--sans,Inter,system-ui,sans-serif);
  cursor:pointer;
}
:root #appShell .prism-menu-icon{
  flex:0 0 28px;display:grid;place-items:center;
  width:28px;height:28px;background:var(--pn-soft);border-radius:8px;color:var(--pn-blue);
}
:root #appShell .prism-menu-icon .prism-nav-svg{width:17px;height:17px}
:root #appShell .prism-menu-row.active{
  background:var(--pn-selected);color:var(--pn-selected-ink);font-weight:750;
}
:root #appShell .prism-menu-row.active .prism-menu-icon{background:transparent;color:inherit}
:root #appShell .prism-menu-row:not(.active):hover{background:var(--pn-soft);color:var(--pn-blue)}
:root #appShell .prism-menu-separator{height:1px;background:var(--pn-line);margin:9px 7px 2px}
:root #appShell .prism-lumi{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;width:100%;margin-top:auto;
  padding:12px;border:0;border-radius:12px;background:var(--pn-lumi);
  color:#fff;text-align:left;cursor:pointer;
}
:root #appShell .prism-lumi-mark{
  display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;
  border-radius:10px;background:#ffffff23;font-size:20px;
}
:root #appShell .prism-lumi strong{display:block;font-size:11px;font-weight:750}
:root #appShell .prism-lumi small{display:block;margin-top:4px;font-size:9px;opacity:.9}
:root #appShell .prism-lumi>span:last-child{margin-left:auto;font-size:20px}
:root #appShell .prism-menu-footnote{
  flex:0 0 auto;padding:11px 4px 0;color:var(--pn-muted);font-size:9px;
}
:root #appShell :is(.prism-mobile-top,.prism-drawer) :is(button,a):focus-visible{
  outline:2px solid var(--pn-blue)!important;outline-offset:2px;
}
@keyframes prism-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){:root #appShell .prism-drawer{animation:none}}
/* Mobile web keeps the shared header on the main reading pages. */
@media(max-width:1023px){
  :root #appShell:not(.phone-preview):not(.app-preview) .prism-mobile-top{display:flex}
  :root #appShell:not(.phone-preview):not(.app-preview) .topbar{display:none!important}
}
:root #appShell.phone-preview:not(.app-preview) .prism-mobile-top{display:flex}
:root #appShell.app-preview .prism-mobile-top{display:none!important}
:root #appShell:not(.app-preview):is([data-active-tab="books"],[data-active-tab="discover"],[data-active-tab="social"],[data-active-tab="dash"]) .prism-mobile-top{
  position:sticky;top:0;
}
:root #appShell:is(.phone-preview,.app-preview) .topbar{display:none!important}
@media(min-width:1024px){
  :root #appShell:not(.phone-preview):not(.app-preview) .prism-menu-layer{display:none!important}
}
/* Approved pill states on the ORIGINAL mobile navigation buttons. */
:root #appShell .mobile-nav{gap:0;padding:6px 6px max(12px,env(safe-area-inset-bottom))}
:root #appShell .mobile-nav button{
  min-height:51px;padding:5px 1px;border-radius:9px;gap:4px;
  font-size:10px;line-height:1.2;
}
:root #appShell .mobile-nav button>.icon,
:root #appShell .mobile-nav button>.soc-nav-profile{
  width:19px;height:19px;
}
:root #appShell .mobile-nav button.active::before{top:5px}
:root #appShell .mobile-nav button.active .icon{color:inherit!important}
html[data-app-theme="dark"] #appShell .mobile-nav{--pn-bg:#101f3b}
html[data-app-theme="dark"] #appShell .mobile-nav button.active::before{
  box-shadow:0 2px 10px #6950b866;
}
@media(max-width:350px){
  :root #appShell .prism-brand img{width:116px}
  :root #appShell .prism-menu-header .prism-brand img{width:108px}
}

/* Prism v5 — mobile arcade-inspired focus with ONE count per destination. */
:root #appShell :is(.sidebar,.mobile-nav,.prism-menu-layer,.prism-mobile-top){
 --pn-request:#1767db;--pn-likes:#af2f74;--pn-comments:#895600;
 --pn-request-bg:#e9f1ff;--pn-likes-bg:#fff0f7;--pn-comments-bg:#fff5d9;
 --pn-social-ring:#fff;--pn-social-label:#6549ba;
}
html[data-app-theme="dark"] #appShell :is(.sidebar,.mobile-nav,.prism-menu-layer,.prism-mobile-top){
 --pn-request:#92c4ff;--pn-likes:#ff9dcf;--pn-comments:#ffe099;
 --pn-request-bg:#15335d;--pn-likes-bg:#462542;--pn-comments-bg:#4c3a22;
 --pn-social-ring:#101f3b;--pn-social-label:#d4c4ff;
}
:root #appShell .mobile-nav{
 display:flex!important;align-items:stretch;justify-content:space-around;
 gap:1px;padding:5px 6px max(10px,env(safe-area-inset-bottom));
 overflow:visible;border-top:1px solid var(--pn-line)!important;
}
@media(min-width:1024px){
 :root #appShell:not(.phone-preview):not(.app-preview) .mobile-nav{display:none!important}
}
:root #appShell .mobile-nav>button{
 position:relative;display:flex;flex:1;min-width:0;min-height:67px;
 flex-direction:column;align-items:center;justify-content:center;gap:5px;
 padding:7px 0 5px;border:0;border-radius:11px;
 font:700 10px/1.15 var(--sans,Inter,system-ui,sans-serif);
 letter-spacing:.04px;color:var(--pn-muted)!important;
 background:transparent!important;box-shadow:none!important;
}
:root #appShell .mobile-nav>button>.icon{
 width:22px!important;height:22px!important;position:relative;z-index:1;
 flex-shrink:0;stroke-width:1.9;color:inherit!important;
}
:root #appShell .mobile-nav>button.active{color:var(--pn-blue)!important;font-weight:800}
:root #appShell .mobile-nav>button.active::before{
 width:41px;height:33px;top:2px;border-radius:12px;
 background:var(--pn-selected)!important;box-shadow:none!important;
}
:root #appShell .mobile-nav>button[data-tab="social"]{
 color:var(--pn-social-label)!important;z-index:4;overflow:visible!important;
 padding-top:2px;gap:3px;isolation:isolate;
 font-size:10.5px;font-weight:850;transform:none;
}
:root #appShell .mobile-nav>button[data-tab="social"].active{
 color:var(--pn-social-label)!important;
}
:root #appShell .mobile-nav>button[data-tab="social"]::before{
 content:none!important;display:none!important;
}
:root #appShell .mobile-nav>button[data-tab="social"]>.soc-nav-profile{
 display:grid!important;place-items:center;
 flex:0 0 46px!important;width:46px!important;height:46px!important;
 position:relative;z-index:2;transform:translateY(-5px);margin:0 0 -4px!important;
 padding:0!important;overflow:hidden!important;
 border:3px solid var(--pn-social-ring)!important;border-radius:17px!important;
 background:linear-gradient(145deg,#0069fb 5%,#5564ed 48%,#a98af4 100%)!important;
 box-shadow:0 7px 14px #474ace48,0 2px 4px #001c6020,
 inset 0 1px #ffffff65!important;
 color:#fff!important;
}
:root #appShell .mobile-nav>button[data-tab="social"].active>.soc-nav-profile{
 background:linear-gradient(145deg,#0051d9,#6f4ee3 70%,#b99dfc)!important;
 box-shadow:0 7px 18px #6f52da62,0 2px 5px #001c6026!important;
}
:root #appShell .mobile-nav>button[data-tab="social"]>.soc-nav-profile :is(.soc-nav-person,.icon){
 display:block;width:25px!important;height:25px!important;
 color:#fff!important;stroke:#fff;stroke-width:2;
}
:root #appShell .mobile-nav>button[data-tab="social"]>.soc-nav-profile img{
 inset:0;object-fit:cover;width:100%;height:100%;border-radius:14px;
}
:root #appShell .sidebar .soc-nav-person{
 width:19px;height:19px;display:block;color:var(--pn-blue);
}
:root #appShell .prism-menu-row .prism-nav-svg{stroke-width:1.9}
:root #appShell .mobile-nav .soc-nav-counts,
:root #appShell .sidebar .soc-nav-counts{display:none!important}
/* One unobtrusive numeric badge for library, one for Social. */
:root #appShell .prism-shelf-badge,
:root #appShell .prism-coin-badge,
:root #appShell .prism-social-total{
 display:inline-flex;align-items:center;justify-content:center;
 flex:0 0 auto;min-width:22px;min-height:22px;padding:3px 6px;
 background:var(--pn-blue);color:#fff!important;border-radius:9px;
 font:800 10px/1 var(--sans,Inter,system-ui,sans-serif);
 font-variant-numeric:tabular-nums;white-space:nowrap;
}
:root #appShell .prism-shelf-badge[hidden],
:root #appShell .prism-social-total[hidden],
:root #appShell .prism-social-breakdown[hidden]{display:none!important}
:root #appShell .sidebar .prism-shelf-badge{display:none!important}
:root #appShell .sidebar .nav-count[hidden]{display:none!important}
:root #appShell .sidebar .nav-count{
 min-width:22px;background:var(--pn-soft)!important;
 color:var(--pn-blue)!important;font-variant-numeric:tabular-nums;
}
:root #appShell .mobile-nav .prism-shelf-badge{
 position:absolute;z-index:5;top:2px;left:calc(50% + 10px);
 min-width:17px;min-height:17px;height:17px;padding:1px 4px;
 font-size:9px;border-radius:9px;border:1px solid var(--pn-bg);
}
:root #appShell .prism-menu-row .prism-shelf-badge,
:root #appShell .prism-menu-row .prism-social-total,
:root #appShell .sidebar .prism-social-total{margin-left:auto}
:root #appShell .mobile-nav .prism-social-total{
 position:absolute;z-index:8;top:0;left:calc(50% + 14px);
 min-width:20px;min-height:20px;padding:2px 5px;
 border-radius:12px;
 border:2px solid var(--pn-bg);
 color:#fff!important;
 background:linear-gradient(130deg,#dc387d,#9555e5);
 box-shadow:0 3px 8px #5f2d9240;
}
:root #appShell .prism-social-total{background:linear-gradient(120deg,#0069fb,#8966e9)}
:root #appShell .prism-coin-badge{
 margin-left:auto;min-width:0;padding:5px 9px;
 background:var(--pn-soft);color:var(--pn-purple)!important;
 border:1px solid var(--pn-line);font-size:10px;
}
:root #appShell .prism-reader-copy small{
 color:var(--pn-muted)!important;opacity:1;
}
/* Notification categories appear as three readable pill labels in the drawer. */
:root #appShell .prism-social-breakdown{
 display:flex;flex-wrap:wrap;align-items:center;gap:5px;
 margin:2px 3px 6px 8px;padding:0;
}
:root #appShell .prism-activity-chip{
 display:inline-flex;align-items:center;gap:4px;
 padding:5px 7px;border-radius:9px;border:1px solid currentColor;
 font:750 9px/1.2 var(--sans,Inter,system-ui,sans-serif);
 white-space:nowrap;
}
:root #appShell .prism-activity-chip::before{
 content:"";display:block;flex:0 0 6px;width:6px;height:6px;border-radius:50%;
 background:currentColor;
}
:root #appShell .prism-activity-request{
 color:var(--pn-request);background:var(--pn-request-bg);
 border-color:color-mix(in srgb,var(--pn-request) 22%,transparent);
}
:root #appShell .prism-activity-like{
 color:var(--pn-likes);background:var(--pn-likes-bg);
 border-color:color-mix(in srgb,var(--pn-likes) 22%,transparent);
}
:root #appShell .prism-activity-comment{
 color:var(--pn-comments);background:var(--pn-comments-bg);
 border-color:color-mix(in srgb,var(--pn-comments) 24%,transparent);
}
:root #appShell .prism-demo-notices{
 display:flex;align-items:center;justify-content:space-between;gap:8px;
 width:100%;padding:9px 10px;border-radius:10px;
 background:var(--pn-soft)!important;color:var(--pn-ink)!important;
 border:1px solid var(--pn-line)!important;text-align:left;
}
:root #appShell .prism-demo-notices span:first-child{display:flex;flex-direction:column;gap:3px}
:root #appShell .prism-demo-notices strong{
 font:750 10px/1.25 var(--sans,system-ui,sans-serif);color:var(--pn-ink)!important;
}
:root #appShell .prism-demo-notices small{
 font:500 9px/1.25 var(--sans,system-ui,sans-serif);color:var(--pn-muted)!important;
}
:root #appShell .prism-demo-switch{
 flex:0 0 29px;width:29px;height:17px;position:relative;
 border-radius:9px;background:#9ca7bd;
}
:root #appShell .prism-demo-switch:before{
 content:"";position:absolute;left:3px;top:3px;width:11px;height:11px;
 border-radius:50%;background:#fff;transition:transform .15s ease;
}
:root #appShell .prism-demo-notices[aria-pressed="true"] .prism-demo-switch{
 background:linear-gradient(115deg,#0069fb,#a98af4);
}
:root #appShell .prism-demo-notices[aria-pressed="true"] .prism-demo-switch:before{
 transform:translateX(12px);
}
@media(prefers-reduced-motion:reduce){
 :root #appShell .prism-demo-switch:before{transition:none}
}

/* NovaNook mobile and app navigation palette. */
:root #appShell :is(.mobile-nav,.prism-mobile-top,.prism-menu-layer,.app-header){
 --pn-bg:#f8faff;--pn-ink:#0a0f2d;--pn-muted:#606581;--pn-line:#e5dff5;
 --pn-soft:#f0ebff;--pn-blue:#6541d4;--pn-purple:#7b4dff;
 --pn-selected:linear-gradient(120deg,#eaddff,#e9f3ff);--pn-selected-ink:#5632bc;
 --pn-profile:linear-gradient(115deg,#f0e6ff,#edf6ff);
 --pn-lumi:linear-gradient(115deg,#7544dc,#3b82ff);
 --pn-social-ring:#f8faff;--pn-social-label:#6541d4;
 font-family:Inter,"DM Sans",system-ui,sans-serif;
}
:root #appShell .prism-drawer{
 background:radial-gradient(ellipse at 100% 0,#d946ff0b,transparent 45%),var(--pn-bg);
 box-shadow:12px 0 36px #36206126;
}
:root #appShell .prism-menu-layer{background:#0a0f2d8f}
:root #appShell .prism-menu-row{
 font-family:Inter,"DM Sans",system-ui,sans-serif;font-weight:600;border-radius:12px;
}
:root #appShell :is(.prism-reader-copy strong,.prism-lumi strong,.prism-menu-label){
 font-family:Poppins,Inter,system-ui,sans-serif;font-weight:600;
}
:root #appShell .prism-reader{border-radius:18px;border-color:var(--pn-line)}
:root #appShell .prism-menu-icon{border-radius:10px}
:root #appShell :is(.prism-brand-mark,.prism-reader-avatar){
 background:linear-gradient(140deg,#d946ff,#7b4dff 38%,#3b82ff 75%,#00e5ff);
 box-shadow:0 3px 12px #7b4dff26;
}
:root #appShell .prism-lumi{border-radius:16px}
:root #appShell .mobile-nav{box-shadow:0 -4px 20px #6943bf0c}
:root #appShell .mobile-nav>button{font-family:Inter,"DM Sans",system-ui,sans-serif;font-weight:600}
:root #appShell .mobile-nav>button.active{color:var(--pn-selected-ink)!important;font-weight:700}
:root #appShell .mobile-nav>button[data-tab="social"]>.soc-nav-profile{
 background:linear-gradient(140deg,#d946ff,#7b4dff 38%,#3b82ff 78%,#00e5ff)!important;
 box-shadow:0 5px 14px #7b4dff30,inset 0 1px #ffffff65!important;
}
:root #appShell .mobile-nav>button[data-tab="social"].active>.soc-nav-profile{
 background:linear-gradient(140deg,#b52ee4,#6541d4 40%,#2367da 80%,#0cb8d7)!important;
 box-shadow:0 5px 18px #7b4dff45,inset 0 1px #ffffff65!important;
}
:root #appShell :is(.mobile-nav,.prism-menu-layer,.prism-mobile-top) .prism-social-total{
 background:linear-gradient(120deg,#7544dc,#3b82ff);
}
:root #appShell .app-header .app-add-book{background:linear-gradient(115deg,#7b4dff,#3b82ff);color:#fff}
:root #appShell .app-header #appPageTitle{font-family:Poppins,Inter,system-ui,sans-serif;font-weight:600}
:root #appShell .mobile-nav>button:focus-visible{outline:2px solid var(--pn-blue);outline-offset:-2px}
html[data-app-theme="dark"] #appShell :is(.mobile-nav,.prism-mobile-top,.prism-menu-layer,.app-header){
 --pn-bg:#18172b;--pn-ink:#f3efff;--pn-muted:#b9b7d1;--pn-line:#39304e;
 --pn-soft:#2b2346;--pn-blue:#c4acff;--pn-purple:#ba9bff;
 --pn-selected:linear-gradient(120deg,#3e2c61,#253655);--pn-selected-ink:#e2d5ff;
 --pn-profile:linear-gradient(115deg,#302344,#212e47);
 --pn-social-ring:#18172b;--pn-social-label:#c4acff;
}

/* Center the selected destination on its complete touch target. */
:root #appShell .mobile-nav>button.active:not([data-tab="social"]){
 background:var(--pn-soft)!important;color:var(--pn-selected-ink)!important;
 box-shadow:inset 0 0 0 1px var(--pn-line)!important;
}
:root #appShell .mobile-nav>button.active::before{content:none;display:none}
:root #appShell .prism-menu-row.active{
 background:linear-gradient(115deg,#6541d4,#345dc5);color:#fff;font-weight:700;
 box-shadow:0 3px 10px #6541d41a;
}
:root #appShell .prism-menu-row.active .prism-menu-icon{background:#ffffff20;color:#fff}
html[data-app-theme="dark"] #appShell .prism-menu-row.active{background:linear-gradient(115deg,#5936a5,#304d97);color:#fff}

/* Keep mobile navigation anchored while the document scrolls. */
:root #appShell:not(.app-preview) .prism-mobile-top{position:sticky;top:0;z-index:32}
:root #appShell.phone-preview:not(.app-preview){overflow:clip}