/* UI-skin contract: any admin PNG/WebP icon is a transparent alpha mask.
   White or muted gray and glow come from the active UI state, never the file. */
.sm-asset-icon{display:block;flex:none;background-color:currentColor;
 -webkit-mask-image:var(--sm-icon-image);mask-image:var(--sm-icon-image);
 -webkit-mask-position:center;mask-position:center;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-size:contain;mask-size:contain}
#libraryScreen.setka-music-open #libraryTitle{visibility:hidden!important}
#libraryScreen.setka-music-open #setkaMusicPagerButton{color:#fff!important}
#libraryScreen.setka-music-open .library-pager .pager-button{opacity:.25!important;filter:none!important}
#libraryScreen.setka-music-open #setkaMusicPagerButton{opacity:1!important;filter:none!important}
/* SETKA Music is an additive page inside the existing library, not a replacement. */
#libraryScreen #setkaMusicPagerButton svg,#libraryScreen #setkaMusicPagerButton .sm-asset-icon{width:25px;height:25px;display:block}
#libraryScreen #setkaMusicPagerButton.active svg,#libraryScreen #setkaMusicPagerButton.active .sm-asset-icon{filter:none!important}
#libraryScreen .library-pager{gap:18px!important;position:relative;top:-9px}
#setkaMusicPage{position:absolute;top:calc(var(--safe-top) + 117px);left:12px;right:12px;bottom:calc(var(--safe-bottom) + 104px);
 display:flex;flex-direction:column;align-items:stretch;min-height:0;background:#000;color:#fff;z-index:2;touch-action:pan-x pan-y}
#setkaMusicPage[hidden],#setkaMusicPage [hidden]{display:none!important}
.sm-categories{flex:0 0 91px;display:flex;align-items:center;justify-content:flex-start;gap:6px;
 min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
 -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;
 touch-action:pan-x!important;padding:0 8px 4px}
