/* RecShelf Sidebar v2 — light, premium */
:root{
  --rs-bg: #fdf7fd;         /* page */
  --rs-surface:#ffffff;     /* cards/panels */
  --rs-ink:#1f1b24;         /* text */
  --rs-muted:#6c6a73;       /* secondary text */
  --rs-bd: rgba(2,6,23,.08);
  --rs-accent:#6b5dd3;
  --rs-ok:#3bb273;
  --rs-warn:#f59e0b;
  --rs-width: 288px;
  --rs-width-collapsed: 72px;
  --rs-radius: 16px;
  --rs-shadow: 0 10px 30px rgba(2,6,23,.10);
  --rs-fast: 140ms cubic-bezier(.2,.7,.2,1);
  --rs-med: 200ms cubic-bezier(.2,.7,.2,1);
}

body{ background: var(--rs-bg); }
body.rec-shell-on{ padding-left: var(--rs-width); transition: padding var(--rs-med); }
@media (max-width:1100px){
  body.rec-shell-on{ padding-left: 0; }
}

/* SIDENAV */
:root{ --rs-top: 0px; } /* set by JS */

.rs-sidenav{
  position:fixed;
  left:0;
  top:var(--rs-top, 0px);
  height: calc(100vh - var(--rs-top, 0px));
  width:var(--rs-width);
  background:var(--rs-surface);
  border-right:1px solid var(--rs-bd);
  box-shadow: var(--rs-shadow);
  z-index: 1000;
  display:flex;
  flex-direction:column;
}

.rs-inner{ height:100%; display:flex; flex-direction:column; }

/* Backdrop for drawer (mobile) */
.rs-backdrop{
  position:fixed;
  left:0;
  top:var(--rs-top, 0px);
  width:100vw;
  height: calc(100vh - var(--rs-top, 0px));
  background:rgba(17,16,19,.36);
  backdrop-filter: blur(2px);
}

.rs-backdrop[hidden]{ display:none; }

/* Collapsed (desktop) */
body.rs--collapsed .rs-sidenav{ width: var(--rs-width-collapsed); }
body.rs--collapsed{ padding-left: var(--rs-width-collapsed) !important; }
body.rs--collapsed .rs-dock .label,
body.rs--collapsed .rs-me-id,
body.rs--collapsed .rs-sec__title,
body.rs--collapsed .rs-chip .text,
body.rs--collapsed .rs-a .label,
body.rs--collapsed .rs-btn span { display:none; }
body.rs--collapsed .rs-sec__tools{ opacity:0; pointer-events:none; }
body.rs--collapsed .rs-sec{ padding-left:10px; padding-right:10px; }

/* Top */
.rs-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:12px 12px 8px 12px; border-bottom:1px solid var(--rs-bd);
}
.rs-me{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--rs-ink); }
.rs-me-ava{
  width:36px; height:36px; border-radius:999px; background:#f1f1f3 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px var(--rs-bd);
}
.rs-me-id{ display:grid; line-height:1.1; }
.rs-me-name{ font-weight:800; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-me-handle{ font-size:.86rem; color:var(--rs-muted); }
.rs-me-ring{
  --p: var(--ring, 62%);
  position:relative; margin-left:auto; flex:0 0 auto;
  width:36px; height:36px; border-radius:999px; display:grid; place-items:center;
  background:
    conic-gradient(var(--rs-accent) var(--p), rgba(2,6,23,.1) calc(var(--p) + 1%), rgba(2,6,23,.06) 0);
  box-shadow: inset 0 0 0 4px #fff, 0 4px 10px rgba(2,6,23,.12);
}
.rs-me-lv{ font-size:.78rem; font-weight:800; }

.rs-top-actions{ display:flex; gap:6px; }
.rs-ico{
  width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:12px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--rs-bd);
  cursor:pointer; transition: transform var(--rs-fast), box-shadow var(--rs-fast), background var(--rs-fast);
}
.rs-ico:hover{ box-shadow:0 6px 16px rgba(2,6,23,.12), inset 0 0 0 1px rgba(2,6,23,.16); }
.rs-ico:active{ transform: translateY(1px) scale(.98); }
.rs-ico.small{ width:28px; height:28px; border-radius:10px; }

