/* =========================================================
   OpenList Liquid Glass
   Clean Integrated Baseline
   2026-10-31
   ========================================================= */


/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */

:root {
  color-scheme: light;

  --glass-blur: 26px;
  --glass-saturate: 1.5;

  --glass-bg: rgba(248, 251, 244, 0.34);
  --glass-bg-soft: rgba(248, 251, 244, 0.22);
  --glass-bg-strong: rgba(252, 254, 250, 0.60);

  --glass-edge: rgba(255, 255, 255, 0.64);
  --glass-edge-soft: rgba(255, 255, 255, 0.27);
  --glass-highlight: rgba(255, 255, 255, 0.80);

  --glass-shadow:
    0 18px 50px rgba(20, 34, 27, 0.18),
    0 2px 8px rgba(20, 34, 27, 0.06);

  --glass-shadow-small:
    0 8px 24px rgba(20, 34, 27, 0.14);

  --glass-inner:
    inset 0 1px 0 rgba(255,255,255,.76),
    inset 0 -1px 0 rgba(255,255,255,.12);

  --text-main: rgba(25, 33, 31, .94);
  --text-soft: rgba(49, 60, 56, .70);
  --text-muted: rgba(49, 60, 56, .52);

  --accent: #1597ff;
  --accent-soft: rgba(21,151,255,.11);
  --accent-hover: rgba(21,151,255,.17);
  --accent-selected: rgba(21,151,255,.21);

  --control-bg: rgba(255,255,255,.25);
  --control-hover: rgba(255,255,255,.43);
  --control-active: rgba(255,255,255,.55);

  --input-bg: rgba(255,255,255,.28);

  --radius-xl: 22px;
  --radius-lg: 17px;
  --radius-md: 13px;
  --radius-sm: 10px;
}


/* =========================================================
   1. DARK MODE
   OpenList: body.hope-ui-dark
   ========================================================= */

body.hope-ui-dark {
  color-scheme: dark;

  --glass-bg: rgba(12, 17, 19, .42);
  --glass-bg-soft: rgba(10, 15, 17, .29);
  --glass-bg-strong: rgba(18, 23, 26, .70);

  --glass-edge: rgba(255,255,255,.17);
  --glass-edge-soft: rgba(255,255,255,.09);
  --glass-highlight: rgba(255,255,255,.21);

  --glass-shadow:
    0 20px 58px rgba(0,0,0,.42),
    0 2px 10px rgba(0,0,0,.22);

  --glass-shadow-small:
    0 9px 28px rgba(0,0,0,.34);

  --glass-inner:
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(255,255,255,.035);

  --text-main: rgba(242,246,245,.94);
  --text-soft: rgba(218,228,225,.72);
  --text-muted: rgba(210,221,218,.50);

  --accent: #59b9ff;
  --accent-soft: rgba(67,172,255,.12);
  --accent-hover: rgba(67,172,255,.20);
  --accent-selected: rgba(67,172,255,.25);

  --control-bg: rgba(255,255,255,.06);
  --control-hover: rgba(255,255,255,.105);
  --control-active: rgba(255,255,255,.15);

  --input-bg: rgba(255,255,255,.065);
}


/* =========================================================
   2. PAGE / WALLPAPER
   ========================================================= */

html,
body,
#root {
  min-height: 100%;
  background: transparent !important;
}

html {
  background: #101312;
}

body {
  color: var(--text-main) !important;

  background-image:
    url("https://bingw.jasonzeng.dev/?resolution=UHD&index=0") !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}


/* wallpaper treatment */

body::before {
  content: "";
  position: fixed;
  inset: -1.5%;
  z-index: -2;

  background: inherit;
  background-size: cover;
  background-position: center;

  filter:
    saturate(1.06)
    contrast(.96)
    brightness(.96);

  transform: scale(1.018);
}


/* ambient light */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 48% -5%,
      rgba(255,255,255,.30),
      transparent 36%
    ),
    radial-gradient(
      circle at 12% 26%,
      rgba(255,244,205,.11),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(236,244,228,.17),
      rgba(236,244,228,.02) 44%,
      rgba(228,238,224,.12)
    );
}


/* dark wallpaper */

body.hope-ui-dark::before {
  filter:
    saturate(.93)
    contrast(1.02)
    brightness(.68);
}

