/* ==========================================================================
   Liquid glass — one material for every pane on the site.

   The ticket plugin established the recipe: a 150° sheet that fades from a
   bright top-left to a clearer bottom-right, a 1px light rim, an inset top
   highlight, a 22px frost and a deep, soft shadow. This file applies the same
   recipe to the rest of the theme without changing layout or typography.

   Ticket cards (.tk-glass) keep their own copy of the recipe and are excluded
   here, as are the two photographic panels in the user centre (the launcher
   card and the redeem widget), which have their own backdrop treatment.
   ========================================================================== */

:root {
  --lg-sheet: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface) 84%, transparent),
    color-mix(in srgb, var(--surface) 46%, transparent)
  );
  --lg-sheet-raised: linear-gradient(
    150deg,
    color-mix(in srgb, var(--surface) 90%, transparent),
    color-mix(in srgb, var(--surface) 62%, transparent)
  );
  --lg-rim: rgba(255, 255, 255, 0.72);
  --lg-rim-hover: rgba(255, 255, 255, 0.92);
  --lg-top: rgba(255, 255, 255, 0.86);
  --lg-line: rgba(148, 163, 184, 0.2);
  --lg-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.45);
  --lg-shadow-lift: 0 30px 60px -34px rgba(15, 23, 42, 0.52);
  --lg-header: linear-gradient(
    180deg,
    color-mix(in srgb, var(--header) 86%, transparent),
    color-mix(in srgb, var(--header) 64%, transparent)
  );
  --lg-blur: 22px;
  --lg-saturate: 180%;
}

body.dark-mode,
html[data-mode="dark"] {
  --lg-sheet: linear-gradient(
    150deg,
    rgba(30, 41, 59, 0.72),
    rgba(15, 23, 42, 0.5)
  );
  --lg-sheet-raised: linear-gradient(
    150deg,
    rgba(30, 41, 59, 0.84),
    rgba(15, 23, 42, 0.64)
  );
  --lg-rim: rgba(148, 163, 184, 0.24);
  --lg-rim-hover: rgba(148, 163, 184, 0.4);
  --lg-top: rgba(255, 255, 255, 0.09);
  --lg-line: rgba(148, 163, 184, 0.2);
  --lg-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.8);
  --lg-shadow-lift: 0 30px 60px -34px rgba(0, 0, 0, 0.9);
  --lg-header: linear-gradient(
    180deg,
    rgba(30, 41, 59, 0.86),
    rgba(15, 23, 42, 0.7)
  );
}

/* Lift the theme's own glass tokens to the same material. The header, rail,
   dropdowns, small boxes and admin panels all read from these, so they upgrade
   together instead of each keeping a slightly different frost. */
:root {
  --glass-surface: color-mix(in srgb, var(--surface) 62%, transparent);
  --glass-raised: color-mix(in srgb, var(--surface) 78%, transparent);
  --glass-hi: rgba(255, 255, 255, 0.82);
  --glass-blur: 22px;
  --glass-saturate: 180%;
  --glass-shadow: 0 24px 48px -30px rgba(15, 23, 42, 0.42);
  --glass-shadow-hover: 0 30px 60px -34px rgba(15, 23, 42, 0.5);
  --glass-sheen: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.46),
    rgba(255, 255, 255, 0.1) 55%,
    rgba(255, 255, 255, 0) 100%
  );
}

body.dark-mode,
html[data-mode="dark"] {
  --glass-surface: color-mix(in srgb, var(--surface) 66%, transparent);
  --glass-raised: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-hi: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.8);
  --glass-shadow-hover: 0 30px 60px -34px rgba(0, 0, 0, 0.9);
  --glass-sheen: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.02) 55%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* --------------------------------------------------------------------------
   Panels
   -------------------------------------------------------------------------- */

body .card:not(.tk-glass),
body.user-center .card:not(.tk-glass):not(.rc-widget),
body.admin-page .card:not(.tk-glass),
body.skinlib-page .card:not(.tk-glass),
body.auth-page .card:not(.tk-glass) {
  background: var(--surface);
  background: var(--lg-sheet);
  border: 1px solid var(--lg-rim);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 var(--lg-top), var(--lg-shadow);
}

body .card:not(.tk-glass) > .card-header,
body.user-center .card:not(.tk-glass):not(.rc-widget) > .card-header,
body.admin-page .card:not(.tk-glass) > .card-header,
body.skinlib-page .card:not(.tk-glass) > .card-header,
body.auth-page .card:not(.tk-glass) > .card-header {
  background: transparent;
  border-color: var(--lg-line);
}