/* Dock */
.rs-dock{ padding:10px 10px 8px 10px; border-bottom:1px solid var(--rs-bd); }
.rs-dock ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.rs-dock-a{
  display:flex; align-items:center; gap:10px; padding:10px 10px; border-radius:12px;
  text-decoration:none; color:var(--rs-ink); font-weight:700;
  box-shadow: inset 0 0 0 1px var(--rs-bd);
  transition: background var(--rs-fast), box-shadow var(--rs-fast), transform var(--rs-fast);
}
.rs-dock-a i{ width:20px; text-align:center; }
.rs-dock-a:hover{ background:rgba(107,93,211,.06); box-shadow: inset 0 0 0 1px rgba(107,93,211,.26); }
.rs-dock-a:active{ transform: translateY(1px); }
.rs-dock .label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Sections */
.rs-sec{ padding:12px; }
.rs-sec + .rs-sec{ padding-top:8px; }
.rs-sec__head{ display:flex; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; }
.rs-sec__title{ font-size:.92rem; font-weight:900; letter-spacing:.2px; }
.rs-sec__tools{ display:flex; gap:6px; }

.rs-chip{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  text-decoration:none; color:var(--rs-ink);
  background: linear-gradient(180deg, #fff, rgba(255,255,255,.9));
  box-shadow: inset 0 0 0 1px var(--rs-bd);
  transition: box-shadow var(--rs-fast), transform var(--rs-fast), background var(--rs-fast);
}
.rs-chip .ico{ width:20px; text-align:center; }
.rs-chip .text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-chip:hover{ box-shadow: 0 6px 18px rgba(2,6,23,.12), inset 0 0 0 1px rgba(107,93,211,.26); }
.rs-chip:active{ transform: translateY(1px); }

/* Scroll column */
/* Scroll column */
.rs-scroll{
  overflow:auto;
  min-height:0;
  flex:1 1 auto;      /* <— important: fills remaining height */
  display:block;
}

.rs-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.rs-item{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:8px;
  padding:0; background:#fff; border-radius:12px; box-shadow: inset 0 0 0 1px var(--rs-bd);
}
.rs-a{ display:flex; gap:10px; align-items:center; padding:10px 12px; text-decoration:none; color:var(--rs-ink); min-width:0; }
.rs-a .ico{ width:20px; text-align:center; }
.rs-a .label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rs-unpin, .rs-pin-mini{
  margin-right:6px; width:28px; height:28px; border:0; border-radius:10px; cursor:pointer;
  display:grid; place-items:center; background:#fff; box-shadow: inset 0 0 0 1px var(--rs-bd);
  transition: box-shadow var(--rs-fast), transform var(--rs-fast), background var(--rs-fast);
}
.rs-unpin:hover, .rs-pin-mini:hover{ box-shadow:0 6px 16px rgba(2,6,23,.12), inset 0 0 0 1px rgba(107,93,211,.26); }
.rs-unpin:active, .rs-pin-mini:active{ transform: translateY(1px) scale(.98); }

.rs-empty, .muted{ color:var(--rs-muted); padding:8px 8px; }

/* Drag state */
.rs-item[draggable="true"]{ cursor:grab; }
.rs-item.dragging{ opacity:.6; }
.rs-item.drop-target{ outline:2px dashed rgba(107,93,211,.45); outline-offset:2px; }

/* Bottom */
.rs-bottom{
  margin-top:auto; padding:12px; border-top:1px solid var(--rs-bd); display:grid; gap:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.9));
}
.rs-btn{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; border-radius:12px;
  background:#fff; box-shadow: inset 0 0 0 1px var(--rs-bd); cursor:pointer;
  text-decoration:none; color:var(--rs-ink); font-weight:800;
  transition: box-shadow var(--rs-fast), transform var(--rs-fast), background var(--rs-fast);
}
.rs-btn:hover{ box-shadow:0 6px 16px rgba(2,6,23,.12), inset 0 0 0 1px rgba(107,93,211,.26); }
.rs-btn:active{ transform: translateY(1px) scale(.99); }
.rs-btn.ghost{ background:linear-gradient(180deg, #fff, rgba(255,255,255,.92)); }

/* Section collapse (saved in localStorage) */
.rs-collapsed{ display:none !important; }
/* Force vertical stacking inside our sidebar, even if theme styles target <section> */
.rs-sidenav .rs-sec{ display:block; width:100%; float:none; clear:both; }

/* Drawer mode */
@media (max-width:1100px){
  .rs-sidenav{ transform: translateX(-110%); transition: transform var(--rs-med); }
  body.rs--drawer-open .rs-sidenav{ transform: translateX(0%); }
  body.rs--drawer-open #rs-backdrop{ display:block; }
}

/* Focus rings (accessibility) */
.rs-sidenav :focus-visible{
  outline: 0;
  box-shadow: 0 0 0 3px rgba(107,93,211,.35) !important;
  border-radius: 12px;
}
/* Pin-this button in "You're viewing" */
.rs-pin-btn{
  width:34px; height:34px;
  display:grid; place-items:center;
  border:0; border-radius:12px; cursor:pointer;
  background:#fff; box-shadow: inset 0 0 0 1px var(--rs-bd);
  transition: transform var(--rs-fast), box-shadow var(--rs-fast), background var(--rs-fast);
}
.rs-pin-btn:hover{ box-shadow:0 6px 16px rgba(2,6,23,.12), inset 0 0 0 1px rgba(107,93,211,.26); }
.rs-pin-btn:active{ transform: translateY(1px) scale(.98); }
/* Make sure global theme styles don't bleed in */
.rs-sidenav .rs-btn,
.rs-sidenav .rs-ico,
.rs-sidenav .rs-pin-btn,
.rs-sidenav .rs-a,
.rs-sidenav .rs-chip{
  box-sizing: border-box;
  background:#fff;
}
.rs-dock-a i{ width:20px; text-align:center; display:inline-block; }
:root{ --rs-top: 0px; }
.rs-sidenav{ top: var(--rs-top, 0px); height: calc(100dvh - var(--rs-top, 0px)); }
.rs-backdrop{ top: var(--rs-top, 0px); height: calc(100dvh - var(--rs-top, 0px)); }

.rs-sidenav .rs-sec{ display:block; width:100%; float:none; clear:both; }
.rs-sidenav .rs-list{ display:grid; }
.rs-sidenav .rs-scroll{ overflow-x:hidden; }
.rs-dock-a i, .rs-a .ico{ display:inline-grid; place-items:center; }
/* --- Header should span over the sidebar and win the stacking order --- */
header.site-header,
#masthead,
.main-header-bar,
.elementor-location-header {
  position: sticky;        /* or fixed if your header is fixed already */
  top: 0;
  left: 0; right: 0;
  z-index: 20000 !important; /* above the sidebar */
}

/* Sidebar aligns directly under the header/admin bar (JS sets --rs-top) */
#rs-sidenav,
#rs-backdrop {
  top: var(--rs-top, 0px) !important;
  height: calc(100dvh - var(--rs-top, 0px)) !important;
}

/* Never indent the header to make room for the sidebar */
body.rec-shell-on header.site-header,
body.rec-shell-on #masthead,
body.rec-shell-on .main-header-bar,
body.rec-shell-on .elementor-location-header {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* --- Kill any grid/flex/floats leaking from theme/Elementor inside the sidebar --- */
#rs-sidenav .rs-scroll,
#rs-sidenav .rs-sections,
#rs-sidenav .rs-sec-wrap,
#rs-sidenav .rs-sec {
  display: block !important;
  width: 100% !important;
  float: none !important;
  clear: both !important;
}

#rs-sidenav .rs-sec + .rs-sec {
  margin-top: 14px;
}

