/* REPPTRADE v4.3.41 — targeted consistency and scrolling repair.
   Presentation only; deliberately leaves all source-of-truth and edit logic alone. */
:root{--repp-panel:#1b3047;--repp-deep:#0d1826;--repp-edge:#38516b}

/* Drawer regression: v440 made #drawerFilters position:relative while its old
   sticky top:101px remained. That shifted it OVER the first recording and
   created the 101px blank region above the controls. */
body[data-ui-theme="modern"] .drawer .drawerhead{
 position:relative!important;top:auto!important;z-index:5!important;
 min-height:110px!important;padding:19px 22px!important;
}
body[data-ui-theme="modern"] .drawer #drawerFilters{
 position:sticky!important;top:0!important;z-index:8!important;
 margin:0!important;transform:none!important;
 padding:11px 20px 13px!important;min-height:0!important;
 background:#0c1725!important;border-bottom:1px solid #324c68!important;
 box-shadow:0 5px 12px rgba(0,0,0,.22)!important;
 gap:10px!important;
}
body[data-ui-theme="modern"] .drawer #drawerBody{
 position:relative!important;margin:0!important;padding-top:17px!important;
}
body[data-ui-theme="modern"] .drawer .drawer-titleblock{min-width:0!important;flex:1 1 auto}
body[data-ui-theme="modern"] .drawer .drawerhead h2{
 display:inline-block!important;max-width:min(100%,740px)!important;
 background:#0b1421!important;border:1px solid var(--show-accent)!important;
 color:#fff!important;font:740 24px/1.25 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
 padding:9px 14px!important;margin:4px 0 7px!important;
 overflow-wrap:anywhere!important;white-space:normal!important;text-overflow:clip!important;
 box-shadow:none!important;text-shadow:none!important;
}
body[data-ui-theme="modern"] .drawer .boot .boottitle{
 display:block!important;position:relative!important;
 background:#0b1421!important;border:1px solid var(--show-accent)!important;
 color:#fff!important;padding:12px 14px!important;
 font:740 13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
 overflow-wrap:anywhere!important;text-shadow:none!important;
}
body[data-ui-theme="modern"] .drawer .drawer-filter-controls{
 display:flex!important;align-items:center!important;flex-wrap:wrap!important;order:1!important;
 gap:5px 13px!important;min-height:36px!important;
}
body[data-ui-theme="modern"] .drawer .drawer-filter-controls #drawerShowSearch{
 order:-1!important;flex:0 1 320px!important;max-width:min(38vw,360px)!important;
 min-width:190px!important;margin:0 12px 0 0!important;
 background:#1b3044!important;padding-left:40px!important;
}
/* Magnifier is decorative and does not intercept clicks, including on tablets. */
body[data-ui-theme="modern"] .drawer .drawer-filter-controls:has(#drawerShowSearch)::before{
 content:"";position:absolute;left:38px;top:21px;
 width:11px;height:11px;border:1.8px solid #b7d0e6;border-radius:50%;
 z-index:2;pointer-events:none;
}
body[data-ui-theme="modern"] .drawer .drawer-filter-controls:has(#drawerShowSearch)::after{
 content:"";position:absolute;left:49px;top:34px;width:7px;height:1.8px;
 background:#b7d0e6;transform:rotate(45deg);transform-origin:left center;
 z-index:2;pointer-events:none;
}
body[data-ui-theme="modern"] .drawer .production-tabs{
 order:2!important;flex-direction:row!important;flex-wrap:wrap!important;
 margin:0!important;padding:2px 0 0!important;gap:7px!important;
}
body[data-ui-theme="modern"] .drawer .production-tab{height:33px!important;min-height:33px!important}
/* Refined accordion-like unfurl: visible travel, elastic settling and
   cascading controls, rather than a panel abruptly appearing. */