body.hope-ui-dark::after {
  background:
    radial-gradient(
      circle at 50% -8%,
      rgba(116,160,185,.11),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(2,7,9,.15),
      rgba(2,7,9,.035) 42%,
      rgba(2,7,9,.29)
    );
}


/* =========================================================
   3. HEADER
   ========================================================= */

header,
.header {
  height: 48px !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.16),
      rgba(255,255,255,.035)
    ),
    var(--glass-bg-soft) !important;

  backdrop-filter:
    blur(22px)
    saturate(1.42);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(1.42);

  border-bottom:
    1px solid var(--glass-edge-soft) !important;

  box-shadow:
    0 8px 24px rgba(20,36,28,.08) !important;
}

body.hope-ui-dark header,
body.hope-ui-dark .header {
  box-shadow:
    0 8px 26px rgba(0,0,0,.22) !important;
}


/* logo */

header img,
.header img {
  max-height: 29px !important;

  filter:
    drop-shadow(
      0 3px 9px
      rgba(0,220,210,.23)
    );
}


/* header buttons */

header button,
.header button {
  border-radius: 11px !important;

  color: var(--text-main) !important;

  background:
    var(--control-bg) !important;

  backdrop-filter:
    blur(14px)
    saturate(1.35);

  -webkit-backdrop-filter:
    blur(14px)
    saturate(1.35);

  border:
    1px solid var(--glass-edge-soft) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    0 5px 16px rgba(20,36,28,.08) !important;

  transition:
    background-color .12s ease,
    border-color .12s ease !important;
}

header button:hover,
.header button:hover {
  background:
    var(--control-hover) !important;

  border-color:
    var(--glass-edge) !important;
}


/* =========================================================
   4. MAIN LAYOUT
   ========================================================= */

main,
.main {
  max-width: 980px !important;

  margin:
    0 auto !important;

  padding:
    12px 16px 80px !important;
}


/* =========================================================
   5. STANDARD GLASS SURFACES
   IMPORTANT:
   LightGallery is deliberately NOT included.
   ========================================================= */

.nav,
.breadcrumb,
[aria-label="breadcrumb"],
.obj-box,
.main-box,
.readme-box,
.footer,
.left-toolbar,
.hope-modal__content,
.hope-drawer__content,
.hope-menu__content,
.hope-select__content,
.hope-popover__content,
.hope-tooltip__content,
.hope-notification__root {

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.29),
      rgba(255,255,255,.09) 42%,
      transparent 68%
    ),
    var(--glass-bg) !important;

  backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturate));

  -webkit-backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturate));

  border:
    1px solid var(--glass-edge-soft) !important;

  box-shadow:
    var(--glass-shadow),
    var(--glass-inner) !important;
}


/* dark floating surfaces */

body.hope-ui-dark
:is(
  .nav,
  .breadcrumb,
  [aria-label="breadcrumb"],
  .obj-box,
  .main-box,
  .readme-box,
  .footer,
  .left-toolbar,
  .hope-modal__content,
  .hope-drawer__content,
  .hope-menu__content,
  .hope-select__content,
  .hope-popover__content,
  .hope-tooltip__content,
  .hope-notification__root
) {

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.012) 46%,
      transparent 72%
    ),
    var(--glass-bg) !important;
}


/* =========================================================
   6. GLASS EDGE HIGHLIGHT
   ========================================================= */

.nav,
.breadcrumb,
[aria-label="breadcrumb"],
.obj-box,
.main-box,
.readme-box,
.footer,
.left-toolbar {
  position: relative;
}


/* decorative edge */

.nav::before,
.breadcrumb::before,
[aria-label="breadcrumb"]::before,
.obj-box::before,
.main-box::before,
.readme-box::before,
.footer::before,
.left-toolbar::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;
  padding: 1px;

  background:
    linear-gradient(
      135deg,
      var(--glass-highlight),
      rgba(255,255,255,.045) 36%,
      rgba(255,255,255,.28) 100%
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);

  -webkit-mask-composite: xor;
  mask-composite: exclude;
}


/* top reflection */