/* Lists are vertical stacks, no horizontal wrap or scroll */
#rs-sidenav .rs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  overflow-x: hidden !important;
}

/* Each item row */
#rs-sidenav .rs-item {
  display: grid;
  grid-template-columns: 1fr auto;  /* link + (x/pin) button */
  align-items: center;
  min-width: 0; /* enables ellipsis */
}

#rs-sidenav .rs-a {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

#rs-sidenav .rs-a .ico {
  display: inline-grid;
  place-items: center;
}

/* Text never overlaps: use ellipsis */
#rs-sidenav .label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tiny action buttons (X / pin) consistently styled & centered */
#rs-sidenav .rs-unpin,
#rs-sidenav .rs-pin-mini {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
#rs-sidenav .rs-unpin:hover,
#rs-sidenav .rs-pin-mini:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(2,6,23,.12);
  background: #fdfdfd;
}
#rs-sidenav .rs-unpin i,
#rs-sidenav .rs-pin-mini i {
  display: block;
  line-height: 1;
}
/* Section headers line up with the list cards */
#rs-sidenav .rs-sec .rs-title {
  font-weight: 800;
  font-size: 14px;
  color: #6b7280;
  margin: 10px 10px 6px;
}

/* Align the “You’re viewing” chip + pin button */
#rs-sidenav #rs-current .rs-chip {
  display: inline-grid; grid-auto-flow: column; gap: 8px; align-items: center;
  max-width: 100%; min-width: 0;
}
#rs-sidenav #rs-pin-current {
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-grid; place-items: center;
  border: 1px solid rgba(15, 23, 42, .10);
  background: #fff;
}