.filter-cascade.repp440-enter{
 transform-origin:top left!important;
 animation:repp441-unfurl .72s cubic-bezier(.17,.9,.25,1) both!important;
}
@keyframes repp441-unfurl{
 0%{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-27px) scaleY(.72)}
 28%{opacity:1;clip-path:inset(0 0 63% 0);transform:translateY(-8px) scaleY(.93)}
 63%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(5px) scaleY(1.035)}
 83%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(-2px) scaleY(.99)}
 100%{opacity:1;clip-path:inset(0 0 0 0);transform:translateY(0) scaleY(1)}
}
.filter-cascade.repp440-enter .filter-category,
.filter-cascade.repp440-enter .filter-option{
 animation:repp441-cascade .36s cubic-bezier(.18,.84,.28,1) both!important;
 animation-delay:calc(.13s + var(--cascade-i,0) * 35ms)!important;
}
@keyframes repp441-cascade{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
.filter-cascade .filter-category{transition:transform .30s cubic-bezier(.18,.85,.25,1),background-color .2s,color .2s!important;transform-origin:left center!important}
.filter-cascade .filter-category:hover{transform:scale(1.1)!important;position:relative;z-index:2}

/* Library chrome: cool segmented controls consistent with Tiles/Recently Added. */
body[data-ui-theme="modern"] #page-library .toolbar .btn,
body[data-ui-theme="modern"] #page-library .toolbar .btn.gold,
body[data-ui-theme="modern"] #page-library .toolbar .library-data-export,
body[data-ui-theme="modern"] #page-library .toolbar .seg{
 background:#14263b!important;border:1px solid #36516c!important;
 color:#e4eef8!important;border-radius:4px!important;box-shadow:none!important;
 font-weight:690!important;
}
body[data-ui-theme="modern"] #page-library .toolbar .btn:hover{background:#213b55!important;border-color:#6385a4!important}
body[data-ui-theme="modern"] #page-library .toolbar .seg button.active,
body[data-ui-theme="modern"] #page-library .toolbar #easyReadabilityBtn.active{background:#2c4a65!important;color:#fff!important;border-color:#6385a4!important}
/* No brown fallback underneath the last row of show tiles. */
body[data-ui-theme="modern"] #page-library,
body[data-ui-theme="modern"] #libraryTiles,
body[data-ui-theme="modern"] #libraryRecent,
body[data-ui-theme="modern"] #libraryRecentList{background:transparent!important;background-color:transparent!important}