.sm-categories::-webkit-scrollbar{display:none}
#app:has(#libraryScreen.active.setka-music-open){touch-action:pan-x pan-y!important}
#libraryScreen.setka-music-open{touch-action:pan-x pan-y!important}
.sm-category{position:relative;display:grid;place-items:center;flex:0 0 78px;min-width:78px;width:78px;height:83px;border:0;padding:5px;background:none;color:#818181;opacity:.7;cursor:pointer;scroll-snap-align:center}
.sm-category svg,.sm-category img,.sm-category .sm-asset-icon{width:70px;height:70px;max-width:100%;object-fit:contain}
.sm-category.active{color:#fff;opacity:1;filter:drop-shadow(0 0 6px rgba(255,255,255,.50))}
.sm-category:focus-visible,.sm-track:focus-visible,.sm-motion:focus-visible,.sm-source:focus-visible,.sm-power:focus-visible{outline:1px solid #fff;outline-offset:2px}
.sm-orbit-category::before{content:"";position:absolute;left:-8px;top:22px;width:1px;height:38px;background:rgba(255,255,255,.22)}
.sm-catalog{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 0 12px;touch-action:pan-y;scrollbar-width:none}
.sm-catalog::-webkit-scrollbar{display:none}
.sm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px 6px;align-content:start}
.sm-track{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:86px;border:0;padding:11px 1px 4px;background:transparent;color:#858585;cursor:pointer}
.sm-track-icon{position:relative;display:grid;place-items:center;width:52px;height:52px}
.sm-track-icon svg,.sm-track-icon img,.sm-track-icon .sm-asset-icon{width:52px;height:52px;object-fit:contain}
.sm-track.active{color:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.35))}
.sm-dots{position:absolute;top:auto;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);display:flex;justify-content:center;gap:4px;white-space:nowrap;pointer-events:none}
/* One shared placement and glow model: dots inherit their icon's visual treatment. */
.sm-dots i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:none}
.sm-empty,.sm-status{grid-column:1/-1;text-align:center;font-size:12px;line-height:1.6;letter-spacing:.03em;color:#777;margin:28px 16px}
.sm-status{color:#ccc}
.sm-power{flex:0 0 48px;align-self:center;display:grid;place-items:center;width:52px;height:48px;border:0;background:none;color:#aaa;cursor:pointer}
.sm-power svg,.sm-power .sm-asset-icon{width:33px;height:33px}
.sm-power:active{color:#fff;filter:drop-shadow(0 0 7px #fff)}
.sm-orbits{display:flex;flex:1;min-height:0;align-items:center;justify-content:space-evenly;flex-direction:column;padding-top:3px}
.sm-stage{width:min(88vw,45svh,420px);height:min(88vw,45svh,420px);position:relative;flex:0 0 auto;aspect-ratio:1/1;touch-action:none;overflow:visible;isolation:isolate}
.sm-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.25);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.sm-ring-inner{width:38%;height:38%}.sm-ring-middle{width:68%;height:68%}.sm-ring-outer{width:96%;height:96%}
.sm-listener{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;color:#fff;pointer-events:none}
.sm-listener svg,.sm-listener .sm-asset-icon{width:100%;height:100%}
.sm-source{position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);display:grid;place-items:center;width:57px;height:57px;border:0;border-radius:0;background:transparent;color:#fff;
 padding:0;cursor:grab;touch-action:none;box-shadow:none;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate}
.sm-source:active,.sm-source.dragging{cursor:grabbing}
.sm-source.dragging,.sm-source.dragging *{filter:none!important;box-shadow:none!important;text-shadow:none!important}
.sm-source-icon{position:relative}
.sm-source-icon,.sm-source-icon svg,.sm-source-icon img,.sm-source-icon .sm-asset-icon{display:block;width:40px;height:40px;object-fit:contain;pointer-events:none}
.sm-motion-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;justify-items:center;width:100%;min-height:40px;align-items:center}
.sm-motion{border:0;padding:3px;background:none;color:#777;display:grid;place-items:center;width:36px;height:36px;cursor:pointer}
.sm-motion svg,.sm-motion .sm-asset-icon{width:30px;height:30px}
.sm-motion.active{color:white;filter:drop-shadow(0 0 6px rgba(255,255,255,.7))}
.sm-speed{display:flex;align-items:center;gap:10px;width:min(96%,360px);height:36px;color:#ddd}
/* Approved turtle #3 / hare #2: discreet small monochrome icons, absolutely no glow. */
#libraryScreen #setkaMusicPage .sm-speed-slow,
#libraryScreen #setkaMusicPage .sm-speed-fast{
  display:grid;place-items:center;width:34px;height:30px;flex:none;
  color:#a4a4a8;filter:none!important;text-shadow:none!important;
}
#libraryScreen #setkaMusicPage .sm-speed-slow svg,
#libraryScreen #setkaMusicPage .sm-speed-fast svg,
#libraryScreen #setkaMusicPage .sm-speed-slow .sm-asset-icon,
#libraryScreen #setkaMusicPage .sm-speed-fast .sm-asset-icon{
  width:31px;height:25px;display:block;overflow:visible;
  filter:none!important;text-shadow:none!important;
  opacity:1;
}
.sm-speed input{flex:1;min-width:0;width:auto;margin:0;accent-color:#fff;cursor:pointer;touch-action:pan-x}
@media(max-width:365px){#setkaMusicPage{left:8px;right:8px}.sm-category svg,.sm-category img,.sm-category .sm-asset-icon{width:65px;height:65px}.sm-track-icon,.sm-track-icon svg,.sm-track-icon img,.sm-track-icon .sm-asset-icon{width:45px;height:45px}.sm-motion{width:32px;height:32px}.sm-motion svg,.sm-motion .sm-asset-icon{width:26px;height:26px}}
@media(max-height:730px){#setkaMusicPage{top:calc(var(--safe-top) + 111px);bottom:calc(var(--safe-bottom) + 90px)}.sm-categories{flex-basis:78px}.sm-category{height:73px}.sm-stage{width:min(67vw,35svh,290px);height:min(67vw,35svh,290px)}.sm-track{min-height:73px}}

/* All three library headings share the same mobile baseline; this never
   changes the thumbnail grid or the bottom navigation. */
@media(max-width:767px){
 #libraryScreen .library-title{top:calc(var(--safe-top) + 96px)}
}

/* Mobile music composition: the shared four-button pager must NEVER move
   when music opens. Lift the music categories instead of compressing orbits.
   A non-shrinking square stage is essential: its percentages draw true rings. */
@media (max-width:767px) {
  #libraryScreen .sm-stage {flex:0 0 auto;aspect-ratio:1/1;}
}
@media (max-width:767px) and (min-height:731px) {
  #libraryScreen #setkaMusicPage {
    top:calc(var(--safe-top) + 78px);
    bottom:calc(var(--safe-bottom) + 87px);
  }
  #libraryScreen .sm-categories { flex-basis:78px; }
  #libraryScreen .sm-category { height:75px; }
  #libraryScreen .sm-orbits {padding-top:0;}
  #libraryScreen .sm-stage {
    /* Fill available orbit area, reserving space for motion, speed and power. */
    width:min(93vw,43svh,375px,calc(100svh - var(--safe-top) - var(--safe-bottom) - 441px));
    height:min(93vw,43svh,375px,calc(100svh - var(--safe-top) - var(--safe-bottom) - 441px));
  }
  #libraryScreen .sm-motion-row {margin-top:8px;}
  #libraryScreen .sm-speed {margin-top:6px;}
  #libraryScreen .sm-power {margin-top:10px;margin-bottom:2px;}
}
/* Compact iPhones: retain a strictly square stage while protecting the
   speed slider and power button from the permanent bottom dock. */
@media (max-width:767px) and (max-height:730px) {
  #libraryScreen #setkaMusicPage {
    top:calc(var(--safe-top) + 76px);
    bottom:calc(var(--safe-bottom) + 82px);
  }
  #libraryScreen .sm-categories {flex-basis:74px;}
  #libraryScreen .sm-category {height:70px;}
  #libraryScreen .sm-orbits {padding-top:6px;}
  #libraryScreen .sm-stage {
    width:min(83vw,36svh,315px,calc(100svh - var(--safe-top) - var(--safe-bottom) - 408px));
    height:min(83vw,36svh,315px,calc(100svh - var(--safe-top) - var(--safe-bottom) - 408px));
  }
  #libraryScreen .sm-motion-row {margin-top:8px;}
  #libraryScreen .sm-speed {margin-top:6px;}
  #libraryScreen .sm-power {margin-top:10px;margin-bottom:2px;}
}

/* Fix the category-row jump when switching music tabs.
   The orbit screen defines the shared category position: every category uses
   that exact offset, regardless of the active content panel.
   Move orbit-specific controls only, keeping circles and fixed nav untouched. */
@media (max-width:767px) {
  #libraryScreen.setka-music-open #setkaMusicPage .sm-categories,
  #libraryScreen.setka-music-open #setkaMusicPage .sm-orbits:not([hidden]) {
    transform:translateY(18px);
  }
}
@media (max-width:767px) and (max-height:730px) {
  #libraryScreen.setka-music-open #setkaMusicPage .sm-categories,
  #libraryScreen.setka-music-open #setkaMusicPage .sm-orbits:not([hidden]) {
    transform:translateY(10px);
  }
}