#backdrop { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,0.28); display: none; }
#backdrop.show { display: block; }
#panel { position: fixed; z-index: 5; top: 8vh; left: 50%; transform: translateX(-50%);
         width: 440px; max-width: calc(100vw - 32px); max-height: 84dvh; overflow-y: auto; box-sizing: border-box;
         background: var(--fa-surface); border: 1px solid var(--fa-line); border-radius: var(--fa-r-lg);
         box-shadow: var(--fa-shadow-lg); padding: 4px 22px 22px; display: none; }
#panel.open { display: block; }
.panel-grip { display: none; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 0 6px; }
#panel-close, #cat-close { border: none; background: none; font-size: 17px; color: var(--fa-faint); cursor: pointer; padding: 4px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
#panel section { padding: 15px 0 4px; }
#panel h4 { margin: 0 0 9px; }















.layers-block label.toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px;
                       padding: 13px 0; cursor: pointer; font-size: 16px; color: var(--fa-text);
                       border-top: 1px solid var(--fa-line-2); }
.layers-block label.toggle:first-child { border-top: none; }
.layers-block .tg-txt small { display: block; font-weight: 400; color: var(--fa-mut); font-size: 13.5px; margin-top: 2px; }