.nav::after,
.breadcrumb::after,
[aria-label="breadcrumb"]::after,
.obj-box::after,
.main-box::after,
.readme-box::after {
  content: "";

  position: absolute;

  top: 1px;
  left: 8%;
  right: 8%;
  height: 30%;

  border-radius: inherit;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.21),
      transparent
    );

  opacity: .60;
}

body.hope-ui-dark
:is(
  .nav,
  .breadcrumb,
  [aria-label="breadcrumb"],
  .obj-box,
  .main-box,
  .readme-box
)::after {
  opacity: .16;
}


/* =========================================================
   7. BREADCRUMB
   ========================================================= */

.nav,
.breadcrumb,
[aria-label="breadcrumb"] {
  max-width: 920px !important;

  margin:
    10px auto 0 !important;

  padding:
    7px 14px !important;

  border-radius:
    19px !important;

  color:
    var(--text-main) !important;

  background-clip:
    padding-box !important;
}


/* =========================================================
   8. MAIN FILE PANEL
   ========================================================= */

.obj-box,
.main-box,
.readme-box {
  max-width: 920px !important;

  margin:
    12px auto 0 !important;

  padding:
    6px 0 !important;

  border-radius:
    22px !important;

  overflow:
    hidden;

  background-clip:
    padding-box !important;
}


/*
 * IMPORTANT:
 *
 * No isolation.
 * No z-index applied to children.
 * No pointer-events overrides.
 *
 * OpenList owns interaction.
 */


/* text */

.obj-box,
.obj-box *,
.main-box,
.main-box *,
.readme-box {
  color:
    var(--text-main) !important;
}


/* table headers */

.obj-box th,
.obj-box thead,
.obj-box .hope-table__th {
  color:
    var(--text-soft) !important;

  font-weight:
    650 !important;
}


/* =========================================================
   9. LIST VIEW
   ========================================================= */

.list-item {
  border-radius:
    12px !important;

  transition:
    background-color .13s ease,
    box-shadow .13s ease !important;
}


.list-item:hover {
  background:
    var(--control-hover) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.17);
}


/* remove exaggerated native scale */

.list-item:hover {
  transform:
    none !important;
}


/* =========================================================
   10. GRID VIEW
   PURE VISUAL ONLY
   ========================================================= */

/*
 * We do NOT modify:
 *
 * pointer-events
 * z-index
 * event targets
 * children
 *
 * GridItem remains entirely OpenList-owned.
 */

.grid-item {
  border-radius:
    14px !important;

  padding:
    5px !important;

  background:
    transparent !important;

  border:
    1px solid transparent !important;

  transition:
    background-color .13s ease,
    border-color .13s ease,
    box-shadow .13s ease !important;
}


/* prevent OpenList's 1.06 visual zoom */

.grid-item:hover {
  transform:
    none !important;

  background:
    var(--control-hover) !important;

  border-color:
    var(--glass-edge-soft) !important;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.15),

    0 5px 16px
      rgba(0,0,0,.07) !important;
}


/* selected */

.grid-item.selected {
  transform:
    none !important;

  background:
    var(--accent-soft) !important;

  border-color:
    rgba(80,175,255,.28) !important;

  box-shadow:
    inset 0 0 0 1px
    rgba(80,175,255,.08) !important;
}

.grid-item.selected:hover {
  background:
    var(--accent-selected) !important;
}


/* thumbnail appearance only */

.grid-item .item-thumbnail img {
  border-radius:
    11px !important;

  box-shadow:
    0 4px 14px
    rgba(0,0,0,.11) !important;

  transition:
    filter .14s ease !important;
}

.grid-item:hover
.item-thumbnail img {
  filter:
    brightness(1.015)
    saturate(1.025);
}


/* =========================================================
   11. IMAGE LAYOUT
   VISUAL ONLY
   ========================================================= */

.image-item {
  border-radius:
    14px !important;
}

.image-item img {
  border-radius:
    12px !important;
}


/* =========================================================
   12. RIGHT TOOLBAR
   ========================================================= */

/*
 * OpenList itself animates .left-toolbar via solid-motionone.
 *
 * NO transform.
 * NO opacity transition.
 */

.left-toolbar {
  opacity: 1 !important;

  border-radius:
    18px !important;

  padding:
    4px !important;

  gap:
    2px !important;

  overflow:
    visible !important;

  transition:
    box-shadow .14s ease,
    background-color .14s ease !important;
}