/* Prevent accidental horizontal scrollbar from the negative margin trick */
body.rec-shell-on { overflow-x: hidden; }
/* Make the site header fixed so it never wobbles on Chrome */
/* Header fixed, positioned BELOW the admin bar */
header.site-header,
#masthead,
.main-header-bar,
.elementor-location-header {
  position: fixed !important;
  top: var(--rs-admin, 0px);    /* << was 0; use admin height */
  left: 0; right: 0;
  z-index: 20000 !important;
  transform: translateZ(0);
  will-change: transform;
}

/* Push page content below the visible header height only */
body { padding-top: var(--rs-header, 0px); }
html { scroll-padding-top: calc(var(--rs-header, 0px) + var(--rs-admin, 0px)); }
/* Sidebar under both admin bar + header */
#rs-sidenav,
#rs-backdrop {
  top: var(--rs-top, 0px) !important;
  height: calc(100dvh - var(--rs-top, 0px)) !important;
}
/* =========================================================
   ICONS & ACTIONS — premium reset + alignment + hover polish
   (scoped to #rs-sidenav so we don't touch the gradient buttons)
   ========================================================= */

/* 1) Nuke external color overrides (the “green” problem) */
#rs-sidenav .rs-dock-a,
#rs-sidenav .rs-a,
#rs-sidenav .rs-sec__tools .rs-ico,
#rs-sidenav .rs-pin-btn,
#rs-sidenav .rs-unpin,
#rs-sidenav .rs-pin-mini {
  color: var(--rs-ink) !important;
}

/* Give dock icons a touch more presence */
#rs-sidenav .rs-dock-a i { width: 24px; height: 24px; font-size: 17px; }

#rs-sidenav .rs-ico:hover,
#rs-sidenav .rs-pin-btn:hover,
#rs-sidenav .rs-unpin:hover,
#rs-sidenav .rs-pin-mini:hover {
  background: none !important;
  color: #ffffff !important;

  box-shadow: 0 6px 16px rgba(2,6,23,.10);
}
#rs-sidenav .rs-ico:active,
#rs-sidenav .rs-pin-btn:active,
#rs-sidenav .rs-unpin:active,
#rs-sidenav .rs-pin-mini:active {
  transform: translateY(1px) scale(.98);
}