/* NFT STYLE is a fieldset heading, not a selectable tab. */
body[data-ui-theme="modern"] .nft-style-toggle{display:inline-flex!important;align-items:center;gap:0;background:#142338!important;border:1px solid #385069!important;border-radius:4px!important;padding:0!important}
body[data-ui-theme="modern"] .nft-style-toggle .nft-style-label{
 display:inline-flex!important;align-items:center;min-height:34px;
 padding:0 13px!important;margin:0 7px 0 0!important;
 color:#d6e4f3!important;background:#223952!important;
 border-right:1px solid #46627e!important;
 letter-spacing:.5px!important;font-size:10px!important;font-weight:800!important;
 cursor:default!important;pointer-events:none!important;
}
body[data-ui-theme="modern"] .nft-style-toggle button{margin:3px!important}

/* Consistent blue-slate surfaces on Packs, Add Recording, Setup + clean tab selectors. */
body[data-ui-theme="modern"] #page-packs .panel,
body[data-ui-theme="modern"] #page-add .panel,
body[data-ui-theme="modern"] #page-setup .panel,
body[data-ui-theme="modern"] #page-add .reviewcard,
body[data-ui-theme="modern"] #page-setup .reviewcard,
body[data-ui-theme="modern"] #page-packs .packitem,
body[data-ui-theme="modern"] #page-setup .setup-show-row,
body[data-ui-theme="modern"] #page-setup .setup-text-row{
 background:#203853!important;border-color:#425d79!important;color:#edf5fc!important;
}
body[data-ui-theme="modern"] #page-packs .panel h3,
body[data-ui-theme="modern"] #page-add .panel h3,
body[data-ui-theme="modern"] #page-setup .panel h3{color:#fff!important}
body[data-ui-theme="modern"] .subtab,
body[data-ui-theme="modern"] .tabbar .subtab,
body[data-ui-theme="modern"] .master-view-toggle,
body[data-ui-theme="modern"] .master-toolbar-secondary .seg{
 background:#14263b!important;color:#c6d8e8!important;
 border:1px solid #314a62!important;border-radius:4px!important;box-shadow:none!important;
}
body[data-ui-theme="modern"] .subtab:hover{background:#29435e!important;color:#fff!important;border-color:#6d91af!important}
body[data-ui-theme="modern"] .subtab.active,
body[data-ui-theme="modern"] .tabbar .subtab.active{
 background:#2a4964!important;color:#fff!important;
 border-color:#7095b5!important;border-bottom:2px solid #a9d1eb!important;
}
body[data-ui-theme="modern"] #page-add .field,
body[data-ui-theme="modern"] #page-setup .field,
body[data-ui-theme="modern"] #page-packs .field{background:#0f1e30!important;border-color:#486780!important;color:#f5f8fc!important}
body[data-ui-theme="modern"] .btn.gold{background:#20384f!important;border-color:#526c82!important;color:#eaf3fa!important}

/* Genuine light-surface equivalents, not dark controls on white backgrounds. */
body[data-surface="light"][data-ui-theme="modern"] #page-library .toolbar .btn,
body[data-surface="light"][data-ui-theme="modern"] #page-library .toolbar .seg,
body[data-surface="light"][data-ui-theme="modern"] .subtab{background:#e8f1f9!important;color:#1b3852!important;border-color:#b4c8dc!important}
body[data-surface="light"][data-ui-theme="modern"] #page-library .toolbar .seg button.active,
body[data-surface="light"][data-ui-theme="modern"] #page-library .toolbar #easyReadabilityBtn.active,
body[data-surface="light"][data-ui-theme="modern"] .subtab.active{background:#cde0f0!important;color:#0d2d4a!important;border-color:#648fb3!important}
body[data-surface="light"][data-ui-theme="modern"] #page-packs .panel,
body[data-surface="light"][data-ui-theme="modern"] #page-add .panel,
body[data-surface="light"][data-ui-theme="modern"] #page-setup .panel{background:#e4eef7!important;border-color:#b5cada!important;color:#18334c!important}
body[data-surface="light"][data-ui-theme="modern"] #page-packs .panel h3,
body[data-surface="light"][data-ui-theme="modern"] #page-add .panel h3,
body[data-surface="light"][data-ui-theme="modern"] #page-setup .panel h3{color:#18334c!important}
body[data-surface="light"][data-ui-theme="modern"] .nft-style-toggle .nft-style-label{background:#d9e9f5!important;color:#173b57!important;border-right-color:#adc5d9!important}
body[data-surface="light"][data-ui-theme="modern"] .nft-style-toggle{background:#edf5fa!important;border-color:#adc5d9!important}
@media(max-width:800px){
 body[data-ui-theme="modern"] .drawer #drawerFilters{padding:10px 12px!important}
 body[data-ui-theme="modern"] .drawer .drawerhead{padding:13px 12px!important}
 body[data-ui-theme="modern"] .drawer .drawerhead h2{font-size:18px!important}
 body[data-ui-theme="modern"] .drawer .drawer-filter-controls #drawerShowSearch{
  flex:1 1 100%!important;min-width:0!important;max-width:none!important;margin:0!important;
 }
 body[data-ui-theme="modern"] .drawer .drawer-filter-controls:has(#drawerShowSearch)::before{left:28px;top:20px}
 body[data-ui-theme="modern"] .drawer .drawer-filter-controls:has(#drawerShowSearch)::after{left:39px;top:33px}
 body[data-ui-theme="modern"] .drawer .production-tabs{flex-wrap:nowrap!important;overflow-x:auto!important}
}
@media(prefers-reduced-motion:reduce){
 .filter-cascade.repp440-enter,.filter-cascade.repp440-enter .filter-category,.filter-cascade.repp440-enter .filter-option{animation:none!important}
}
/* Keep all filters aligned beside the search field at desktop widths. */
@media(min-width:1001px){
 body[data-ui-theme="modern"] .drawer .drawer-filter-controls #drawerShowSearch{
  flex:0 1 255px!important;max-width:270px!important;margin-right:4px!important;
 }
 body[data-ui-theme="modern"] .drawer .drawer-filter-controls{gap:6px 10px!important}
 body[data-ui-theme="modern"] .drawer .filter-trigger{font-size:10.5px!important;padding-left:0!important;padding-right:0!important}
}
body[data-ui-theme="modern"] #page-add .tabbar{background:transparent!important;border-color:#38516a!important}
body[data-ui-theme="modern"] #page-add .tabbar .subtab.active{box-shadow:none!important}