.left-toolbar-in {
  gap:
    2px !important;
}


/* toolbar icons */

.left-toolbar svg {
  width:
    32px !important;

  height:
    32px !important;

  padding:
    6px !important;

  border-radius:
    11px !important;

  color:
    var(--accent) !important;

  background:
    transparent !important;

  border:
    1px solid transparent !important;

  transition:
    background-color .11s ease,
    border-color .11s ease,
    color .11s ease,
    box-shadow .11s ease !important;
}

.left-toolbar svg:hover {
  color:
    var(--accent) !important;

  background:
    var(--accent-hover) !important;

  border-color:
    rgba(90,180,255,.17) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.14) !important;
}


/* =========================================================
   13. COLLAPSED MORE BUTTON
   ========================================================= */

.left-toolbar-box > .toolbar-toggle {
  width:
    36px !important;

  height:
    36px !important;

  padding:
    7px !important;

  border-radius:
    13px !important;

  color:
    var(--accent) !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.25),
      rgba(255,255,255,.055)
    ),
    var(--glass-bg-strong) !important;

  backdrop-filter:
    blur(22px)
    saturate(1.50);

  -webkit-backdrop-filter:
    blur(22px)
    saturate(1.50);

  border:
    1px solid
    var(--glass-edge-soft) !important;

  box-shadow:
    var(--glass-shadow-small),
    var(--glass-inner) !important;

  transition:
    background-color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease !important;
}

.left-toolbar-box
> .toolbar-toggle:hover {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.30),
      rgba(255,255,255,.075)
    ),
    var(--glass-bg-strong) !important;

  border-color:
    var(--glass-edge) !important;
}


/* =========================================================
   14. SOLID-CONTEXTMENU
   IMPORTANT FIX:
   parent never gets transform/backdrop-filter
   ========================================================= */

.solid-contextmenu {
  min-width:
    210px !important;

  padding:
    6px !important;

  border-radius:
    17px !important;

  color:
    var(--text-main) !important;

  background:
    transparent !important;

  background-color:
    transparent !important;

  transform:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  border:
    1px solid
    var(--glass-edge-soft) !important;

  box-shadow:
    0 18px 46px
      rgba(0,0,0,.22),

    var(--glass-inner) !important;

  overflow:
    visible !important;

  isolation:
    isolate;
}


/* glass goes on pseudo-element */

.solid-contextmenu::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  pointer-events:
    none;

  border-radius:
    inherit;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.055) 45%,
      transparent 74%
    ),
    var(--glass-bg-strong);

  backdrop-filter:
    blur(26px)
    saturate(1.50);

  -webkit-backdrop-filter:
    blur(26px)
    saturate(1.50);
}


/* dark */

body.hope-ui-dark
.solid-contextmenu::before {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.072),
      rgba(255,255,255,.012) 50%,
      transparent 75%
    ),
    rgba(18,23,25,.72);
}


/* remove library solid backgrounds */

.solid-contextmenu__theme--light,
.solid-contextmenu__theme--dark {
  background-color:
    transparent !important;
}


/* =========================================================
   15. CONTEXT MENU ITEMS
   ========================================================= */

.solid-contextmenu__item {
  margin:
    1px 0 !important;

  border-radius:
    11px !important;

  overflow:
    visible !important;
}

.solid-contextmenu__item__content {
  min-height:
    35px !important;

  padding:
    5px 10px !important;

  border-radius:
    10px !important;

  color:
    var(--text-main) !important;

  background:
    transparent !important;

  transition:
    background-color .09s ease,
    box-shadow .09s ease,
    color .09s ease !important;
}


.solid-contextmenu__item:not(
  .solid-contextmenu__item--disabled
):hover
> .solid-contextmenu__item__content,

.solid-contextmenu__item:not(
  .solid-contextmenu__item--disabled
):focus
> .solid-contextmenu__item__content,

.solid-contextmenu__submenu--is-open
> .solid-contextmenu__item__content {
  color:
    var(--text-main) !important;

  background:
    var(--control-hover) !important;

  box-shadow:
    inset 0 1px 0
    rgba(255,255,255,.13) !important;
}


.solid-contextmenu__item--disabled {
  opacity:
    .40 !important;
}


/* separator */