/* Row items: subtle lift on hover */
#rs-sidenav .rs-a:hover,
#rs-sidenav .rs-dock-a:hover,
#rs-sidenav .rs-chip:hover {
  color: var(--rs-ink);
  background: none !important;
  color: #666666 !important;
  box-shadow: inset 0 0 0 1px rgba(107,93,211,.22);
}


/* ====== ICON BUTTON RESET (fixes bottom-right misalignment) ====== */
/* Kill global theme padding/line-height on small icon buttons */
#rs-sidenav .rs-ico,
#rs-sidenav .rs-pin-btn,
#rs-sidenav .rs-unpin,
#rs-sidenav .rs-pin-mini {
  padding: 0 !important;            /* <-- this is the big one */
  line-height: 1 !important;
  width: 32px; height: 32px;        /* keep them compact */
  display: inline-grid !important;
  place-items: center !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

/* Center the glyph itself (works for FA and SVG) */
#rs-sidenav .rs-ico i,
#rs-sidenav .rs-pin-btn i,
#rs-sidenav .rs-unpin i,
#rs-sidenav .rs-pin-mini i,
#rs-sidenav .rs-a .ico,
#rs-sidenav .rs-dock-a i,
#rs-sidenav svg {
  display: inline-grid !important;
  place-items: center !important;
  width: 20px; height: 20px; line-height: 1 !important;
  margin: 0 !important; padding: 0 !important;
  color: currentColor !important; fill: currentColor !important;
}

/* Font Awesome baseline tweak (FA sets -0.125em; force to middle) */
#rs-sidenav .fa::before,
#rs-sidenav i[class*="fa-"]::before { vertical-align: middle !important; }

/* Hover polish (optional, subtle) */
#rs-sidenav .rs-ico:hover,
#rs-sidenav .rs-pin-btn:hover,
#rs-sidenav .rs-unpin:hover,
#rs-sidenav .rs-pin-mini:hover {
  background: none !important;
  color: #666666 !important;
  border-color: none !important;
  box-shadow: 0 6px 16px rgba(2,6,23,.10);
}
#rs-sidenav .rs-ico{
    color: #000000 !important;
}
/* Remove borders from the 5 primary menu items (Home/Books/Community/Profile/Insights) */
#rs-sidenav .rs-dock-a{
  box-shadow: none !important;      /* kills the 1px inset border */
  border: none !important;
  background: none;                  /* clean pill */
}
#rs-sidenav .rs-dock-a:hover{
  box-shadow: none !important;      /* kills the 1px inset border */
  border: none !important;
  background: rgba(107,93,211,.06) !important;
  color: #666666 !important;/* clean pill */
}
/* Keep a premium hover without a border */
#rs-sidenav .rs-dock-a:hover,
#rs-sidenav .rs-dock-a:focus-visible{
  box-shadow: 0 6px 16px rgba(2,6,23,.10); /* soft lift only */
}
/* Make collapsed lists actually hide (beats .rs-list { display:flex !important }) */
#rs-sidenav .rs-list.rs-collapsed { display: none !important; }
#rs-sidenav .rs-collapsed { display: none !important; }

/* Rotate the chevron 90° when collapsed */
#rs-sidenav .rs-collapse-sec i { transition: transform 160ms cubic-bezier(.2,.7,.2,1); }
#rs-sidenav .rs-collapse-sec.is-collapsed i { transform: rotate(90deg); }
/* === Unify the home-style everywhere + tweaks === */

/* thin, discrete scrollbar on the scroll column (Firefox + WebKit) */
#rs-sidenav .rs-scroll{
  scrollbar-width: thin;
  scrollbar-color: rgba(31,27,36,.25) transparent;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
}
#rs-sidenav .rs-scroll::-webkit-scrollbar{ width: 8px; }
#rs-sidenav .rs-scroll::-webkit-scrollbar-track{ background: transparent; }
#rs-sidenav .rs-scroll::-webkit-scrollbar-thumb{
  background: rgba(31,27,36,.25);
  border-radius: 8px;
  border: 2px solid transparent;     /* creates a slim rounded thumb */
  background-clip: padding-box;
}
#rs-sidenav .rs-scroll:hover::-webkit-scrollbar-thumb{
  background: rgba(31,27,36,.35);
}