body .card:not(.tk-glass) > .card-footer,
body.user-center .card:not(.tk-glass):not(.rc-widget) > .card-footer,
body.admin-page .card:not(.tk-glass) > .card-footer,
body.skinlib-page .card:not(.tk-glass) > .card-footer,
body.auth-page .card:not(.tk-glass) > .card-footer {
  background: transparent;
  border-color: var(--lg-line);
}

body .card:not(.tk-glass) > .card-header:first-child,
body.user-center .card:not(.tk-glass):not(.rc-widget) > .card-header:first-child,
body.admin-page .card:not(.tk-glass) > .card-header:first-child,
body.skinlib-page .card:not(.tk-glass) > .card-header:first-child,
body.auth-page .card:not(.tk-glass) > .card-header:first-child {
  border-radius: 21px 21px 0 0;
}

body .card:not(.tk-glass) > .card-footer:last-child,
body.user-center .card:not(.tk-glass):not(.rc-widget) > .card-footer:last-child,
body.admin-page .card:not(.tk-glass) > .card-footer:last-child,
body.skinlib-page .card:not(.tk-glass) > .card-footer:last-child,
body.auth-page .card:not(.tk-glass) > .card-footer:last-child {
  border-radius: 0 0 21px 21px;
}

body .card:not(.tk-glass):hover,
body.user-center .card:not(.tk-glass):not(.rc-widget):hover,
body.admin-page .card:not(.tk-glass):hover,
body.skinlib-page .card:not(.tk-glass):hover,
body.auth-page .card:not(.tk-glass):hover {
  border-color: var(--lg-rim-hover);
  box-shadow: inset 0 1px 0 var(--lg-top), var(--lg-shadow-lift);
}

/* The auth card keeps its thin brand cap above the sheet. */
body.auth-page .card:not(.tk-glass) {
  box-shadow: inset 0 2px 0 0 var(--brand), inset 0 1px 0 var(--lg-top),
    var(--lg-shadow);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .card:not(.tk-glass),
  body.user-center .card:not(.tk-glass):not(.rc-widget),
  body.admin-page .card:not(.tk-glass),
  body.skinlib-page .card:not(.tk-glass),
  body.auth-page .card:not(.tk-glass) {
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  }
}

/* A gallery can hold two dozen thumbnails. Their stage already covers the
   pane, so keep the frost off there and avoid a blurred layer per card. */
body.skinlib-page .content a.d-block > .card {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   Application chrome
   -------------------------------------------------------------------------- */

body .main-header.navbar,
body.user-center .main-header.navbar,
body.admin-page .main-header.navbar,
body.skinlib-page .main-header.navbar {
  background: var(--header);
  background: var(--lg-header);
  border-bottom: 1px solid var(--lg-rim);
  box-shadow: inset 0 1px 0 var(--lg-top),
    0 18px 42px -36px rgba(15, 23, 42, 0.5);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .main-header.navbar,
  body.user-center .main-header.navbar,
  body.admin-page .main-header.navbar,
  body.skinlib-page .main-header.navbar {
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  }
}

body.user-center .main-sidebar,
body.admin-page .main-sidebar,
body.skinlib-page .main-sidebar {
  border-right: 1px solid color-mix(in srgb, var(--lg-rim) 78%, transparent);
  box-shadow:
    inset -1px 0 0 var(--lg-top),
    inset 0 1px 0 var(--lg-top);
}

/* The rail reads the same sheet vertically: a brand-tinted top-left corner,
   a band of top light and a 150° sheen. The tint is translucent over the
   canvas, and the frost only matters on the phone drawer, where the page
   actually slides underneath. */
body.user-center .main-sidebar,
body.admin-page .main-sidebar {
  background-color: color-mix(in srgb, var(--sidebar) 76%, transparent);
  background-image:
    radial-gradient(
      120% 52% at 0% 0%,
      color-mix(in srgb, var(--brand) 13%, transparent),
      transparent 64%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--lg-top) 34%, transparent),
      transparent 148px
    ),
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--surface) 26%, transparent),
      transparent 58%
    );
  box-shadow:
    inset -1px 0 0 var(--lg-top),
    inset 0 1px 0 var(--lg-top),
    22px 0 46px -42px rgba(15, 23, 42, 0.5);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.user-center .main-sidebar,
  body.admin-page .main-sidebar {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  }
}

body.user-center .main-sidebar .brand-link,
body.admin-page .main-sidebar .brand-link {
  background: transparent;
  border-bottom-color: color-mix(in srgb, var(--lg-line) 80%, transparent);
}

/* Nav items become inset glass pills. `html body` matches the specificity of
   the palette rules further up avant.css, so this file (loaded last) wins
   without needing `!important`. */