.solid-contextmenu__separator {
  height:
    1px !important;

  margin:
    5px 7px !important;

  width:
    calc(100% - 14px) !important;

  background:
    var(--glass-edge-soft) !important;
}


/* =========================================================
   16. CONTEXT SUBMENU
   IMPORTANT:
   position:fixed coordinates must stay viewport-based
   ========================================================= */

.solid-contextmenu
.solid-contextmenu__submenu {
  position:
    fixed !important;

  min-width:
    190px !important;

  padding:
    6px !important;

  border-radius:
    16px !important;

  color:
    var(--text-main) !important;

  background:
    transparent !important;

  background-color:
    transparent !important;

  transform:
    none !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  border:
    1px solid
    var(--glass-edge-soft) !important;

  box-shadow:
    0 16px 40px
      rgba(0,0,0,.21),

    var(--glass-inner) !important;

  overflow:
    visible !important;

  isolation:
    isolate;

  transition:
    opacity 85ms
    cubic-bezier(.16,1,.3,1) !important;
}


/* submenu glass pseudo layer */

.solid-contextmenu
.solid-contextmenu__submenu::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  z-index:
    -1;

  pointer-events:
    none;

  border-radius:
    inherit;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.20),
      rgba(255,255,255,.045)
    ),
    var(--glass-bg-strong);

  backdrop-filter:
    blur(26px)
    saturate(1.50);

  -webkit-backdrop-filter:
    blur(26px)
    saturate(1.50);
}


body.hope-ui-dark
.solid-contextmenu
.solid-contextmenu__submenu::before {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.065),
      rgba(255,255,255,.010)
    ),
    rgba(18,23,25,.75);
}


.solid-contextmenu__submenu-arrow {
  margin-left:
    14px !important;

  opacity:
    .50;

  font-size:
    10px !important;
}


/* =========================================================
   17. CONTEXT MENU MOTION
   no scale / no translate
   ========================================================= */

@keyframes solid-contextmenu__scaleIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes solid-contextmenu__scaleOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}


.solid-contextmenu-scale-enter-active {
  transform:
    none !important;

  animation:
    solid-contextmenu__scaleIn
    105ms
    cubic-bezier(.16,1,.3,1)
    both !important;
}

.solid-contextmenu-scale-exit-active {
  transform:
    none !important;

  animation:
    solid-contextmenu__scaleOut
    70ms
    ease-out
    both !important;
}


/* =========================================================
   18. HOPE UI MODAL
   IMPORTANT:
   do not target generic role=dialog
   ========================================================= */

.hope-modal__content {
  border-radius:
    20px !important;

  overflow:
    hidden !important;
}


/* =========================================================
   19. DRAWER
   ========================================================= */

.hope-drawer__content {
  border-radius:
    20px 0 0 20px !important;

  overflow:
    hidden !important;

  color:
    var(--text-main) !important;

  border-left:
    1px solid
    var(--glass-edge-soft) !important;
}


/* =========================================================
   20. HOPE MENU / SELECT
   ========================================================= */

.hope-menu__content {
  border-radius:
    15px !important;

  overflow:
    hidden !important;
}


.hope-select__content {
  border-radius:
    15px !important;

  overflow:
    hidden !important;
}


.hope-select__option {
  border-radius:
    9px !important;

  margin:
    2px 4px !important;
}


.hope-select__trigger {
  border-radius:
    11px !important;
}


/* =========================================================
   21. POPOVER / TOOLTIP
   ========================================================= */

.hope-popover__content {
  border-radius:
    16px !important;

  overflow:
    hidden !important;
}


.hope-tooltip__content {
  border-radius:
    9px !important;
}


/* =========================================================
   22. NOTIFICATION / ALERT
   ========================================================= */

.hope-notification__root {
  border-radius:
    16px !important;

  overflow:
    hidden !important;
}


.hope-alert__root {
  border-radius:
    13px !important;
}


/* =========================================================
   23. INPUT / BUTTON
   ========================================================= */

.hope-input__input {
  border-radius:
    11px !important;

  color:
    var(--text-main) !important;

  background:
    var(--input-bg) !important;
}


.hope-button__root,
.hope-icon-button__root {
  border-radius:
    11px !important;
}