/* keep the “home” card look on every page and block theme overrides */
#rs-sidenav .rs-chip,
#rs-sidenav .rs-item,
#rs-sidenav .rs-bottom .rs-btn{
  background:#fff !important;
  box-shadow: inset 0 0 0 1px var(--rs-bd);
}

/* bottom buttons: flat (no gradient) + premium hover */
#rs-sidenav .rs-bottom .rs-btn{ 
  background:#fff !important; 
  box-shadow: inset 0 0 0 1px var(--rs-bd);
}
#rs-sidenav .rs-bottom .rs-btn:hover{
  background:#fff;
  box-shadow: 0 6px 16px rgba(2,6,23,.10), inset 0 0 0 1px rgba(107,93,211,.26);
}
/* kill any “ghost” gradient variant that some pages inject */
#rs-sidenav .rs-bottom .rs-btn.ghost{ background:#fff !important; }

/* Quick find slimmer than Settings */
#rs-cmdk{ padding: 8px 12px !important; min-height: 40px; border-radius: 10px !important; }
#rs-cmdk i{ width:20px; height:20px; }

/* defensive: ensure the sidebar keeps the home look even on Elementor pages */
#rs-sidenav .rs-btn, 
#rs-sidenav .rs-chip, 
#rs-sidenav .rs-item { color: var(--rs-ink) !important; background-image: none !important; }
.rs-sec{
 padding-bottom: 6px !important;
 padding-left: 6px !important;
}
.rs-hero--v2{
    padding-top: 15px !important;
}
/* --- Quick find: inline filter control --- */
#rs-sidenav .rs-find-wrap{
  position: relative;
  margin-top: 10px;           /* sits where the button was */
}

#rs-sidenav .rs-find-wrap .mag{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  opacity: .65;
  pointer-events: none;
}

#rs-sidenav .rs-find-input{
  width: 100%;
  height: 48px;
  border-radius: 14px;
  padding: 12px 14px 12px 42px;          /* space for the icon */
  border: 1px solid var(--rs-bd, rgba(2,6,23,.10));
  background: #fff;
  color: var(--rs-tx, #14131f);
  box-shadow: 0 6px 18px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.6);
  font: inherit;
}

#rs-sidenav .rs-find-input:focus{
  outline: 0;
  box-shadow: 0 8px 22px rgba(2,6,23,.12), 0 0 0 3px rgba(99,102,241,.18);
}

/* "No matches" note (shown only when filtering & empty) */
#rs-sidenav .rs-no-matches{
  margin: 14px 10px 18px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(2,6,23,.12);
  background: rgba(2,6,23,.03);
  color: #475569;
  text-align: center;
}
/* Hide the Quick find button when we replace it with the input */
#rs-sidenav .rs-bottom .rs-btn.is-hidden { display: none !important; }

/* Make the inline filter identical to the Quick find button */
#rs-sidenav .rs-find-wrap{ margin-top: 0; }  /* no extra gap */
#rs-sidenav .rs-find-wrap .mag{
  left: 12px;
  font-size: 15px;
}

#rs-sidenav .rs-find-input{
  /* match the Quick find button visual metrics */
  
    min-height: 40px;

  height:16px;
  padding: 8px 12px 8px 40px;   /* left space for icon */
  border-radius: 12px;
  border: 1px solid var(--rs-bd);
  background: #fff;
  color: var(--rs-ink);
  box-shadow: inset 0 0 0 1px var(--rs-bd);   /* same flat look */
  font: inherit;
}

#rs-sidenav .rs-find-input:focus{
  outline: 0;
  box-shadow: 0 6px 16px rgba(2,6,23,.10), inset 0 0 0 1px rgba(107,93,211,.26);
}
/* =========================================================
   SUBTLE ACCENT PACK — premium, minimal, no extra JS
   ========================================================= */

