:root {
  --yams-glass-bg: rgba(15, 23, 42, 0.42);
  --yams-glass-bg-hover: rgba(15, 23, 42, 0.60);
  --yams-border: rgba(255, 255, 255, 0.14);
  --yams-border-hover: rgba(255, 255, 255, 0.26);
  --yams-text: rgba(248, 250, 252, 0.94);
  --yams-muted: rgba(203, 213, 225, 0.74);
}

body {
  min-height: 100vh !important;
  background-color: #020617 !important;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

#page_container {
  max-width: 1240px !important;
  margin: 4vh auto !important;
  padding: 22px 22px 34px !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 25% 5%, rgba(56, 189, 248, 0.18), transparent 34rem),
    radial-gradient(circle at 72% 20%, rgba(236, 72, 153, 0.14), transparent 34rem),
    rgba(2, 6, 23, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(8px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(130%) !important;
}

@media (min-width: 1500px) {
  #page_container {
    max-width: 1360px !important;
  }
}

.service-card,
.bookmark-card,
.information-widget {
  border-radius: 10px !important;
  background: var(--yams-glass-bg) !important;
  border: 1px solid var(--yams-border) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

.service-card {
  min-height: 74px !important;
}

.service-card:hover,
.bookmark-card:hover {
  transform: translateY(-2px) !important;
  background: var(--yams-glass-bg-hover) !important;
  border-color: var(--yams-border-hover) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.service-name,
.bookmark-name {
  color: var(--yams-text) !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

.service-description {
  color: var(--yams-muted) !important;
  font-size: 0.78rem !important;
}

.service-card img,
.bookmark-card img {
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.38)) !important;
}

.service-card .service-title {
  align-items: center !important;
}

.service-card .service-widget,
.service-card .service-block,
.service-card div[class*="widget"] {
  border-radius: 8px !important;
}

.information-widget {
  min-height: 48px !important;
}

#information-widgets {
  gap: 10px !important;
}

div[class*="grid"] {
  gap: 10px !important;
}

h2,
.group-title {
  color: rgba(248, 250, 252, 0.80) !important;
  letter-spacing: -0.02em !important;
}

footer {
  opacity: 0.35 !important;
}

* {
  scrollbar-width: thin;
}