html body.user-center .main-sidebar .nav-sidebar > .nav-item > .nav-link,
html body.admin-page .main-sidebar .nav-sidebar > .nav-item > .nav-link {
  border: 1px solid transparent;
  border-radius: 12px;
  transition:
    background-color 0.18s var(--ease),
    border-color 0.18s var(--ease),
    box-shadow 0.18s var(--ease),
    color 0.18s var(--ease),
    transform 0.22s var(--ease);
}

html body.user-center .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
html body.admin-page .main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
  background:
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--brand) 8%, var(--glass-surface)),
      color-mix(in srgb, var(--surface) 30%, transparent)
    );
  border-color: color-mix(in srgb, var(--brand) 14%, var(--lg-rim));
  box-shadow: inset 0 1px 0 var(--lg-top);
  color: var(--ink);
}

html body.user-center .main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
html body.admin-page .main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background:
    linear-gradient(
      150deg,
      color-mix(in srgb, var(--brand) 20%, transparent),
      color-mix(in srgb, var(--brand) 6%, transparent)
    );
  border-color: color-mix(in srgb, var(--brand) 26%, var(--lg-rim));
  box-shadow:
    inset 0 1px 0 var(--lg-top),
    inset 3px 0 0 var(--brand),
    0 10px 22px -18px color-mix(in srgb, var(--brand) 72%, transparent);
  color: var(--brand-strong);
}

/* One accent bar, not two: the inset shadow above draws it inside the pill,
   so retire the theme's outside marker on these pages. */
html body.user-center .main-sidebar .nav-sidebar > .nav-item > .nav-link.active::before,
html body.admin-page .main-sidebar .nav-sidebar > .nav-item > .nav-link.active::before {
  display: none;
}

html body.user-center .main-sidebar .nav-sidebar .nav-header,
html body.admin-page .main-sidebar .nav-sidebar .nav-header {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

html body.user-center .main-sidebar .nav-sidebar .nav-header::after,
html body.admin-page .main-sidebar .nav-sidebar .nav-header::after {
  background: linear-gradient(90deg, var(--lg-line), transparent);
  content: "";
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
}

/* --------------------------------------------------------------------------
   Floating layers
   -------------------------------------------------------------------------- */

body .dropdown-menu {
  background: var(--surface);
  background: var(--lg-sheet-raised);
  border: 1px solid var(--lg-rim);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 var(--lg-top), var(--lg-shadow);
}

body .modal-content {
  background: var(--surface);
  background: var(--lg-sheet-raised);
  border: 1px solid var(--lg-rim);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 var(--lg-top), var(--lg-shadow);
}

/* The user centre and the library already ship their own modal pane; match it
   to the card recipe instead of leaving two slightly different frosts. */
body.user-center .modal-content,
body.skinlib-page .modal-content {
  background: var(--surface);
  background: var(--lg-sheet-raised);
  border: 1px solid var(--lg-rim);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 var(--lg-top), var(--lg-shadow);
}

body .modal-header,
body .modal-footer {
  background: transparent;
  border-color: var(--lg-line);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .dropdown-menu,
  body .modal-content,
  body.user-center .modal-content,
  body.skinlib-page .modal-content {
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  }
}

/* --------------------------------------------------------------------------
   Home — the feature strip sits on a light stage, so it gets the same sheet
   with a soft warm wash behind it to give the frost something to refract.
   -------------------------------------------------------------------------- */

body.home-page #intro {
  background:
    radial-gradient(
      900px 420px at 88% 0%,
      rgba(var(--brand-rgb), 0.1),
      transparent 62%
    ),
    radial-gradient(
      720px 380px at 0% 100%,
      rgba(96, 138, 255, 0.08),
      transparent 66%
    ),
    #f7f8fa;
}

body.home-page .feature-card {
  background: linear-gradient(
    150deg,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.52)
  );
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 24px 48px -30px rgba(15, 23, 42, 0.45);
}

body.home-page .feature-card:hover {
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 30px 60px -34px rgba(15, 23, 42, 0.52);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.home-page .feature-card {
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
    backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturate));
  }
}

/* --------------------------------------------------------------------------
   Fallbacks
   -------------------------------------------------------------------------- */

@media (prefers-reduced-transparency: reduce) {
  body .card:not(.tk-glass),
  body .dropdown-menu,
  body .modal-content {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body .card:not(.tk-glass):not(.rc-widget):not(:has(#ygg-dnd-button)),
  body .dropdown-menu,
  body .modal-content {
    background: var(--surface);
  }

  body .main-header.navbar,
  body.user-center .main-header.navbar,
  body.admin-page .main-header.navbar,
  body.skinlib-page .main-header.navbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--header);
  }

  body.user-center .main-sidebar,
  body.admin-page .main-sidebar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--sidebar);
  }

  body.home-page .feature-card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #fff;
  }
}