/* A second accent color that pairs with --rs-accent */
:root { --rs-accent-2: #e77ab8; } /* soft pink to pair with purple */

/* 1) Bottom area “ambient glow” (very soft) */
#rs-sidenav .rs-bottom{ position: relative; }
#rs-sidenav .rs-bottom::before{
  content:"";
  position:absolute;
  left: 10px; right: 10px; bottom: -6px;
  height: 54px;
  background: radial-gradient(140px 36px at 50% 0,
              color-mix(in oklab, var(--rs-accent) 22%, transparent),
              transparent 70%);
  filter: blur(14px);
  opacity: .55;
  pointer-events: none;
}

/* 2) Buttons: flat by default, micro-gradient border on hover + sheen */
#rs-sidenav .rs-bottom .rs-btn{
  position: relative;
  border: 1px solid transparent;                /* allow gradient border on hover */
  background:
    linear-gradient(#fff, #fff) padding-box,     /* keeps the pill white */
    linear-gradient(135deg, rgba(0,0,0,0), rgba(0,0,0,0)) border-box; /* idle: no border */
}
#rs-sidenav .rs-bottom .rs-btn:hover{
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--rs-accent-2), var(--rs-accent)) border-box; /* subtle border */
  box-shadow: 0 10px 26px rgba(2,6,23,.12), inset 0 0 0 1px rgba(107,93,211,.20);
}
@media (prefers-reduced-motion: no-preference){
  #rs-sidenav .rs-bottom .rs-btn::after{
    content:"";
    position:absolute; inset:0; border-radius: inherit;
    background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
  }
  #rs-sidenav .rs-bottom .rs-btn:hover::after{ transform: translateX(120%); }
}

/* 3a) Active top nav cue (works if markup sets aria-current or add .is-active) */
#rs-sidenav .rs-dock-a[aria-current="page"],
#rs-sidenav .rs-dock-a.is-active{
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(120deg, var(--rs-accent), var(--rs-accent-2)) border-box;
  border:1px solid transparent;
  box-shadow: 0 6px 16px rgba(2,6,23,.10);
}
#rs-sidenav .rs-dock-a[aria-current="page"] i,
#rs-sidenav .rs-dock-a.is-active i{ color: var(--rs-accent); }

/* 3b) Section headers: tiny accent underline */
#rs-sidenav .rs-sec__title{ position: relative; }
#rs-sidenav .rs-sec__title::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width: 28px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--rs-accent), var(--rs-accent-2));
  opacity: .42;
}

/* 3d) Inline filter (Quick find open): matched accent border */
#rs-sidenav .rs-find-input{
  border: 1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg, var(--rs-accent), var(--rs-accent-2)) border-box;
}
#rs-sidenav .rs-find-input:focus{
  box-shadow: 0 8px 22px rgba(2,6,23,.12);
}
/* --- Settings button: premium, always-on character --- */

/* Gradient bezel in the normal state (keeps the pill white) */
#rs-sidenav #rs-settings{
  position: relative;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--rs-accent-2), var(--rs-accent)) border-box;
  border: 1px solid transparent;                 /* reveal the gradient layer */
  box-shadow: 0 6px 18px rgba(2,6,23,.08), inset 0 0 0 1px rgba(255,255,255,.6);
}

/* Keep hover consistent with your other button hover polish */
#rs-sidenav #rs-settings:hover{
  box-shadow: 0 10px 26px rgba(2,6,23,.12), inset 0 0 0 1px rgba(107,93,211,.20);
}

/* Bottom shelf: faint accent strap to ground the area */
#rs-sidenav .rs-bottom{ position: relative; }
#rs-sidenav .rs-bottom::after{
  content:"";
  position:absolute;
  left: 12px; right: 12px;
  top: 8px;                            /* thin strap just above the buttons */
  height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, var(--rs-accent), var(--rs-accent-2));
  opacity: .22;
  pointer-events: none;
}