/* =========================================================
   24. LIGHTGALLERY
   ABSOLUTE EXCLUSION ZONE
   ========================================================= */

/*
 * LightGallery creates:
 *
 * .lg-container.lightgallery-container[role="dialog"]
 *
 * and inside it:
 *
 * .lg-backdrop { position: fixed }
 * .lg-outer    { position: fixed }
 *
 * Never put transform/filter/backdrop-filter/isolation/contain
 * on .lg-container.
 */

.lg-container,
.lightgallery-container,
.lg-container[role="dialog"],
.lightgallery-container[role="dialog"] {
  background:
    transparent !important;

  background-color:
    transparent !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;

  filter:
    none !important;

  transform:
    none !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  isolation:
    auto !important;

  contain:
    none !important;
}


/* restore native display */

.lg-container {
  display:
    none;
}

.lg-container.lg-show {
  display:
    block !important;
}


/* viewport layers */

.lg-backdrop {
  position:
    fixed !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  z-index:
    20000 !important;
}


.lg-outer {
  position:
    fixed !important;

  top:
    0 !important;

  left:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  z-index:
    20001 !important;
}


/* native visibility */

.lg-outer.lg-visible {
  opacity:
    1 !important;
}


/*
 * DO NOT apply generic styles to
 * .lg-content / .lg-inner / .lg-item.
 *
 * LightGallery depends heavily on its own transforms.
 */


/* =========================================================
   25. LIGHTGALLERY OPTIONAL LIQUID GLASS TOOLBAR
   only safe child surfaces
   ========================================================= */

.lg-toolbar {
  background:
    rgba(18, 22, 24, .34) !important;

  backdrop-filter:
    blur(18px)
    saturate(1.35);

  -webkit-backdrop-filter:
    blur(18px)
    saturate(1.35);
}


.lg-sub-html {
  background:
    rgba(18, 22, 24, .28) !important;

  backdrop-filter:
    blur(16px)
    saturate(1.3);

  -webkit-backdrop-filter:
    blur(16px)
    saturate(1.3);
}


/* =========================================================
   26. FOOTER
   ========================================================= */

.footer {
  position:
    fixed !important;

  left:
    50% !important;

  bottom:
    17px !important;

  transform:
    translateX(-50%) !important;

  width:
    auto !important;

  max-width:
    calc(100vw - 48px) !important;

  margin:
    0 !important;

  padding:
    7px 18px !important;

  border-radius:
    999px !important;

  font-size:
    14px !important;

  color:
    var(--text-soft) !important;

  z-index:
    20;
}


/* =========================================================
   27. SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
  width:
    6px;

  height:
    6px;
}

::-webkit-scrollbar-track {
  background:
    transparent !important;
}

::-webkit-scrollbar-thumb {
  background:
    rgba(70,85,80,.27) !important;

  border-radius:
    999px !important;
}

body.hope-ui-dark
::-webkit-scrollbar-thumb {
  background:
    rgba(220,235,230,.21) !important;
}

::-webkit-scrollbar-thumb:hover {
  background:
    rgba(100,120,115,.42) !important;
}


/* =========================================================
   28. MOBILE
   ========================================================= */

@media (max-width: 768px) {

  header,
  .header {
    height:
      45px !important;
  }


  main,
  .main {
    padding:
      9px 10px 70px !important;
  }


  .nav,
  .breadcrumb,
  [aria-label="breadcrumb"],
  .obj-box,
  .main-box,
  .readme-box {
    max-width:
      calc(100vw - 20px) !important;

    border-radius:
      17px !important;
  }


  .footer {
    bottom:
      11px !important;

    padding:
      6px 14px !important;

    font-size:
      13px !important;
  }


  .left-toolbar {
    border-radius:
      16px !important;
  }


  .left-toolbar svg,
  .left-toolbar-box > .toolbar-toggle {
    width:
      31px !important;

    height:
      31px !important;
  }


  .solid-contextmenu {
    min-width:
      190px !important;

    border-radius:
      15px !important;
  }


  .solid-contextmenu__item__content {
    min-height:
      37px !important;
  }


  /*
   * mobile grid:
   * no transform, no special event overrides
   */

  .grid-item:hover {
    transform:
      none !important;
  }
}


/* =========================================================
   29. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;

    animation-duration:
      .01ms !important;
  }
}